/*
  Droid: casco visual. Identidade Ambar (cinza quente + ambar suave), escolhida em 22/10/2026; tokens base de 09/10/2026, seguindo o Regras.md (secao 7):
  aparencia discreta; cor de apoio so suave (decisao de 22/10/2026), nunca vermelho nem sombra; botao primario, o que e clicavel e pontinho de
  status); nenhum vermelho; tabela em cartao branco com borda fina, sem zebrado e sem sombra.
  Para trocar o visual, mude as variaveis abaixo.
*/
/* Public Sans (licenca OFL), hospedada aqui mesmo: variavel de 400 a 700. */
@font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/PublicSans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/PublicSans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --serie-1: #2a78d6;
    --serie-2: #1baf7a;
    --serie-3: #eda100;
    --serie-4: #6250d6;
    --serie-5: #e87ba4;
    --serie-6: #7f8a99;
    --fundo: #F2F0EC;
    --cartao: #FFFFFF;
    --borda: #E4E0D8;
    --texto: #2B2824;
    --texto-2: #706A60;
    --superficie-suave: #F3EFE6;
    --ambar-suave: #F7ECD3;

    --primario: #8A5F17;
    --primario-escuro: #6F4A0F;

    --ok: #2E8B57;
    --atencao: #B7791F;
    --erro-texto: #7A4B0E;
    --inativo: #8A94A3;

    --raio: 8px;
    --menu-largura: 268px;
    --menu-largura-recolhido: 72px;
    --topo-altura: 56px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
    font: 15px/1.5 "Public Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    color: var(--texto);
    background: var(--fundo);
    font-variant-numeric: tabular-nums;
}

h1:focus { outline: none; }

a { color: var(--primario); }

:focus-visible {
    outline: 2px solid var(--primario);
    outline-offset: 2px;
}

/* ---------- Casco: menu lateral + topo + conteudo ---------- */

.casco {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 100vh;
}

/*
  Menu lateral (identidade Ambar, escolhida pelo usuario em 22/10/2026, forma "Aba curva"): coluna branca, sem borda; o item ativo e uma ABA da cor do
  fundo que encosta no conteudo, com curvas de encaixe em cima e embaixo. Recolhido, cada area abre a lista das suas telas ao lado.
*/
.menu {
    display: flex;
    flex-direction: column;
    width: var(--menu-largura);
    padding: 16px 0 16px 12px;
    overflow: hidden;
    background: var(--cartao);
    transition: width 0.18s ease;
}

.menu__marca {
    display: flex;
    align-items: center;
    height: 40px;
    margin: 0 12px 14px 0;
    padding: 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--texto);
    text-decoration: none;
}

.menu__marca-curta { display: none; }

/* Marca Varda (kit da marca, 29/10/2026): assinatura com o menu aberto, so o simbolo com o menu recolhido. */
.menu__marca-longa { display: block; height: 38px; width: auto; }
.menu__marca-curta { height: 34px; width: 34px; }

.menu__lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.menu__grupo { position: relative; }

.menu__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
    padding: 0 12px;
    border-radius: 21px 0 0 21px;
    color: var(--texto-2);
    text-decoration: none;
    white-space: nowrap;
}

.menu__item:hover {
    background: var(--superficie-suave);
    color: var(--texto);
}

.menu__item.ativo {
    background: var(--fundo);
    color: var(--primario);
    font-weight: 600;
}

/* As curvas de encaixe da aba: dois quartos de circulo, um em cima e um embaixo, da cor do fundo. */
.menu__item.ativo::before,
.menu__item.ativo::after {
    content: "";
    position: absolute;
    right: 0;
    width: 14px;
    height: 14px;
    pointer-events: none;
}

.menu__item.ativo::before {
    top: -14px;
    background: radial-gradient(circle at 0 0, transparent 13.5px, var(--fundo) 14px);
}

.menu__item.ativo::after {
    bottom: -14px;
    background: radial-gradient(circle at 0 100%, transparent 13.5px, var(--fundo) 14px);
}

.menu__logo { flex: none; width: 22px; height: 22px; }

/* Submenu da area atual: recuado sob o item, so aparece com o menu expandido. */
.menu__submenu {
    display: grid;
    gap: 2px;
    margin: 6px 12px 8px 36px;
}

.menu__subitem {
    display: block;
    padding: 7px 10px;
    border-radius: var(--raio);
    font-size: 14px;
    color: var(--texto-2);
    text-decoration: none;
}

.menu__subitem:hover { background: var(--superficie-suave); color: var(--texto); }
.menu__subitem.ativo { color: var(--primario); font-weight: 600; }

.menu__icone {
    flex: none;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.menu__rodape {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px 0 0;
}

.menu__alternar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--texto-2);
    background: transparent;
    border: 1px solid var(--borda);
    border-radius: 50%;
    cursor: pointer;
}

.menu__alternar:hover {
    color: var(--texto);
    background: var(--superficie-suave);
}

.menu__alternar .menu__icone { transition: transform 0.18s ease; }

/* A lista de cada area ao lado do icone: so existe com o menu recolhido. */
.menu__flyout { display: none; }

/* Estado recolhido: so icones; o nome fica so para leitor de tela. */
html[data-menu="recolhido"] .menu {
    width: var(--menu-largura-recolhido);
    padding-right: 0;
    overflow: visible;
}

html[data-menu="recolhido"] .menu__marca-longa { display: none; }
html[data-menu="recolhido"] .menu__marca-curta { display: block; }
html[data-menu="recolhido"] .menu__marca { padding: 0; justify-content: center; margin-right: 12px; }

html[data-menu="recolhido"] .menu__item {
    height: 46px;
    padding: 0;
    justify-content: center;
    border-radius: 23px 0 0 23px;
}

html[data-menu="recolhido"] .menu__submenu { display: none; }

html[data-menu="recolhido"] .menu__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

html[data-menu="recolhido"] .menu__rodape { justify-content: center; padding-right: 12px; }
html[data-menu="recolhido"] .menu__alternar .menu__icone { transform: rotate(180deg); }

@media (min-width: 801px) {
    html[data-menu="recolhido"] .menu {
        position: sticky;
        z-index: 20;
        top: 0;
        align-self: start;
        height: 100vh;
    }

    /* Os botoes dividem a altura que sobra: encolhem ate 30px para o menu caber inteiro, com a setinha de expandir sempre a vista. */
    html[data-menu="recolhido"] .menu__lista { gap: 2px; min-height: 0; }
    html[data-menu="recolhido"] .menu__grupo { display: flex; flex: 0 1 46px; min-height: 30px; }
    html[data-menu="recolhido"] .menu__item { flex: 1; height: auto; }
    html[data-menu="recolhido"] .menu__rodape { flex: none; }

    /* Toque (ou foco) no icone: abre ao lado a lista das telas da area, ou so o nome quando a area nao tem lista. */
    html[data-menu="recolhido"] .menu__flyout {
        position: absolute;
        left: calc(100% + 6px);
        top: 0;
        z-index: 30;
        width: 220px;
        padding: 10px;
        background: var(--cartao);
        border: 1px solid var(--borda);
        border-radius: 18px;
    }

    html[data-menu="recolhido"] .menu__grupo:hover > .menu__flyout,
    html[data-menu="recolhido"] .menu__grupo:focus-within > .menu__flyout { display: grid; gap: 2px; }

    /* Ponte invisivel entre o icone e a lista, para o mouse nao "cair" no caminho. */
    html[data-menu="recolhido"] .menu__flyout::before { content: ""; position: absolute; left: -12px; top: 0; bottom: 0; width: 12px; }

    html[data-menu="recolhido"] .menu__grupo--baixo > .menu__flyout { top: auto; bottom: 0; }

    .menu__flyouttitulo { display: block; margin: 2px 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-2); }

    .menu__flyoutitem {
        display: block;
        padding: 7px 10px;
        border-radius: 10px;
        font-size: 13.5px;
        color: var(--texto);
        text-decoration: none;
    }

    .menu__flyoutitem:hover { background: var(--superficie-suave); }
    .menu__flyoutitem.ativo { background: var(--ambar-suave); color: var(--primario); font-weight: 600; }

    html[data-menu="recolhido"] .menu__grupo--simples:hover::after,
    html[data-menu="recolhido"] .menu__grupo--simples:focus-within::after {
        content: attr(data-nome);
        position: absolute;
        left: calc(100% + 8px);
        top: 50%;
        transform: translateY(-50%);
        z-index: 30;
        padding: 5px 10px;
        border-radius: 8px;
        background: var(--texto);
        color: var(--cartao);
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }
}

/* Telas baixas: a marca tambem encolhe, para sobrar altura para os botoes. */
@media (min-width: 801px) and (max-height: 760px) {
    html[data-menu="recolhido"] .menu__marca { height: 34px; margin-bottom: 8px; }
}

/* Menu expandido: fixo na altura da tela; se os itens nao couberem, so a lista rola e o botao de recolher continua a vista. */
@media (min-width: 801px) {
    html:not([data-menu="recolhido"]) .menu {
        position: sticky;
        z-index: 20;
        top: 0;
        align-self: start;
        height: 100vh;
    }

    html:not([data-menu="recolhido"]) .menu__lista {
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: none;
    }
}
html:not([data-menu="recolhido"]) .menu__lista::-webkit-scrollbar { display: none; }


@media (prefers-reduced-motion: reduce) {
    .menu, .menu__alternar .menu__icone, .rel-grafico__fatia, .rel-grafico__total, .rel-grafico__partes > span { transition: none; }
}

/* O branco do menu e do topo desce em curva ate a area cinza do conteudo (pedido do usuario, 29/10/2026: o canto reto ficava feio). */
.coluna {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--cartao);
}

.area {
    flex: 1;
    background: var(--fundo);
    border-top-left-radius: 24px;
}

.topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--topo-altura);
    padding: 0 24px;
    background: var(--cartao);
}

.conteudo {
    padding: 24px;
    max-width: 1280px;
    width: 100%;
}

/* ---------- Seletor de cliente (a peca de ancoragem do topo) ---------- */

.seletor {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    padding: 6px 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    font-weight: 600;
}

.seletor--vazio {
    color: var(--texto-2);
    font-weight: 400;
    border-style: dashed;
}

.seletor__sincronizacao {
    color: var(--texto-2);
    font-size: 13px;
    font-weight: 400;
}

/* ---------- Usuario logado ---------- */

.usuario {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 14px;
}

.topo__direita { display: flex; align-items: baseline; gap: 20px; }

.topo__sincronizacao { color: var(--texto-2); font-size: 13px; }

/* ---------- Cabecalho de pagina ---------- */

.cabecalho--so-leitor {
    /* O menu ja diz onde a pessoa esta: o titulo fica so para leitor de tela. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.cabecalho { margin-bottom: 20px; }

.cabecalho h1 {
    margin: 0;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
}

.cabecalho p {
    margin: 2px 0 0;
    color: var(--texto-2);
}

/* ---------- Cartao, tabela, chip, botao ---------- */

.cartao {
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}

.cartao--vazio {
    padding: 40px 24px;
    color: var(--texto-2);
}

.contagem {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--texto-2);
}

.tabela {
    width: 100%;
    border-collapse: collapse;
}

.tabela th {
    padding: 12px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-2);
    border-bottom: 1px solid var(--borda);
}

.tabela td {
    height: 52px;
    padding: 0 16px;
    border-bottom: 1px solid var(--borda);
}

.tabela tr:last-child td { border-bottom: 0; }
.tabela td:first-child { font-weight: 600; }
.tabela td.acoes { text-align: right; }
.acoes-da-linha { display: inline-flex; gap: 8px; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 13px;
    background: var(--superficie-suave);
    color: var(--texto);
}

.chip::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--inativo);
}

.chip--ok { background: #E8F3EC; }
.chip--ok::before { background: var(--ok); }
.chip--atencao { background: #F7EFDF; }
.chip--atencao::before { background: var(--atencao); }

.botao {
    padding: 8px 16px;
    font: inherit;
    color: var(--texto);
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    cursor: pointer;
}

a.botao {
    display: inline-block;
    text-decoration: none;
}

.autorizar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding: 20px 24px;
}

.autorizar p {
    margin: 4px 0 0;
    color: var(--texto-2);
}

.detalhe-falha {
    margin-top: 4px;
    max-width: 360px;
    font-size: 12px;
    color: var(--texto-2);
    line-height: 1.35;
}

.botao--primario {
    color: #FFFFFF;
    background: var(--primario);
    border-color: var(--primario);
}

.botao--primario:hover {
    background: var(--primario-escuro);
    border-color: var(--primario-escuro);
}

/* ---------- Usuarios, grupos e licencas ---------- */

.texto-suave { font-size: 13px; color: var(--texto-2); font-weight: 400; }

.barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.barra__rotulo { font-size: 13px; font-weight: 600; color: var(--texto-2); }

.barra select,
.barra input[type="search"] {
    padding: 8px 12px;
    font: inherit;
    color: var(--texto);
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}

.barra input[type="search"] { min-width: 280px; }

/* Resumo: uma faixa so; cada numero e um filtro clicavel. */
.resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 20px;
    padding: 8px;
}

.resumo__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
    padding: 8px 16px;
    color: var(--texto);
    text-decoration: none;
    border-radius: var(--raio);
}

.resumo__valor { font-size: 22px; font-weight: 600; line-height: 1.2; }
.resumo__rotulo { font-size: 13px; color: var(--primario); }

.resumo__item:hover { background: var(--superficie-suave); }

.resumo__item--ativo {
    background: var(--superficie-suave);
}

.resumo__item--ativo .resumo__rotulo { font-weight: 600; }

.filtro-ativo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    font-size: 13px;
}

.abas {
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--borda);
}

.aba {
    padding: 8px 16px;
    color: var(--texto-2);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.aba:hover { color: var(--texto); }

.aba--ativa {
    color: var(--primario);
    font-weight: 600;
    border-bottom-color: var(--primario);
}

.paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.paginacao > span:last-child { display: inline-flex; align-items: center; gap: 12px; }

/* ---------- Lista de usuarios + painel de detalhes ---------- */

/* Caixa da tabela: segura a largura. Se algo ainda nao couber, rola dentro do cartao e nunca a pagina. */
.tabela-caixa {
    container-type: inline-size;
    overflow-x: auto;
}

/* Quando o espaco aperta (painel aberto, janela estreita) as colunas somem por prioridade: primeiro as que o
   painel ja mostra de forma completa. Nome e situacao nunca somem. */
@container (max-width: 1000px) {
    .col-criado { display: none; }
}

@container (max-width: 760px) {
    .col-cargo { display: none; }
}

@container (max-width: 640px) {
    .col-tipo,
    .col-licencas { display: none; }

    .truncado { max-width: 26ch; }
}

.tabela-caixa .tabela th,
.tabela-caixa .tabela td { padding-inline: 12px; }

.tabela-caixa .tabela td { white-space: nowrap; }
.tabela-caixa .tabela td:first-child { white-space: normal; }

.col-cargo .truncado { max-width: 18ch; }

.truncado {
    display: block;
    max-width: 34ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.previa-licencas {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 30ch;
}

.previa-licencas .truncado { max-width: 22ch; }

.chip--mais { flex: none; padding: 0 8px; }
.chip--mais::before { display: none; }

.nome-usuario {
    font-weight: 600;
    color: var(--primario);
    text-decoration: none;
}

.nome-usuario:hover { text-decoration: underline; }

.tabela tbody tr:hover,
.linha--aberta { background: var(--superficie-suave); }

.com-painel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 20px;
    align-items: start;
}

.painel {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - var(--topo-altura) - 32px);
    overflow-y: auto;
    padding: 20px;
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}

.painel__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.painel__titulo { min-width: 0; }
.painel__titulo h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.painel__titulo p { margin: 2px 0 0; max-width: 100%; }

.painel__fechar {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--texto-2);
    border-radius: 50%;
}

.painel__fechar:hover { color: var(--texto); background: var(--superficie-suave); }

.painel__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; }

.painel section + section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--borda);
}

.painel h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }

.ficha {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    gap: 8px 12px;
    margin: 0;
}

.ficha dt { font-size: 13px; color: var(--texto-2); }
.ficha dd { margin: 0; min-width: 0; }

.lista-simples { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }

.quebra { overflow-wrap: anywhere; }

/* Celular: rotulo em cima, valor embaixo; assim o e-mail e o ID usam a largura toda e nao quebram no meio. */
@media (max-width: 520px) {
    .ficha { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .ficha dd { margin-bottom: 10px; }
    .painel { padding: 16px; }
}

/* Abaixo de 1100 px o painel nao cabe ao lado: vem antes da lista, em largura total. */
@media (max-width: 1100px) {
    .com-painel { grid-template-columns: minmax(0, 1fr); }
    .painel { position: static; max-height: none; order: -1; }
}

/* ---------- E-mail (tela estatica) ---------- */

.secao-titulo { margin: 8px 0 12px; font-size: 16px; font-weight: 600; }

/* Quadro de colunas com rolagem lateral (como no centro de administracao): cada metrica e uma coluna, com o
   cartao em cima e o ranking embaixo. A roda do mouse anda de lado (quadro.js); a barra de rolagem fica visivel. */
.bloco-email { margin-bottom: 8px; }

.quadro {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 248px;
    grid-template-rows: auto 1fr;
    gap: 12px;
    padding-bottom: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--inativo) transparent;
}

