/* Estilos do site .NET 10 para o que no legado era controle DevExpress (grade, abas, popup, editores).
   Usa as variáveis de cor do Site.css (carregado antes). O Site.css continua sendo a fonte do visual. */

/* ---------- tabela (substitui GridView) ---------- */
#divPanelGrid1 {
    background: #fff;
    border: 1px solid var(--cres-border);
    border-radius: 10px;
    overflow: hidden;
}

table.cad-tabela {
    width: 100%;
    /* o #divMainChart centraliza tudo o que está dentro dele; na tabela o padrão é à esquerda, e só
       centraliza a coluna que pedir (.centro: ações e sim/não) ou alinha à direita (.direita: valores) */
    text-align: left;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--cres-ink);
}

    table.cad-tabela thead th {
        background: var(--cres-green);
        color: #fff;
        font-weight: 600;
        text-align: left;
        padding: 10px 12px;
        white-space: nowrap;
    }

    table.cad-tabela thead th.cad-ordenavel { cursor: pointer; user-select: none; }
    table.cad-tabela thead th.cad-ordenavel:hover { background: var(--cres-green-dark); }
    table.cad-tabela thead th[aria-sort="ascending"]::after { content: " \25B2"; font-size: 10px; }
    table.cad-tabela thead th[aria-sort="descending"]::after { content: " \25BC"; font-size: 10px; }

    table.cad-tabela thead tr.cad-filtro td {
        background: #f4f8f6;
        padding: 6px 8px;
        border-bottom: 1px solid var(--cres-border);
    }

    table.cad-tabela thead tr.cad-filtro input {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--cres-border);
        border-radius: 6px;
        padding: 5px 8px;
        font: inherit;
    }

    table.cad-tabela tbody td {
        padding: 9px 12px;
        border-bottom: 1px solid var(--cres-border);
        vertical-align: middle;
    }

    table.cad-tabela tbody tr:hover td { background: var(--cres-green-soft); }
    table.cad-tabela tbody tr:last-child td { border-bottom: none; }

    table.cad-tabela .centro { text-align: center; }
    table.cad-tabela .direita { text-align: right; }
    table.cad-tabela .nowrap { white-space: nowrap; }
    table.cad-tabela td.cad-vazio-linha { text-align: center; color: var(--cres-muted); padding: 22px 12px; }

    table.cad-tabela select {
        border: 1px solid var(--cres-border);
        border-radius: 6px;
        padding: 5px 8px;
        font: inherit;
        background: #fff;
    }

.cad-paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--cres-border);
    font-size: 13px;
    color: var(--cres-muted);
}

    .cad-paginacao button {
        border: 1px solid var(--cres-border);
        background: #fff;
        color: var(--cres-ink);
        border-radius: 6px;
        padding: 5px 10px;
        margin-left: 4px;
        font: inherit;
        cursor: pointer;
    }

        .cad-paginacao button:hover:not(:disabled) { border-color: var(--cres-green); color: var(--cres-green); }
        .cad-paginacao button:disabled { opacity: .45; cursor: default; }

.cad-vazio { color: var(--cres-muted); padding: 14px 16px; margin: 0; }

/* ---------- árvore Município > Dependência (substitui o agrupamento do GridView) ---------- */
.cad-arvore details > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--cres-border);
    font-size: 13px;
    color: var(--cres-ink);
}

    .cad-arvore details > summary::-webkit-details-marker { display: none; }
    .cad-arvore details > summary::before { content: "\25B8"; color: var(--cres-green); width: 12px; }
    .cad-arvore details[open] > summary::before { content: "\25BE"; }
    .cad-arvore details > summary:hover { background: var(--cres-green-soft); }

.cad-arvore details.cad-municipio > summary { font-weight: 700; background: #f4f8f6; }
.cad-arvore details.cad-dependencia > summary { padding-left: 34px; font-weight: 600; }
.cad-arvore .cad-rotulo { color: var(--cres-muted); font-weight: 500; }
.cad-arvore .cad-qt { margin-left: auto; color: var(--cres-muted); font-weight: 500; font-size: 12px; }
.cad-arvore .cad-dependencia-corpo { padding: 0 0 0 54px; border-bottom: 1px solid var(--cres-border); }
.cad-arvore .cad-dependencia-corpo table.cad-tabela thead th { background: #eef4f1; color: var(--cres-ink); }

/* ---------- editores simples (substituem TextBox/ComboBox/RadioButtonList) ---------- */
.cad-campo { display: inline-flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--cres-muted); }

    .cad-campo input, .cad-campo select {
        border: 1px solid var(--cres-border);
        border-radius: 6px;
        padding: 7px 10px;
        font: inherit;
        font-size: 13px;
        color: var(--cres-ink);
        background: #fff;
        box-sizing: border-box;
    }

        .cad-campo input:focus, .cad-campo select:focus { outline: 2px solid var(--cres-green-soft); border-color: var(--cres-green); }

.dep-toolbar-campos { align-items: flex-end; }

.cad-radios { gap: 28px; align-items: center; }
    .cad-radios label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cres-ink); cursor: pointer; }
    .cad-radios input { accent-color: var(--cres-green); }

/* ---------- popup (substitui PopupControl) ---------- */
dialog.cad-popup {
    width: min(900px, 92vw);
    max-height: 86vh;
    border: 1px solid var(--cres-border);
    border-radius: 10px;
    padding: 0;
}

    dialog.cad-popup::backdrop { background: rgba(22, 42, 50, .45); }
    dialog.cad-popup header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--cres-green); color: #fff; }
    dialog.cad-popup .cad-popup-fechar { background: none; border: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
    dialog.cad-popup .cad-popup-corpo { padding: 16px; overflow: auto; max-height: 72vh; }

/* ---------- listagem de cadastro ---------- */
table.cad-maiusculas tbody td { text-transform: uppercase; }

.cad-acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 6px;
}

    .cad-acao:hover { background: #fff; box-shadow: 0 0 0 1px var(--cres-border); }

.cad-form-excluir { display: inline; margin: 0; }

/* ---------- formulário de cadastro (no legado este bloco se repetia em cada _XxxForm.cshtml) ---------- */
.dep-form fieldset {
    border: none;
    border-radius: 10px;
    padding: 16px 20px 20px;
    margin: 0 0 20px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.dep-form legend {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
    padding: 2px 10px;
    color: var(--cres-green);
}

    .dep-form legend:before {
        content: '';
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--cres-green);
    }

.dep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px 20px;
}

    .dep-grid .campo.full { grid-column: 1 / -1; }

.dep-form .campo { min-width: 0; }

    .dep-form .campo > label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: var(--cres-ink);
        margin-bottom: 3px;
    }

.dep-form .req > label:after { content: " *"; color: var(--cres-danger); }

.dep-form .campo input[type="text"],
.dep-form .campo input[type="date"],
.dep-form .campo select {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    font: inherit;
    font-size: 12px;
    color: var(--cres-ink);
    background: #fff;
    border: 1px solid #B3B3B3;
    border-radius: 4px;
    box-sizing: border-box;
}

    .dep-form .campo input[type="text"]:focus,
    .dep-form .campo input[type="date"]:focus,
    .dep-form .campo select:focus { outline: 2px solid var(--cres-green-soft); border-color: var(--cres-green); }

.dep-form .campo.flag { display: flex; align-items: flex-end; padding-bottom: 8px; }

.dep-form .cad-check { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--cres-ink); cursor: pointer; }
    .dep-form .cad-check input { accent-color: var(--cres-green); width: 16px; height: 16px; }

/* Código somente-leitura na edição (não se altera a chave) */
.dep-form .campo .ro-valor {
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 12px;
    color: var(--cres-muted);
    background: #f4f6f5;
    border: 1px solid var(--cres-border);
    border-radius: 4px;
    box-sizing: border-box;
}