.quadro:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; border-radius: var(--raio); }

/* Cada coluna ocupa as duas linhas do quadro e HERDA a altura delas (subgrid): o cartao de todas as colunas tem
   a altura do mais alto e os rankings comecam todos na mesma linha, qualquer que seja o conteudo. */
.coluna-email {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    gap: 12px;
}

.estatistica {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
}

.estatistica__rotulo { font-size: 13px; color: var(--texto-2); }
.estatistica__valor { font-size: 24px; font-weight: 600; line-height: 1.2; }
.estatistica__valor--indisponivel { color: var(--inativo); }
.estatistica__nota { font-size: 12px; color: var(--texto-2); line-height: 1.35; }
.estatistica__sub { font-size: 12px; color: var(--texto-2); }

.sparkline { display: block; width: 100%; height: 28px; margin: 4px 0 2px; }
.sparkline rect { fill: var(--primario); opacity: 0.5; }

.ranking { padding: 10px 16px 12px; }
.ranking h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.ranking p { margin: 0; }

.ranking__lista { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }

.ranking__lista li {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    padding-bottom: 3px;
    font-size: 13.5px;
}

.ranking__nome { overflow: hidden; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.ranking__valor { font-variant-numeric: tabular-nums; line-height: 1.25; }
.ranking__dominio { grid-column: 1; overflow: hidden; font-size: 11px; line-height: 1.2; color: var(--texto-2); text-overflow: ellipsis; white-space: nowrap; }

.ranking__barra {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: var(--primario);
    opacity: 0.35;
    border-radius: 2px;
}

/* ---------- SharePoint: destaques ---------- */

.spotlight { container-type: inline-size; }

.spotlight__cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.spotlight__duas {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.spotlight__tres {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

@container (max-width: 700px) {
    .spotlight__tres { grid-template-columns: minmax(0, 1fr); }
}

@container (max-width: 760px) {
    .spotlight__duas { grid-template-columns: minmax(0, 1fr); }
}

.rosca { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0; }
.rosca__grafico { flex: none; width: 150px; height: 150px; }
.rosca__fundo { fill: none; stroke: var(--borda); stroke-width: 6; }
.rosca__fatia { fill: none; stroke-width: 6; }
.rosca__fatia--1, .rosca__marca--1 { stroke: var(--serie-1); background: var(--serie-1); }
.rosca__fatia--2, .rosca__marca--2 { stroke: var(--serie-2); background: var(--serie-2); }
.rosca__fatia--3, .rosca__marca--3 { stroke: var(--serie-3); background: var(--serie-3); }
.rosca__fatia--4, .rosca__marca--4 { stroke: var(--serie-4); background: var(--serie-4); }
.rosca__fatia--5, .rosca__marca--5 { stroke: var(--serie-5); background: var(--serie-5); }
.rosca__fatia--6, .rosca__marca--6 { stroke: var(--serie-6); background: var(--serie-6); }
.rosca__marca { background-clip: border-box; }
.rosca figcaption { flex: 1; min-width: 180px; }
.rosca__legenda { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.rosca__legenda li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.rosca__marca { width: 10px; height: 10px; border-radius: 2px; fill: none; }
.rosca__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rosca__valor { font-variant-numeric: tabular-nums; }

.indisponivel-bloco { padding: 14px 18px; }
.indisponivel-bloco h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.indisponivel-bloco p { margin: 0 0 10px; }
.indisponivel-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px 28px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.indisponivel-lista li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 4px; border-bottom: 1px solid var(--borda); }
.indisponivel-lista__valor { color: var(--inativo); }

/* ---------- Seguranca ---------- */

.lista-pessoas { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.lista-pessoas li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--borda);
}
.lista-pessoas li:last-child { border-bottom: 0; }
.lista-pessoas__nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-pessoas__nota { font-variant-numeric: tabular-nums; color: var(--texto-2); }
.lista-pessoas__detalhe { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }

/* ---------- Entra ---------- */

a.estatistica--link { color: inherit; text-decoration: none; }
a.estatistica--link:hover,
a.estatistica--link:focus-visible { border-color: var(--primario); }

.spotlight > .cartao { margin-bottom: 12px; }

.assinaturas {
    display: grid;
    gap: 24px;
}

.assinaturas__lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
    align-items: start;
}

.assinaturas__coluna { display: grid; gap: 10px; min-width: 0; }
.assinaturas__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; }
.assinaturas__total { display: block; font-size: 24px; font-weight: 600; line-height: 1.2; }
.assinaturas__nome { font-size: 13px; color: var(--texto-2); }
.assinaturas__estados { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

.assinatura { padding: 10px 16px 12px; }
.assinatura h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.assinatura__numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin: 0; }
.assinatura__numeros dt { font-size: 12px; color: var(--texto-2); }
.assinatura__numeros dd { margin: 0; font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.assinatura__aviso { margin: 8px 0 0; font-size: 12.5px; color: var(--texto-2); }

/* ---------- Home multi-cliente e saude das coletas ---------- */

.tabela th.num, .tabela td.num { text-align: right; font-variant-numeric: tabular-nums; }
.home__atencao { min-width: 220px; max-width: 300px; }
.tabela td.home__atencao { white-space: normal; }
.tabela--compacta th, .tabela--compacta td { padding-left: 10px; padding-right: 10px; }
.home__lista { display: grid; gap: 2px; margin: 0; padding: 6px 0; list-style: none; font-size: 13.5px; font-weight: 400; }

.saude { margin-bottom: 16px; padding: 0; }
.saude__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--borda); }
.saude__topo h2 { margin: 0; font-size: 16px; }
.saude__resumo { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.saude__motivo { max-width: 520px; overflow-wrap: anywhere; font-size: 13px; color: var(--texto-2); font-weight: 400; }
.saude .tabela td:first-child { font-weight: 600; }
.saude .tabela { table-layout: fixed; }
.saude .tabela th:nth-child(1) { width: 24%; }
.saude .tabela th:nth-child(2) { width: 14%; }
.saude .tabela th:nth-child(3) { width: 16%; }
.saude .tabela td { overflow-wrap: anywhere; white-space: normal; }
.saude .tabela td:last-child { height: auto; padding-top: 8px; padding-bottom: 8px; }

/* ---------- Graficos de linhas (Exchange) ---------- */

.grafico { margin: 0; }
.grafico__svg { display: block; width: 100%; height: auto; max-height: 280px; }
.grafico__grade { stroke: var(--borda); stroke-width: 1; }
.grafico__rotulo { fill: var(--texto-2); font-size: 11px; }
.grafico__linha { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico__ponto { stroke: none; }
.grafico__linha--1 { stroke: var(--serie-1); fill: none; }
.grafico__linha--2 { stroke: var(--serie-2); fill: none; }
.grafico__linha--3 { stroke: var(--serie-3); fill: none; }
.grafico__linha--4 { stroke: var(--serie-4); fill: none; }
.grafico__linha--5 { stroke: var(--serie-5); fill: none; }
.grafico__linha--6 { stroke: var(--serie-6); fill: none; }
.grafico__ponto.grafico__linha--1, .grafico__marcador.grafico__linha--1 { fill: var(--serie-1); }
.grafico__ponto.grafico__linha--2, .grafico__marcador.grafico__linha--2 { fill: var(--serie-2); }
.grafico__ponto.grafico__linha--3, .grafico__marcador.grafico__linha--3 { fill: var(--serie-3); }
.grafico__ponto.grafico__linha--4, .grafico__marcador.grafico__linha--4 { fill: var(--serie-4); }
.grafico__ponto.grafico__linha--5, .grafico__marcador.grafico__linha--5 { fill: var(--serie-5); }
.grafico__ponto.grafico__linha--6, .grafico__marcador.grafico__linha--6 { fill: var(--serie-6); }
.grafico__legenda { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; }
.grafico__marca { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; }
.grafico__marca--1, .grafico__marca-svg--1 { background: var(--serie-1); fill: var(--serie-1); }
.grafico__marca--2, .grafico__marca-svg--2 { background: var(--serie-2); fill: var(--serie-2); }
.grafico__marca--3, .grafico__marca-svg--3 { background: var(--serie-3); fill: var(--serie-3); }
.grafico__marca--4, .grafico__marca-svg--4 { background: var(--serie-4); fill: var(--serie-4); }
.grafico__marca--5, .grafico__marca-svg--5 { background: var(--serie-5); fill: var(--serie-5); }
.grafico__marca--6, .grafico__marca-svg--6 { background: var(--serie-6); fill: var(--serie-6); }

/* ---------- Formulario ---------- */

.formulario {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: end;
    gap: 16px;
    margin-bottom: 20px;
    padding: 20px 24px;
}

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--texto-2); }

.campo input {
    padding: 8px 12px;
    font: inherit;
    color: var(--texto);
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}

.campo input:focus { border-color: var(--primario); }

/* Erro de cadastro: texto escuro com o pontinho de status ambar antes de cada mensagem (a cor que o
   Regras.md permite). Sem vermelho e sem faixa colorida na lateral. */
.erros {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: 600;
    color: var(--erro-texto);
}

.erros li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.erros li::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--atencao);
}

/* ---------- Paginas fora do casco (sem acesso, erro, nao encontrada) ---------- */

.simples {
    max-width: 520px;
    margin: 12vh auto 0;
    padding: 0 24px;
}

.simples__usuario {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;
}

.simples h1 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
}

/* ---------- Tela de entrada (marca Varda, 29/10/2026) ---------- */

.entrada {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    box-sizing: border-box;
}

.entrada__cartao {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 400px;
    padding: 48px 32px 40px;
    border: 1px solid var(--borda);
    border-radius: 16px;
    background: var(--cartao);
    text-align: center;
}

.entrada__simbolo { width: 96px; height: 96px; }

.entrada__nome { margin: 12px 0 0; line-height: 0; }
.entrada__nome img { height: 26px; width: auto; }

.entrada__frase {
    margin: 18px 0 32px;
    font-family: Georgia, "Gelasio", serif;
    font-size: 17px;
    font-style: italic;
    color: var(--texto-2);
}

.entrada__botao { min-width: 220px; justify-content: center; }

/* ---------- Avisos do Blazor, sem vermelho ---------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 12px 24px;
    color: var(--texto);
    background: var(--cartao);
    border-top: 1px solid var(--borda);
}

#blazor-error-ui .reload { margin-left: 8px; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

.blazor-error-boundary {
    padding: 16px;
    color: var(--texto);
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}

.blazor-error-boundary::after { content: "Ocorreu um erro nesta área."; }

/* ---------- Telas estreitas: o menu vira uma faixa no topo ---------- */

@media (max-width: 800px) {
    .casco { grid-template-columns: minmax(0, 1fr); }

    .menu {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        width: auto;
        overflow-x: auto;
        padding: 8px 12px;
        border-right: 0;
        border-bottom: 1px solid var(--borda);
    }

    .menu__marca { margin: 0; }
    .menu__item { border-radius: var(--raio); }
    .menu__item.ativo::before, .menu__item.ativo::after, .menu__flyout { display: none; }
    .menu__grupo { display: contents; }
    .menu { background: var(--cartao); border-bottom: 1px solid var(--borda); }
    .menu__lista { flex-direction: row; }
    .menu__rodape { display: none; }
    .menu__submenu { display: flex; margin: 0; }
    .topo { flex-wrap: wrap; padding: 8px 16px; }
    .conteudo { padding: 16px; }
}

/* ---------- Portal TicMax: blocos, graficos de uso, lista de clientes e de usuarios ---------- */

.subtitulo { margin: 28px 0 12px; font-size: 16px; font-weight: 600; }

.bloco { padding: 20px 24px; }

.bloco__titulo { margin: 0 0 16px; font-size: 15px; font-weight: 600; }

.bloco__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 18px; }

.bloco__barra .bloco__titulo { margin: 0; }

/* Listas dentro de um painel: separadas por uma linha fina, sem cartao dentro de cartao. */
.linhas { list-style: none; margin: 0; padding: 0; }

.linhas > li { padding: 14px 0; border-top: 1px solid var(--borda); }

.linhas > li:first-child { border-top: 0; padding-top: 0; }

.linhas > li:last-child { padding-bottom: 0; }

/* Clientes (inicio do portal). */
.clientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

.cliente { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; color: var(--texto); text-decoration: none; }

.cliente:hover { border-color: var(--primario); }

.cliente__topo { display: flex; align-items: center; gap: 12px; }

.cliente__topo strong { display: block; }

.cliente__dominio { display: block; overflow-wrap: anywhere; }

.cliente__base { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }

.cliente__numero { display: block; font-size: 18px; }

.avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--superficie-suave);
    color: var(--primario);
    font-size: 13px;
    font-weight: 600;
}

/* Celula de usuario: avatar e, ao lado, nome e e-mail. */
.usuario-celula { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }

.usuario-celula > span:last-child { display: flex; flex-direction: column; min-width: 0; }

/* ---------- Gerenciamento ---------- */

.gerenciamento-modulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }

.aviso-ok { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 14px; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); }

.linha-modulo { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); align-items: center; gap: 8px 16px; }

.linha-modulo__nome { display: flex; flex-direction: column; }

.linha-modulo__estado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }

@media (max-width: 640px) { .linha-modulo { grid-template-columns: minmax(0, 1fr); } }

.aviso-problema { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 14px; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); color: var(--erro-texto); }

.previa { margin: 0 0 16px; padding: 14px 16px; background: var(--superficie-suave); border-radius: var(--raio); }

.previa h3 { margin: 0 0 8px; }

.confirmacao { display: grid; gap: 12px; margin-top: 12px; }

.confirmacao__botoes { display: flex; flex-wrap: wrap; gap: 8px; }

.acoes-lista { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }

.licenca-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }

.formulario-novo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: end; gap: 16px; }

.senha-provisoria { padding: 16px 20px; margin-bottom: 16px; }

.senha-provisoria h2 { margin: 0 0 8px; font-size: 15px; }

.senha-provisoria__valor { display: block; padding: 10px 14px; font: 600 18px/1.4 ui-monospace, Consolas, monospace; letter-spacing: 0.04em; background: var(--superficie-suave); border-radius: var(--raio); user-select: all; overflow-wrap: anywhere; }

/* ---- Formulario de usuario novo (Gerenciamento > Usuarios > Novo) ---- */
.form-novo { display: grid; gap: 16px; }
.form-novo .bloco { margin: 0; }
.oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }

.grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.campo select, .campo textarea {
    padding: 8px 12px;
    font: inherit;
    color: var(--texto);
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}
.campo select:focus, .campo textarea:focus { border-color: var(--primario); }
.campo .dica { margin: 0; font-size: 12px; color: var(--texto-2); }
.campo--upn, .campo--senha { grid-column: 1 / -1; }
.campo--confirmacao { margin-top: 12px; max-width: 420px; }

.upn-linha { display: flex; align-items: center; gap: 8px; }
.upn-linha input { flex: 1 1 200px; min-width: 0; }
.upn-linha select { flex: 1 1 220px; min-width: 0; }
.upn-arroba { color: var(--texto-2); font-weight: 600; }

.senha-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.senha-linha input { flex: 1 1 240px; min-width: 0; }

.forca { display: none; align-items: center; gap: 8px; font-size: 12px; color: var(--texto-2); }
.js .forca[data-nivel] { display: flex; }
.forca__barra { flex: 0 0 120px; height: 4px; background: var(--superficie-suave); border-radius: 2px; overflow: hidden; }
.forca__barra > span { display: block; height: 100%; width: 0; background: var(--inativo); }
.forca[data-nivel="1"] .forca__barra > span { width: 25%; }
.forca[data-nivel="2"] .forca__barra > span { width: 60%; background: var(--atencao); }
.forca[data-nivel="3"] .forca__barra > span { width: 100%; background: var(--ok); }

/* O que so funciona com JavaScript fica escondido sem ele: a pagina inteira funciona sem. */
.so-js { display: none; }
.js .so-js { display: inline-flex; }

.secao > summary { cursor: pointer; list-style: none; }
.secao > summary::-webkit-details-marker { display: none; }
.secao > summary::after { content: "+"; float: right; color: var(--texto-2); font-weight: 400; }
.secao[open] > summary::after { content: "–"; }
.secao[open] > summary { margin-bottom: 16px; }

.licencas-escolha { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.licenca-opcao { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio); cursor: pointer; }
.licenca-opcao:hover { background: var(--superficie-suave); }
.licenca-opcao input { margin: 0; }
.licenca-opcao__nome { flex: 1 1 240px; font-weight: 500; }
.licenca-opcao--esgotada { cursor: not-allowed; opacity: 0.65; }
.licenca-opcao--esgotada:hover { background: transparent; }
.nota-escopo { margin: 16px 0 0; }

/* Todas as acoes: o catalogo por categoria, cada acao num cartao-link. */
.acoes-catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0 0 20px; }
.acao-cartao { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; color: var(--texto); text-decoration: none; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); }
a.acao-cartao:hover, a.acao-cartao:focus-visible { border-color: var(--primario); }
.acao-cartao--bloqueada { color: var(--inativo); background: var(--superficie-suave); cursor: not-allowed; }

/* Permissoes do gerenciamento: as acoes do catalogo por categoria, como caixas de marcar. */
.escolha-de-acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0 0 16px; }
.escolha-de-acoes__grupo { margin: 0; padding: 10px 14px 12px; border: 1px solid var(--borda); border-radius: var(--raio); }
.escolha-de-acoes__grupo legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.escolha-de-acoes__opcao { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.escolha-de-acoes__opcao input { margin: 0; }

.form-novo__acoes { display: flex; flex-wrap: wrap; gap: 8px; }

.filtro-grupos { width: 100%; max-width: 360px; margin: 0 0 12px; padding: 8px 12px; font: inherit; color: var(--texto); background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); }
.grupos-escolha { position: relative; max-height: 320px; overflow-y: auto; border: 1px solid var(--borda); border-radius: var(--raio); }
.grupo-linha { display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--borda); }
.grupo-linha:last-child { border-bottom: 0; }
.grupo-linha[hidden] { display: none; }
.grupo-linha--cabecalho { position: sticky; top: 0; background: var(--superficie-suave); font-size: 12px; font-weight: 600; color: var(--texto-2); }
.grupo-linha--cabecalho span:not(:first-child), .grupo-linha__marca { justify-self: center; }
.grupo-linha__nome { overflow-wrap: anywhere; }
.grupo-linha__marca { display: flex; align-items: center; cursor: pointer; }

/* Menu: modulos de Gerenciamento que ainda nao existem aparecem apagados, com "em breve". */
.menu__subitem--breve { display: flex; justify-content: space-between; gap: 8px; color: var(--inativo); cursor: default; }
.menu__subitem--breve small { font-size: 11px; }

@media (max-width: 600px) {
    .upn-linha { flex-wrap: wrap; }
    .upn-arroba { display: none; }
}

/* Clientes (Configuracoes): um cartao por cliente, em vez de uma tabela larga que estoura a tela */
.clientes-admin { display: grid; gap: 16px; }

.cliente-admin { padding: 20px 24px; }

.cliente-admin__topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
}

.cliente-admin__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }

.cliente-admin__titulo h2 { margin: 0; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }

.cliente-admin__fatos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px 24px;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--borda);
}

.cliente-admin__fatos dt { font-size: 12px; color: var(--texto-2); margin-bottom: 2px; }

.cliente-admin__fatos dd { margin: 0; overflow-wrap: anywhere; }

.cliente-admin__tenant { font-size: 13px; color: var(--texto-2); }

.cliente-admin__modulos {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--superficie-suave);
    border-radius: var(--raio);
}

.cliente-admin__modulos h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--texto-2); }

.modulo-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 6px 0;
}

.modulo-linha + .modulo-linha { border-top: 1px solid var(--borda); }

.modulo-ligar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.cliente-admin .detalhe-falha { max-width: none; margin: 8px 0 0; }

.autorizar .botao { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 600px) {
    .cliente-admin { padding: 16px; }
}

@media (max-width: 600px) {
    .autorizar { flex-direction: column; align-items: flex-start; padding: 16px; }
}

/* ---------- Gerenciamento: todas as acoes (abas de modulo, busca, categorias, secoes e gaveta) ---------- */

.aviso-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--superficie-suave);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}

.aviso-info .botao { margin-left: auto; }

/* O topo das telas de acoes: abas de modulo numa linha so, a busca ao lado e o submenu de categorias embaixo. O tamanho do proprio cartao decide o que cede primeiro
   (a busca desce para a linha das categorias; depois so a aba ativa mostra o nome), de modo que NENHUMA aba fica cortada. */
.acoes-topo {
    position: sticky;
    top: 0;
    z-index: 5;
    container-type: inline-size;
    margin-bottom: 16px;
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}

.acoes-topo__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "abas busca" "categorias categorias";
    align-items: center;
    gap: 0 12px;
    padding: 0 16px 10px;
}

.modulos-abas { grid-area: abas; display: flex; gap: 0; min-width: 0; }

.modulo-aba {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 12px 9px 10px;
    color: var(--texto-2);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

a.modulo-aba:hover { color: var(--texto); }

.modulo-aba--ativa { color: var(--primario); border-bottom-color: var(--primario); }

.modulo-aba__icone,
.categoria__icone,
.acoes-secao__icone,
.acao__icone {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.modulo-aba__icone { width: 18px; height: 18px; }

.acoes-busca { grid-area: busca; position: relative; width: 210px; }

.acoes-busca input[type="search"] {
    width: 100%;
    padding: 7px 36px 7px 14px;
    font: inherit;
    font-size: 13px;
    color: var(--texto);
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: 999px;
}

.acoes-busca input[type="search"]:focus-visible { outline: 2px solid var(--primario); outline-offset: 1px; }

.acoes-busca__botao {
    position: absolute;
    top: 50%;
    right: 4px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--texto-2);
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
}

.acoes-busca__botao:hover { color: var(--primario); background: var(--superficie-suave); }

.acoes-busca__botao .menu__icone { width: 16px; height: 16px; }

.categorias-caixa { grid-area: categorias; position: relative; display: flex; align-items: center; min-width: 0; margin-top: 6px; }

.categorias {
    display: flex;
    flex: 1;
    gap: 8px;
    min-width: 0;
    padding: 2px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.categorias::-webkit-scrollbar { display: none; }

/* A sombra na ponta so aparece quando ha mais categorias para o lado (o script marca data-mais). */
.categorias-caixa[data-mais] .categorias {
    padding-right: 40px;
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}

.categoria {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    color: var(--texto-2);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--borda);
    border-radius: 999px;
}

.categoria:hover { color: var(--texto); background: var(--superficie-suave); }

.categoria--ativa { color: var(--primario); font-weight: 600; border-color: var(--primario); background: var(--cartao); }

.categoria__icone { width: 15px; height: 15px; }

.categorias__seta {
    position: absolute;
    top: 50%;
    right: 0;
    display: none;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--texto-2);
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
}

.categorias__seta:hover { color: var(--primario); border-color: var(--primario); }

.categorias-caixa[data-mais] .categorias__seta { display: grid; }

.categorias__seta .menu__icone { width: 16px; height: 16px; }

/* Cartao mais estreito: a busca desce para a linha das categorias, e as abas ficam com a linha toda. */
@container (max-width: 1010px) {
    .acoes-topo__grade { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "abas abas" "categorias busca"; }
    .acoes-busca { width: 190px; margin-top: 6px; }
}

/* Mais estreito ainda: so a aba ativa mostra o nome; as outras ficam so com o icone (o nome continua para leitor de tela). */
@container (max-width: 800px) {
    .modulo-aba:not(.modulo-aba--ativa) { padding-inline: 11px; }
    .modulo-aba:not(.modulo-aba--ativa) span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
}

@container (max-width: 560px) {
    .modulo-aba:not(.modulo-aba--ativa) { padding-inline: 7px; }
    .modulo-aba--ativa { padding-inline: 8px; }
    .acoes-topo__grade { grid-template-columns: minmax(0, 1fr); grid-template-areas: "abas" "busca" "categorias"; }
    .acoes-busca { width: 100%; }
}


.acoes-secoes { display: grid; gap: 16px; }

.acoes-secao { padding: 18px 20px 14px; scroll-margin-top: 124px; }

.acoes-secao__titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
}

.acoes-secao__icone { width: 20px; height: 20px; color: var(--primario); }

.acoes-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 2px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.acao {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    color: var(--texto);
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
    border-radius: var(--raio);
}

.acao__icone { width: 18px; height: 18px; color: var(--primario); }

a.acao:hover { background: var(--superficie-suave); }

a.acao:focus-visible { outline: 2px solid var(--primario); outline-offset: -2px; }

.acao--aberta { color: var(--primario); font-weight: 600; background: var(--superficie-suave); }

.acao--apagada { color: var(--inativo); cursor: default; }

.acao--apagada .acao__icone { color: var(--inativo); }

/* A gaveta: o formulario da acao, ao lado, sem sair da lista. */
.gaveta-fundo {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(27, 35, 48, 0.18);
    cursor: default;
}

.gaveta {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 41;
    display: flex;
    flex-direction: column;
    width: min(480px, 100vw);
    background: var(--cartao);
    border-left: 1px solid var(--borda);
    animation: gaveta-entra 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes gaveta-entra {
    from { transform: translateX(24px); }
    to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gaveta { animation: none; }
}

.gaveta__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 14px;
    border-bottom: 1px solid var(--borda);
}

.gaveta__titulo h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }

.gaveta__titulo p { margin: 4px 0 0; font-size: 13px; }

.gaveta__cliente { padding: 16px 20px 0; }

.gaveta__formulario { display: flex; flex: 1; flex-direction: column; min-height: 0; }

.gaveta__corpo { display: grid; flex: 1; gap: 16px; align-content: start; padding: 16px 20px; overflow-y: auto; }

.gaveta__rodape { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--borda); }

.marcar { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }

.marcar input { margin-top: 3px; }

/* O formulario de criar usuario vive dentro da gaveta: sem cartoes dentro de cartao e numa coluna so. */
.gaveta .cartao { padding: 0; background: none; border: 0; }
.gaveta .bloco { margin: 0 0 20px; padding-top: 16px; border-top: 1px solid var(--borda); }
.gaveta .bloco__titulo { margin: 0 0 12px; font-size: 14px; }
.gaveta .grade-campos { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 720px) {
    .acoes-topo { position: static; }
    .acoes-secao { padding: 16px; }
    .acoes-grade { grid-template-columns: minmax(0, 1fr); }
}

/* Menu lateral, Gerenciamento: "Todas as acoes" e os modulos com o mesmo icone das abas. */
.menu__subrotulo { display: block; padding: 6px 12px 2px; font-size: 12px; font-weight: 600; color: var(--texto-2); }
.menu__subitem--icone { display: flex; align-items: center; gap: 8px; }
.menu__subicone { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Historico: filtro por periodo das alteracoes de licenca. */
.barra--periodo { margin-bottom: 12px; }
.barra--periodo input[type="date"] {
    padding: 8px 12px;
    font: inherit;
    color: var(--texto);
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}
.nao-quebra { white-space: nowrap; }

/* Seletor de usuario das gavetas de acao: lista de escolha sob o campo (nome, situacao, login, cargo). */
.escolha { position: relative; }
.escolha input { width: 100%; }
.escolha__lista {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}
.escolha__item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--raio); cursor: pointer; }
.escolha__item:hover, .escolha__item--ativo { background: var(--superficie-suave); }
.escolha__texto { display: flex; flex-direction: column; min-width: 0; }
.escolha__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.escolha__upn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); font-size: 13px; }
.escolha__tipo { color: var(--texto-2); font-size: 12px; }
.escolha__tipo:empty { display: none; }
.escolha__vazio { padding: 12px; color: var(--texto-2); font-size: 13px; }

/* Gaveta de atualizar propriedades: os campos do perfil em duas colunas (uma so em tela estreita). */
.campos-em-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
@media (max-width: 640px) { .campos-em-grade { grid-template-columns: minmax(0, 1fr); } }

/* Seletor de varios usuarios: os escolhidos viram "chips" acima do campo de busca. */
.seletor-multiplo { display: flex; flex-direction: column; gap: 8px; }
.seletor-multiplo__itens { display: flex; flex-wrap: wrap; gap: 6px; }
.seletor-multiplo__itens:empty { display: none; }
.seletor-multiplo__chip { gap: 6px; }
.seletor-multiplo__tirar { border: 0; background: transparent; color: inherit; font: inherit; line-height: 1; cursor: pointer; padding: 0 2px; }
.seletor-multiplo__tirar:hover { color: var(--primario); }