/* ---------- combo com busca (substitui a combo DevExpress; ver js/cad-select.js) ---------- */
.cad-combo { position: relative; }
.cad-combo select.cad-combo-origem { display: none; }

/* seta de combo à direita do campo */
.dep-form .campo .cad-combo input.cad-combo-caixa {
    padding-right: 28px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E") no-repeat right 10px center;
    text-overflow: ellipsis;
}

.cad-combo-lista {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    max-height: 240px;
    margin: 2px 0 0;
    padding: 2px 0;
    overflow-y: auto;
    list-style: none;
    font-size: 12px;
    color: var(--cres-ink);
    background: #fff;
    border: 1px solid #B3B3B3;
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
}
    .cad-combo-lista li { padding: 6px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cad-combo-lista li.escolhido { font-weight: 700; }
    .cad-combo-lista li.ativo,
    .cad-combo-lista li[data-i]:hover { background: var(--cres-green-soft); }
    .cad-combo-lista li.aviso { color: #777; font-style: italic; cursor: default; }

/* =====================================================================================================
   CORES — paleta da VERSÃO ANTIGA do sistema (verde + laranja), a pedido do Daniel em 02/10/2026.
   O Site.css copiado do legado já estava remapeado para a identidade CADOC's (petróleo); este bloco
   devolve os valores que o Site.css tinha antes desse remapeamento (commit anterior ao 4bd87ae do
   repositório legado). Só cor: fontes, logo e tela de login continuam os atuais.
   Para voltar à paleta CADOC's, basta apagar este bloco.
   ===================================================================================================== */
:root {
    --cres-green: #007744;
    --cres-green-dark: #005c34;
    --cres-green-soft: #e8f3ee;
    --cres-border: #e2e6e3;
    --cres-laranja: #f47e27;
    --cres-laranja-dark: #d96a1a;
    --cres-ink: #23302a;
    --cres-muted: #5a6b62;
    /* papéis que o Site.css atual usa direto: caem nos equivalentes da paleta antiga */
    --cad-verde: #007744;
    --cad-petroleo: #23302a;
}

body { background: #fff; }

/* barra superior verde, como era */
.ces-header { background-color: #007744 !important; }

/* títulos de página em verde */
#divMainChart .heading-main .dxeBase_Mulberry h2,
.dep-page h1 { color: #007744; }

/* botões principais em laranja (o Site.css atual os deixa em petróleo) */
.dep-btn-novo, .dep-btn-salvar { background: var(--cres-laranja); }
.dep-btn-novo:hover, .dep-btn-salvar:hover { background: var(--cres-laranja-dark); }
/* ---------- rodapé fixo na base da janela (a pedido do Daniel em 05/10/2026) ----------
   Fica ao lado do sidebar (260px) e abaixo dele/toasts no z-index. O conteúdo ganha um respiro
   na base, da altura do rodapé, para o fim da página não ficar escondido atrás dele. */
body.has-user .ces-footer {
    position: fixed;
    left: 260px;
    right: 0;
    bottom: 0;
    margin-left: 0;
    z-index: 97;
    min-height: 0;
}

/* Rodapé fixo em faixa fina (~40px): com a altura original (84px) ele tapava mais de 10%
   da tela num notebook. Logo e telefone ficam na mesma linha, um em cada ponta. */
body.has-user .ces-footer .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 20px;
}

body.has-user .ces-footer .csistemas { line-height: 0; }
body.has-user .ces-footer .csistemas img { height: 26px; width: auto; }

body.has-user .ces-footer .central {
    float: none;
    margin: 0;
    line-height: 1;
}

body.has-user .ces-footer .central .tel { font-size: 1.05rem; }

body.has-user .mainContentPane { padding-bottom: 48px; }

/* =====================================================================================================
   RESPONSIVO — celular e tablet em pé (até 900px)
   Acima de 900px nada muda (continuam valendo o sidebar fixo e o zoom proporcional do Site.css).
   Até 900px:
     - sai o zoom (encolhia a página inteira e deixava o texto ilegível no celular);
     - o sidebar vira gaveta, aberta pelo botão do cabeçalho (o checkbox #toggle-menu e o rótulo
       .toggle-nav já existiam no HeaderPartialView; o Site.css só os escondia);
     - conteúdo, barras e cartões ocupam a largura toda; as grades rolam na horizontal;
     - rodapé deixa de ser fixo (no celular tapava parte da tela).
   ===================================================================================================== */
@media (max-width: 900px) {
    body { zoom: 1; }

    /* ---------- estrutura ---------- */
    body.has-user {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100dvh;
        margin-bottom: 0;
    }

    /* gaveta aberta: a página de trás não rola */
    body:has(#toggle-menu:checked) { overflow: hidden; }

    body.has-user .mainContentPane {
        flex: 1 0 auto;
        margin-left: 0;
        padding-bottom: 16px;
    }

    body.has-user .ces-footer {
        position: static;
        margin-left: 0;
    }

    /* ---------- cabeçalho: botão do menu ---------- */
    body.has-user .ces-header .box-navbar { display: block !important; }

    /* Barra verde da marca, mais baixa (56px) e com sombra leve. O logo (feito para fundo claro) fica
       numa "pílula" branca de 40px, em vez do bloco branco de altura inteira colado na faixa verde. */
    body.has-user .ces-header {
        height: 56px;
        box-shadow: 0 2px 10px rgba(22, 42, 50, .18);
    }

    body.has-user .ces-header .templateTitle {
        height: 40px !important;
        margin: 8px 0 8px 12px;
        padding: 0 12px;
        border-radius: 10px;
    }

    body.has-user .ces-header .templateTitle img.imagemTitle { max-width: 130px; max-height: 28px; }

    body.has-user .mainContentPane { margin-top: 56px; }

    /* Botão do menu: quadrado arredondado de 40px, branco translúcido, com as três barras brancas */
    .ces-header .box-navbar .toggle-nav {
        top: 8px;
        right: 12px;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        justify-content: center;
        border-radius: 10px;
        background: rgba(255, 255, 255, .16);
        /* sem transform: o fundo escuro da gaveta (::before, position: fixed) precisa da janela como referência */
        transform: none;
    }

    .ces-header .box-navbar .toggle-nav:active { background: rgba(255, 255, 255, .28); }

    .box-navbar .toggle-nav .info { display: none; }
    .box-navbar .toggle-nav .icon { width: 18px; margin-left: 0; }

    /* o Site.css pinta as barras de laranja no hover (!important); no toque o hover "gruda" */
    .ces-header .box-navbar .toggle-nav .icon .line,
    .ces-header .box-navbar .toggle-nav:hover .icon .line {
        height: 2px;
        border-radius: 2px;
        background-color: #fff !important;
    }

    .ces-header .box-navbar .toggle-nav .icon .line.center { width: 100%; margin: 5px 0; }

    /* saudação: cabe entre o logo e o botão do menu; some quando não há espaço */
    .ces-header-user {
        right: 64px;
        max-width: calc(100vw - 270px);
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
    }

    /* ---------- menu lateral em gaveta ---------- */
    body.has-user .ces-sidebar {
        top: 56px;
        width: min(300px, 86vw);
        z-index: 100;
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform .22s ease, visibility .22s;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .18);
        overscroll-behavior: contain;
    }

    #toggle-menu:checked ~ .ces-sidebar {
        transform: none;
        visibility: visible;
    }

    /* Fundo escuro atrás da gaveta. É um pseudo-elemento do próprio rótulo do botão: tocar nele
       desmarca o #toggle-menu e fecha o menu, sem JavaScript. */
    .ces-header .box-navbar .toggle-nav::before {
        content: '';
        position: fixed;
        top: 56px;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(22, 42, 50, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease;
    }

    #toggle-menu:checked ~ #HeaderPane_EB .toggle-nav::before {
        opacity: 1;
        pointer-events: auto;
    }

    .ces-sb-item { padding-top: 12px; padding-bottom: 12px; font-size: 14px; }
    .ces-sb-sub .ces-sb-item { font-size: 13.5px; }
    .ces-sb-group > summary, .ces-sb-sub > summary { padding-top: 14px; padding-bottom: 14px; }

    /* ---------- conteúdo: largura toda, com margem lateral única ---------- */
    #divMainChart {
        box-sizing: border-box;
        padding: 12px 12px 0;
        margin-bottom: 1rem;
    }

    #divMainChart .heading-main h2 {
        font-size: 16px;
        line-height: 1.3;
        font-weight: 400;
    }

    .dep-grid-toolbar,
    .dash,
    .dash-secao,
    body .desif-chips,
    #divMainChart #divPanelGrid1,
    body #ces-grid-Form-cadastros,
    body #ces-grid-Form-movimentos,
    body #ces-grid-Form-arquivos {
        width: auto;
        box-sizing: border-box;
    }

    /* ---------- campos: 16px evita o zoom automático do iOS ao focar ---------- */
    input[type="text"], input[type="search"], input[type="date"], input[type="password"],
    input[type="email"], input[type="number"], input:not([type]), select, textarea {
        font-size: 16px !important;
    }

    /* ---------- barra de filtros / ações ---------- */
    .dep-grid-toolbar { padding: 10px 12px; }
    .dep-grid-toolbar .dep-toolbar-campos { width: 100%; }
    .dep-toolbar-campos .cad-campo { flex: 1 1 110px; min-width: 0; }
    .dep-toolbar-campos .cad-campo input,
    .dep-toolbar-campos .cad-campo select { width: 100% !important; min-width: 0; }

    .dep-btn-novo, .dep-btn-acao { padding: 12px 14px; }
    .dep-btn-acao.dep-btn-linha { padding: 9px 12px; }

    .cad-radios { gap: 12px 22px; }

    .arv-filtro { flex-wrap: wrap; width: 100%; }
    .arv-filtro .arv-filtro-input { flex: 1 1 140px; width: auto; height: 40px; min-width: 0; }

    /* ---------- grades: rolagem horizontal dentro do cartão ---------- */
    #divPanelGrid1 {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Largura mínima pela quantidade de colunas: grade pequena cabe na tela, grade larga rola
       em vez de espremer as colunas. */
    table.cad-tabela:has(thead tr:first-child > :nth-child(5)) { min-width: 640px; }
    table.cad-tabela:has(thead tr:first-child > :nth-child(7)) { min-width: 860px; }

    table.cad-tabela thead th { padding: 10px; }
    table.cad-tabela tbody td { padding: 10px; }

    /* a paginação fica parada enquanto a grade rola de lado */
    .cad-paginacao {
        position: sticky;
        left: 0;
        justify-content: center;
    }

    .cad-paginacao button { padding: 9px 12px; }

    .cad-acao { padding: 9px 9px; }

    /* O Site.css põe max-width: 100% em toda <img>; dentro de célula isso zera a largura mínima
       do ícone, a coluna "Ações" encolhia e o botão Excluir ficava cortado. */
    .cad-acao img { max-width: none; }

    .cad-arvore details.cad-dependencia > summary { padding-left: 22px; }
    .cad-arvore details > summary { flex-wrap: wrap; padding-top: 13px; padding-bottom: 13px; }
    .cad-arvore .cad-dependencia-corpo { padding-left: 12px; }

    /* ---------- árvore de contas (PGCC / COSIF; base em arvore-contas.css, carregado depois — por isso o "body") ----------
       Recuo menor por nível e a folha em duas linhas: código + COSIF/natureza em cima, nome embaixo.
       Em uma linha só, com 6 níveis de recuo, não sobrava largura para o nome. */
    body .arv { --arv-recuo: 9px; }
    body .arv-pgcc { --arv-recuo: 8px; }

    body .arv-l { padding-top: 12px; padding-bottom: 12px; }
    body .arv-l.arv-f { flex-wrap: wrap; row-gap: 3px; }

    body .arv-f .arv-c,
    body .arv-cab .arv-c { flex: 0 0 auto; min-width: 0; }

    body .arv-f .arv-x,
    body .arv-cab .arv-x { flex: 0 0 auto; margin-left: auto; text-align: right; }

    body .arv-f .arv-d {
        order: 9;
        flex: 0 0 100%;
        box-sizing: border-box;
        padding-left: 22px; /* largura da seta + gap: o nome alinha com o código */
    }

    /* cabeçalho sem o recuo das folhas e sem a coluna "Nome" (o nome fica na segunda linha) */
    body .arv-cab { padding-left: 10px; }
    body .arv-cab .arv-d { display: none; }

    /* ---------- formulários (Novo / Editar) ---------- */
    .dep-page { padding: 16px 12px 24px; }
    .dep-page h1 { font-size: 17px; line-height: 1.3; margin-bottom: 14px; }

    /* fieldset tem min-width: min-content por padrão e estourava a tela com combo de texto longo */
    .dep-form fieldset { min-width: 0; padding: 14px 14px 16px; }

    .dep-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    body .dep-form .dep-2col { grid-template-columns: 1fr; }
    .dep-flags { grid-template-columns: 1fr; }

    .dep-form .campo input[type="text"],
    .dep-form .campo input[type="date"],
    .dep-form .campo input.cad-senha,
    .dep-form .campo select,
    .dep-form .campo .ro-valor { height: 42px; }

    .dep-form .campo .ro-valor { font-size: 14px; }
    .dep-form .campo.flag { padding-bottom: 0; }
    .cad-combo-lista { font-size: 14px; }
    .cad-combo-lista li { padding: 10px; }

    .dep-actions { flex-wrap: wrap; }
    .dep-actions .dep-btn { flex: 1 1 130px; padding: 13px 16px; text-align: center; box-sizing: border-box; }

    /* ---------- painel (Home) ---------- */
    /* filtros em duas colunas (rótulo | campo): no flex o rótulo ficava numa linha e o campo na outra */
    .dash-filtros {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px 10px;
        padding: 12px;
    }

    .dash-filtros .dash-filtros-label,
    .dash-filtros .dash-btn-aplicar { grid-column: 1 / -1; }

    .dash-filtros .dash-btn-aplicar { justify-content: center; }
    .dash-filtros select { width: 100%; min-width: 0; max-width: none; }
    .dash-card { padding: 12px 12px 14px; }
    .dash-colunas > .dash-card { flex-basis: 100%; min-width: 0; }
    .dash-legenda { flex-wrap: wrap; gap: 6px 14px; }
    .dash-donut-wrap { justify-content: center; }
    .dash-ranking-obs { flex-basis: auto; white-space: nowrap; }

    /* ---------- popup e avisos ---------- */
    dialog.cad-popup { width: 94vw; max-height: 90vh; }

    .dep-toast-wrap { top: 12px; right: 12px; left: 12px; }
    .dep-toast { min-width: 0; max-width: none; }

    /* ---------- envio de arquivos ---------- */
    .env-upload { flex-wrap: wrap; }
    .env-upload .env-nome { flex: 1 1 100%; height: 42px; }
    .env-upload button { flex: 1 1 130px; justify-content: center; }
    .env-body { padding: 14px; }
}

@media (max-width: 600px) {
    .ces-header-user { display: none; }

    /* gráfico de 12 meses em ~330px: colunas mais juntas e números menores */
    .dash-barras { gap: 2px; height: 170px; }
    .dash-barra-par { gap: 1px; }
    .dash-barra-valor { font-size: 9px; }
    .dash-barra-rotulo { font-size: 9px; }
    .dash-kpi-valor { font-size: 26px; }
}

/* Tela de toque não tem "passar o mouse": o lápis de editar da árvore de contas fica sempre visível. */
@media (hover: none) {
    .arv-e { opacity: 1; }
}