/* Gaveta "Criar usuario" em abas (Essencial, Perfil, Acesso), sem JavaScript: botoes de opcao escondidos + :checked. */
.abas { display: block; }
.abas__radio { position: absolute; opacity: 0; pointer-events: none; }
.abas__lista { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin: 0 0 16px; }
.abas__aba { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; font-size: 14px; color: var(--texto-2); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.abas__aba:hover { color: var(--texto); }
.abas__cont { font-size: 11px; line-height: 1; padding: 3px 7px; border-radius: 999px; background: var(--bg-accent, #e6f1fb); color: var(--text-accent, #185fa5); }
.abas__cont[hidden] { display: none; }
.abas__sub { margin: 18px 0 10px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.abas__painel > .abas__sub:first-child { margin-top: 0; }
.abas__painel { display: none; }
#aba-essencial:checked ~ .abas__paineis #painel-essencial,
#aba-perfil:checked ~ .abas__paineis #painel-perfil,
#aba-acesso:checked ~ .abas__paineis #painel-acesso { display: block; }
#aba-essencial:checked ~ .abas__lista label[for="aba-essencial"],
#aba-perfil:checked ~ .abas__lista label[for="aba-perfil"],
#aba-acesso:checked ~ .abas__lista label[for="aba-acesso"] { color: var(--texto); border-bottom-color: var(--texto); font-weight: 500; }
#aba-essencial:focus-visible ~ .abas__lista label[for="aba-essencial"],
#aba-perfil:focus-visible ~ .abas__lista label[for="aba-perfil"],
#aba-acesso:focus-visible ~ .abas__lista label[for="aba-acesso"] { outline: 2px solid var(--texto-2); outline-offset: -2px; }

/* ---------- Visao geral: uma coluna por servico, cores claras proprias (sem sombra, sem vermelho) ---------- */
.visao {
    display: grid;
    grid-template-columns: repeat(5, minmax(250px, 1fr));
    gap: 16px;
    align-items: start;
    overflow-x: auto;
    padding-bottom: 8px;
}

.visao__coluna {
    --faixa: #E2C37E;
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.visao__coluna::before { content: ""; display: block; height: 3px; background: var(--faixa); }


.visao__titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 12px 16px 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--texto);
}

.bloco-visao { padding: 12px 16px 14px; border-top: 1px solid var(--borda); }

.bloco-visao__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.bloco-visao__titulo { font-size: 13px; color: var(--texto-2); }
.bloco-visao__valor { font-size: 26px; line-height: 1.2; color: var(--texto); }
.bloco-visao__icone {
    width: 30px; height: 30px; flex: none;
    fill: none; stroke: #C9A25A; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
    opacity: .85;
}

.bloco-visao--zero .bloco-visao__titulo,
.bloco-visao--zero .bloco-visao__valor { color: var(--inativo); }

.bloco-visao__linhas { margin: 8px 0 0; }
.bloco-visao__linhas > div { display: flex; justify-content: flex-end; gap: 12px; font-size: 13px; line-height: 1.7; }
.bloco-visao__linhas dt { color: var(--texto-2); margin: 0; }
.bloco-visao__linhas dd { margin: 0; min-width: 3.5ch; text-align: right; color: var(--texto); }
.bloco-visao__linhas .zero dt, .bloco-visao__linhas .zero dd { color: var(--inativo); }

.bloco-visao__trio { display: flex; margin: 8px 0 0; }
.bloco-visao__trio > div { flex: 1; text-align: center; border-left: 1px solid var(--borda); }
.bloco-visao__trio > div:first-child { border-left: 0; }
.bloco-visao__trio dd { margin: 0; font-size: 15px; color: var(--texto); }
.bloco-visao__trio dt { margin: 0; font-size: 12px; color: var(--texto-2); }
.bloco-visao__trio .zero dd, .bloco-visao__trio .zero dt { color: var(--inativo); }
.bloco-visao__subtitulo { margin-top: 8px; font-size: 12px; color: var(--texto-2); text-align: right; }
.bloco-visao__nota { margin-top: 8px; font-size: 12px; color: var(--texto-2); }

/* ---------- Seletor do cliente no topo: setas, nome e lista com busca ---------- */
.seletor-cliente { display: inline-flex; align-items: center; gap: 6px; }

.seletor-cliente__seta, .seletor-cliente__atual {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 36px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px;
    color: var(--texto); text-decoration: none; cursor: pointer;
}
.seletor-cliente__seta { width: 32px; }
.seletor-cliente__atual { padding: 0 12px; min-width: 160px; justify-content: space-between; font-weight: 600; list-style: none; }
.seletor-cliente__atual::-webkit-details-marker { display: none; }
.seletor-cliente__seta:hover, .seletor-cliente__atual:hover { border-color: var(--primario); }
.seletor-cliente svg { width: 16px; height: 16px; fill: none; stroke: var(--texto-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.seletor-cliente__menu { position: relative; }
.seletor-cliente__painel {
    position: absolute; z-index: 20; top: 42px; left: 0; min-width: 260px; max-height: 70vh; overflow-y: auto;
    background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px;
}
.seletor-cliente__busca { width: 100%; margin-bottom: 8px; }
.seletor-cliente__titulo { margin: 4px 4px 6px; font-size: 12px; color: var(--texto-2); }
.seletor-cliente__lista { list-style: none; margin: 0; padding: 0; }
.seletor-cliente__lista a {
    display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 4px; color: var(--texto); text-decoration: none;
}
.seletor-cliente__lista a:hover { background: var(--superficie-suave); }
.seletor-cliente__lista a.ativo { font-weight: 600; color: var(--primario); }
.seletor-cliente__marca { width: 14px; color: var(--primario); }

/* ---------- Situacao do cliente (fim da Visao geral) ---------- */
.situacao-cliente { margin-top: 16px; padding: 16px 20px; }
.situacao-cliente__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.situacao-cliente__titulo { margin: 0; font-size: 16px; font-weight: 600; }
.situacao-cliente__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 24px; margin: 0 0 16px; }
.situacao-cliente__grade dt { font-size: 12px; color: var(--texto-2); }
.situacao-cliente__grade dd { margin: 2px 0 0; font-size: 15px; }
.situacao-cliente__atencao h3 { margin: 0 0 6px; font-size: 13px; color: var(--texto-2); font-weight: 600; }

/* ---------- Gaveta de usuarios: abre do lado direito; a tela por tras fica so com numeros e graficos ---------- */
.gaveta-fundo { position: fixed; inset: 0; z-index: 55; background: rgba(43, 40, 36, 0.16); cursor: default; }

.gaveta {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: min(640px, 100vw);
    padding: 0 20px 20px;
    overflow-y: auto;
    background: var(--fundo);
    border-left: 1px solid var(--borda);
}

.gaveta__topo {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0 -20px 14px;
    padding: 18px 20px 12px;
    background: var(--cartao);
    border-bottom: 1px solid var(--borda);
}

.gaveta__topo--ficha { align-items: center; padding-top: 12px; }
.gaveta__titulo h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.gaveta__titulo p { margin: 2px 0 0; }

.gaveta__fechar, .gaveta__seta {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    color: var(--texto-2);
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: 12px;
    text-decoration: none;
}

.gaveta__fechar:hover, .gaveta__seta:hover { color: var(--texto); background: var(--superficie-suave); }
.gaveta__seta { width: 30px; height: 30px; }

.gaveta__voltar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px 0 6px;
    height: 34px;
    color: var(--texto);
    border: 1px solid var(--borda);
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
}

.gaveta__setas { display: inline-flex; align-items: center; gap: 10px; margin: 0 auto; }

.gaveta .barra { margin-bottom: 12px; }
.gaveta__cartoes { display: grid; gap: 8px; }

.usuario-cartao {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: var(--texto);
    text-decoration: none;
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}

.usuario-cartao:hover { border-color: var(--primario); }
.usuario-cartao__texto { display: grid; min-width: 0; flex: 1; }
.usuario-cartao__texto strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--superficie-suave);
    color: var(--texto-2);
    font-size: 13px;
    font-weight: 600;
}

.avatar--grande { width: 64px; height: 64px; font-size: 20px; }

.gaveta__ficha { display: grid; gap: 12px; }

.gaveta__cartao {
    padding: 14px 16px;
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}

.gaveta__cartao h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.gaveta__identidade { display: flex; align-items: center; gap: 16px; }
.gaveta__identidade-texto { min-width: 0; }
.gaveta__identidade-texto h2 { margin: 0; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.gaveta__identidade-texto p { margin: 2px 0 8px; }
.gaveta .painel__chips { margin: 0; }
.gaveta .paginacao { margin-top: 12px; }

.rosca__link { cursor: pointer; }
.rosca__nome--link { color: var(--primario); text-decoration: none; }
.rosca__nome--link:hover { text-decoration: underline; }

/* Rosca: a fatia sob o mouse (ou a linha da legenda) sobe, as outras esmaecem e o nome com o valor aparece no centro. */
.rosca__area { position: relative; flex: none; width: 150px; height: 150px; }
.rosca__area .rosca__grafico { overflow: visible; }
.rosca__fatia { transition: stroke-width .15s ease, opacity .15s ease; }
.rosca__centro { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.rosca__centro-item { display: none; grid-area: 1 / 1; width: 96px; text-align: center; line-height: 1.25; }
.rosca__centro-nome { display: block; font-size: 12px; color: var(--texto-2); overflow-wrap: anywhere; }
.rosca__centro-item strong { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rosca__legenda li { border-radius: 6px; transition: background-color .15s ease; }
.rosca__legenda li:hover { background: var(--fundo); }
.rosca:is(:has(.rosca__fatia--1:hover), :has(.rosca__legenda li:nth-child(1):hover)) {
    .rosca__fatia:not(.rosca__fatia--1) { opacity: .35; }
    .rosca__fatia--1 { stroke-width: 8; }
    .rosca__centro-item--1 { display: block; }
}
.rosca:is(:has(.rosca__fatia--2:hover), :has(.rosca__legenda li:nth-child(2):hover)) {
    .rosca__fatia:not(.rosca__fatia--2) { opacity: .35; }
    .rosca__fatia--2 { stroke-width: 8; }
    .rosca__centro-item--2 { display: block; }
}
.rosca:is(:has(.rosca__fatia--3:hover), :has(.rosca__legenda li:nth-child(3):hover)) {
    .rosca__fatia:not(.rosca__fatia--3) { opacity: .35; }
    .rosca__fatia--3 { stroke-width: 8; }
    .rosca__centro-item--3 { display: block; }
}
.rosca:is(:has(.rosca__fatia--4:hover), :has(.rosca__legenda li:nth-child(4):hover)) {
    .rosca__fatia:not(.rosca__fatia--4) { opacity: .35; }
    .rosca__fatia--4 { stroke-width: 8; }
    .rosca__centro-item--4 { display: block; }
}
.rosca:is(:has(.rosca__fatia--5:hover), :has(.rosca__legenda li:nth-child(5):hover)) {
    .rosca__fatia:not(.rosca__fatia--5) { opacity: .35; }
    .rosca__fatia--5 { stroke-width: 8; }
    .rosca__centro-item--5 { display: block; }
}
.rosca:is(:has(.rosca__fatia--6:hover), :has(.rosca__legenda li:nth-child(6):hover)) {
    .rosca__fatia:not(.rosca__fatia--6) { opacity: .35; }
    .rosca__fatia--6 { stroke-width: 8; }
    .rosca__centro-item--6 { display: block; }
}

/* ---------- Dicas ao passar o mouse nos graficos (CSS puro): guia, marcadores e caixa com os valores do dia ---------- */

.grafico__zona { fill: transparent; }
.grafico__guia { stroke: var(--texto-2); stroke-width: 1; stroke-dasharray: 3 3; display: none; pointer-events: none; }
.grafico__marcador { stroke: var(--cartao); stroke-width: 2; display: none; pointer-events: none; }
.grafico__dica { display: none; pointer-events: none; }
.grafico__dica-fundo { fill: var(--cartao); stroke: var(--borda); stroke-width: 1; }
.grafico__dica-data { fill: var(--texto); font-size: 11.5px; font-weight: 600; }
.grafico__dica-texto { fill: var(--texto-2); font-size: 11px; }
.grafico__dica-valor { fill: var(--texto); font-size: 11px; font-weight: 600; }
.grafico__dia:hover .grafico__guia, .grafico__dia:hover .grafico__marcador, .grafico__dia:hover .grafico__dica,

/* Minigrafico de barras: uma faixa invisivel por barra; sob o mouse a coluna ganha fundo e a dica diz o dia (ou a hora) e o valor. */
.sparkline-caixa { position: relative; }
.sparkline__zonas { position: absolute; inset: 0; display: flex; }
.sparkline__zona { position: relative; flex: 1; border-radius: 3px; }
.sparkline__zona:hover { background: color-mix(in srgb, var(--primario) 14%, transparent); }
.sparkline__dica {
    display: none;
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    padding: 4px 8px;
    border: 1px solid var(--borda);
    border-radius: 6px;
    background: var(--cartao);
    color: var(--texto-2);
    font-size: 12px;
    white-space: nowrap;
}
.sparkline__dica strong { color: var(--texto); }
.sparkline__zona:hover .sparkline__dica { display: block; }
.sparkline__zona:nth-child(-n+4) .sparkline__dica { left: 0; transform: none; }
.sparkline__zona:nth-last-child(-n+4) .sparkline__dica { left: auto; right: 0; transform: none; }

/* Muitas categorias: rosca maior e a legenda em colunas (nada agrupado em "Outros"). */
.rosca--muitas .rosca__area { width: 190px; height: 190px; }
.rosca--muitas .rosca__grafico { width: 190px; height: 190px; }
.rosca__legenda--colunas { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 28px; }
.rosca:is(:has(.rosca__fatia--7:hover), :has(.rosca__legenda li:nth-child(7):hover)) {
    .rosca__fatia:not(.rosca__fatia--7) { opacity: .35; }
    .rosca__fatia--7 { stroke-width: 8; }
    .rosca__centro-item--7 { display: block; }
}
.rosca:is(:has(.rosca__fatia--8:hover), :has(.rosca__legenda li:nth-child(8):hover)) {
    .rosca__fatia:not(.rosca__fatia--8) { opacity: .35; }
    .rosca__fatia--8 { stroke-width: 8; }
    .rosca__centro-item--8 { display: block; }
}
.rosca:is(:has(.rosca__fatia--9:hover), :has(.rosca__legenda li:nth-child(9):hover)) {
    .rosca__fatia:not(.rosca__fatia--9) { opacity: .35; }
    .rosca__fatia--9 { stroke-width: 8; }
    .rosca__centro-item--9 { display: block; }
}
.rosca:is(:has(.rosca__fatia--10:hover), :has(.rosca__legenda li:nth-child(10):hover)) {
    .rosca__fatia:not(.rosca__fatia--10) { opacity: .35; }
    .rosca__fatia--10 { stroke-width: 8; }
    .rosca__centro-item--10 { display: block; }
}
.rosca:is(:has(.rosca__fatia--11:hover), :has(.rosca__legenda li:nth-child(11):hover)) {
    .rosca__fatia:not(.rosca__fatia--11) { opacity: .35; }
    .rosca__fatia--11 { stroke-width: 8; }
    .rosca__centro-item--11 { display: block; }
}
.rosca:is(:has(.rosca__fatia--12:hover), :has(.rosca__legenda li:nth-child(12):hover)) {
    .rosca__fatia:not(.rosca__fatia--12) { opacity: .35; }
    .rosca__fatia--12 { stroke-width: 8; }
    .rosca__centro-item--12 { display: block; }
}
.rosca:is(:has(.rosca__fatia--13:hover), :has(.rosca__legenda li:nth-child(13):hover)) {
    .rosca__fatia:not(.rosca__fatia--13) { opacity: .35; }
    .rosca__fatia--13 { stroke-width: 8; }
    .rosca__centro-item--13 { display: block; }
}
.rosca:is(:has(.rosca__fatia--14:hover), :has(.rosca__legenda li:nth-child(14):hover)) {
    .rosca__fatia:not(.rosca__fatia--14) { opacity: .35; }
    .rosca__fatia--14 { stroke-width: 8; }
    .rosca__centro-item--14 { display: block; }
}
.rosca:is(:has(.rosca__fatia--15:hover), :has(.rosca__legenda li:nth-child(15):hover)) {
    .rosca__fatia:not(.rosca__fatia--15) { opacity: .35; }
    .rosca__fatia--15 { stroke-width: 8; }
    .rosca__centro-item--15 { display: block; }
}
.rosca:is(:has(.rosca__fatia--16:hover), :has(.rosca__legenda li:nth-child(16):hover)) {
    .rosca__fatia:not(.rosca__fatia--16) { opacity: .35; }
    .rosca__fatia--16 { stroke-width: 8; }
    .rosca__centro-item--16 { display: block; }
}
.rosca:is(:has(.rosca__fatia--17:hover), :has(.rosca__legenda li:nth-child(17):hover)) {
    .rosca__fatia:not(.rosca__fatia--17) { opacity: .35; }
    .rosca__fatia--17 { stroke-width: 8; }
    .rosca__centro-item--17 { display: block; }
}
.rosca:is(:has(.rosca__fatia--18:hover), :has(.rosca__legenda li:nth-child(18):hover)) {
    .rosca__fatia:not(.rosca__fatia--18) { opacity: .35; }
    .rosca__fatia--18 { stroke-width: 8; }
    .rosca__centro-item--18 { display: block; }
}
.rosca:is(:has(.rosca__fatia--19:hover), :has(.rosca__legenda li:nth-child(19):hover)) {
    .rosca__fatia:not(.rosca__fatia--19) { opacity: .35; }
    .rosca__fatia--19 { stroke-width: 8; }
    .rosca__centro-item--19 { display: block; }
}
.rosca:is(:has(.rosca__fatia--20:hover), :has(.rosca__legenda li:nth-child(20):hover)) {
    .rosca__fatia:not(.rosca__fatia--20) { opacity: .35; }
    .rosca__fatia--20 { stroke-width: 8; }
    .rosca__centro-item--20 { display: block; }
}
.rosca:is(:has(.rosca__fatia--21:hover), :has(.rosca__legenda li:nth-child(21):hover)) {
    .rosca__fatia:not(.rosca__fatia--21) { opacity: .35; }
    .rosca__fatia--21 { stroke-width: 8; }
    .rosca__centro-item--21 { display: block; }
}
.rosca:is(:has(.rosca__fatia--22:hover), :has(.rosca__legenda li:nth-child(22):hover)) {
    .rosca__fatia:not(.rosca__fatia--22) { opacity: .35; }
    .rosca__fatia--22 { stroke-width: 8; }
    .rosca__centro-item--22 { display: block; }
}
.rosca:is(:has(.rosca__fatia--23:hover), :has(.rosca__legenda li:nth-child(23):hover)) {
    .rosca__fatia:not(.rosca__fatia--23) { opacity: .35; }
    .rosca__fatia--23 { stroke-width: 8; }
    .rosca__centro-item--23 { display: block; }
}
.rosca:is(:has(.rosca__fatia--24:hover), :has(.rosca__legenda li:nth-child(24):hover)) {
    .rosca__fatia:not(.rosca__fatia--24) { opacity: .35; }
    .rosca__fatia--24 { stroke-width: 8; }
    .rosca__centro-item--24 { display: block; }
}
.rosca:is(:has(.rosca__fatia--25:hover), :has(.rosca__legenda li:nth-child(25):hover)) {
    .rosca__fatia:not(.rosca__fatia--25) { opacity: .35; }
    .rosca__fatia--25 { stroke-width: 8; }
    .rosca__centro-item--25 { display: block; }
}
.rosca:is(:has(.rosca__fatia--26:hover), :has(.rosca__legenda li:nth-child(26):hover)) {
    .rosca__fatia:not(.rosca__fatia--26) { opacity: .35; }
    .rosca__fatia--26 { stroke-width: 8; }
    .rosca__centro-item--26 { display: block; }
}
.rosca:is(:has(.rosca__fatia--27:hover), :has(.rosca__legenda li:nth-child(27):hover)) {
    .rosca__fatia:not(.rosca__fatia--27) { opacity: .35; }
    .rosca__fatia--27 { stroke-width: 8; }
    .rosca__centro-item--27 { display: block; }
}
.rosca:is(:has(.rosca__fatia--28:hover), :has(.rosca__legenda li:nth-child(28):hover)) {
    .rosca__fatia:not(.rosca__fatia--28) { opacity: .35; }
    .rosca__fatia--28 { stroke-width: 8; }
    .rosca__centro-item--28 { display: block; }
}
.rosca:is(:has(.rosca__fatia--29:hover), :has(.rosca__legenda li:nth-child(29):hover)) {
    .rosca__fatia:not(.rosca__fatia--29) { opacity: .35; }
    .rosca__fatia--29 { stroke-width: 8; }
    .rosca__centro-item--29 { display: block; }
}
.rosca:is(:has(.rosca__fatia--30:hover), :has(.rosca__legenda li:nth-child(30):hover)) {
    .rosca__fatia:not(.rosca__fatia--30) { opacity: .35; }
    .rosca__fatia--30 { stroke-width: 8; }
    .rosca__centro-item--30 { display: block; }
}
.rosca:is(:has(.rosca__fatia--31:hover), :has(.rosca__legenda li:nth-child(31):hover)) {
    .rosca__fatia:not(.rosca__fatia--31) { opacity: .35; }
    .rosca__fatia--31 { stroke-width: 8; }
    .rosca__centro-item--31 { display: block; }
}
.rosca:is(:has(.rosca__fatia--32:hover), :has(.rosca__legenda li:nth-child(32):hover)) {
    .rosca__fatia:not(.rosca__fatia--32) { opacity: .35; }
    .rosca__fatia--32 { stroke-width: 8; }
    .rosca__centro-item--32 { display: block; }
}
.rosca:is(:has(.rosca__fatia--33:hover), :has(.rosca__legenda li:nth-child(33):hover)) {
    .rosca__fatia:not(.rosca__fatia--33) { opacity: .35; }
    .rosca__fatia--33 { stroke-width: 8; }
    .rosca__centro-item--33 { display: block; }
}
.rosca:is(:has(.rosca__fatia--34:hover), :has(.rosca__legenda li:nth-child(34):hover)) {
    .rosca__fatia:not(.rosca__fatia--34) { opacity: .35; }
    .rosca__fatia--34 { stroke-width: 8; }
    .rosca__centro-item--34 { display: block; }
}
.rosca:is(:has(.rosca__fatia--35:hover), :has(.rosca__legenda li:nth-child(35):hover)) {
    .rosca__fatia:not(.rosca__fatia--35) { opacity: .35; }
    .rosca__fatia--35 { stroke-width: 8; }
    .rosca__centro-item--35 { display: block; }
}
.rosca:is(:has(.rosca__fatia--36:hover), :has(.rosca__legenda li:nth-child(36):hover)) {
    .rosca__fatia:not(.rosca__fatia--36) { opacity: .35; }
    .rosca__fatia--36 { stroke-width: 8; }
    .rosca__centro-item--36 { display: block; }
}
.rosca:is(:has(.rosca__fatia--37:hover), :has(.rosca__legenda li:nth-child(37):hover)) {
    .rosca__fatia:not(.rosca__fatia--37) { opacity: .35; }
    .rosca__fatia--37 { stroke-width: 8; }
    .rosca__centro-item--37 { display: block; }
}
.rosca:is(:has(.rosca__fatia--38:hover), :has(.rosca__legenda li:nth-child(38):hover)) {
    .rosca__fatia:not(.rosca__fatia--38) { opacity: .35; }
    .rosca__fatia--38 { stroke-width: 8; }
    .rosca__centro-item--38 { display: block; }
}
.rosca:is(:has(.rosca__fatia--39:hover), :has(.rosca__legenda li:nth-child(39):hover)) {
    .rosca__fatia:not(.rosca__fatia--39) { opacity: .35; }
    .rosca__fatia--39 { stroke-width: 8; }
    .rosca__centro-item--39 { display: block; }
}
.rosca:is(:has(.rosca__fatia--40:hover), :has(.rosca__legenda li:nth-child(40):hover)) {
    .rosca__fatia:not(.rosca__fatia--40) { opacity: .35; }
    .rosca__fatia--40 { stroke-width: 8; }
    .rosca__centro-item--40 { display: block; }
}
.rosca:is(:has(.rosca__fatia--41:hover), :has(.rosca__legenda li:nth-child(41):hover)) {
    .rosca__fatia:not(.rosca__fatia--41) { opacity: .35; }
    .rosca__fatia--41 { stroke-width: 8; }
    .rosca__centro-item--41 { display: block; }
}
.rosca:is(:has(.rosca__fatia--42:hover), :has(.rosca__legenda li:nth-child(42):hover)) {
    .rosca__fatia:not(.rosca__fatia--42) { opacity: .35; }
    .rosca__fatia--42 { stroke-width: 8; }
    .rosca__centro-item--42 { display: block; }
}
.rosca:is(:has(.rosca__fatia--43:hover), :has(.rosca__legenda li:nth-child(43):hover)) {
    .rosca__fatia:not(.rosca__fatia--43) { opacity: .35; }
    .rosca__fatia--43 { stroke-width: 8; }
    .rosca__centro-item--43 { display: block; }
}
.rosca:is(:has(.rosca__fatia--44:hover), :has(.rosca__legenda li:nth-child(44):hover)) {
    .rosca__fatia:not(.rosca__fatia--44) { opacity: .35; }
    .rosca__fatia--44 { stroke-width: 8; }
    .rosca__centro-item--44 { display: block; }
}
.rosca:is(:has(.rosca__fatia--45:hover), :has(.rosca__legenda li:nth-child(45):hover)) {
    .rosca__fatia:not(.rosca__fatia--45) { opacity: .35; }
    .rosca__fatia--45 { stroke-width: 8; }
    .rosca__centro-item--45 { display: block; }
}
.rosca:is(:has(.rosca__fatia--46:hover), :has(.rosca__legenda li:nth-child(46):hover)) {
    .rosca__fatia:not(.rosca__fatia--46) { opacity: .35; }
    .rosca__fatia--46 { stroke-width: 8; }
    .rosca__centro-item--46 { display: block; }
}
.rosca:is(:has(.rosca__fatia--47:hover), :has(.rosca__legenda li:nth-child(47):hover)) {
    .rosca__fatia:not(.rosca__fatia--47) { opacity: .35; }
    .rosca__fatia--47 { stroke-width: 8; }
    .rosca__centro-item--47 { display: block; }
}
.rosca:is(:has(.rosca__fatia--48:hover), :has(.rosca__legenda li:nth-child(48):hover)) {
    .rosca__fatia:not(.rosca__fatia--48) { opacity: .35; }
    .rosca__fatia--48 { stroke-width: 8; }
    .rosca__centro-item--48 { display: block; }
}
.rosca:is(:has(.rosca__fatia--49:hover), :has(.rosca__legenda li:nth-child(49):hover)) {
    .rosca__fatia:not(.rosca__fatia--49) { opacity: .35; }
    .rosca__fatia--49 { stroke-width: 8; }
    .rosca__centro-item--49 { display: block; }
}
.rosca:is(:has(.rosca__fatia--50:hover), :has(.rosca__legenda li:nth-child(50):hover)) {
    .rosca__fatia:not(.rosca__fatia--50) { opacity: .35; }
    .rosca__fatia--50 { stroke-width: 8; }
    .rosca__centro-item--50 { display: block; }
}
.rosca:is(:has(.rosca__fatia--51:hover), :has(.rosca__legenda li:nth-child(51):hover)) {
    .rosca__fatia:not(.rosca__fatia--51) { opacity: .35; }
    .rosca__fatia--51 { stroke-width: 8; }
    .rosca__centro-item--51 { display: block; }
}
.rosca:is(:has(.rosca__fatia--52:hover), :has(.rosca__legenda li:nth-child(52):hover)) {
    .rosca__fatia:not(.rosca__fatia--52) { opacity: .35; }
    .rosca__fatia--52 { stroke-width: 8; }
    .rosca__centro-item--52 { display: block; }
}
.rosca:is(:has(.rosca__fatia--53:hover), :has(.rosca__legenda li:nth-child(53):hover)) {
    .rosca__fatia:not(.rosca__fatia--53) { opacity: .35; }
    .rosca__fatia--53 { stroke-width: 8; }
    .rosca__centro-item--53 { display: block; }
}
.rosca:is(:has(.rosca__fatia--54:hover), :has(.rosca__legenda li:nth-child(54):hover)) {
    .rosca__fatia:not(.rosca__fatia--54) { opacity: .35; }
    .rosca__fatia--54 { stroke-width: 8; }
    .rosca__centro-item--54 { display: block; }
}
.rosca:is(:has(.rosca__fatia--55:hover), :has(.rosca__legenda li:nth-child(55):hover)) {
    .rosca__fatia:not(.rosca__fatia--55) { opacity: .35; }
    .rosca__fatia--55 { stroke-width: 8; }
    .rosca__centro-item--55 { display: block; }
}
.rosca:is(:has(.rosca__fatia--56:hover), :has(.rosca__legenda li:nth-child(56):hover)) {
    .rosca__fatia:not(.rosca__fatia--56) { opacity: .35; }
    .rosca__fatia--56 { stroke-width: 8; }
    .rosca__centro-item--56 { display: block; }
}
.rosca:is(:has(.rosca__fatia--57:hover), :has(.rosca__legenda li:nth-child(57):hover)) {
    .rosca__fatia:not(.rosca__fatia--57) { opacity: .35; }
    .rosca__fatia--57 { stroke-width: 8; }
    .rosca__centro-item--57 { display: block; }
}
.rosca:is(:has(.rosca__fatia--58:hover), :has(.rosca__legenda li:nth-child(58):hover)) {
    .rosca__fatia:not(.rosca__fatia--58) { opacity: .35; }
    .rosca__fatia--58 { stroke-width: 8; }
    .rosca__centro-item--58 { display: block; }
}
.rosca:is(:has(.rosca__fatia--59:hover), :has(.rosca__legenda li:nth-child(59):hover)) {
    .rosca__fatia:not(.rosca__fatia--59) { opacity: .35; }
    .rosca__fatia--59 { stroke-width: 8; }
    .rosca__centro-item--59 { display: block; }
}
.rosca:is(:has(.rosca__fatia--60:hover), :has(.rosca__legenda li:nth-child(60):hover)) {
    .rosca__fatia:not(.rosca__fatia--60) { opacity: .35; }
    .rosca__fatia--60 { stroke-width: 8; }
    .rosca__centro-item--60 { display: block; }
}
.rosca:is(:has(.rosca__fatia--61:hover), :has(.rosca__legenda li:nth-child(61):hover)) {
    .rosca__fatia:not(.rosca__fatia--61) { opacity: .35; }
    .rosca__fatia--61 { stroke-width: 8; }
    .rosca__centro-item--61 { display: block; }
}
.rosca:is(:has(.rosca__fatia--62:hover), :has(.rosca__legenda li:nth-child(62):hover)) {
    .rosca__fatia:not(.rosca__fatia--62) { opacity: .35; }
    .rosca__fatia--62 { stroke-width: 8; }
    .rosca__centro-item--62 { display: block; }
}
.rosca:is(:has(.rosca__fatia--63:hover), :has(.rosca__legenda li:nth-child(63):hover)) {
    .rosca__fatia:not(.rosca__fatia--63) { opacity: .35; }
    .rosca__fatia--63 { stroke-width: 8; }
    .rosca__centro-item--63 { display: block; }
}
.rosca:is(:has(.rosca__fatia--64:hover), :has(.rosca__legenda li:nth-child(64):hover)) {
    .rosca__fatia:not(.rosca__fatia--64) { opacity: .35; }
    .rosca__fatia--64 { stroke-width: 8; }
    .rosca__centro-item--64 { display: block; }
}
.rosca:is(:has(.rosca__fatia--65:hover), :has(.rosca__legenda li:nth-child(65):hover)) {
    .rosca__fatia:not(.rosca__fatia--65) { opacity: .35; }
    .rosca__fatia--65 { stroke-width: 8; }
    .rosca__centro-item--65 { display: block; }
}
.rosca:is(:has(.rosca__fatia--66:hover), :has(.rosca__legenda li:nth-child(66):hover)) {
    .rosca__fatia:not(.rosca__fatia--66) { opacity: .35; }
    .rosca__fatia--66 { stroke-width: 8; }
    .rosca__centro-item--66 { display: block; }
}
.rosca:is(:has(.rosca__fatia--67:hover), :has(.rosca__legenda li:nth-child(67):hover)) {
    .rosca__fatia:not(.rosca__fatia--67) { opacity: .35; }
    .rosca__fatia--67 { stroke-width: 8; }
    .rosca__centro-item--67 { display: block; }
}
.rosca:is(:has(.rosca__fatia--68:hover), :has(.rosca__legenda li:nth-child(68):hover)) {
    .rosca__fatia:not(.rosca__fatia--68) { opacity: .35; }
    .rosca__fatia--68 { stroke-width: 8; }
    .rosca__centro-item--68 { display: block; }
}
.rosca:is(:has(.rosca__fatia--69:hover), :has(.rosca__legenda li:nth-child(69):hover)) {
    .rosca__fatia:not(.rosca__fatia--69) { opacity: .35; }
    .rosca__fatia--69 { stroke-width: 8; }
    .rosca__centro-item--69 { display: block; }
}
.rosca:is(:has(.rosca__fatia--70:hover), :has(.rosca__legenda li:nth-child(70):hover)) {
    .rosca__fatia:not(.rosca__fatia--70) { opacity: .35; }
    .rosca__fatia--70 { stroke-width: 8; }
    .rosca__centro-item--70 { display: block; }
}
.rosca:is(:has(.rosca__fatia--71:hover), :has(.rosca__legenda li:nth-child(71):hover)) {
    .rosca__fatia:not(.rosca__fatia--71) { opacity: .35; }
    .rosca__fatia--71 { stroke-width: 8; }
    .rosca__centro-item--71 { display: block; }
}
.rosca:is(:has(.rosca__fatia--72:hover), :has(.rosca__legenda li:nth-child(72):hover)) {
    .rosca__fatia:not(.rosca__fatia--72) { opacity: .35; }
    .rosca__fatia--72 { stroke-width: 8; }
    .rosca__centro-item--72 { display: block; }
}
.rosca:is(:has(.rosca__fatia--73:hover), :has(.rosca__legenda li:nth-child(73):hover)) {
    .rosca__fatia:not(.rosca__fatia--73) { opacity: .35; }
    .rosca__fatia--73 { stroke-width: 8; }
    .rosca__centro-item--73 { display: block; }
}
.rosca:is(:has(.rosca__fatia--74:hover), :has(.rosca__legenda li:nth-child(74):hover)) {
    .rosca__fatia:not(.rosca__fatia--74) { opacity: .35; }
    .rosca__fatia--74 { stroke-width: 8; }
    .rosca__centro-item--74 { display: block; }
}
.rosca:is(:has(.rosca__fatia--75:hover), :has(.rosca__legenda li:nth-child(75):hover)) {
    .rosca__fatia:not(.rosca__fatia--75) { opacity: .35; }
    .rosca__fatia--75 { stroke-width: 8; }
    .rosca__centro-item--75 { display: block; }
}
.rosca:is(:has(.rosca__fatia--76:hover), :has(.rosca__legenda li:nth-child(76):hover)) {
    .rosca__fatia:not(.rosca__fatia--76) { opacity: .35; }
    .rosca__fatia--76 { stroke-width: 8; }
    .rosca__centro-item--76 { display: block; }
}
.rosca:is(:has(.rosca__fatia--77:hover), :has(.rosca__legenda li:nth-child(77):hover)) {
    .rosca__fatia:not(.rosca__fatia--77) { opacity: .35; }
    .rosca__fatia--77 { stroke-width: 8; }
    .rosca__centro-item--77 { display: block; }
}
.rosca:is(:has(.rosca__fatia--78:hover), :has(.rosca__legenda li:nth-child(78):hover)) {
    .rosca__fatia:not(.rosca__fatia--78) { opacity: .35; }
    .rosca__fatia--78 { stroke-width: 8; }
    .rosca__centro-item--78 { display: block; }
}
.rosca:is(:has(.rosca__fatia--79:hover), :has(.rosca__legenda li:nth-child(79):hover)) {
    .rosca__fatia:not(.rosca__fatia--79) { opacity: .35; }
    .rosca__fatia--79 { stroke-width: 8; }
    .rosca__centro-item--79 { display: block; }
}
.rosca:is(:has(.rosca__fatia--80:hover), :has(.rosca__legenda li:nth-child(80):hover)) {
    .rosca__fatia:not(.rosca__fatia--80) { opacity: .35; }
    .rosca__fatia--80 { stroke-width: 8; }
    .rosca__centro-item--80 { display: block; }
}
.rosca:is(:has(.rosca__fatia--81:hover), :has(.rosca__legenda li:nth-child(81):hover)) {
    .rosca__fatia:not(.rosca__fatia--81) { opacity: .35; }
    .rosca__fatia--81 { stroke-width: 8; }
    .rosca__centro-item--81 { display: block; }
}
.rosca:is(:has(.rosca__fatia--82:hover), :has(.rosca__legenda li:nth-child(82):hover)) {
    .rosca__fatia:not(.rosca__fatia--82) { opacity: .35; }
    .rosca__fatia--82 { stroke-width: 8; }
    .rosca__centro-item--82 { display: block; }
}
.rosca:is(:has(.rosca__fatia--83:hover), :has(.rosca__legenda li:nth-child(83):hover)) {
    .rosca__fatia:not(.rosca__fatia--83) { opacity: .35; }
    .rosca__fatia--83 { stroke-width: 8; }
    .rosca__centro-item--83 { display: block; }
}
.rosca:is(:has(.rosca__fatia--84:hover), :has(.rosca__legenda li:nth-child(84):hover)) {
    .rosca__fatia:not(.rosca__fatia--84) { opacity: .35; }
    .rosca__fatia--84 { stroke-width: 8; }
    .rosca__centro-item--84 { display: block; }
}
.rosca:is(:has(.rosca__fatia--85:hover), :has(.rosca__legenda li:nth-child(85):hover)) {
    .rosca__fatia:not(.rosca__fatia--85) { opacity: .35; }
    .rosca__fatia--85 { stroke-width: 8; }
    .rosca__centro-item--85 { display: block; }
}
.rosca:is(:has(.rosca__fatia--86:hover), :has(.rosca__legenda li:nth-child(86):hover)) {
    .rosca__fatia:not(.rosca__fatia--86) { opacity: .35; }
    .rosca__fatia--86 { stroke-width: 8; }
    .rosca__centro-item--86 { display: block; }
}
.rosca:is(:has(.rosca__fatia--87:hover), :has(.rosca__legenda li:nth-child(87):hover)) {
    .rosca__fatia:not(.rosca__fatia--87) { opacity: .35; }
    .rosca__fatia--87 { stroke-width: 8; }
    .rosca__centro-item--87 { display: block; }
}
.rosca:is(:has(.rosca__fatia--88:hover), :has(.rosca__legenda li:nth-child(88):hover)) {
    .rosca__fatia:not(.rosca__fatia--88) { opacity: .35; }
    .rosca__fatia--88 { stroke-width: 8; }
    .rosca__centro-item--88 { display: block; }
}
.rosca:is(:has(.rosca__fatia--89:hover), :has(.rosca__legenda li:nth-child(89):hover)) {
    .rosca__fatia:not(.rosca__fatia--89) { opacity: .35; }
    .rosca__fatia--89 { stroke-width: 8; }
    .rosca__centro-item--89 { display: block; }
}
.rosca:is(:has(.rosca__fatia--90:hover), :has(.rosca__legenda li:nth-child(90):hover)) {
    .rosca__fatia:not(.rosca__fatia--90) { opacity: .35; }
    .rosca__fatia--90 { stroke-width: 8; }
    .rosca__centro-item--90 { display: block; }
}
.rosca:is(:has(.rosca__fatia--91:hover), :has(.rosca__legenda li:nth-child(91):hover)) {
    .rosca__fatia:not(.rosca__fatia--91) { opacity: .35; }
    .rosca__fatia--91 { stroke-width: 8; }
    .rosca__centro-item--91 { display: block; }
}
.rosca:is(:has(.rosca__fatia--92:hover), :has(.rosca__legenda li:nth-child(92):hover)) {
    .rosca__fatia:not(.rosca__fatia--92) { opacity: .35; }
    .rosca__fatia--92 { stroke-width: 8; }
    .rosca__centro-item--92 { display: block; }
}
.rosca:is(:has(.rosca__fatia--93:hover), :has(.rosca__legenda li:nth-child(93):hover)) {
    .rosca__fatia:not(.rosca__fatia--93) { opacity: .35; }
    .rosca__fatia--93 { stroke-width: 8; }
    .rosca__centro-item--93 { display: block; }
}
.rosca:is(:has(.rosca__fatia--94:hover), :has(.rosca__legenda li:nth-child(94):hover)) {
    .rosca__fatia:not(.rosca__fatia--94) { opacity: .35; }
    .rosca__fatia--94 { stroke-width: 8; }
    .rosca__centro-item--94 { display: block; }
}
.rosca:is(:has(.rosca__fatia--95:hover), :has(.rosca__legenda li:nth-child(95):hover)) {
    .rosca__fatia:not(.rosca__fatia--95) { opacity: .35; }
    .rosca__fatia--95 { stroke-width: 8; }
    .rosca__centro-item--95 { display: block; }
}
.rosca:is(:has(.rosca__fatia--96:hover), :has(.rosca__legenda li:nth-child(96):hover)) {
    .rosca__fatia:not(.rosca__fatia--96) { opacity: .35; }
    .rosca__fatia--96 { stroke-width: 8; }
    .rosca__centro-item--96 { display: block; }
}
.rosca:is(:has(.rosca__fatia--97:hover), :has(.rosca__legenda li:nth-child(97):hover)) {
    .rosca__fatia:not(.rosca__fatia--97) { opacity: .35; }
    .rosca__fatia--97 { stroke-width: 8; }
    .rosca__centro-item--97 { display: block; }
}
.rosca:is(:has(.rosca__fatia--98:hover), :has(.rosca__legenda li:nth-child(98):hover)) {
    .rosca__fatia:not(.rosca__fatia--98) { opacity: .35; }
    .rosca__fatia--98 { stroke-width: 8; }
    .rosca__centro-item--98 { display: block; }
}
.rosca:is(:has(.rosca__fatia--99:hover), :has(.rosca__legenda li:nth-child(99):hover)) {
    .rosca__fatia:not(.rosca__fatia--99) { opacity: .35; }
    .rosca__fatia--99 { stroke-width: 8; }
    .rosca__centro-item--99 { display: block; }
}
.rosca:is(:has(.rosca__fatia--100:hover), :has(.rosca__legenda li:nth-child(100):hover)) {
    .rosca__fatia:not(.rosca__fatia--100) { opacity: .35; }
    .rosca__fatia--100 { stroke-width: 8; }
    .rosca__centro-item--100 { display: block; }
}
.rosca:is(:has(.rosca__fatia--101:hover), :has(.rosca__legenda li:nth-child(101):hover)) {
    .rosca__fatia:not(.rosca__fatia--101) { opacity: .35; }
    .rosca__fatia--101 { stroke-width: 8; }
    .rosca__centro-item--101 { display: block; }
}
.rosca:is(:has(.rosca__fatia--102:hover), :has(.rosca__legenda li:nth-child(102):hover)) {
    .rosca__fatia:not(.rosca__fatia--102) { opacity: .35; }
    .rosca__fatia--102 { stroke-width: 8; }
    .rosca__centro-item--102 { display: block; }
}
.rosca:is(:has(.rosca__fatia--103:hover), :has(.rosca__legenda li:nth-child(103):hover)) {
    .rosca__fatia:not(.rosca__fatia--103) { opacity: .35; }
    .rosca__fatia--103 { stroke-width: 8; }
    .rosca__centro-item--103 { display: block; }
}
.rosca:is(:has(.rosca__fatia--104:hover), :has(.rosca__legenda li:nth-child(104):hover)) {
    .rosca__fatia:not(.rosca__fatia--104) { opacity: .35; }
    .rosca__fatia--104 { stroke-width: 8; }
    .rosca__centro-item--104 { display: block; }
}
.rosca:is(:has(.rosca__fatia--105:hover), :has(.rosca__legenda li:nth-child(105):hover)) {
    .rosca__fatia:not(.rosca__fatia--105) { opacity: .35; }
    .rosca__fatia--105 { stroke-width: 8; }
    .rosca__centro-item--105 { display: block; }
}
.rosca:is(:has(.rosca__fatia--106:hover), :has(.rosca__legenda li:nth-child(106):hover)) {
    .rosca__fatia:not(.rosca__fatia--106) { opacity: .35; }
    .rosca__fatia--106 { stroke-width: 8; }
    .rosca__centro-item--106 { display: block; }
}
.rosca:is(:has(.rosca__fatia--107:hover), :has(.rosca__legenda li:nth-child(107):hover)) {
    .rosca__fatia:not(.rosca__fatia--107) { opacity: .35; }
    .rosca__fatia--107 { stroke-width: 8; }
    .rosca__centro-item--107 { display: block; }
}
.rosca:is(:has(.rosca__fatia--108:hover), :has(.rosca__legenda li:nth-child(108):hover)) {
    .rosca__fatia:not(.rosca__fatia--108) { opacity: .35; }
    .rosca__fatia--108 { stroke-width: 8; }
    .rosca__centro-item--108 { display: block; }
}
.rosca:is(:has(.rosca__fatia--109:hover), :has(.rosca__legenda li:nth-child(109):hover)) {
    .rosca__fatia:not(.rosca__fatia--109) { opacity: .35; }
    .rosca__fatia--109 { stroke-width: 8; }
    .rosca__centro-item--109 { display: block; }
}
.rosca:is(:has(.rosca__fatia--110:hover), :has(.rosca__legenda li:nth-child(110):hover)) {
    .rosca__fatia:not(.rosca__fatia--110) { opacity: .35; }
    .rosca__fatia--110 { stroke-width: 8; }
    .rosca__centro-item--110 { display: block; }
}
.rosca:is(:has(.rosca__fatia--111:hover), :has(.rosca__legenda li:nth-child(111):hover)) {
    .rosca__fatia:not(.rosca__fatia--111) { opacity: .35; }
    .rosca__fatia--111 { stroke-width: 8; }
    .rosca__centro-item--111 { display: block; }
}
.rosca:is(:has(.rosca__fatia--112:hover), :has(.rosca__legenda li:nth-child(112):hover)) {
    .rosca__fatia:not(.rosca__fatia--112) { opacity: .35; }
    .rosca__fatia--112 { stroke-width: 8; }
    .rosca__centro-item--112 { display: block; }
}
.rosca:is(:has(.rosca__fatia--113:hover), :has(.rosca__legenda li:nth-child(113):hover)) {
    .rosca__fatia:not(.rosca__fatia--113) { opacity: .35; }
    .rosca__fatia--113 { stroke-width: 8; }
    .rosca__centro-item--113 { display: block; }
}
.rosca:is(:has(.rosca__fatia--114:hover), :has(.rosca__legenda li:nth-child(114):hover)) {
    .rosca__fatia:not(.rosca__fatia--114) { opacity: .35; }
    .rosca__fatia--114 { stroke-width: 8; }
    .rosca__centro-item--114 { display: block; }
}
.rosca:is(:has(.rosca__fatia--115:hover), :has(.rosca__legenda li:nth-child(115):hover)) {
    .rosca__fatia:not(.rosca__fatia--115) { opacity: .35; }
    .rosca__fatia--115 { stroke-width: 8; }
    .rosca__centro-item--115 { display: block; }
}
.rosca:is(:has(.rosca__fatia--116:hover), :has(.rosca__legenda li:nth-child(116):hover)) {
    .rosca__fatia:not(.rosca__fatia--116) { opacity: .35; }
    .rosca__fatia--116 { stroke-width: 8; }
    .rosca__centro-item--116 { display: block; }
}
.rosca:is(:has(.rosca__fatia--117:hover), :has(.rosca__legenda li:nth-child(117):hover)) {
    .rosca__fatia:not(.rosca__fatia--117) { opacity: .35; }
    .rosca__fatia--117 { stroke-width: 8; }
    .rosca__centro-item--117 { display: block; }
}
.rosca:is(:has(.rosca__fatia--118:hover), :has(.rosca__legenda li:nth-child(118):hover)) {
    .rosca__fatia:not(.rosca__fatia--118) { opacity: .35; }
    .rosca__fatia--118 { stroke-width: 8; }
    .rosca__centro-item--118 { display: block; }
}
.rosca:is(:has(.rosca__fatia--119:hover), :has(.rosca__legenda li:nth-child(119):hover)) {
    .rosca__fatia:not(.rosca__fatia--119) { opacity: .35; }
    .rosca__fatia--119 { stroke-width: 8; }
    .rosca__centro-item--119 { display: block; }
}
.rosca:is(:has(.rosca__fatia--120:hover), :has(.rosca__legenda li:nth-child(120):hover)) {
    .rosca__fatia:not(.rosca__fatia--120) { opacity: .35; }
    .rosca__fatia--120 { stroke-width: 8; }
    .rosca__centro-item--120 { display: block; }
}

/* ---------- Cartao com grafico (Entra): numero no topo, pizza ou anel no meio, legenda com as partes ---------- */

.paineis-entra {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.grafico-cartao { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; text-align: center; }
.grafico-cartao__topo { display: flex; flex-direction: column; align-items: center; gap: 2px; color: inherit; text-decoration: none; border-radius: 8px; padding: 2px 8px; }
a.grafico-cartao__topo--link:hover { background: var(--fundo); }
.grafico-cartao__valor { font-size: 26px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.grafico-cartao__rotulo { font-size: 13.5px; color: var(--texto-2); }
.grafico-cartao__svg { width: 104px; height: 104px; overflow: visible; }
.grafico-cartao__fundo { fill: none; stroke: var(--borda); stroke-width: 5; }
.grafico-cartao__fundo--pizza { stroke-width: 18; }
.grafico-cartao__pizza { fill: none; stroke-width: 18; transition: opacity .15s ease; }
.grafico-cartao__anel { fill: none; stroke-width: 5; stroke-linecap: round; }
.grafico-cartao__percentual { font-size: 8px; font-weight: 600; fill: var(--texto); }
.grafico-cartao__sub { font-size: 3.6px; fill: var(--texto-2); }
.grafico-cartao__legenda { display: grid; gap: 8px; width: 100%; margin: 0; padding: 0; list-style: none; text-align: left; }
.grafico-cartao__legenda li { display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: 8px; align-items: stretch; }
.grafico-cartao__marca { border-radius: 2px; }
.grafico-cartao__legenda a, .grafico-cartao__legenda li > span:last-child { display: flex; flex-direction: column; color: inherit; text-decoration: none; border-radius: 6px; padding: 1px 6px; }
.grafico-cartao__legenda a:hover { background: var(--fundo); }
.grafico-cartao__rotulo-parte { font-size: 12.5px; color: var(--texto-2); }
.grafico-cartao__legenda strong { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.grafico-cartao__item--zero { opacity: .45; }
.grafico-cartao:has(.grafico-cartao__pizza:hover) .grafico-cartao__pizza:not(:hover) { opacity: .4; }

/* Numeros ao lado dos cartoes com grafico: rotulo e valor em linha, como no AdminDroid. */
.numeros-entra { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; align-content: start; }

/* Topo das telas do Entra: cartoes com grafico lado a lado e, a direita, os numeros em duas colunas. */
.entra-topo {
    display: grid;
    grid-template-columns: repeat(3, minmax(170px, 210px)) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 12px;
}
.entra-topo > .numeros-entra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.numeros-entra--linha { margin-bottom: 12px; }
@media (max-width: 1100px) {
    .entra-topo { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
    .entra-topo > .numeros-entra { grid-column: 1 / -1; }
}

/* Embutido numa coluna da Visao geral: grafico a esquerda, legenda a direita, sem moldura. */
.grafico-cartao--embutido { flex-direction: row; align-items: center; padding: 14px 16px; gap: 16px; border-bottom: 1px solid var(--borda); }
.grafico-cartao--embutido .grafico-cartao__svg { width: 84px; height: 84px; flex: none; }

/* Visao geral do Entra: tres colunas (licenciados, usuarios, grupos), cada uma um cartao com o numero no topo. */
.colunas-entra { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 1100px) { .colunas-entra { grid-template-columns: 1fr; } }
.coluna-entra { padding: 0; overflow: hidden; }
.coluna-entra__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--borda); color: inherit; text-decoration: none; }
a.coluna-entra__topo:hover { background: var(--fundo); }
.coluna-entra__topo span { font-size: 15px; font-weight: 600; }
.coluna-entra__topo strong { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.coluna-entra__corpo { padding: 16px; }
.coluna-entra__corpo .rosca__legenda { max-height: 300px; overflow-y: auto; padding-right: 6px; }
.linha-entra { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--borda); color: inherit; text-decoration: none; }
.linha-entra:last-child { border-bottom: none; }
a.linha-entra:hover { background: var(--fundo); }
.linha-entra span { font-size: 13.5px; color: var(--texto-2); }
.linha-entra strong { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.linha-entra--zero strong, .linha-entra--zero span { opacity: .5; }

/* Licencas: cartao de licenciados ao lado da rosca grande de servicos (legenda com rolagem propria). */
.licencas-topo { display: grid; grid-template-columns: minmax(190px, 230px) minmax(0, 1fr); gap: 12px; align-items: stretch; margin-bottom: 12px; }
.licencas-topo__servicos { margin: 0; }
.licencas-topo__servicos .rosca__legenda { max-height: 260px; overflow-y: auto; padding-right: 6px; }
@media (max-width: 900px) { .licencas-topo { grid-template-columns: 1fr; } }

/* Assinaturas: painel de medidores. Tres medidores grandes por tipo e uma grade uniforme, 4 por linha, da assinatura mais cheia para a mais vazia. */
.medidores-topo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.medidor-tipo { display: flex; align-items: center; gap: 16px; padding: 16px; }
.medidor-tipo__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.medidor-tipo__total { font-size: 26px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.medidor-tipo__nome { font-size: 14px; font-weight: 600; }
.medidor-tipo .assinaturas__estados { margin-top: 6px; }
.medidores-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.medidor-assinatura { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px; text-align: center; }
.medidor-assinatura h3 { margin: 8px 0 2px; font-size: 14px; font-weight: 600; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.medidor { flex: none; }
.medidor__valor { font-size: 8px; font-weight: 600; fill: var(--texto); }
.medidor__sub { font-size: 3.6px; fill: var(--texto-2); }
@media (max-width: 1100px) { .medidores-topo { grid-template-columns: 1fr; } .medidores-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Grupos: quatro cartoes com grafico e os numeros ao lado. */
.entra-topo--quatro { grid-template-columns: repeat(4, minmax(160px, 200px)) minmax(0, 1fr); }
@media (max-width: 1300px) { .entra-topo--quatro { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .entra-topo--quatro > .numeros-entra { grid-column: 1 / -1; } }
.grafico-cartao__lado { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; }
.grafico-cartao__titulo-embutido { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; text-align: left; }
.grafico-cartao__titulo-embutido span { font-size: 13.5px; color: var(--texto-2); }
.grafico-cartao__titulo-embutido strong { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.grafico-cartao--embutido .grafico-cartao__legenda { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.paineis-entra { align-items: start; }
.entra-topo--quatro > .numeros-entra { grid-template-columns: minmax(0, 1fr); gap: 8px; }

/* Barras com percentual (Seguranca): rotulo e numero a esquerda, barra e % a direita. */
.barras-pct { display: grid; gap: 4px; padding: 12px 16px; border-bottom: 1px solid var(--borda); }
.barras-pct__titulo { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; }
.barras-pct__linha { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(60px, 1.2fr) 40px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; color: inherit; text-decoration: none; font-size: 13px; }
a.barras-pct__linha:hover { background: var(--fundo); }
.barras-pct__rotulo { color: var(--texto-2); }
.barras-pct__valor { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.barras-pct__barra { display: block; height: 8px; border-radius: 4px; background: var(--borda); overflow: hidden; }
.barras-pct__barra i { display: block; height: 100%; background: var(--serie-1); border-radius: 4px; }
.barras-pct__pct { text-align: right; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.barras-pct__linha--zero { opacity: .5; }

/* Telas de Seguranca: colunas lado a lado, como as do AdminDroid. */
.colunas-seguranca { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; margin-bottom: 12px; }
@media (max-width: 1200px) { .colunas-seguranca { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .colunas-seguranca { grid-template-columns: 1fr; } }
.coluna-entra__vazio { padding: 16px; margin: 0; }

.colunas-seguranca--cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1400px) { .colunas-seguranca--cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .colunas-seguranca--cinco { grid-template-columns: 1fr; } }
.barras-pct__linha { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
.barras-pct__barra { grid-column: 1; }
.barras-pct__pct { grid-column: 2; }
/* Colunas estreitas (Senha, cinco colunas): grafico em cima, legenda embaixo em duas colunas. */
.colunas-seguranca--cinco .grafico-cartao--embutido { flex-direction: column; align-items: stretch; }
.colunas-seguranca--cinco .grafico-cartao--embutido .grafico-cartao__svg { align-self: center; }
.colunas-seguranca--cinco .grafico-cartao--embutido .grafico-cartao__legenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.colunas-seguranca--cinco .linha-entra strong { white-space: nowrap; font-size: 17px; }
.colunas-seguranca--cinco .grafico-cartao--embutido .grafico-cartao__legenda { grid-template-columns: minmax(0, 1fr); }
.entra-topo--quatro > .numeros-entra--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.numeros-entra--duas .estatistica { padding: 10px 12px; }

/* ---------- Relatorios: catalogo (areas, abas, grupos) e a tela de cada relatorio ---------- */

.relatorios { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; }
.relatorios__areas { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 12px; }
.relatorios__area { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: 10px; color: inherit; text-decoration: none; font-size: 14px; }
.relatorios__area .texto-suave { font-variant-numeric: tabular-nums; }
.relatorios__area:hover { background: var(--cartao); }
.relatorios__area.ativo { background: var(--cartao); font-weight: 600; color: var(--primario); }
.relatorios__conteudo { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.relatorios__busca { display: flex; align-items: center; gap: 10px; max-width: 560px; height: 44px; padding: 0 6px 0 16px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 22px; color: var(--texto-2); }
.relatorios__busca:focus-within { border-color: var(--primario); }
.relatorios__busca svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.relatorios__busca input[type=search] { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--texto); }
.relatorios__buscar { height: 32px; padding: 0 14px; border: 0; border-radius: 16px; background: var(--superficie-suave); font: inherit; font-size: 13.5px; color: var(--texto); cursor: pointer; }
.relatorios__buscar:hover { background: var(--ambar-suave); color: var(--primario); }

.relatorios__abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); }
.relatorios__aba { padding: 8px 14px; color: var(--texto-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 14px; }
.relatorios__aba.ativo { color: var(--texto); border-bottom-color: var(--primario); font-weight: 600; }

.relatorios__grupos { columns: 3 280px; column-gap: 14px; }
.relatorios__grupo { break-inside: avoid; margin: 0 0 14px; padding: 16px 16px 10px; }
.relatorios__cabeca { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.relatorios__icone { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--ambar-suave); color: var(--primario); }
.icone-grupo { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.relatorios__titulo { display: flex; flex-direction: column; min-width: 0; }
.relatorios__titulo h2 { margin: 0; font-size: 15px; font-weight: 650; }
.relatorios__titulo .texto-suave { font-size: 12px; }
.relatorios__grupo ul { margin: 0; padding: 0; list-style: none; display: grid; }
.relatorios__grupo li + li { border-top: 1px solid var(--superficie-suave); }
.relatorios__grupo a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 8px; color: inherit; text-decoration: none; font-size: 13.5px; }
.relatorios__grupo a:hover { background: var(--fundo); color: var(--primario); }
.relatorios__seta { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateX(-3px); transition: opacity 0.12s ease, transform 0.12s ease; }
.relatorios__grupo a:hover .relatorios__seta, .relatorios__grupo a:focus-visible .relatorios__seta { opacity: 1; transform: none; }

.relatorios__achados { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.relatorios__achados li { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; }

/* A tela de um relatorio: lista dos outros relatorios ao lado, topo com acoes, filtros, grafico e tabela. */
.trilha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--texto-2); margin-bottom: 10px; }
.rel { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 16px; align-items: start; }
.rel-icone { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.rel-lista { position: sticky; top: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 24px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--borda) transparent; }
.rel-lista__busca { align-items: center; gap: 8px; margin-bottom: 6px; padding: 0 12px; height: 36px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 18px; color: var(--texto-2); }
.rel-lista__busca:focus-within { border-color: var(--primario); }
.rel-lista__busca input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--texto); }
.rel-lista__grupo { display: flex; flex-direction: column; gap: 1px; }
.rel-lista__titulo { margin: 12px 10px 4px; font-size: 12px; font-weight: 600; color: var(--texto-2); }
.rel-lista__item { padding: 6px 10px; border-radius: 8px; font-size: 13.5px; color: var(--texto); text-decoration: none; }
.rel-lista__item:hover { background: var(--cartao); }
.rel-lista__item.ativo { background: var(--ambar-suave); color: var(--primario); font-weight: 600; }
.rel-lista__item[hidden], .rel-lista__grupo[hidden] { display: none; }

.rel-corpo { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rel-corpo > .erros, .rel-corpo > .relatorio-barra { margin: 0; }
.rel-aviso { margin: 0; }

.rel-topo { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 20px; }
.rel-topo__nome { margin: 0 0 4px; font-size: 20px; font-weight: 650; letter-spacing: -0.01em; }
.rel-topo p { margin: 0; }
.rel-topo__lado { display: flex; align-items: center; gap: 20px; flex: none; }
.rel-topo__total { display: flex; flex-direction: column; align-items: flex-end; padding-left: 20px; border-left: 1px solid var(--borda); }
.rel-topo__total strong { font-size: 28px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }

.rel-ferramentas { display: flex; gap: 2px; padding: 3px; background: var(--fundo); border-radius: 12px; }
.rel-menu { position: relative; }
.rel-ferr { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px; font-size: 13.5px; color: var(--texto); cursor: pointer; list-style: none; white-space: nowrap; }
.rel-ferr::-webkit-details-marker { display: none; }
.rel-ferr:hover, .rel-menu[open] > .rel-ferr { background: var(--cartao); color: var(--primario); }
.rel-ferr em { font-style: normal; font-size: 12px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.rel-menu__painel { position: absolute; z-index: 25; top: calc(100% + 8px); right: 0; padding: 14px 16px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; }
.rel-menu__painel--lista { display: grid; min-width: 180px; padding: 6px; }
.rel-menu__painel--lista a { padding: 8px 10px; border-radius: 8px; color: var(--texto); text-decoration: none; font-size: 13.5px; }
.rel-menu__painel--lista a:hover { background: var(--superficie-suave); color: var(--primario); }

.rel-envio { width: min(520px, calc(100vw - 48px)); }
.rel-envio__form { display: grid; gap: 10px; }
.rel-envio__form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--texto-2); }
.rel-envio__form input, .rel-envio__form select, .rel-envio__form textarea { width: 100%; }
.rel-envio__fim { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12.5px; }
.rel-envio .erros { margin: 10px 0 0; }

.rel-colunas { width: min(660px, calc(100vw - 48px)); }
.rel-colunas__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 16px; max-height: 50vh; overflow-y: auto; font-size: 13.5px; }
.rel-colunas__lista label { display: flex; gap: 6px; align-items: center; }
.rel-colunas__lista input { accent-color: var(--primario); }
.rel-colunas__fim { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borda); }

/* Busca e filtros: so a busca e o botao Filtros a vista; os filtros abrem num painel logo abaixo, e o que esta filtrando vira selo com x. */
.rel-busca { display: flex; flex-direction: column; gap: 10px; }
.rel-busca__linha { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.rel-busca__campo { display: flex; flex: 1 1 320px; max-width: 560px; align-items: center; gap: 10px; height: 42px; padding: 0 16px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 21px; color: var(--texto-2); }
.rel-busca__campo:focus-within { border-color: var(--primario); }
.rel-busca__campo input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14.5px; color: var(--texto); }
.rel-filtros { position: static; }
.rel-filtros__botao { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 21px; font-size: 14px; color: var(--texto); cursor: pointer; list-style: none; }
.rel-filtros__botao::-webkit-details-marker { display: none; }
.rel-filtros__botao:hover, .rel-filtros[open] > .rel-filtros__botao { border-color: var(--primario); color: var(--primario); }
.rel-filtros__botao em { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ambar-suave); color: var(--primario); font-style: normal; font-size: 12px; font-weight: 600; }
.rel-filtros__painel { position: absolute; z-index: 24; top: calc(100% + 8px); left: 0; right: 0; max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; }
.rel-filtros__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 16px; }
.rel-filtros__mais > summary { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 13.5px; font-weight: 600; color: var(--primario); cursor: pointer; list-style: none; }
.rel-filtros__mais > summary::-webkit-details-marker { display: none; }
.rel-filtros__mais > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform 0.12s ease; }
.rel-filtros__mais[open] > summary::before { transform: rotate(45deg); }
.rel-filtros__mais > .rel-filtros__grade { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--superficie-suave); }
.rel-filtros__fim { display: flex; justify-content: flex-end; }
.relatorio-filtro { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12px; color: var(--texto-2); }
.relatorio-filtro select { width: 100%; }
.relatorio-filtro--escolhido > span { color: var(--primario); font-weight: 600; }

.rel-ativos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; }
.rel-ativo { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 12px; border-radius: 999px; background: var(--ambar-suave); color: var(--primario); text-decoration: none; font-weight: 500; }
.rel-ativo span { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 14px; line-height: 1; }
.rel-ativo:hover span { background: var(--cartao); }
.rel-ativos__limpar { margin-left: 4px; font-size: 13px; }

/* Grafico acima da tabela */
.rel-grafico { padding: 4px 20px 16px; }
.rel-grafico__abas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--borda); }
.rel-grafico__aba { padding: 12px 12px 10px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 13.5px; color: var(--texto-2); text-decoration: none; }
.rel-grafico__aba:hover { color: var(--texto); }
.rel-grafico__aba.ativo { color: var(--texto); font-weight: 600; border-bottom-color: var(--primario); }
.rel-grafico__corpo { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 32px; align-items: center; padding-top: 16px; }
.rel-grafico__rosca { position: relative; width: 168px; height: 168px; }
.rel-grafico__rosca svg { width: 100%; height: 100%; overflow: visible; }
.rel-grafico__vazio { margin: 0; padding: 18px 0 4px; }
.rel-grafico__fundo { fill: none; stroke: var(--superficie-suave); stroke-width: 6; }
.rel-grafico__fatia { fill: none; stroke-width: 6px; }
.rel-grafico__fatia.ativa { stroke-width: 8px; }
/* Centro da rosca: o total, ou a parte sob o mouse. */
.rel-grafico__meio { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.rel-grafico__total, .rel-grafico__partes > span { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; max-width: 112px; text-align: center; transition: opacity 0.12s ease; }
.rel-grafico__partes { display: grid; grid-area: 1 / 1; place-items: center; }
.rel-grafico__partes > span { opacity: 0; }
.rel-grafico__meio strong { font-size: 26px; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rel-grafico__meio span span { font-size: 12px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 112px; }

/* Realce ao passar o mouse (na rosca ou na legenda): a parte engrossa e as outras esmaecem; sem sombra. */
.rel-grafico__link { cursor: pointer; }
.rel-grafico__link:focus-visible { outline: none; }
.rel-grafico__fatia { transition: stroke-width 0.14s ease, opacity 0.14s ease; }
.rel-grafico__corpo:has(.rel-grafico__link:hover, .rel-grafico__legenda > li:hover) .rel-grafico__fatia { opacity: calc(0.35 + 0.65 * var(--realce, 0)); stroke-width: calc(6px + 2.6px * var(--realce, 0)); }
.rel-grafico__corpo:has(.rel-grafico__link:hover, .rel-grafico__legenda > li:hover) .rel-grafico__total { opacity: 0; }
.rel-grafico__corpo:has(.rel-grafico__link:hover, .rel-grafico__legenda > li:hover) .rel-grafico__partes > span { opacity: var(--realce, 0); }
.rel-grafico__corpo:has(.rel-grafico__link:hover, .rel-grafico__legenda > li:hover) .rel-grafico__item { background: rgb(243 239 230 / calc(var(--realce, 0) * 100%)); }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(1):hover, .rel-grafico__legenda > li:nth-child(1):hover) .rel-grafico__link:nth-of-type(1) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(1):hover, .rel-grafico__legenda > li:nth-child(1):hover) .rel-grafico__partes > span:nth-child(1), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(1):hover, .rel-grafico__legenda > li:nth-child(1):hover) .rel-grafico__legenda > li:nth-child(1) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(2):hover, .rel-grafico__legenda > li:nth-child(2):hover) .rel-grafico__link:nth-of-type(2) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(2):hover, .rel-grafico__legenda > li:nth-child(2):hover) .rel-grafico__partes > span:nth-child(2), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(2):hover, .rel-grafico__legenda > li:nth-child(2):hover) .rel-grafico__legenda > li:nth-child(2) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(3):hover, .rel-grafico__legenda > li:nth-child(3):hover) .rel-grafico__link:nth-of-type(3) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(3):hover, .rel-grafico__legenda > li:nth-child(3):hover) .rel-grafico__partes > span:nth-child(3), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(3):hover, .rel-grafico__legenda > li:nth-child(3):hover) .rel-grafico__legenda > li:nth-child(3) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(4):hover, .rel-grafico__legenda > li:nth-child(4):hover) .rel-grafico__link:nth-of-type(4) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(4):hover, .rel-grafico__legenda > li:nth-child(4):hover) .rel-grafico__partes > span:nth-child(4), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(4):hover, .rel-grafico__legenda > li:nth-child(4):hover) .rel-grafico__legenda > li:nth-child(4) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(5):hover, .rel-grafico__legenda > li:nth-child(5):hover) .rel-grafico__link:nth-of-type(5) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(5):hover, .rel-grafico__legenda > li:nth-child(5):hover) .rel-grafico__partes > span:nth-child(5), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(5):hover, .rel-grafico__legenda > li:nth-child(5):hover) .rel-grafico__legenda > li:nth-child(5) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(6):hover, .rel-grafico__legenda > li:nth-child(6):hover) .rel-grafico__link:nth-of-type(6) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(6):hover, .rel-grafico__legenda > li:nth-child(6):hover) .rel-grafico__partes > span:nth-child(6), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(6):hover, .rel-grafico__legenda > li:nth-child(6):hover) .rel-grafico__legenda > li:nth-child(6) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(7):hover, .rel-grafico__legenda > li:nth-child(7):hover) .rel-grafico__link:nth-of-type(7) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(7):hover, .rel-grafico__legenda > li:nth-child(7):hover) .rel-grafico__partes > span:nth-child(7), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(7):hover, .rel-grafico__legenda > li:nth-child(7):hover) .rel-grafico__legenda > li:nth-child(7) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(8):hover, .rel-grafico__legenda > li:nth-child(8):hover) .rel-grafico__link:nth-of-type(8) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(8):hover, .rel-grafico__legenda > li:nth-child(8):hover) .rel-grafico__partes > span:nth-child(8), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(8):hover, .rel-grafico__legenda > li:nth-child(8):hover) .rel-grafico__legenda > li:nth-child(8) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(9):hover, .rel-grafico__legenda > li:nth-child(9):hover) .rel-grafico__link:nth-of-type(9) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(9):hover, .rel-grafico__legenda > li:nth-child(9):hover) .rel-grafico__partes > span:nth-child(9), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(9):hover, .rel-grafico__legenda > li:nth-child(9):hover) .rel-grafico__legenda > li:nth-child(9) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(10):hover, .rel-grafico__legenda > li:nth-child(10):hover) .rel-grafico__link:nth-of-type(10) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(10):hover, .rel-grafico__legenda > li:nth-child(10):hover) .rel-grafico__partes > span:nth-child(10), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(10):hover, .rel-grafico__legenda > li:nth-child(10):hover) .rel-grafico__legenda > li:nth-child(10) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(11):hover, .rel-grafico__legenda > li:nth-child(11):hover) .rel-grafico__link:nth-of-type(11) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(11):hover, .rel-grafico__legenda > li:nth-child(11):hover) .rel-grafico__partes > span:nth-child(11), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(11):hover, .rel-grafico__legenda > li:nth-child(11):hover) .rel-grafico__legenda > li:nth-child(11) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(12):hover, .rel-grafico__legenda > li:nth-child(12):hover) .rel-grafico__link:nth-of-type(12) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(12):hover, .rel-grafico__legenda > li:nth-child(12):hover) .rel-grafico__partes > span:nth-child(12), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(12):hover, .rel-grafico__legenda > li:nth-child(12):hover) .rel-grafico__legenda > li:nth-child(12) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(13):hover, .rel-grafico__legenda > li:nth-child(13):hover) .rel-grafico__link:nth-of-type(13) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(13):hover, .rel-grafico__legenda > li:nth-child(13):hover) .rel-grafico__partes > span:nth-child(13), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(13):hover, .rel-grafico__legenda > li:nth-child(13):hover) .rel-grafico__legenda > li:nth-child(13) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(14):hover, .rel-grafico__legenda > li:nth-child(14):hover) .rel-grafico__link:nth-of-type(14) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(14):hover, .rel-grafico__legenda > li:nth-child(14):hover) .rel-grafico__partes > span:nth-child(14), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(14):hover, .rel-grafico__legenda > li:nth-child(14):hover) .rel-grafico__legenda > li:nth-child(14) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(15):hover, .rel-grafico__legenda > li:nth-child(15):hover) .rel-grafico__link:nth-of-type(15) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(15):hover, .rel-grafico__legenda > li:nth-child(15):hover) .rel-grafico__partes > span:nth-child(15), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(15):hover, .rel-grafico__legenda > li:nth-child(15):hover) .rel-grafico__legenda > li:nth-child(15) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(16):hover, .rel-grafico__legenda > li:nth-child(16):hover) .rel-grafico__link:nth-of-type(16) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(16):hover, .rel-grafico__legenda > li:nth-child(16):hover) .rel-grafico__partes > span:nth-child(16), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(16):hover, .rel-grafico__legenda > li:nth-child(16):hover) .rel-grafico__legenda > li:nth-child(16) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(17):hover, .rel-grafico__legenda > li:nth-child(17):hover) .rel-grafico__link:nth-of-type(17) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(17):hover, .rel-grafico__legenda > li:nth-child(17):hover) .rel-grafico__partes > span:nth-child(17), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(17):hover, .rel-grafico__legenda > li:nth-child(17):hover) .rel-grafico__legenda > li:nth-child(17) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(18):hover, .rel-grafico__legenda > li:nth-child(18):hover) .rel-grafico__link:nth-of-type(18) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(18):hover, .rel-grafico__legenda > li:nth-child(18):hover) .rel-grafico__partes > span:nth-child(18), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(18):hover, .rel-grafico__legenda > li:nth-child(18):hover) .rel-grafico__legenda > li:nth-child(18) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(19):hover, .rel-grafico__legenda > li:nth-child(19):hover) .rel-grafico__link:nth-of-type(19) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(19):hover, .rel-grafico__legenda > li:nth-child(19):hover) .rel-grafico__partes > span:nth-child(19), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(19):hover, .rel-grafico__legenda > li:nth-child(19):hover) .rel-grafico__legenda > li:nth-child(19) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(20):hover, .rel-grafico__legenda > li:nth-child(20):hover) .rel-grafico__link:nth-of-type(20) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(20):hover, .rel-grafico__legenda > li:nth-child(20):hover) .rel-grafico__partes > span:nth-child(20), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(20):hover, .rel-grafico__legenda > li:nth-child(20):hover) .rel-grafico__legenda > li:nth-child(20) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(21):hover, .rel-grafico__legenda > li:nth-child(21):hover) .rel-grafico__link:nth-of-type(21) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(21):hover, .rel-grafico__legenda > li:nth-child(21):hover) .rel-grafico__partes > span:nth-child(21), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(21):hover, .rel-grafico__legenda > li:nth-child(21):hover) .rel-grafico__legenda > li:nth-child(21) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(22):hover, .rel-grafico__legenda > li:nth-child(22):hover) .rel-grafico__link:nth-of-type(22) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(22):hover, .rel-grafico__legenda > li:nth-child(22):hover) .rel-grafico__partes > span:nth-child(22), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(22):hover, .rel-grafico__legenda > li:nth-child(22):hover) .rel-grafico__legenda > li:nth-child(22) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(23):hover, .rel-grafico__legenda > li:nth-child(23):hover) .rel-grafico__link:nth-of-type(23) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(23):hover, .rel-grafico__legenda > li:nth-child(23):hover) .rel-grafico__partes > span:nth-child(23), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(23):hover, .rel-grafico__legenda > li:nth-child(23):hover) .rel-grafico__legenda > li:nth-child(23) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(24):hover, .rel-grafico__legenda > li:nth-child(24):hover) .rel-grafico__link:nth-of-type(24) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(24):hover, .rel-grafico__legenda > li:nth-child(24):hover) .rel-grafico__partes > span:nth-child(24), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(24):hover, .rel-grafico__legenda > li:nth-child(24):hover) .rel-grafico__legenda > li:nth-child(24) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(25):hover, .rel-grafico__legenda > li:nth-child(25):hover) .rel-grafico__link:nth-of-type(25) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(25):hover, .rel-grafico__legenda > li:nth-child(25):hover) .rel-grafico__partes > span:nth-child(25), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(25):hover, .rel-grafico__legenda > li:nth-child(25):hover) .rel-grafico__legenda > li:nth-child(25) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(26):hover, .rel-grafico__legenda > li:nth-child(26):hover) .rel-grafico__link:nth-of-type(26) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(26):hover, .rel-grafico__legenda > li:nth-child(26):hover) .rel-grafico__partes > span:nth-child(26), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(26):hover, .rel-grafico__legenda > li:nth-child(26):hover) .rel-grafico__legenda > li:nth-child(26) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(27):hover, .rel-grafico__legenda > li:nth-child(27):hover) .rel-grafico__link:nth-of-type(27) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(27):hover, .rel-grafico__legenda > li:nth-child(27):hover) .rel-grafico__partes > span:nth-child(27), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(27):hover, .rel-grafico__legenda > li:nth-child(27):hover) .rel-grafico__legenda > li:nth-child(27) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(28):hover, .rel-grafico__legenda > li:nth-child(28):hover) .rel-grafico__link:nth-of-type(28) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(28):hover, .rel-grafico__legenda > li:nth-child(28):hover) .rel-grafico__partes > span:nth-child(28), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(28):hover, .rel-grafico__legenda > li:nth-child(28):hover) .rel-grafico__legenda > li:nth-child(28) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(29):hover, .rel-grafico__legenda > li:nth-child(29):hover) .rel-grafico__link:nth-of-type(29) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(29):hover, .rel-grafico__legenda > li:nth-child(29):hover) .rel-grafico__partes > span:nth-child(29), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(29):hover, .rel-grafico__legenda > li:nth-child(29):hover) .rel-grafico__legenda > li:nth-child(29) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(30):hover, .rel-grafico__legenda > li:nth-child(30):hover) .rel-grafico__link:nth-of-type(30) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(30):hover, .rel-grafico__legenda > li:nth-child(30):hover) .rel-grafico__partes > span:nth-child(30), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(30):hover, .rel-grafico__legenda > li:nth-child(30):hover) .rel-grafico__legenda > li:nth-child(30) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(31):hover, .rel-grafico__legenda > li:nth-child(31):hover) .rel-grafico__link:nth-of-type(31) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(31):hover, .rel-grafico__legenda > li:nth-child(31):hover) .rel-grafico__partes > span:nth-child(31), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(31):hover, .rel-grafico__legenda > li:nth-child(31):hover) .rel-grafico__legenda > li:nth-child(31) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(32):hover, .rel-grafico__legenda > li:nth-child(32):hover) .rel-grafico__link:nth-of-type(32) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(32):hover, .rel-grafico__legenda > li:nth-child(32):hover) .rel-grafico__partes > span:nth-child(32), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(32):hover, .rel-grafico__legenda > li:nth-child(32):hover) .rel-grafico__legenda > li:nth-child(32) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(33):hover, .rel-grafico__legenda > li:nth-child(33):hover) .rel-grafico__link:nth-of-type(33) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(33):hover, .rel-grafico__legenda > li:nth-child(33):hover) .rel-grafico__partes > span:nth-child(33), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(33):hover, .rel-grafico__legenda > li:nth-child(33):hover) .rel-grafico__legenda > li:nth-child(33) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(34):hover, .rel-grafico__legenda > li:nth-child(34):hover) .rel-grafico__link:nth-of-type(34) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(34):hover, .rel-grafico__legenda > li:nth-child(34):hover) .rel-grafico__partes > span:nth-child(34), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(34):hover, .rel-grafico__legenda > li:nth-child(34):hover) .rel-grafico__legenda > li:nth-child(34) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(35):hover, .rel-grafico__legenda > li:nth-child(35):hover) .rel-grafico__link:nth-of-type(35) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(35):hover, .rel-grafico__legenda > li:nth-child(35):hover) .rel-grafico__partes > span:nth-child(35), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(35):hover, .rel-grafico__legenda > li:nth-child(35):hover) .rel-grafico__legenda > li:nth-child(35) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(36):hover, .rel-grafico__legenda > li:nth-child(36):hover) .rel-grafico__link:nth-of-type(36) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(36):hover, .rel-grafico__legenda > li:nth-child(36):hover) .rel-grafico__partes > span:nth-child(36), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(36):hover, .rel-grafico__legenda > li:nth-child(36):hover) .rel-grafico__legenda > li:nth-child(36) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(37):hover, .rel-grafico__legenda > li:nth-child(37):hover) .rel-grafico__link:nth-of-type(37) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(37):hover, .rel-grafico__legenda > li:nth-child(37):hover) .rel-grafico__partes > span:nth-child(37), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(37):hover, .rel-grafico__legenda > li:nth-child(37):hover) .rel-grafico__legenda > li:nth-child(37) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(38):hover, .rel-grafico__legenda > li:nth-child(38):hover) .rel-grafico__link:nth-of-type(38) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(38):hover, .rel-grafico__legenda > li:nth-child(38):hover) .rel-grafico__partes > span:nth-child(38), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(38):hover, .rel-grafico__legenda > li:nth-child(38):hover) .rel-grafico__legenda > li:nth-child(38) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(39):hover, .rel-grafico__legenda > li:nth-child(39):hover) .rel-grafico__link:nth-of-type(39) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(39):hover, .rel-grafico__legenda > li:nth-child(39):hover) .rel-grafico__partes > span:nth-child(39), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(39):hover, .rel-grafico__legenda > li:nth-child(39):hover) .rel-grafico__legenda > li:nth-child(39) .rel-grafico__item { --realce: 1; }
.rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(40):hover, .rel-grafico__legenda > li:nth-child(40):hover) .rel-grafico__link:nth-of-type(40) .rel-grafico__fatia, .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(40):hover, .rel-grafico__legenda > li:nth-child(40):hover) .rel-grafico__partes > span:nth-child(40), .rel-grafico__corpo:has(.rel-grafico__link:nth-of-type(40):hover, .rel-grafico__legenda > li:nth-child(40):hover) .rel-grafico__legenda > li:nth-child(40) .rel-grafico__item { --realce: 1; }
.rel-grafico__legenda { display: grid; gap: 2px; max-width: 620px; max-height: 236px; margin: 0; padding: 0; list-style: none; overflow-y: auto; scrollbar-width: thin; }
.rel-grafico__item { display: grid; grid-template-columns: 10px minmax(110px, 200px) minmax(60px, 1fr) 52px 44px; gap: 12px; align-items: center; padding: 7px 10px; border-radius: 8px; color: var(--texto); text-decoration: none; font-size: 13.5px; }
.rel-grafico__item:hover { background: var(--superficie-suave); }
.rel-grafico__item.ativo { background: var(--ambar-suave); font-weight: 600; }
.rel-grafico__ponto { width: 10px; height: 10px; border-radius: 50%; }
.rel-grafico__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-grafico__barra { height: 6px; border-radius: 3px; background: var(--superficie-suave); overflow: hidden; }
.rel-grafico__barra span { display: block; height: 100%; border-radius: 3px; }
.rel-grafico__valor, .rel-grafico__pct { text-align: right; font-variant-numeric: tabular-nums; }
.rel-grafico__valor { font-weight: 600; }
.rel-grafico__pct { color: var(--texto-2); }

/* Tabela */
.relatorio-tabela { overflow-x: auto; }
.relatorio-tabela td { white-space: nowrap; vertical-align: middle; }
.relatorio-tabela th a { color: inherit; text-decoration: none; white-space: nowrap; }
.relatorio-tabela th a:hover { color: var(--primario); }
.rel-pessoa { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.rel-avatar { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font-size: 12px; font-weight: 650; letter-spacing: 0.02em; }
.rel-avatar--1 { background: #DCE8F7; color: #2A5E9E; }
.rel-avatar--2 { background: #D9F0E6; color: #1D7A57; }
.rel-avatar--3 { background: #F6E7C8; color: #7A5410; }
.rel-avatar--4 { background: #E4E0F6; color: #4D40A6; }
.rel-avatar--5 { background: #F5DDE6; color: #8E3F5E; }
.rel-avatar--6 { background: #E3E7EC; color: #4F5966; }
.rel-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--borda); font-size: 13.5px; }
.rel-rodape strong { color: var(--texto); font-variant-numeric: tabular-nums; }
.rel-paginas { display: flex; gap: 4px; align-items: center; }
.rel-paginas a, .rel-paginas span { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 8px; color: var(--texto); text-decoration: none; font-variant-numeric: tabular-nums; }
.rel-paginas a:hover { background: var(--superficie-suave); }
.rel-paginas a.ativo { background: var(--ambar-suave); color: var(--primario); font-weight: 600; }

@media (max-width: 1100px) {
    .rel { grid-template-columns: minmax(0, 1fr); }
    .rel-lista { display: none; }
    .rel-topo { flex-direction: column; align-items: stretch; }
    .rel-topo__lado { justify-content: space-between; }
    .rel-grafico__corpo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
}

@media (max-width: 640px) {
    .rel-topo__lado { flex-wrap: wrap; gap: 12px; }
    .rel-topo__total { padding-left: 0; border-left: 0; align-items: flex-start; }
    .rel-ferr > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .rel-ferramentas { position: relative; }
    .rel-menu { position: static; }
    .rel-menu__painel { right: auto; left: 0; }
    .rel-grafico { padding: 4px 12px 12px; }
    .rel-grafico__item { grid-template-columns: 10px minmax(0, 1fr) 44px 40px; }
    .rel-grafico__barra { display: none; }
}

/* Configuracoes > Pessoas do Droid */
.pessoas-droid__form { display: grid; grid-template-columns: minmax(240px, 2fr) minmax(160px, 1fr); gap: 12px 16px; align-items: end; }
.pessoas-droid__form > div:last-child { grid-column: 1 / -1; }
.pessoas-droid__nota { grid-column: 1 / -1; margin: 0; font-size: 13px; }
/* O "O que esta pessoa pode fazer" so aparece com "Perfil proprio" escolhido no campo Papel. */
.pessoas-droid__proprio { grid-column: 1 / -1; display: none; margin: 0; padding: 10px 14px; border: 1px solid var(--borda); border-radius: 10px; }
.pessoas-droid__form:has(#pessoa-papel option[value="proprio"]:checked) .pessoas-droid__proprio { display: block; }
.pessoas-droid__proprio legend { padding: 0 4px; font-size: 12px; color: var(--texto-2); }
.pessoas-droid__nome { display: block; font-weight: 600; }
.pessoas-droid__papel { display: flex; gap: 6px; align-items: center; }
.pessoas-droid__link { display: block; font-size: 12.5px; margin-top: 2px; }
@media (max-width: 640px) { .pessoas-droid__form { grid-template-columns: minmax(0, 1fr); } }
.pessoas-droid__papel select { padding: 7px 10px; font: inherit; font-size: 14px; color: var(--texto); background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); }
.pessoas-droid__papel select:focus { border-color: var(--primario); outline: none; }
section.pessoas-droid__lista { margin-top: 16px; }