html {
    min-height: 100%;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--r2-ground);
    color: var(--r2-ink);
}

.r2-cliente-body {
    background: #dee3e9;
}

.r2-cliente-window {
    min-height: 100vh;
    background: #dee3e9;
}

.r2-cliente-titlebar {
    min-height: 34px;
    padding: 7px 12px;
    color: #ffffff;
    background: #0a2e5c;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 1px solid #34375f;
}

.r2-cliente-titlebar strong {
    font-size: 14px;
    margin-right: 8px;
}

.r2-cliente-titlebar span {
    font-size: 12px;
}

.r2-cliente-titlebar-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.r2-title-separator {
    opacity: .7;
}

.r2-cliente-tabs {
    min-height: 45px;
    padding: 5px 8px 0;
    background: var(--r2-line);
    border-bottom: 1px solid var(--r2-line-strong);
    display: flex;
    align-items: flex-end;
    gap: 4px;
    box-sizing: border-box;
}

.r2-cliente-tabs .ui-button {
    border-radius: 0;
    border-color: var(--r2-line-strong);
    background: #d5d7ea;
    color: var(--r2-accent-ink);
    font-weight: 600;
}

.r2-cliente-tabs .ui-button:hover {
    background: var(--r2-surface);
    color: var(--r2-accent-ink);
}

.r2-cliente-tab .ui-button-text {
    padding-top: .62rem;
    padding-bottom: .62rem;
}

.r2-cliente-tab-spacer {
    flex: 1;
}

.r2-cliente-toolbar {
    min-height: 42px;
    padding: 6px 8px;
    background: #cdcfe4;
    border-bottom: 1px solid var(--r2-line-strong);
    display: flex;
    gap: 5px;
    align-items: center;
    box-sizing: border-box;
}

.r2-cliente-toolbar .ui-button {
    border-radius: 0;
    min-width: 38px;
}

.r2-cliente-content {
    display: grid;
    grid-template-columns: 390px minmax(0, 1fr);
    min-height: calc(100vh - 80px);
}

.r2-cliente-tree-panel {
    min-width: 0;
    background: var(--r2-surface);
    border-right: 2px solid var(--r2-line-strong);
    padding: 8px;
    box-sizing: border-box;
}

.r2-cliente-main-panel {
    min-width: 0;
    background: #eaeef3;
    padding: 10px;
    box-sizing: border-box;
}

.r2-cliente-main-header {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--r2-line-strong);
    margin-bottom: 10px;
}

.r2-cliente-main-panel .ui-panel {
    border-radius: 0;
    border-color: var(--r2-line-strong);
}

.r2-cliente-main-panel .ui-panel-titlebar {
    background: var(--r2-line);
    color: var(--r2-accent-ink);
    border-color: var(--r2-line-strong);
}

.r2-cliente-main-panel .ui-panelgrid,
.r2-cliente-main-panel .ui-panelgrid-cell {
    background: transparent;
}

.r2-cliente-main-panel .ui-inputfield,
.r2-cliente-main-panel .ui-selectonemenu {
    border-color: var(--r2-line-strong);
    border-radius: 0;
}

.r2-topbar {
    min-height: 64px;
    padding: 12px 24px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
}

.r2-topbar--portal {
    background: #0a2e5c;
}

.r2-topbar--gerenciador {
    background: #0a2e5c;
}

.r2-topbar--cliente {
    background: #0a2e5c;
}

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

.r2-brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--r2-surface);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.r2-brand-mark img {
    width: 26px;
    height: auto;
    display: block;
}

.r2-brand-lema {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--r2-line-strong);
    white-space: nowrap;
}

.r2-brand-title {
    font-size: 21px;
    line-height: 1.2;
    font-weight: 700;
}

.r2-brand-subtitle {
    margin-top: 3px;
    font-size: 13px;
    opacity: .9;
}

.r2-userbox {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    text-align: right;
}

.r2-userbox strong {
    display: block;
    font-size: 14px;
}

/* Barra superior do Gerenciador: o ícone fica EM FRENTE ao nome (mesma linha) e, na linha de
   baixo, "Repositório:" precede o seletor. A pilha alinha as duas linhas à direita. */
.r2-userbox-pilha {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.r2-userbox-nome {
    display: flex;
    align-items: center;
    gap: 8px;
}

.r2-userbox-repo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.r2-userbox-repo-label {
    white-space: nowrap;
    opacity: .85;
}

/* Seletor de repositório na barra superior do Gerenciador (troca rápida sem ir a
   Administração -> Repositórios). A barra é azul-escura nos DOIS temas, então o gatilho é
   sempre tinta clara sobre a barra; o painel flutuante segue o tema (claro/escuro). Como o
   tema do PrimeFaces pinta os seletores por conta própria, as cores do gatilho vão com
   !important em escopo restrito (o mesmo tratamento do menu lateral). */
.r2-troca-repo-form {
    margin: 0;
}

.r2-seletor-repo.ui-selectonemenu {
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .30) !important;
    border-radius: 18px;
    min-width: 190px;
    max-width: 260px;
    height: auto;
}

.r2-seletor-repo.ui-selectonemenu:hover {
    background: rgba(255, 255, 255, .20) !important;
    border-color: rgba(255, 255, 255, .48) !important;
}

.r2-seletor-repo .ui-selectonemenu-label {
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    text-align: left;
}

.r2-seletor-repo .ui-selectonemenu-trigger {
    background: transparent !important;
    border: 0 !important;
    width: 24px;
}

.r2-seletor-repo .ui-selectonemenu-trigger .ui-icon {
    color: #ffffff !important;
}

/* Painel: cada linha é [miniatura da logo] [nome]. Cores do texto ficam por conta do tema. */
.r2-seletor-repo-painel .ui-selectonemenu-item {
    padding: 7px 12px;
}

.r2-seletor-repo-logo-col {
    width: 44px;
    text-align: center;
    vertical-align: middle;
}

.r2-seletor-repo-logo {
    max-height: 24px;
    max-width: 36px;
    vertical-align: middle;
    border-radius: 3px;
}

.r2-seletor-repo-nome {
    font-size: 13px;
    vertical-align: middle;
}

.r2-shell {
    display: flex;
    min-height: calc(100vh - 64px);
}

.r2-sidebar {
    width: 286px;
    background: var(--r2-surface);
    border-right: 1px solid var(--r2-line);
    padding: 18px 14px;
    box-sizing: border-box;
}

.r2-content {
    flex: 1;
    min-width: 0;
    padding: 22px;
    box-sizing: border-box;
}

.r2-content-header {
    margin-bottom: 16px;
}

.r2-breadcrumb {
    font-size: 12px;
    color: var(--r2-muted);
    margin-bottom: 6px;
}

.r2-page-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.25;
    color: var(--r2-accent-ink);
}

.r2-page-description {
    margin: 6px 0 0;
    color: var(--r2-muted);
    line-height: 1.4;
}

.r2-menu-section {
    margin-bottom: 18px;
}

.r2-menu-title {
    margin: 0 0 8px;
    padding: 0 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0;
    font-weight: 700;
    color: var(--r2-muted);
}

.r2-sidebar .ui-button.r2-menu-link,
.r2-sidebar .ui-commandlink.r2-menu-link {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin: 0 0 7px;
    text-align: left;
}

.r2-sidebar .ui-button.r2-menu-link {
    border: 0;
    background: transparent;
    color: var(--r2-ink);
}

.r2-sidebar .ui-button.r2-menu-link:hover {
    background: var(--r2-ground);
    color: var(--r2-accent-ink);
}

/* ---------------------------------------------------------------- menu do gerenciador
   O acordeao (p:panelMenu) tem de PARECER um menu, nao um painel dentro de outro painel.
   Duas armadilhas do PrimeFaces, ambas pagas em tela torta:
   1) o tema saga prefixa TUDO com `body` (body .ui-panelmenu h3.ui-panelmenu-header{padding:1rem})
      e o theme.css e carregado DEPOIS do r2ecm.css — sem o `body` aqui, o tema vence o desempate e
      o menu volta a ficar gigante;
   2) o cabecalho e <h3><span class="ui-icon"/><a>Texto</a></h3>: o flex tem de ficar no H3. Posto so
      no <a>, a seta (bloco, no tema) ocupa a linha inteira e joga o nome do grupo para baixo. */
body .r2-sidebar {
    padding: 12px 10px;
}

body .r2-sidebar .r2-menu-panel,
body .r2-sidebar .r2-menu-panel .ui-panelmenu-panel {
    width: 100%;
    border: 0;
    margin: 0;
    background: transparent;
}

body .r2-sidebar .r2-menu-panel h3.ui-panelmenu-header,
body .r2-sidebar .r2-menu-panel .ui-panelmenu-panel:first-child h3.ui-panelmenu-header,
body .r2-sidebar .r2-menu-panel h3.ui-panelmenu-header.ui-state-active {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--r2-muted);
}

body .r2-sidebar .r2-menu-panel h3.ui-panelmenu-header .ui-icon {
    flex: none;
    margin: 0;
    font-size: 12px;
}

body .r2-sidebar .r2-menu-panel h3.ui-panelmenu-header a {
    display: block;
    flex: 1;
    padding: 0;
    color: inherit;
}

body .r2-sidebar .r2-menu-panel h3.ui-panelmenu-header.ui-state-hover,
body .r2-sidebar .r2-menu-panel h3.ui-panelmenu-header.ui-state-active:hover {
    border: 0;
    background: var(--r2-ground);
    color: var(--r2-accent-ink);
}

body .r2-sidebar .r2-menu-panel .ui-panelmenu-content {
    border: 0;
    background: transparent;
    padding: 0 0 4px;
}

body .r2-sidebar .r2-menu-panel .ui-panelmenu-content .ui-menuitem-link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px 5px 20px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.25;
    color: var(--r2-ink);
}

body .r2-sidebar .r2-menu-panel .ui-panelmenu-content .ui-menuitem-link .ui-menuitem-icon {
    margin: 0;
    font-size: 14px;
}

body .r2-sidebar .r2-menu-panel .ui-panelmenu-content .ui-menuitem-link.ui-state-hover {
    background: var(--r2-ground);
    color: var(--r2-accent-ink);
}

/* A pagina aberta: o menu diz ONDE voce esta, nao so para onde pode ir. */
body .r2-sidebar .r2-menu-panel .ui-panelmenu-content .r2-menu-item-ativo > .ui-menuitem-link,
body .r2-sidebar .r2-menu-panel .ui-panelmenu-content .ui-menuitem-link.r2-menu-item-ativo,
body .r2-sidebar .ui-button.r2-menu-link.r2-menu-item-ativo {
    background: #e4edf4;
    color: #33366b;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #5a5fb0;
}

/* Os links soltos (Dashboard e o rodape) encolhem junto. */
body .r2-sidebar .ui-button.r2-menu-link,
body .r2-sidebar .ui-commandlink.r2-menu-link {
    margin: 0 0 3px;
    padding: 5px 8px;
    font-size: 13px;
    line-height: 1.25;
    border-radius: 6px;
}

.r2-menu-section {
    margin-bottom: 8px;
}

/* Rodape do menu (Cliente / Portal / Sair): atalhos, nao assuntos — ficam fora do acordeao. */
.r2-menu-rodape {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--r2-line);
}

.r2-portal-page {
    min-height: calc(100vh - 64px);
    padding: 32px 24px;
    box-sizing: border-box;
}

.r2-portal-wrap {
    max-width: 1120px;
    margin: 0 auto;
}

.r2-portal-intro {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 22px;
}

.r2-portal-title {
    margin: 0;
    font-size: 32px;
    line-height: 1.15;
    color: var(--r2-accent-ink);
}

.r2-portal-text {
    max-width: 680px;
    margin: 8px 0 0;
    color: var(--r2-muted);
    line-height: 1.5;
}

.r2-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.r2-card-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.r2-card {
    background: var(--r2-surface);
    border: 1px solid var(--r2-line);
    border-radius: 8px;
    padding: 18px;
    box-sizing: border-box;
    min-height: 150px;
}

.r2-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.r2-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--r2-line);
    color: var(--r2-accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: 0 0 auto;
}

.r2-card h2,
.r2-card h3 {
    margin: 0;
    color: var(--r2-accent-ink);
}

.r2-card p {
    margin: 8px 0 16px;
    color: var(--r2-muted);
    line-height: 1.45;
}

.r2-dashboard-card .ui-button {
    margin-top: auto;
}

.r2-module-bar {
    background: var(--r2-surface);
    border-bottom: 1px solid var(--r2-line);
    padding: 10px 18px;
    display: flex;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
}

.r2-workspace {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 300px;
    gap: 14px;
    padding: 16px;
    box-sizing: border-box;
}

.r2-workspace-side,
.r2-workspace-main,
.r2-workspace-support {
    min-width: 0;
}

.r2-workspace-box {
    background: var(--r2-surface);
    border: 1px solid var(--r2-line);
    border-radius: 8px;
    padding: 14px;
    box-sizing: border-box;
    min-height: calc(100vh - 150px);
}

.r2-area-title,
.area-title {
    margin: 0 0 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0;
    font-weight: 700;
    color: var(--r2-muted);
}

.r2-muted,
.placeholder {
    color: var(--r2-muted);
    line-height: 1.45;
}

/* Texto longo em célula de tabela: corta com reticências em vez de alargar a coluna.
   O conteúdo completo fica no title (tooltip). */
.r2-truncado {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r2-footer {
    padding: 14px 22px;
    color: var(--r2-muted);
    font-size: 12px;
    border-top: 1px solid var(--r2-line);
    background: var(--r2-surface);
}

.r2-panel-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.r2-tree {
    border: 0;
    padding: 0;
}

.r2-tree-node-detail {
    color: var(--r2-muted);
    font-size: 12px;
    margin-left: 1.45rem;
}

.r2-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    color: var(--r2-muted);
    font-size: 13px;
}

.r2-table-footer > div {
    display: flex;
    gap: 8px;
}

.r2-pre {
    max-height: 220px;
    overflow: auto;
    margin: 0;
    padding: 10px;
    background: var(--r2-ground);
    border: 1px solid var(--r2-line);
    border-radius: 6px;
    white-space: pre-wrap;
    word-break: break-word;
}

.ui-growl {
    top: 76px;
}

.r2-cliente-titlebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.r2-titlebar-logo {
    width: 20px;
    height: 20px;
    padding: 2px;
    border-radius: 50%;
    background: var(--r2-surface);
    box-sizing: border-box;
    display: block;
}

.r2-login-body {
    /* min-height cobre a viewport inteira: sem isso o gradiente parava na altura do
       conteúdo e o fundo do html aparecia atrás — o efeito "bi-color" (achado do PO). */
    min-height: 100vh;
    box-sizing: border-box;
    background: linear-gradient(180deg, #f2f3f5 0%, #e3e7ec 100%);
}
:root[data-theme="dark"] .r2-login-body {
    background: linear-gradient(180deg, #1b2637 0%, #131c28 100%);
}

.r2-login-wrap {
    max-width: 420px;
    margin: 3.2rem auto 0;
    padding: 0 16px;
}

.r2-login-brand {
    text-align: center;
    margin-bottom: 18px;
}

.r2-login-logo {
    height: 120px;
    width: auto;
}

.r2-login-title {
    margin: 10px 0 0;
    font-size: 22px;
    color: var(--r2-accent-ink);
}

.r2-login-subtitle {
    margin: 4px 0 0;
    color: var(--r2-muted);
    font-size: 14px;
}

.r2-login-card.ui-panel {
    border: 1px solid var(--r2-line);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(10, 46, 92, .12);
    overflow: hidden;
}

.r2-login-card .ui-panel-content {
    padding: 18px;
}

/* p:password com toggleMask (o olho de "mostrar senha"): o PrimeFaces envolve o input num span
   posicionado e põe o ícone absoluto à direita DO SPAN. O input do p:password NÃO tem a classe
   ui-inputtext, então a regra `.ui-fluid .ui-inputtext { width:100% }` do tema não o alcança: o
   span ocupava a largura toda e o input ficava no tamanho natural, com o olho solto longe da
   borda (visto no login em 2026-09-08). O input passa a preencher o span, e o olho cai onde se
   espera: dentro do campo. Vale para login, definir senha e trocar senha. */
.ui-fluid .ui-password > .ui-inputfield {
    width: 100%;
    box-sizing: border-box;
}

.r2-login-botao.ui-button {
    background: #0a2e5c;
    border-color: var(--r2-accent-ink);
    font-weight: 700;
}

.r2-login-botao.ui-button:hover,
.r2-login-botao.ui-button:focus {
    background: #0a2e5c;
    border-color: var(--r2-accent-ink);
}

.r2-login-rodape {
    text-align: center;
    color: var(--r2-muted);
    font-size: 12px;
    letter-spacing: .08em;
    margin-top: 16px;
}

@media (max-width: 1100px) {
    .r2-card-grid,
    .r2-card-grid--three {
        grid-template-columns: 1fr;
    }

    .r2-workspace {
        grid-template-columns: 1fr;
    }

    .r2-workspace-box {
        min-height: auto;
    }

    .r2-cliente-content,
    .r2-cliente-main-header {
        grid-template-columns: 1fr;
    }

    .r2-cliente-tree-panel {
        border-right: 0;
        border-bottom: 2px solid var(--r2-line-strong);
    }
}

@media (max-width: 820px) {
    .r2-topbar,
    .r2-portal-intro {
        flex-direction: column;
        align-items: flex-start;
    }

    .r2-userbox {
        text-align: left;
    }

    .r2-userbox-pilha {
        align-items: flex-start;
    }

    .r2-shell {
        flex-direction: column;
    }

    .r2-sidebar {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--r2-line);
    }

    .r2-content {
        padding: 16px;
    }

    .r2-cliente-tabs,
    .r2-cliente-toolbar,
    .r2-cliente-titlebar {
        flex-wrap: wrap;
    }

    .r2-cliente-tab-spacer {
        display: none;
    }
}

/* Busca: trecho do conteúdo truncado (tooltip nativo via title mostra o texto completo) */
.r2-trecho {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 280px;
    white-space: normal;
    cursor: help;
}

/* Busca: placeholder do painel de resultados antes da primeira busca */
.r2-resultados-vazio {
    padding: 1rem;
    min-height: 240px;
}

/* Painel de resultados transparente para a marca d'água aparecer atrás enquanto não há
   busca. No PrimeFaces 13 o tabView usa as classes .ui-tabs*. Quando a busca é feita, a
   dataTable tem o seu próprio fundo (pode sobrepor). */
.r2-tabs,
.r2-tabs.ui-tabs,
.r2-tabs .ui-tabs-panels,
.r2-tabs .ui-tabs-panel,
.r2-resultados-vazio {
    background: transparent !important;
    background-color: transparent !important;
}

/* Busca: nome/título longo truncado em 1 linha (tooltip via title mostra o completo) */
.r2-truncado {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
}

/* =====================================================================
   Cliente — camada compacta ("console de arquivo"): densidade, escala de
   tipo e hierarquia. Escopada em .r2-cliente-content (não troca o tema).
   ===================================================================== */
/* Tokens do design compacto — em :root para valerem em TODO o módulo web
   (cliente e gerenciador), não só na tela de busca. */
/* Paleta Nexadoc (manual da marca, rebranding/LEIA-ME.md): Índigo Arquivo #0a2e5c,
   Azul Fluxo var(--r2-accent), Ciano Nó #30b0c5 (acento único, ≤5%), Nanquim #071426,
   Grafite #767a7b, Papel Frio #f2f3f5. O degradê pertence ao símbolo — nenhum
   elemento da interface o reproduz. */
:root {
    /* --- Superfícies (novos tokens do tema Day/Night — doc/tema-day-night-web.md).
       No Dia valem exatamente as cores de hoje; o dark redefine só os valores. --- */
    --r2-surface: #ffffff;   /* fundo de card, input, diálogo (era #fff/#ffffff) */
    --r2-ground: #f6f8fa;    /* fundo da página */
    --r2-on-accent: #ffffff; /* texto/ícone SOBRE o azul de acento (não inverte no dark) */

    --r2-ink: #1f2b37;
    --r2-muted: #767a7b;
    --r2-faint: #8a97a6;
    --r2-line: #e4e8ee;
    --r2-line-strong: #d5dbe4;
    --r2-accent: #227297;
    --r2-accent-ink: #0a2e5c;
    --r2-accent-tint: #e8f1f6;
    --r2-accent-tint2: #d9e9f1;

    /* Status — mesmas cores que já viviam hardcoded (vermelho/verde/âmbar). */
    --r2-erro: #b91c1c;
    --r2-ok: #0f7b43;
    --r2-alerta: #b45309;
    /* Fundos suaves de status (as caixas coloridas de aviso/erro/ok). */
    --r2-erro-tint: #fdeceb;
    --r2-ok-tint: #e6f4ea;
    --r2-alerta-tint: #fef3c7;

    /* Espaçamento único entre botões irmãos (doc/botoes-padrao.md). */
    --r2-gap-botoes: 8px;
    --nexadoc-no: #30b0c5;
}

/* ============================ TEMA NOITE ============================
   Só os TOKENS mudam — nenhuma regra de layout é reescrita. Cobre duas
   camadas: (1) os tokens --r2-* do CSS custom; (2) as variáveis do PrimeOne
   que o tema saga expõe (valores do par escuro arya), o que escurece TODOS
   os componentes PrimeFaces de uma vez. Ver doc/tema-day-night-web.md.
   ⚠️ Enquanto o CSS custom ainda tiver cor hardcoded (PR-2/PR-3), algumas
   áreas seguem claras no escuro — é esperado nesta fase. */
:root[data-theme="dark"] {
    /* Paleta VELA (o "Vela Blue" do showcase do PrimeFaces): azul-petróleo, não
       cinza neutro. Fundo #17212f, cards #1f2d40, bordas #304562, acento azul.
       Escolhida pelo PO em 2026-08-29. */
    --r2-surface: #1f2d40;      /* card, input, diálogo */
    --r2-ground: #17212f;       /* fundo da página */
    --r2-surface-alt: #24344a;  /* zebra de tabela, hover suave */
    --r2-on-accent: #0b1622;    /* texto SOBRE o azul de acento (o acento é claro) */

    --r2-ink: rgba(255, 255, 255, 0.87);
    --r2-muted: rgba(255, 255, 255, 0.60);
    --r2-faint: rgba(255, 255, 255, 0.42);
    --r2-line: #304562;
    --r2-line-strong: #3d5675;
    --r2-accent: #64b5f6;       /* azul de acento (botões, links) */
    --r2-accent-ink: #90caf9;   /* títulos/ícones de acento */
    --r2-accent-tint: #23364d;  /* fundo de chip/selo de acento */
    --r2-accent-tint2: #2b4162;

    --r2-erro: #f87171;
    --r2-ok: #4ade80;
    --r2-alerta: #fbbf24;
    --r2-erro-tint: #3a2223;
    --r2-ok-tint: #1c3a2b;
    --r2-alerta-tint: #3a3320;

    /* --- Componentes PrimeFaces (variáveis do PrimeOne = tema vela) --- */
    --surface-a: #1f2d40;
    --surface-b: #17212f;
    --surface-c: rgba(255, 255, 255, 0.03);
    --surface-d: #304562;
    --surface-e: #1f2d40;
    --surface-f: #1f2d40;
    --text-color: rgba(255, 255, 255, 0.87);
    --text-color-secondary: rgba(255, 255, 255, 0.6);
    --primary-color: #90caf9;
    --primary-color-text: #0b1622;
    --surface-0: #17212f;
    --surface-50: #2e3744;
    --surface-100: #454d59;
    --surface-200: #5d646d;
    --surface-300: #747a82;
    --surface-400: #8b9097;
    --surface-500: #a2a6ac;
    --surface-600: #b9bcc1;
    --surface-700: #d1d3d5;
    --surface-800: #e8e9ea;
    --surface-900: #ffffff;
    --gray-50: #e8e9ea;
    --gray-100: #d1d3d5;
    --gray-200: #b9bcc1;
    --gray-300: #a2a6ac;
    --gray-400: #8b9097;
    --gray-500: #747a82;
    --gray-600: #5d646d;
    --gray-700: #454d59;
    --gray-800: #2e3744;
    --gray-900: #17212f;
    --surface-ground: #17212f;
    --surface-section: #17212f;
    --surface-card: #1f2d40;
    --surface-overlay: #1f2d40;
    --surface-border: #304562;
    --surface-hover: rgba(255, 255, 255, 0.04);
    --maskbg: rgba(0, 0, 0, 0.5);
    --focus-ring: 0 0 0 1px #b1dafb;
    color-scheme: dark;
}

/* O fundo da página e a tinta base saem dos tokens — é o que faz o "fundo"
   escurecer de imediato, mesmo antes de tokenizar cada área (PR-2/PR-3). */
html, body {
    background: var(--r2-ground);
    color: var(--r2-ink);
}

/* Marca nas barras escuras. Mínimos do manual: horizontal-simples 140px de largura
   (984×277 → 40px de altura já dá ~142px); símbolo sozinho 32px de largura. Na
   titlebar fina do cliente vai o símbolo + nome em texto de interface — texto de UI
   não é o logotipo, então os mínimos do desenho não se aplicam a ele. */
.r2-brand-logo {
    height: 40px;
    width: auto;
    display: block;
}
.r2-titlebar-marca {
    height: 32px;
    width: 32px;
    display: block;
}
/* Base compacta reutilizável (aplicada a .r2-cliente-content e a .r2-content) */
.r2-compact { font-size: 13px; }
/* Layout específico do cliente (grid da busca) */
.r2-cliente-content {
    grid-template-columns: 344px minmax(0, 1fr);
    min-height: 0;
    align-items: start;
}

/* Painéis mais claros e compactos. O painel principal acompanha o conteúdo (sem
   esticar); a árvore mantém a borda em altura cheia. */
.r2-cliente-tree-panel {
    border-right: 1px solid var(--r2-line);
    padding: 12px;
    min-height: calc(100vh - 80px);
}
.r2-cliente-main-panel {
    background: var(--r2-surface);
    padding: 12px 14px;
}

/* Logo do repositório: ancorado no rodapé do painel lateral (a coluna vira flex
   para empurrar a logo para baixo, abaixo da árvore/indexadores). */
.r2-cliente-content .r2-cliente-tree-panel {
    display: flex;
    flex-direction: column;
}
.r2-cliente-repo-logo {
    margin-top: auto;
    padding-top: 14px;
    text-align: center;
}
.r2-cliente-repo-logo img {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
}

/* Eyebrow das seções (Diretório / Indexadores / Resultados) */
.r2-compact .r2-area-title,
.r2-compact .area-title {
    font-size: 11px;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--r2-muted);
    margin: 0 0 6px;
}
.r2-compact .r2-muted { color: var(--r2-muted); }

/* Campos compactos */
.r2-compact .ui-inputfield,
.r2-compact .ui-inputtext,
.r2-compact .ui-selectonemenu,
.r2-compact .ui-inputtextarea {
    font-size: 13px;
    padding: 6px 8px;
    border-color: var(--r2-line-strong);
    border-radius: 6px;
}
.r2-compact .ui-inputfield:enabled:focus,
.r2-compact .ui-inputtext:enabled:focus,
.r2-compact .ui-inputtextarea:enabled:focus {
    border-color: var(--r2-accent);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}
.r2-compact .ui-selectonemenu { display: flex; align-items: center; }
.r2-cliente-content label { font-size: 12px; color: var(--r2-muted); }

/* Botões compactos */
.r2-compact .ui-button {
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 6px;
}
.r2-compact .ui-button.ui-button-icon-only {
    width: 30px;
    height: 30px;
    padding: 0;
}
.r2-btn-primary.ui-button {
    background: var(--r2-accent);
    border-color: var(--r2-accent);
    color: #fff;
}
.r2-btn-primary.ui-button:enabled:hover {
    background: var(--r2-accent-ink);
    border-color: var(--r2-accent-ink);
}
/* Lupa do grupo de busca por conteúdo em indigo */
.r2-cliente-content .p-inputgroup .ui-button,
.r2-compact .ui-inputgroup .ui-button {
    background: var(--r2-accent);
    border-color: var(--r2-accent);
    color: #fff;
}

/* Fieldset "Filtros avançados" discreto */
.r2-compact .ui-fieldset .ui-fieldset-legend {
    font-size: 12px;
    font-weight: 600;
    color: var(--r2-muted);
    padding: 6px 10px;
}
/* Fieldset recolhido = só a legenda (sem a caixa vazia); expandido = campos abaixo */
.r2-compact .ui-fieldset { border: 0; padding: 0; }
.r2-compact .ui-fieldset .ui-fieldset-content { padding: 8px 0 0; }

/* Árvore (Diretório) compacta + acento indigo na seleção */
.r2-compact .ui-tree {
    border: 0;
    padding: 0;
    background: transparent;
    font-size: 13px;
    width: 100%;
}
.r2-compact .ui-tree .ui-treenode-content { padding: 1px 2px; }
.r2-compact .ui-tree .ui-treenode-label { padding: 2px 6px; border-radius: 5px; }
.r2-compact .ui-tree .ui-tree-toggler { color: var(--r2-muted); }
.r2-compact .ui-tree .pi { color: var(--r2-faint); font-size: 14px; }
.r2-compact .ui-tree .ui-treenode-label.ui-state-highlight {
    background: var(--r2-accent-tint);
    color: var(--r2-accent-ink);
    font-weight: 600;
}
.r2-compact .ui-tree .ui-treenode-label.ui-state-highlight .pi { color: var(--r2-accent); }

/* Tabela de resultados compacta, cabeçalho fixo, seleção indigo */
.r2-compact .ui-datatable table { font-size: 13px; }
.r2-compact .ui-datatable thead th {
    padding: 7px 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-weight: 600;
    color: var(--r2-muted);
    background: var(--r2-ground);
    border-color: var(--r2-line-strong);
    position: sticky;
    top: 0;
    z-index: 1;
}
.r2-compact .ui-datatable tbody td {
    padding: 7px 10px;
    border-color: #eef1f5;
    vertical-align: middle;
}
.r2-compact .ui-datatable tbody tr.ui-state-highlight {
    background: var(--r2-accent-tint);
    color: var(--r2-ink);
}
.r2-compact .ui-paginator { padding: 6px; }

/* Dados: numerais tabulares alinhados (Tamanho / Criado em) */
.r2-num {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--r2-muted);
}
.r2-num.r2-right { text-align: right; display: block; color: var(--r2-ink); }

/* Tags de status e status de OCR */
.r2-tag {
    display: inline-flex;
    align-items: center;
    height: 19px;
    padding: 0 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.r2-tag.idx { background: #e8f1f6; color: var(--r2-accent-ink); }
.r2-tag.fech { background: #eef7f0; color: var(--r2-ok); }
.r2-tag.gen { background: #eef1f5; color: var(--r2-muted); }
/* Tema Noite: o fundo das tags era claro fixo (texto ilegível, pois o token do texto clareia).
   Escurece só o fundo — o texto (token) já vira claro sozinho. */
:root[data-theme="dark"] .r2-tag.idx { background: rgba(144, 202, 249, .16); }
:root[data-theme="dark"] .r2-tag.fech { background: rgba(74, 222, 128, .16); }
:root[data-theme="dark"] .r2-tag.gen { background: rgba(255, 255, 255, .09); }
/* p:tag severity="secondary" não tem cor no vela dark → chip neutro legível (padrão pastel do vela) */
:root[data-theme="dark"] .ui-tag.ui-tag-secondary { background: #b0bec5; color: #121212; }
.r2-ocr-ok { color: #0f9d58; font-weight: 600; }
.r2-ocr-pend { color: #c77700; font-weight: 600; }
:root[data-theme="dark"] .r2-ocr-ok { color: #4ade80; }
:root[data-theme="dark"] .r2-ocr-pend { color: #fbbf24; }
.r2-ocr-none { color: var(--r2-muted); }

/* Cabeçalho de Resultados com chip de contagem */
.r2-res-head { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.r2-count {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--r2-ground);
    border: 1px solid var(--r2-line);
    font-size: 11px;
    font-weight: 600;
    color: var(--r2-muted);
}

/* Trecho do conteúdo: 2 linhas na densidade nova */
.r2-cliente-content .r2-trecho { -webkit-line-clamp: 2; line-clamp: 2; max-width: 240px; }
.r2-cliente-content .r2-truncado { max-width: 230px; }

/* Abas de resultados/preview + corpo do preview do documento */
.r2-compact .ui-tabs .ui-tabs-nav { margin: 0; padding: 0; min-height: 0; }
.r2-compact .ui-tabs .ui-tabs-nav li { margin: 0; top: 0; }
.r2-compact .ui-tabs .ui-tabs-nav a { font-size: 12.5px; padding: 6px 12px; line-height: 1.2; }
.r2-compact .ui-tabs .ui-tabs-nav .ui-tabs-selected a { color: var(--r2-accent-ink); }
.r2-compact .ui-tabs .ui-tabs-title {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}
.r2-compact .ui-tabs .ui-tabs-panels { padding: 6px 0 0; min-height: 0; }
.r2-compact .ui-tabs .ui-tabs-panel { min-height: 0; padding: 0; }
.r2-preview-body {
    height: 74vh;
    border: 1px solid var(--r2-line);
    border-radius: 6px;
    overflow: auto;
    background: var(--r2-ground);
}
.r2-preview-body > object { width: 100%; height: 100%; border: 0; display: block; }
.r2-preview-img { text-align: center; }
.r2-preview-img img { max-width: 100%; height: auto; }
.r2-tab-title-wrap { display: inline-flex; align-items: center; gap: 6px; max-width: 180px; vertical-align: middle; overflow: hidden; }
/* display:inline-block é essencial: <span> inline ignora max-width/ellipsis */
.r2-tab-title { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.r2-tab-close { color: var(--r2-faint); font-size: 11px; line-height: 1; }
.r2-tab-close:hover { color: #c0392b; }

/* Barra de ações dos resultados: ícones outline (não azul sólido) */
.r2-toolbar .ui-button.ui-button-icon-only {
    background: var(--r2-surface);
    border: 1px solid var(--r2-line-strong);
    color: var(--r2-muted);
}
.r2-toolbar .ui-button.ui-button-icon-only:enabled:hover {
    background: var(--r2-accent-tint);
    border-color: var(--r2-accent-tint2);
    color: var(--r2-accent-ink);
}

/* =====================================================================
   Gerenciador — vocabulário compacto nas páginas CRUD (Fase 1), via
   .r2-content (não precisa editar cada página). Remove o chrome pesado do
   p:panel, compacta filtros e deixa as ações da tabela em linha baixa.
   ===================================================================== */
/* Painel externo sem borda/fundo; título vira eyebrow discreto */
.r2-compact .ui-panel {
    border: 0;
    background: transparent;
    box-shadow: none;
}
.r2-compact .ui-panel > .ui-panel-titlebar {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 2px 0 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--r2-muted);
}
.r2-compact .ui-panel > .ui-panel-content {
    padding: 0;
    border: 0;
    background: transparent;
}
/* panelGrid de filtros: sem fundo/borda e mais apertado */
.r2-compact .ui-panelgrid,
.r2-compact .ui-panelgrid tr,
.r2-compact .ui-panelgrid td {
    background: transparent;
    border-color: transparent;
}
.r2-compact .ui-panelgrid td { padding: 5px 8px; }
/* Toolbar de ações leve */
.r2-compact .ui-toolbar {
    background: transparent;
    border: 0;
    padding: 8px 0;
}
/* Ações da tabela: botões pequenos e lado a lado, sem quebrar linha (linhas baixas) */
.r2-compact .ui-datatable tbody td:last-child { white-space: nowrap; }
.r2-compact .ui-datatable td .ui-button {
    padding: 3px 9px;
    font-size: 12px;
    margin: 0 5px 0 0;
    display: inline-flex;
    vertical-align: middle;
}

/* Botões do gerenciador na cor da marca (indigo), consistente com o cliente.
   Diálogos ficam fora de .r2-content (appendTo body) e mantêm o estilo próprio. */
.r2-content .ui-button {
    background: var(--r2-accent);
    border-color: var(--r2-accent);
    color: #ffffff;
}
.r2-content .ui-button:enabled:hover {
    background: var(--r2-accent-ink);
    border-color: var(--r2-accent-ink);
}
/* Ações da tabela como ícones ghost (leves), indigo no hover — como na busca */
.r2-compact .ui-datatable td .ui-button.ui-button-icon-only {
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0 4px 0 0;
    background: var(--r2-surface);
    border: 1px solid var(--r2-line-strong);
    color: var(--r2-muted);
    border-radius: 6px;
}
.r2-compact .ui-datatable td .ui-button.ui-button-icon-only:enabled:hover {
    background: var(--r2-accent-tint);
    border-color: var(--r2-accent-tint2);
    color: var(--r2-accent-ink);
}

/* =====================================================================
   Diálogos (p:dialog de Novo/Editar). Ficam anexados ao body, fora dos
   containers .r2-compact/.r2-content, então recebem densidade e limite de
   altura aqui — evita o diálogo "gigante" cortado na parte de baixo.
   ===================================================================== */
.ui-dialog {
    font-size: 13px;
    max-width: 96vw;
}
.ui-dialog .ui-dialog-titlebar {
    padding: 10px 16px;
    font-size: 14px;
}
/* Corpo do diálogo rola internamente em vez de estourar a tela */
.ui-dialog .ui-dialog-content {
    max-height: 74vh;
    overflow: auto;
    padding: 14px 16px;
}
/* Campos compactos dentro do diálogo */
.ui-dialog .ui-inputfield,
.ui-dialog .ui-inputtext,
.ui-dialog .ui-selectonemenu,
.ui-dialog .ui-inputtextarea {
    font-size: 13px;
    padding: 6px 8px;
}
.ui-dialog .ui-selectonemenu { display: flex; align-items: center; }
/* Grade de rótulo/campo mais apertada */
.ui-dialog .ui-panelgrid,
.ui-dialog .ui-panelgrid tr,
.ui-dialog .ui-panelgrid td {
    border-color: transparent;
    background: transparent;
}
.ui-dialog .ui-panelgrid td { padding: 4px 8px; }
.ui-dialog .ui-outputlabel,
.ui-dialog label { font-size: 13px; color: var(--r2-ink); }
/* Botões do diálogo compactos; rodapé com o primário indigo */
.ui-dialog .ui-button {
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 6px;
}
.ui-dialog .ui-dialog-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--r2-line);
}
.ui-dialog .ui-dialog-footer .ui-button {
    background: var(--r2-accent);
    border-color: var(--r2-accent);
    color: #ffffff;
}
.ui-dialog .ui-dialog-footer .ui-button:enabled:hover {
    background: var(--r2-accent-ink);
    border-color: var(--r2-accent-ink);
}

/* =====================================================================
   Fase 3+4 — reconciliação de paleta: chrome do cliente (barra de abas e
   toolbar) e cards (dashboards/portal) alinhados aos tokens indigo, sem
   perder a metáfora de "janela de aplicativo".
   ===================================================================== */
/* Barra de abas de módulo: fundo claro, botões estilo menu (ghost, indigo no hover) */
.r2-cliente-tabs {
    background: var(--r2-surface);
    border-bottom: 1px solid var(--r2-line-strong);
}
.r2-cliente-tabs .ui-button {
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--r2-muted);
    font-weight: 600;
}
.r2-cliente-tabs .ui-button:hover {
    background: var(--r2-accent-tint);
    color: var(--r2-accent-ink);
}
/* Aba ativa (página atual): destaque indigo + indicador inferior */
.r2-cliente-tabs .ui-button.r2-cliente-tab-ativa,
.r2-cliente-tabs .ui-button.r2-cliente-tab-ativa:hover {
    background: var(--r2-accent-tint);
    color: var(--r2-accent-ink);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--r2-accent);
}
/* Toolbar de ferramentas: fundo neutro, botões brancos com hover indigo */
.r2-cliente-toolbar {
    background: var(--r2-ground);
    border-bottom: 1px solid var(--r2-line);
}
.r2-cliente-toolbar .ui-button {
    min-width: 0;
    background: var(--r2-surface);
    border: 1px solid var(--r2-line-strong);
    border-radius: 6px;
    color: var(--r2-ink);
    font-weight: 500;
}
.r2-cliente-toolbar .ui-button:hover {
    background: var(--r2-accent-tint);
    border-color: var(--r2-accent-tint2);
    color: var(--r2-accent-ink);
}
/* Painel principal do cliente: branco, sem chrome lilás no titlebar */
.r2-cliente-main-panel { background: var(--r2-surface); }
.r2-cliente-main-panel .ui-panel-titlebar {
    background: transparent;
    color: var(--r2-ink);
}
/* Cards (dashboards/portal): borda no token, ícone indigo, hover sutil */
.r2-card {
    border: 1px solid var(--r2-line);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.r2-card:hover {
    border-color: var(--r2-accent-tint2);
    box-shadow: 0 6px 18px rgba(79, 70, 229, .08);
    transform: translateY(-1px);
}
.r2-card-icon {
    background: var(--r2-accent-tint);
    color: var(--r2-accent-ink);
}

/* Painel de conteúdo do cliente: fundo branco até o rodapé + marca d'água R2 esmaecida. */
.r2-cliente-content .r2-cliente-main-panel {
    min-height: calc(100vh - 80px);
    position: relative;
}
.r2-cliente-content .r2-cliente-main-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background-image é definido no template (resource EL) — url() relativo não
       resolve no CSS servido via jakarta.faces.resource. */
    background-repeat: no-repeat;
    background-position: center 55%;
    background-size: min(440px, 55%);
    opacity: .06;
    pointer-events: none;
    z-index: 0;
}
.r2-cliente-content .r2-cliente-main-panel > * {
    position: relative;
    z-index: 1;
}

/* Dashboard do cliente: logo do repositório grande na coluna lateral (sem árvore). */
.r2-dashboard-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 140px);
    padding: 24px;
}
.r2-dashboard-logo img {
    max-width: 100%;
    max-height: 340px;
    object-fit: contain;
}

/* =====================================================================
   Visualizador de documento página a página (girar / miniaturas / zoom)
   — paridade web↔desktop, edital 2.1.4.3. As páginas do PDF (e as imagens)
   vêm rasterizadas em PNG pelo servlet /documento-pagina; o giro e o zoom
   são só transformação CSS no cliente.
   ===================================================================== */
.r2-viewer {
    border: 1px solid var(--r2-line-strong);
    border-radius: 6px;
    overflow: hidden;
}
.r2-viewer-bar {
    display: flex;
    align-items: center;
    gap: .15rem;
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--r2-line);
    background: var(--r2-accent-tint);
}
.r2-viewer-bar .ui-button.ui-button-flat {
    background: transparent;
    border: none;
    color: var(--r2-accent-ink);
}
.r2-viewer-bar .ui-button.ui-button-flat:hover { background: var(--r2-accent-tint2); }
.r2-viewer-sep { width: 1px; height: 20px; background: var(--r2-line-strong); margin: 0 .35rem; }
.r2-viewer-nav { display: flex; align-items: center; gap: .2rem; margin-left: auto; }
.r2-viewer-ind {
    font-size: .82rem;
    min-width: 66px;
    text-align: center;
    color: var(--r2-ink);
    font-variant-numeric: tabular-nums;
}
.r2-viewer-body { display: flex; height: 72vh; }
.r2-viewer-minis {
    width: 132px;
    flex: 0 0 132px;
    overflow-y: auto;
    border-right: 1px solid var(--r2-line);
    padding: .4rem;
    background: var(--r2-ground);
}
.r2-mini {
    cursor: pointer;
    text-align: center;
    padding: .2rem;
    margin-bottom: .45rem;
    border: 2px solid transparent;
    border-radius: 4px;
}
.r2-mini:hover { background: var(--r2-accent-tint); }
.r2-mini img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    background: var(--r2-surface);
}
.r2-mini span { font-size: .72rem; color: var(--r2-muted); }
.r2-mini-sel { border-color: var(--r2-accent); background: var(--r2-accent-tint); }
/* Palco de rolagem contínua: todas as páginas empilhadas verticalmente. Bloco (não flex),
   para o zoom além da largura rolar na horizontal sem cortar a página à esquerda. */
.r2-viewer-palco {
    position: relative;
    flex: 1;
    overflow: auto;
    padding: 16px;
    background: #525659;
}
.r2-pagina-box {
    position: relative;
    margin: 0 auto 14px;
    min-height: 42vh;
    width: 80%;
    background: var(--r2-surface);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
/* Caso normal (0°/180°): imagem em FLUXO, largura cheia da caixa — a rolagem contínua
   funciona por CSS puro, sem depender do JS. */
.r2-pagina {
    display: block;
    width: 100%;
    height: auto;
    background: var(--r2-surface);
    transition: transform .12s ease;
}
/* Girada 90°/270°: a imagem vira ABSOLUTE e centrada; o JS troca largura/altura da caixa
   para reservar o espaço do giro (senão as páginas se sobreporiam). */
.r2-pagina-box.r2-girada .r2-pagina {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
}


/* ---------------------------------------------------------------------------
   Tabela de resultados: colunas legíveis e ajustáveis

   O defeito que isto corrige: as colunas de metadados só tinham max-width. Com o
   table-layout fixo que o resizableColumns impõe, elas podiam encolher sem piso e
   iam parar em ~55px — o rótulo virava "CONTR", "OBJET", "TRECH", e o dado ficava
   ilegível — enquanto as colunas de largura fixa ficavam folgadas. Agora cada
   coluna tem um piso (min-width no próprio p:column) e, quando a soma não cabe,
   a tabela ROLA na horizontal em vez de espremer.
   --------------------------------------------------------------------------- */
.r2-tabela-colunas .ui-datatable-tablewrapper {
    overflow-x: auto;
}
.r2-tabela-colunas table {
    min-width: 100%;
}
/* O truncamento passa a valer a largura REAL da coluna: os max-width fixos de
   .r2-truncado/.r2-trecho anulavam o ganho de espaço de uma coluna alargada
   (na mão ou pelo "expandir todas"). */
.r2-tabela-colunas .r2-truncado,
.r2-tabela-colunas .r2-trecho {
    max-width: 100%;
}

/* Menu de contexto do CABEÇALHO (clique direito sobre o título da coluna).
   Feito à mão: o p:contextMenu do PrimeFaces 13 só prende nas linhas da tabela
   (tem `for` e `targetFilter`, não `selector`), e não há como apontá-lo para o
   thead. São ~40 linhas de JS próprio em vez de uma dependência nova. */
.r2-menu-colunas {
    position: fixed;
    z-index: 2000;
    min-width: 232px;
    padding: 4px;
    background: var(--r2-surface);
    border: 1px solid var(--r2-line-strong);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(31, 43, 55, .16);
    font-size: 13px;
    color: var(--r2-ink);
}
.r2-menu-colunas button {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.r2-menu-colunas button:hover,
.r2-menu-colunas button:focus-visible {
    background: var(--r2-accent-tint);
    color: var(--r2-accent-ink);
    outline: none;
}
.r2-menu-colunas .pi { font-size: 12px; color: var(--r2-muted); }
.r2-menu-colunas button:hover .pi { color: var(--r2-accent-ink); }
.r2-menu-colunas hr {
    margin: 4px 6px;
    border: 0;
    border-top: 1px solid var(--r2-line);
}

/* ---------- Busca: a lateral vira a ficha do documento aberto ---------- */
/* Com documento aberto, os filtros de busca não servem — e a coluna estava ali sem uso enquanto o
   documento ficava espremido no centro. Reaproveitar a largura que já existe é melhor do que tirar
   espaço das folhas. */
.r2-ficha-titulo { font-weight: 600; font-size: .95rem; word-break: break-word; }
.r2-ficha-sub { color: var(--r2-muted); font-size: .78rem; margin-bottom: .75rem; }
.r2-ficha-secao {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--r2-muted); margin: .5rem 0 .35rem;
}
.r2-indice { display: flex; flex-direction: column; margin-bottom: .55rem; }
.r2-indice-rotulo { font-size: .72rem; color: var(--r2-muted); }
/* Valor longo quebra em vez de alargar a coluna; o title mostra o inteiro. */
.r2-indice-valor { font-size: .88rem; word-break: break-word; }
.r2-ficha-editar { margin-top: .75rem; width: 100%; }

/* ---------- Busca: filtros rolam, botões ficam ---------- */
/* Com muitos campos de metadado no tipo, "Buscar" e "Limpar" iam parar no fim da página: o operador
   preenchia os filtros e tinha de rolar até embaixo para acionar. Agora só a lista de filtros rola. */
.r2-lateral-fixa {
    display: flex;
    flex-direction: column;
    /* Altura da janela menos cabeçalho e barra de modos; sem teto, o flex não tem do que descontar
       e a área rolável nunca encolhe. */
    max-height: calc(100vh - 150px);
}
.r2-lateral-rolagem {
    flex: 1 1 auto;
    overflow-y: auto;
    /* Obrigatório em flex: sem isto o filho se recusa a encolher abaixo do conteúdo, e a rolagem
       aparece na PÁGINA em vez de aparecer aqui — que é exatamente o defeito que se está corrigindo. */
    min-height: 0;
    padding-right: 4px;
}
.r2-lateral-acoes {
    flex: 0 0 auto;
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px solid var(--r2-line);
    background: var(--r2-surface);
}

/* ---------------------------------------------------------------------------
   Tabela de RESULTADOS da busca: linha mais baixa.

   É a única tabela que o operador varre em dezenas de linhas seguidas, e cada
   pixel de altura tira uma linha do campo de visão — numa tela de notebook a
   diferença é entre ver 10 e ver 14 resultados sem rolar.

   Escopo é a própria tabela (.r2-tabela-colunas), NÃO o .ui-datatable geral:
   as tabelas de cadastro do gerenciador têm poucas linhas e vivem melhor com o
   respiro de 7px. Apertar todas por causa desta seria trocar um problema por
   outro em oito telas.

   O que puxava a altura eram os botões de ação (30px) somados aos 7px de
   padding em cima e embaixo: ~44px por linha.
   --------------------------------------------------------------------------- */
.r2-compact .ui-datatable.r2-tabela-colunas tbody td { padding: 2px 10px; }
.r2-compact .ui-datatable.r2-tabela-colunas tbody td .ui-button.ui-button-icon-only {
    height: 24px;
    width: 24px;
}
.r2-compact .ui-datatable.r2-tabela-colunas tbody td .ui-chkbox,
.r2-compact .ui-datatable.r2-tabela-colunas tbody td .ui-chkbox-box { margin: 0; }

/* ============================================================================
   Responsividade — FUNDAÇÃO (doc/responsividade-web.md, PR-1)

   As três regras abaixo são globais de propósito: consertam o comportamento em
   tela estreita de TODAS as telas de uma vez, sem tocar os 124 p:dialog nem as
   38 tabelas um a um. A meta viewport (nos templates) é o portão que faz o
   celular respeitar estas regras — sem ela, o navegador renderiza a 980px.
   ---------------------------------------------------------------------------- */

/* 1. Diálogo nunca é mais largo que a tela. O PrimeFaces grava a largura
   declarada (width="560") como style inline — max-width vence o inline e o
   diálogo encolhe só quando a tela é menor que ele. O conteúdo interno que
   não couber (panelGrid largo, tabela) rola dentro do próprio diálogo. */
body .ui-dialog {
    max-width: 96vw;
}
body .ui-dialog .ui-dialog-content {
    max-height: 82vh;
    overflow: auto;
}

/* 2. Tabela larga rola dentro do próprio quadro, em vez de estourar o layout.
   O wrapper é do próprio PrimeFaces (envolve toda p:dataTable). */
body .ui-datatable .ui-datatable-tablewrapper {
    overflow-x: auto;
}

/* 3. Nenhuma imagem estoura o contêiner (as logos e o preview já respeitavam;
   isto cobre o que vier a existir). */
.r2-content img,
.r2-cliente-content img {
    max-width: 100%;
    height: auto;
}

/* 2b. Anti-espremer (achado do PO no celular real): a tabela do PF tem width:100%
   e NUNCA estoura — em tela estreita ela espreme as colunas em fatias de ~45px e
   o texto quebra letra a letra. O min-width devolve às colunas a largura de
   leitura e deixa a regra 2 (overflow-x do wrapper) fazer o resto: a tabela
   rola de lado, legível. Tabela com reflow fica DE FORA — ela empilha as
   células (formato cartão), que é o oposto de forçar largura. */
@media (max-width: 760px) {
    body .ui-datatable:not(.ui-datatable-reflow) .ui-datatable-tablewrapper > table {
        min-width: 640px;
    }
}

/* ============================================================================
   Responsividade — PR-2: cliente web no celular (doc/responsividade-web.md)

   Este bloco vive no FIM do arquivo de propósito: a camada compacta redefine
   .r2-cliente-content (344px + 1fr) DEPOIS das media queries antigas do topo,
   o que as matava por ordem de cascata. Aqui, por último, a regra móvel vence.
   ---------------------------------------------------------------------------- */

/* O botão que recolhe a lateral só existe no celular. */
.r2-lateral-toggle {
    display: none;
}

@media (max-width: 900px) {
    /* O grid da busca empilha: lateral em cima (recolhida), conteúdo embaixo. */
    .r2-cliente-content {
        grid-template-columns: 1fr;
    }
    .r2-cliente-content .r2-cliente-tree-panel {
        min-height: auto;
        border-right: 0;
        border-bottom: 2px solid var(--r2-line-strong);
    }

    /* Lateral recolhida atrás do botão; aberta, os filhos voltam ao display da
       folha de estilo (revert — a lateral é flex-column, display:block quebraria). */
    .r2-lateral-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--r2-line-strong);
        border-radius: 8px;
        background: var(--r2-accent-tint);
        color: var(--r2-accent-ink);
        font-weight: 600;
        font-size: 13px;
    }
    .r2-lateral-toggle .r2-lateral-toggle-seta {
        margin-left: auto;
        transition: transform .15s;
    }
    .r2-lateral-aberta .r2-lateral-toggle .r2-lateral-toggle-seta {
        transform: rotate(180deg);
    }
    .r2-cliente-tree-panel > :not(.r2-lateral-toggle) {
        display: none;
    }
    .r2-cliente-tree-panel.r2-lateral-aberta > :not(.r2-lateral-toggle) {
        display: revert;
    }

    /* Aberta, a lateral rola na altura que tiver — o teto de 100vh-150px é do
       layout lado a lado do desktop. */
    .r2-lateral-fixa {
        max-height: none;
    }

    /* A ficha de indexadores e o cabeçalho do painel principal empilham. */
    .r2-cliente-main-header {
        grid-template-columns: 1fr;
    }
    .r2-cliente-main-panel {
        padding: 10px;
    }
}

/* ============================================================================
   Responsividade — PR-3: gerenciador em tablet/celular
   (no fim do arquivo pela mesma razão do PR-2: a última palavra da cascata)
   ---------------------------------------------------------------------------- */

.r2-menu-toggle {
    display: none;
}

@media (max-width: 1024px) {
    /* O shell empilha: botão do menu em cima, conteúdo embaixo. */
    body .r2-shell {
        flex-direction: column;
    }
    .r2-menu-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 10px 12px 0;
        padding: 10px 12px;
        border: 1px solid var(--r2-line-strong);
        border-radius: 8px;
        background: var(--r2-accent-tint);
        color: var(--r2-accent-ink);
        font-weight: 600;
        font-size: 13px;
    }
    .r2-menu-toggle .r2-lateral-toggle-seta {
        margin-left: auto;
        transition: transform .15s;
    }
    /* O menu nasce recolhido; aberto, ocupa a largura toda acima do conteúdo. */
    body .r2-sidebar {
        display: none;
    }
    body .r2-sidebar.r2-menu-aberto {
        display: block;
        width: 100%;
        border-right: 0;
        border-bottom: 2px solid var(--r2-line-strong);
    }
    .r2-menu-aberto ~ .r2-content,
    .r2-content {
        width: 100%;
    }
}

/* Formulários do gerenciador: os pares rótulo/campo do p:panelGrid layout="grid"
   empilham em tela estreita (49 usos — a regra global cobre todos). ⚠️ O PF13
   renderiza a geração NOVA do Grid CSS (ui-g/ui-g-6), não a ui-grid-row antiga —
   conferido no HTML renderizado. As colunas têm largura percentual por classe;
   esta regra, por vir depois no arquivo, vence. */
@media (max-width: 700px) {
    body .ui-g > [class*="ui-g-"] {
        width: 100%;
        flex: 0 0 100%;
    }
}

/* ---------- Aviso de sessão prestes a expirar (doc/sessao-web.md) ----------
   Modal em HTML puro, criado pelo r2-sessao.js: vale também nas páginas sem template
   (seleção de repositório, troca de senha) e não depende de estar dentro de um form. */
.r2-sessao-fundo {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;                     /* acima dos diálogos do PrimeFaces */
    background: rgba(7, 20, 38, 0.55);  /* Nanquim da marca, translúcido */
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.r2-sessao-fundo.r2-sessao-visivel { display: flex; }
.r2-sessao-caixa {
    background: var(--r2-surface);
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(7, 20, 38, 0.35);
    border-top: 4px solid #9a6700;      /* alerta: é um aviso, não um erro */
    max-width: 460px;
    width: 100%;
    padding: 22px 24px 18px;
}
.r2-sessao-titulo {
    margin: 0 0 10px;
    font-size: 17px;
    color: var(--r2-accent-ink);        /* Índigo Arquivo no claro; azul claro no dark (token) */
}
.r2-sessao-texto { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--r2-ink); }
.r2-sessao-secundario { color: var(--r2-muted); font-size: 13px; }
.r2-sessao-tempo { font-variant-numeric: tabular-nums; color: var(--r2-erro); font-size: 15px; }
.r2-sessao-acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.r2-sessao-botao, .r2-sessao-botao-secundario {
    font: inherit;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
}
.r2-sessao-botao { background: var(--r2-accent); color: #fff; }        /* Azul Fluxo */
.r2-sessao-botao:hover { background: #1b5c7a; }
.r2-sessao-botao-secundario { background: var(--r2-surface); color: var(--r2-muted); border-color: var(--r2-line); }
.r2-sessao-botao-secundario:hover { background: var(--r2-ground); }

/* ---------- Menu de ações nas tabelas (doc/acoes-em-tabela.md) ----------
   O botão "⋮" tem de parecer irmão dos ícones de ação (30x30, ghost), e não um
   botão de formulário: sem isto o menu vira o elemento mais pesado da linha. */
.r2-compact .ui-datatable td .ui-menubutton > .ui-button.r2-acoes-menu {
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0 4px 0 0;
    background: var(--r2-surface);
    border: 1px solid var(--r2-line-strong);
    color: var(--r2-muted);
    border-radius: 6px;
}
.r2-compact .ui-datatable td .ui-menubutton > .ui-button.r2-acoes-menu:hover {
    background: var(--r2-accent-tint);
    color: var(--r2-accent-ink);
}
/* O caret padrão do menuButton duplicaria o "⋮" — o ícone já diz o que o botão faz. */
.r2-compact .ui-datatable td .ui-menubutton > .ui-button.r2-acoes-menu .ui-button-text {
    display: none;
}
.r2-acoes-menu-lista { min-width: 208px; }
.r2-acoes-menu-lista .ui-menuitem-link { padding: 7px 12px; font-size: 13px; }
.r2-acoes-menu-lista .ui-menuitem-icon { margin-right: 8px; color: var(--r2-muted); }
/* Destrutiva destacada: no menu ela some no meio da lista se não tiver cor própria.
   ⚠️ A cadeia longa NÃO é enfeite: o tema saga colore o item com
   `body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-text` (5 classes +
   elemento). Um seletor curto perde por especificidade e a regra simplesmente não pinta nada —
   medido. Espelhar a cadeia do tema e acrescentar a nossa classe é o que ganha.
   O PrimeFaces põe o styleClass do p:menuitem no PRÓPRIO link, não no <li>. */
body .ui-menu.r2-acoes-menu-lista .ui-menu-list .ui-menuitem .ui-menuitem-link.r2-menu-perigo .ui-menuitem-text,
body .ui-menu.r2-acoes-menu-lista .ui-menu-list .ui-menuitem .ui-menuitem-link.r2-menu-perigo .ui-menuitem-icon {
    color: var(--r2-erro);
}
body .ui-menu.r2-acoes-menu-lista .ui-menu-list .ui-menuitem .ui-menuitem-link.r2-menu-perigo.ui-state-hover,
body .ui-menu.r2-acoes-menu-lista .ui-menu-list .ui-menuitem .ui-menuitem-link.r2-menu-perigo:hover {
    background: rgba(180, 35, 24, 0.08);
}
body .ui-menu.r2-acoes-menu-lista .ui-menu-list .ui-menuitem .ui-menuitem-link.r2-menu-perigo.ui-state-hover .ui-menuitem-text,
body .ui-menu.r2-acoes-menu-lista .ui-menu-list .ui-menuitem .ui-menuitem-link.r2-menu-perigo.ui-state-hover .ui-menuitem-icon {
    color: var(--r2-erro);
}

/* ---------- Cortina de "processando" (doc/feedback-acoes-longas.md) ----------
   Entra invisível já no primeiro instante da requisição — é assim que ela mata o
   duplo clique sem piscar em ação rápida — e só ganha corpo depois de meio segundo. */
.r2-cortina {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9500;              /* abaixo do aviso de sessão (10000), acima do resto */
    background: transparent;
    cursor: progress;
}
.r2-cortina-ativa { display: block; }   /* já bloqueia clique, ainda sem aparecer */
.r2-cortina-visivel {
    background: rgba(242, 243, 245, 0.55);   /* Papel Frio translúcido */
    display: flex;
    align-items: center;
    justify-content: center;
}
.r2-cortina-caixa {
    display: none;
    align-items: center;
    gap: 10px;
    background: var(--r2-surface);
    border: 1px solid var(--r2-line-strong);
    border-radius: 8px;
    padding: 12px 18px;
    box-shadow: 0 10px 30px rgba(7, 20, 38, 0.18);
}
.r2-cortina-visivel .r2-cortina-caixa { display: flex; }
.r2-cortina-giro { color: var(--r2-accent); font-size: 18px; }
.r2-cortina-texto { color: var(--r2-ink); font-size: 14px; }

/* ===================================================================
   ESPAÇAMENTO ENTRE BOTÕES — a raiz do "botões colados"
   (doc/botoes-padrao.md)

   Por que colavam: o PrimeFaces monta as barras com
   `.ui-toolbar-group-left { display:flex }` SEM `gap`, e o tema saga
   ainda faz `body .ui-button { margin:0 }`. Em contêiner flex o espaço
   em branco entre as tags é descartado — resultado: 0px literais.

   A correção é no container, não no botão: `gap` não depende de qual
   botão está visível. Margem no "segundo botão" (o que existia em 29
   lugares, com SETE valores diferentes) quebra assim que o primeiro
   some por `rendered` de permissão.
   =================================================================== */

/* Barras de ação (p:toolbar) — cobre 18 barras sem tocar em nenhuma tela. */
body .ui-toolbar .ui-toolbar-group-left,
body .ui-toolbar .ui-toolbar-group-right,
body .ui-toolbar .ui-toolbar-group-center {
    gap: var(--r2-gap-botoes);
}

/* Rodapé de diálogo. ⚠️ O `f:facet name="footer"` com mais de um filho renderiza um
   <div> wrapper entre o rodapé e os botões — flex+gap no rodapé arruma o wrapper, e os
   botões dentro dele continuam colados (medido). Por isso o espaço vem do irmão
   adjacente, que funciona com ou sem wrapper. */
body .ui-dialog .ui-dialog-footer .ui-button + .ui-button,
body .ui-dialog .ui-dialog-buttonpane .ui-button + .ui-button {
    margin-left: var(--r2-gap-botoes);
}
body .ui-dialog .ui-dialog-footer .ui-button,
body .ui-dialog .ui-dialog-buttonpane .ui-button { margin-right: 0; }

/* A ação secundária tem de PARECER secundária. Sem isto, a regra de rodapé do projeto
   (`.ui-dialog .ui-dialog-footer .ui-button`, 3 classes) vence o `ui-button-secondary`
   do tema (2 classes + elemento) e o Cancelar sai índigo, colado ao Salvar — os dois
   viram um bloco azul só. */
body .ui-dialog .ui-dialog-footer .ui-button.ui-button-secondary,
body .ui-dialog .ui-dialog-buttonpane .ui-button.ui-button-secondary,
body .r2-content .ui-button.ui-button-secondary,
body .r2-acoes .ui-button.ui-button-secondary {
    background: var(--r2-surface);
    color: var(--r2-muted);
    border: 1px solid var(--r2-line-strong);
}
body .ui-dialog .ui-dialog-footer .ui-button.ui-button-secondary:hover,
body .ui-dialog .ui-dialog-buttonpane .ui-button.ui-button-secondary:hover,
body .r2-content .ui-button.ui-button-secondary:hover,
body .r2-acoes .ui-button.ui-button-secondary:hover {
    background: var(--r2-bg-soft, #f2f3f5);
    color: var(--r2-ink);
}

/* Grupo de ações em qualquer lugar (rodapé artesanal dentro do conteúdo do
   diálogo, barra própria de tela). É a classe única — nada de style inline. */
.r2-acoes {
    display: flex;
    align-items: center;
    gap: var(--r2-gap-botoes);
    flex-wrap: wrap;
}
.r2-acoes-fim { justify-content: flex-end; }
.r2-acoes-topo { margin-top: 14px; }
.r2-acoes .ui-button { margin: 0; }

/* ============================================================================
   Aviso de teto da busca (doc/plano-desempenho-busca.md)

   A busca devolve no máximo 200 documentos — sempre devolveu, só não dizia. A
   faixa fica ACIMA da tabela porque é lá que o olho vai antes de concluir "só
   tem isso"; no rodapé ela chegaria tarde. Tom informativo, não de erro: nada
   deu errado, há mais documentos do que cabe numa tela.
   ---------------------------------------------------------------------------- */
.r2-aviso-teto {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border: 1px solid var(--r2-line-strong);
    border-left: 3px solid var(--r2-accent);
    border-radius: 4px;
    background: var(--r2-accent-tint);
    color: var(--r2-accent-ink);
    font-size: .86rem;
}
.r2-aviso-teto .pi { font-size: 1rem; flex: 0 0 auto; }

/* ============================================================================
   Contador ao lado do tipo na árvore (V082, doc/plano-desempenho-busca.md)

   O mesmo número que o cliente desktop mostra. Discreto de propósito: o nome do
   tipo é o que se lê, o total é referência de canto de olho. Some no reflow do
   celular, onde a árvore já é apertada.
   ---------------------------------------------------------------------------- */
.r2-contador-no {
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--r2-accent-tint2);
    color: var(--r2-accent-ink);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;   /* os números não dançam entre linhas */
}

/* ============================================================================
   Responsividade do GERENCIADOR — tabelas no celular (doc/responsividade-web.md)

   As tabelas ganharam `reflow="true"`: abaixo de 640px o PrimeFaces troca a
   grade por um cartão por linha, com o cabeçalho virando rótulo de cada valor.
   O que segue é o acabamento — sem isto o cartão sai com a cara de tabela
   espremida, que é o que se queria evitar.
   ---------------------------------------------------------------------------- */
@media (max-width: 640px) {
    /* ------------------------------------------------------------------------
       O CARTÃO. Primeira tentativa (rejeitada pelo PO): cada célula virou uma
       linha "rótulo — valor" de mesmo peso, e o resultado foi um bloco corrido de
       texto em que não se via onde um registro terminava e o outro começava.

       O que resolve não é mais borda: é HIERARQUIA. O primeiro campo (nome/código)
       vira o TÍTULO do cartão, numa faixa própria; os demais viram pares discretos;
       as ações ganham um rodapé separado. Aí o olho encontra a fronteira sozinho.
       ------------------------------------------------------------------------ */

    /* A moldura. ⚠️ !important nas laterais: o components.css do PrimeFaces é
       carregado DEPOIS do nosso e zera border-left/right em modo reflow. */
    body .ui-datatable-reflow .ui-datatable-data > tr.ui-widget-content {
        display: block;
        margin: 0 0 14px;
        padding: 0;
        border: 1px solid var(--r2-line-strong) !important;
        border-radius: 10px;
        background: var(--r2-surface);
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(7, 20, 38, .07);
    }

    /* Célula comum: rótulo pequeno em cima, valor embaixo — some a "coluna" de
       rótulos que fazia tudo parecer tabela espremida. */
    body .ui-datatable-reflow .ui-datatable-data > tr > td[role="gridcell"] {
        display: block;
        width: 100% !important;
        padding: 7px 14px;
        border: 0 none !important;
        text-align: left;
        font-size: 13.5px;
        color: var(--r2-ink);
    }
    body .ui-datatable-reflow .ui-datatable-data > tr > td .ui-column-title {
        display: block;
        min-width: 0;
        margin: 0 0 1px;
        padding: 0;
        color: var(--r2-faint);
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    /* O TÍTULO do cartão: primeira célula (ou a seguinte, quando a primeira é a
       coluna de seleção). Faixa com fundo, texto maior, sem rótulo. */
    body .ui-datatable-reflow .ui-datatable-data > tr > td[role="gridcell"]:first-child,
    body .ui-datatable-reflow .ui-datatable-data > tr > td.ui-selection-column + td[role="gridcell"] {
        padding: 10px 14px;
        background: var(--r2-accent-tint);
        border-bottom: 1px solid var(--r2-line) !important;
        font-size: 15px;
        font-weight: 700;
        color: var(--r2-accent-ink);
    }
    body .ui-datatable-reflow .ui-datatable-data > tr > td[role="gridcell"]:first-child .ui-column-title,
    body .ui-datatable-reflow .ui-datatable-data > tr > td.ui-selection-column + td .ui-column-title {
        display: none;
    }

    /* Rodapé do cartão: as ações. Fundo neutro e borda em cima separam do conteúdo,
       e os botões ganham área de toque. */
    body .ui-datatable-reflow .ui-datatable-data > tr > td[role="gridcell"]:last-child {
        padding: 8px 14px;
        background: var(--r2-ground);
        border-top: 1px solid var(--r2-line) !important;
    }
    body .ui-datatable-reflow .ui-datatable-data > tr > td:last-child .ui-column-title {
        display: none;
    }
    body .ui-datatable-reflow .ui-datatable-data > tr > td:last-child .ui-button {
        min-width: 38px;
        min-height: 38px;
    }

    /* Zebra e hover não fazem sentido em cartão: o fundo é do cartão. */
    body .ui-datatable-reflow .ui-datatable-data > tr.ui-datatable-odd,
    body .ui-datatable-reflow .ui-datatable-data > tr:hover { background: var(--r2-surface); }
    :root[data-theme="dark"] body .ui-datatable-reflow .ui-datatable-data > tr:hover { background: var(--r2-accent-tint); }

    /* Paginador: as setas encavalavam com o "1 de N". */
    body .ui-paginator { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }

    /* Filtros e barras ocupam a largura toda em vez de brigar por espaço. */
    body .ui-toolbar .ui-toolbar-group-left,
    body .ui-toolbar .ui-toolbar-group-right { width: 100%; }
    body .ui-toolbar .ui-button { flex: 1 1 auto; justify-content: center; }
}

/* ==================== Chat de ajuda sobre o produto (IA) ==================== */

/* --- Botão flutuante (robô + faísca) --- */
.r2-ia-fab.ui-button,
button.r2-ia-fab {
    position: fixed;
    right: 26px;
    bottom: 26px;
    width: 60px;
    height: 60px;
    padding: 0;
    border-radius: 50%;
    border: none;
    z-index: 1200;
    color: #fff;
    background: linear-gradient(150deg, #173069 0%, var(--r2-accent) 55%, #30b0c5 100%);
    box-shadow: 0 6px 20px rgba(10, 46, 92, .38);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.r2-ia-fab.ui-button:hover,
button.r2-ia-fab:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 10px 26px rgba(10, 46, 92, .46);
    color: #fff;
}
.r2-ia-fab .ui-button-text { display: none; }
.r2-ia-fab { display: inline-flex; align-items: center; justify-content: center; }
.r2-ia-fab .r2-ia-robo { font-size: 30px; }
/* pulso sutil de "vivo" no anel do FAB */
.r2-ia-fab::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(48, 176, 197, .5);
    animation: r2IaPulso 2.6s ease-out infinite;
}
@keyframes r2IaPulso {
    0%   { transform: scale(1);    opacity: .7; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { opacity: 0; }
}

/* --- A janela do chat (p:dialog não-modal, dockado) --- */
.ui-dialog.r2-ia-chat {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(10, 46, 92, .30);
    border: 1px solid var(--r2-line);
    z-index: 1201;
}
.ui-dialog.r2-ia-chat .ui-dialog-content { padding: 0; }
/* Largura 100% DO DIÁLOGO (que tem width=400 + 1px de borda por lado): com 400px fixos o form
   estourava 2px e o overflow:hidden cortava o X do cabeçalho e o botão de enviar. */
/* Dockado a 24px das bordas por CSS, não pelo position do PrimeFaces: o jQuery UI encostava o
   diálogo na tela (borda e sombra sumiam) e COMPENSA margens, então margem negativa não move
   nada. O !important vence o left/top inline; fixed mantém o canto ao rolar a página. */
.ui-dialog.r2-ia-chat { max-width: 92vw; position: fixed !important; left: auto !important; top: auto !important;
    right: 24px !important; bottom: 24px !important; margin: 0; }
.r2-ia-chat-form { display: flex; flex-direction: column; height: 560px; max-height: 78vh; width: 100%; }

/* Cabeçalho */
.r2-ia-chat-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .9rem;
    color: #fff;
    background: linear-gradient(120deg, #173069 0%, var(--r2-accent) 100%);
}
.r2-ia-chat-title { display: flex; flex-direction: column; line-height: 1.15; flex: 1; }
.r2-ia-chat-title strong { font-size: .95rem; }
.r2-ia-chat-title span { font-size: .72rem; opacity: .82; }
.r2-ia-chat-icon {
    background: rgba(255, 255, 255, .16);
    color: #fff !important;
    border: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.r2-ia-chat-icon:hover { background: rgba(255, 255, 255, .28); }

/* Avatar do robô */
.r2-ia-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, .18); color: #fff; font-size: 22px; flex: 0 0 auto;
}
.r2-ia-avatar-sm { width: 28px; height: 28px; font-size: 18px; background: var(--r2-accent-tint); color: var(--r2-accent-ink); }
.r2-ia-avatar-lg { width: 56px; height: 56px; font-size: 36px;
    background: linear-gradient(150deg, #173069, #30b0c5); color: #fff; }

/* Corpo rolável */
.r2-ia-chat-body {
    flex: 1; overflow-y: auto; padding: 1rem .9rem;
    background: var(--r2-ground); display: flex; flex-direction: column; gap: .7rem;
}

/* Saudação + sugestões */
.r2-ia-welcome { text-align: center; margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.r2-ia-welcome-txt { color: var(--r2-ink, #2a2f34); font-size: .9rem; margin: 0; max-width: 30ch; line-height: 1.5; }
.r2-ia-sugestoes { display: flex; flex-direction: column; gap: .45rem; width: 100%; margin-top: .3rem; }
.r2-ia-chip {
    display: block; text-align: left; padding: .55rem .7rem;
    background: var(--r2-surface); border: 1px solid var(--r2-line); border-radius: 12px;
    color: var(--r2-accent-ink); font-size: .82rem; text-decoration: none; cursor: pointer;
    transition: border-color .12s, background .12s;
}
.r2-ia-chip:hover { border-color: var(--r2-accent); background: var(--r2-accent-tint); }

/* Balões */
.r2-ia-row { display: flex; gap: .5rem; align-items: flex-end; }
.r2-ia-row-user { justify-content: flex-end; }
.r2-ia-row-bot { justify-content: flex-start; }
.r2-ia-bubble { max-width: 82%; padding: .6rem .8rem; border-radius: 14px; font-size: .88rem; line-height: 1.5; }
.r2-ia-bubble-user { background: linear-gradient(135deg, var(--r2-accent), #173069); color: #fff; border-bottom-right-radius: 4px; }
.r2-ia-bubble-bot { background: var(--r2-surface); color: var(--r2-ink, #2a2f34); border: 1px solid var(--r2-line); border-bottom-left-radius: 4px; }
.r2-ia-bubble-txt { display: block; white-space: pre-wrap; }

/* Fontes (capítulos citados) */
.r2-ia-fontes { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem; }
.r2-ia-fonte {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .7rem; padding: .12rem .5rem; border-radius: 20px;
    background: var(--r2-accent-tint); color: var(--r2-accent-ink); border: 1px solid var(--r2-accent-tint2);
}
.r2-ia-fonte .pi { font-size: .7rem; }

/* Barra de envio */
.r2-ia-chat-input { display: flex; gap: .5rem; align-items: flex-end; padding: .7rem .8rem; border-top: 1px solid var(--r2-line); background: var(--r2-surface); }
.r2-ia-textarea.ui-inputtextarea { flex: 1; resize: none; border-radius: 12px; max-height: 96px; font-size: .88rem; padding: .55rem .7rem; }
.r2-ia-send.ui-button {
    width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; padding: 0;
    background: linear-gradient(135deg, var(--r2-accent), #173069); border: none; color: #fff;
}
.r2-ia-send.ui-button:hover { filter: brightness(1.08); }
.r2-ia-send .ui-button-text { display: none; }

/* Celular: o widget vira quase tela cheia */
@media (max-width: 480px) {
    .ui-dialog.r2-ia-chat { max-width: 96vw; right: 2vw !important; bottom: 8px !important; }
    .r2-ia-chat-form { height: 82vh; }
    .r2-ia-fab.ui-button, button.r2-ia-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; }
}

/* Indicador "digitando" do chat (local — o overlay da página é suprimido por global="false") */
.r2-ia-typing { display: flex; align-items: center; gap: .5rem; padding: 0 .9rem .6rem; }
.r2-ia-typing-dots { display: inline-flex; gap: 4px; padding: .55rem .8rem; background: var(--r2-surface); border: 1px solid var(--r2-line); border-radius: 14px; border-bottom-left-radius: 4px; }
.r2-ia-typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--r2-faint, #8a97a6); animation: r2IaDot 1.2s infinite ease-in-out; }
.r2-ia-typing-dots i:nth-child(2) { animation-delay: .18s; }
.r2-ia-typing-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes r2IaDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---- Selo do Decreto 10.278 (frente decreto-10278) ---- */
.r2-selo-decreto {
    position: absolute;
    right: 18px;
    bottom: 18px;
    pointer-events: none;   /* o carimbo não rouba clique, zoom nem rolagem */
    /* Carimbo é tinta TRANSLÚCIDA: o conteúdo do documento continua legível embaixo
       (feedback do PO na validação — e reforçado na arte v2: .85 ainda atrapalhava a leitura). */
    opacity: .65;
    filter: drop-shadow(0 1px 4px rgba(10, 46, 92, .28));
    z-index: 5;
}
.r2-selo-decreto svg { display: block; }   /* a rosácea é o próprio fundo do selo */

/* ============================================================================
   Estado booleano em coluna de tabela — ícone no lugar de "Sim"/"Não"
   ============================================================================
   Pedido do PO: tabela de cadastro com quatro colunas booleanas vira uma parede
   de "Sim Sim Não Sim" que ninguém lê. O ícone deixa a linha varrer-se de
   relance e encolhe a coluna de ~60px para ~28px.

   Por que PrimeIcons e não emoji (✅/🚫): emoji renderiza diferente em cada
   sistema operacional, ignora a paleta da marca e destoa do resto da interface.
   O precedente do projeto é o `pi pi-verified` da tela de Integridade.

   O "não" é CINZA, não vermelho: "Ativo: não" é estado normal de cadastro, não
   erro. Vermelho fica reservado a quem precisa de alarme (o "sem registro" das
   cópias de segurança, por exemplo).

   ⚠️ Todo uso EXIGE `title` — sem ele, o ícone é a única informação e quem usa
   leitor de tela (ou não conhece o símbolo) fica sem nada. */
.r2-bool {
    font-size: 1rem;
    line-height: 1;
    vertical-align: -1px;
}
.r2-bool-sim { color: var(--r2-ok); }
.r2-bool-nao { color: var(--r2-line-strong); }

/* ============================================================================
   Faixa de cards-indicadores (Integridade, Decreto 10.278)
   ============================================================================
   Achado do PO: no PC os cards ficavam de larguras e alturas diferentes, com
   texto espremido em coluna estreita e um vão sobrando à direita. O motivo era
   simples — a classe `r2-cards` estava DECLARADA nas duas telas e não existia
   no CSS, e os cards não tinham `flex`, então cada um ficava do tamanho do seu
   próprio texto.

   O modelo é a tela de Cópias de Segurança, onde cada card cresce igualmente
   (`flex:1`) e a faixa fecha na largura da tela. Aqui a regra mora no CSS, num
   lugar só, em vez de repetir o inline em cada card. */
.r2-cards {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: stretch;          /* todos com a MESMA altura, não a do seu texto */
}
.r2-cards > .ui-card {
    flex: 1 1 240px;               /* cresce e divide a faixa por igual */
    min-width: 240px;
    display: flex;                 /* o corpo ocupa o card inteiro… */
}
.r2-cards > .ui-card > .ui-card-body {
    display: flex;
    flex-direction: column;
    width: 100%;
}
/* O número é o dado principal do indicador — ele é que deve saltar, não a
   explicação (que é apoio e vinha do mesmo tamanho do título). */
.r2-cards .ui-card-title {
    font-size: 1.75rem;
    line-height: 1.1;
    font-weight: 600;
    color: var(--r2-accent-ink);
    margin-bottom: .35rem;
}
.r2-cards .ui-card-content {
    font-size: .82rem;
    line-height: 1.45;
    padding-top: 0;
}

/* ============================================================================
   Painel do repositório (doc/dashboard-gerenciador.md)
   ============================================================================
   Um painel de instrumentos, não uma vitrine: o que exige ação vem antes do que
   está bem. A faixa de atenção só existe quando há pendência — sem nada a
   tratar, a página abre direto nos números.

   Os NÚMEROS usam face monoespaçada com tabular-nums: dígito que muda de
   largura atrapalha a leitura em coluna. */
.r2-num {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* ── Faixa "exige atenção" ─────────────────────────────────────────────── */
.r2-atencao {
    background: var(--r2-surface);
    border: 1px solid var(--r2-line);
    border-left: 3px solid #b91c1c;
    border-radius: 10px;
    margin-bottom: 1rem;
    overflow: hidden;
}
.r2-atencao-topo {
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--r2-line);
    background: var(--r2-ground);
}
.r2-atencao-rotulo {
    font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
    font-weight: 700; color: var(--r2-erro);
}
.r2-atencao-linha {
    display: flex; align-items: center; gap: .75rem;
    padding: .65rem 1rem; border-bottom: 1px solid var(--r2-line);
}
.r2-atencao-linha:last-child { border-bottom: 0; }
.r2-sev { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.r2-sev.critico { background: #b91c1c; box-shadow: 0 0 0 3px #fbeded; }
.r2-sev.aviso   { background: #b45309; box-shadow: 0 0 0 3px #fdf3e7; }
.r2-atencao-texto { flex: 1; min-width: 0; font-size: .88rem; }
.r2-atencao-texto span { color: var(--r2-muted); margin-left: .35rem; }
.r2-atencao-acao { white-space: nowrap; }

/* ── Os números do topo ────────────────────────────────────────────────── */
.r2-kpis {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: .9rem; margin-bottom: 1rem;
}
.r2-kpi {
    background: var(--r2-surface); border: 1px solid var(--r2-line); border-radius: 10px;
    padding: .85rem 1rem .95rem;
    display: flex; flex-direction: column; gap: .15rem;
}
.r2-kpi-rotulo {
    font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
    color: var(--r2-muted); font-weight: 600;
}
.r2-kpi-valor { font-size: 1.85rem; font-weight: 600; line-height: 1.05; color: var(--r2-accent-ink); }
.r2-kpi-apoio { font-size: .78rem; color: var(--r2-muted); }
.r2-delta { font-weight: 700; }
.r2-delta.sobe  { color: var(--r2-ok); }
.r2-delta.desce { color: var(--r2-alerta); }

/* ── Grade de painéis ──────────────────────────────────────────────────── */
.r2-paineis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.1rem; align-items: start;
}

/* ── O CARTÃO dos painéis de dashboard ─────────────────────────────────────
   ⚠️ Por que isto precisa existir: mais acima, `.r2-compact .ui-panel` zera
   borda, fundo e sombra — e faz muito bem NAS TELAS CRUD, onde o p:panel é o
   contêiner da página inteira e o chrome do PrimeFaces só atrapalha. Mas os
   dashboards usam a MESMA classe em três ou quatro painéis lado a lado; sem
   moldura nenhuma, eles se fundem num bloco contínuo. Foi exatamente o que o PO
   relatou: "não consigo identificar que são 3 cards diferentes".

   A referência do desenho é o `.r2-kpi` da mesma tela, que já é cartão (fundo
   branco, borda, raio 10px): o topo e o meio da página passam a falar a mesma
   língua em vez de parecerem duas telas diferentes.

   ⚠️ Especificidade: `.r2-compact .ui-panel` é (0,2,0). Este seletor precisa ser
   MAIOR, senão perde para ele ou depende da ordem do arquivo — daí o
   `.r2-content` à frente, que leva a (0,3,0). */
.r2-content .ui-panel.r2-cartao {
    background: var(--r2-surface);
    border: 1px solid var(--r2-line);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 32, 48, .05), 0 6px 16px rgba(16, 32, 48, .05);
    overflow: hidden;
}

/* O título volta a ser título. Como eyebrow de 11px cinza ele desaparecia, e um
   cartão sem cabeçalho legível não se lê como cartão. */
.r2-content .ui-panel.r2-cartao > .ui-panel-titlebar {
    background: var(--r2-ground);
    border-bottom: 1px solid var(--r2-line);
    border-radius: 0;
    padding: .62rem .95rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--r2-accent-ink);
}
.r2-content .ui-panel.r2-cartao > .ui-panel-content {
    padding: .25rem .95rem .55rem;
    background: transparent;
}
/* O rodapé de ações encosta na borda do cartão sem o respiro que tinha solto. */
.r2-content .ui-panel.r2-cartao .r2-acoes-topo {
    margin-top: .5rem;
    padding-top: .55rem;
    border-top: 1px solid var(--r2-line);
}
.r2-linhas { display: flex; flex-direction: column; }

/* ── Item de painel ────────────────────────────────────────────────────────
   Antes isto era nome + subtítulo + tag, tudo em corpo pequeno e cinza: quatro
   itens empilhados liam-se como UM PARÁGRAFO, e o PO descreveu exatamente assim
   ("parece um bloco só, de texto"). O contraste dentro da própria tela deixava
   claro: os KPIs do topo (.r2-kpi) têm cartão, número grande e rótulo em caixa
   alta; os painéis de baixo não tinham âncora visual nenhuma.

   Três mudanças, e cada uma resolve uma coisa diferente:
     1. um SELO COM ÍCONE à esquerda — dá onde o olho pousa e permite achar a
        linha sem ler;
     2. o ESTADO como ponto + rótulo, no lugar de tags retangulares repetidas —
        quatro tags coloridas em sequência competem entre si e nenhuma destaca;
     3. NÚMERO GRANDE nas filas — 0 e 1.200 tinham o mesmo peso visual. */
.r2-linha {
    display: flex; align-items: center; gap: .7rem;
    padding: .62rem .1rem;
    border-bottom: 1px solid var(--r2-line);
}
.r2-linha:last-child { border-bottom: 0; }
.r2-linha-nome { flex: 1; min-width: 0; font-size: .875rem; font-weight: 500; }
.r2-linha-sub {
    display: block; font-size: .74rem; color: var(--r2-muted);
    font-weight: 400; margin-top: .1rem; line-height: 1.35;
}

/* O selo do ícone. O símbolo diz O QUE é a linha; a cor do selo diz COMO está —
   separar os dois é o que permite varrer a lista sem ler o texto. */
.r2-selo {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .9rem; background: var(--r2-line); color: var(--r2-muted);
}
.r2-selo.ok   { background: #e7f4ec; color: var(--r2-ok); }
.r2-selo.warn { background: var(--r2-alerta-tint); color: var(--r2-alerta); }
.r2-selo.crit { background: var(--r2-erro-tint); color: var(--r2-erro); }
/* ⚠️ Desligado é CINZA, não vermelho: é escolha de configuração, não incidente.
   Vermelho aqui faria o painel gritar por um MinIO que ninguém ligou. */
.r2-selo.off  { background: var(--r2-line); color: var(--r2-muted); }

/* Estado: ponto + rótulo. Mais leve que a tag, e sobra contraste para o alarme. */
.r2-estado {
    display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    font-size: .72rem; font-weight: 600; letter-spacing: .03em;
    text-transform: uppercase; color: var(--r2-muted);
}
.r2-estado::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; flex: 0 0 auto;
}
.r2-estado.ok   { color: var(--r2-ok); }
.r2-estado.warn { color: var(--r2-alerta); }
.r2-estado.crit { color: var(--r2-erro); }
.r2-estado.off  { color: var(--r2-muted); }
/* Só o alarme REAL ganha fundo — se tudo tiver caixa, nada se destaca. */
.r2-estado.crit {
    background: var(--r2-erro-tint); padding: .2rem .5rem; border-radius: 99px;
}

.r2-qtd {
    font-size: 1.3rem; font-weight: 600; line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--r2-ink);
}
.r2-qtd.crit   { color: var(--r2-erro); }
.r2-qtd.warn   { color: var(--r2-alerta); }
.r2-qtd.neutro { color: var(--r2-ink); }
/* Fila vazia é boa notícia, e boa notícia não precisa de destaque: em cinza, o
   olho passa direto e sobra atenção para o número que importa. */
.r2-qtd.zero { color: var(--r2-muted); font-weight: 500; }
.r2-qtd-sufixo {
    display: block; font-size: .68rem; font-weight: 600; color: var(--r2-erro);
    text-transform: uppercase; letter-spacing: .04em; margin-top: .15rem;
    text-align: right;
}

/* (O respiro e o título dos painéis de dashboard estão em `.r2-cartao`, mais
   abaixo — junto com a moldura, que é o que faltava para eles se lerem como
   cartões separados.) */

/* barra de cobertura */
.r2-cob { margin-top: .8rem; }
.r2-cob-topo {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: .8rem; margin-bottom: .35rem;
}
.r2-trilho { height: 6px; background: var(--r2-line); border-radius: 99px; overflow: hidden; }
.r2-preenche { height: 100%; border-radius: 99px; background: var(--r2-accent); }
.r2-preenche.ok   { background: #0f7b43; }
.r2-preenche.warn { background: #b45309; }

@media (max-width: 1024px) {
    .r2-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .r2-kpis { grid-template-columns: 1fr; }
}

/* A idade do indicador apurado pelo worker: defasagem declarada vale mais que
   precisão fingida (doc/dashboard-gerenciador.md). */
.r2-idade {
    font-size: 10.5px; color: var(--r2-muted); font-weight: 500;
    background: var(--r2-line); padding: 1px 6px; border-radius: 99px;
    margin-left: .4rem; white-space: nowrap;
}


/* ── Digitalização pelo navegador (doc/digitalizacao-web-agente-local.md, PR-2) ───────────── */

/* Os quatro estados do agente. Cartão largo e com ícone porque, das quatro vezes, três são
   instrução ao usuário — e instrução que parece rodapé ninguém lê. */
.r2-cartao-agente {
    display: flex; gap: .9rem; align-items: flex-start;
    background: var(--r2-surface); border: 1px solid var(--r2-line); border-left: 3px solid var(--r2-azul, var(--r2-accent));
    border-radius: 8px; padding: 1rem 1.15rem; margin-bottom: 1rem;
}
.r2-cartao-agente.r2-agente-atencao { border-left-color: #9A6700; }
.r2-cartao-agente > div { display: flex; flex-direction: column; gap: .3rem; }
.r2-cartao-agente strong { color: var(--r2-indigo, #0A2E5C); }
.r2-cartao-agente span { font-size: .9rem; color: var(--r2-muted); }
.r2-agente-icone { font-size: 1.4rem; color: var(--r2-azul, var(--r2-accent)); margin-top: .15rem; }
.r2-agente-nota { font-size: .84rem !important; color: var(--r2-muted) !important; }

/* AS COLUNAS AJUSTÁVEIS da captura: Metadados | Visualizador (a árvore fica na LATERAL do
   template, como nas demais telas — movê-la para dentro do conteúdo deixou a lateral vazia
   ocupando espaço e a página "emprensada"; decisão revista com o PO em 2026-08-17). As larguras
   vêm do JS (proporção persistida); aqui fica só o fallback para quando o JS não roda. */
.r2-captura-colunas { display: grid; grid-template-columns: 1fr 8px 2fr;
                      align-items: stretch; --r2-divisoria-largura: 8px; }
.r2-col { min-width: 0; }   /* sem isto, conteúdo largo (tabela, imagem) estica a coluna */
/* ⚠️ RESPIRO ATÉ A DIVISÓRIA. A divisória é a própria coluna do grid (8px), então sem isto o
   conteúdo do painel encosta nela — foi o "campos colados no split" que o PO viu. O padding fica
   na COLUNA, não no painel: o painel é o mesmo componente de outras telas. */
.r2-captura-colunas > .r2-col:first-child { padding-right: .35rem; }
.r2-captura-colunas > .r2-col:last-child { padding-left: .35rem; }

.r2-coluna-indexacao .r2-campos-tipo { max-height: 52vh; overflow-y: auto; padding-right: .3rem; }

/* A divisória: alvo largo o suficiente para pegar com o mouse (8px é o mínimo utilizável) e com
   uma marca no meio, senão o usuário não descobre que ela arrasta. */
.r2-divisoria { cursor: col-resize; position: relative; background: transparent;
                border-radius: 3px; transition: background .12s; }
.r2-divisoria::after { content: ''; position: absolute; top: 50%; left: 50%;
                       transform: translate(-50%, -50%); width: 3px; height: 34px;
                       background: #cfd6dd; border-radius: 2px; }
.r2-divisoria:hover { background: var(--r2-line); }
.r2-divisoria:hover::after { background: var(--r2-azul, var(--r2-accent)); }
/* Enquanto arrasta: sem seleção de texto e o cursor não muda ao passar sobre o conteúdo. */
body.r2-arrastando { cursor: col-resize; user-select: none; }
body.r2-arrastando iframe, body.r2-arrastando img { pointer-events: none; }

/* A barra de captura: painel PRÓPRIO "Selecione o Scanner" (decisão do PO, 2026-08-19) — antes
   vivia dentro do painel "Visualizador" e a borda abaixo a separava do resto DAQUELE painel; agora
   ela é o painel inteiro, então a separação já vem do próprio contorno do p:panel. */
.r2-captura-barra { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.r2-captura-barra select { font: inherit; font-size: .88rem; padding: .32rem .45rem;
                           border: 1px solid #cfd6dd; border-radius: 5px; }
.r2-captura-barra #scannerEscolhido { min-width: 12rem; }
.r2-captura-duplex { font-size: .86rem; color: var(--r2-muted); display: flex; align-items: center; gap: .3rem; }
.r2-form-linha { display: grid; grid-template-columns: 11rem 1fr; gap: .6rem;
                 align-items: center; margin-bottom: .55rem; }
/* Na coluna de indexação (estreita e ajustável) o rótulo vai EM CIMA: 11rem fixos deixavam o
   campo espremido contra a divisória, e o alinhamento mudava a cada arraste. */
.r2-coluna-indexacao .r2-form-linha { grid-template-columns: 1fr; gap: .2rem; }
.r2-form-linha > label { font-size: .88rem; color: var(--r2-muted); }
.r2-form-linha select, .r2-form-linha input[type="text"] {
    font: inherit; padding: .4rem .55rem; border: 1px solid #cfd6dd; border-radius: 5px; width: 100%;
}

/* As folhas capturadas: miniaturas de conferência, não visualizador. */
.r2-folhas { display: flex; flex-wrap: wrap; gap: .7rem; }
.r2-folha { margin: 0; text-align: center; }
.r2-folha img { max-width: 130px; border: 1px solid var(--r2-line); border-radius: 4px; display: block; }
.r2-folha figcaption { font-size: .78rem; color: var(--r2-muted); margin-top: .25rem; }

@media (max-width: 1100px) {
    /* Empilha, e a divisória some: arrastar coluna em tela estreita não existe. */
    .r2-captura-colunas { grid-template-columns: 1fr !important; }
    .r2-divisoria { display: none; }
    .r2-coluna-indexacao .r2-campos-tipo { max-height: none; }
}
@media (max-width: 900px) {
    .r2-form-linha { grid-template-columns: 1fr; gap: .25rem; }
}

/* A faixa de retorno do envio. Existe com cor porque "documento enviado" em cinza-miúdo passou
   desapercebido na primeira validação: o PO clicou em enviar e não viu retorno nenhum. */
.r2-captura-retorno { margin: 0 0 .7rem; font-size: .9rem; color: var(--r2-muted); }
.r2-captura-retorno.r2-retorno-ok {
    color: #14532d; background: #dcfce7; border-left: 3px solid #16a34a;
    padding: .55rem .7rem; border-radius: 4px; font-weight: 600;
}
.r2-captura-retorno.r2-retorno-erro {
    color: #7f1d1d; background: var(--r2-erro-tint); border-left: 3px solid #b3261e;
    padding: .55rem .7rem; border-radius: 4px;
}
.r2-captura-retorno.r2-retorno-aviso {
    color: #713f12; background: var(--r2-alerta-tint); border-left: 3px solid #9A6700;
    padding: .55rem .7rem; border-radius: 4px;
}

/* A conferência da captura, no formato do Cliente Desktop: tira de miniaturas + folha grande.
   Miniatura de 130px só diz QUE digitalizou; quem confere precisa LER a folha. */
.r2-conferencia { display: grid; grid-template-columns: 112px 1fr; gap: .8rem; align-items: start; }
.r2-tira { display: flex; flex-direction: column; gap: .5rem; max-height: 60vh; overflow-y: auto;
           padding-right: .2rem; }
/* A miniatura e suas ações (mover, descartar). As ações aparecem no hover/foco: seis botõezinhos
   sempre visíveis numa tira de 30 folhas viram ruído, e o alvo é pequeno demais para ser útil. */
.r2-mini-caixa { position: relative; }
.r2-mini { background: none; border: 2px solid transparent; border-radius: 5px; padding: 0;
           cursor: pointer; position: relative; display: block; line-height: 0; width: 100%; }
.r2-mini-acoes { position: absolute; top: 2px; left: 2px; right: 2px; display: flex; gap: 2px;
                 opacity: 0; transition: opacity .12s; }
.r2-mini-caixa:hover .r2-mini-acoes,
.r2-mini-caixa:focus-within .r2-mini-acoes { opacity: 1; }
.r2-mini-acoes button {
    flex: 1; font: 600 .72rem/1 sans-serif; padding: .18rem 0; cursor: pointer;
    color: #fff; background: rgba(7,20,38,.78); border: 0; border-radius: 3px;
}
.r2-mini-acoes button:hover { background: var(--r2-azul, var(--r2-accent)); }
.r2-mini-acoes button:disabled { opacity: .35; cursor: default; }
.r2-mini-acoes .r2-mini-descartar:hover { background: #b3261e; }
.r2-mini img { width: 100%; border: 1px solid var(--r2-line); border-radius: 4px; display: block; }
.r2-mini span { position: absolute; bottom: 3px; right: 3px; background: rgba(7,20,38,.78);
                color: #fff; font: 600 .68rem/1 sans-serif; padding: .18rem .3rem; border-radius: 3px; }
.r2-mini-ativa { border-color: var(--r2-azul, var(--r2-accent)); }
.r2-palco { border: 1px solid var(--r2-line); border-radius: 8px; background: var(--r2-ground); }
.r2-palco-barra { display: flex; align-items: center; justify-content: center; gap: .8rem;
                  padding: .35rem; border-bottom: 1px solid #e6eaee; background: var(--r2-surface);
                  border-radius: 8px 8px 0 0; }
.r2-palco-contador { font-size: .82rem; color: var(--r2-muted); min-width: 11rem; text-align: center; }
.r2-palco-area { max-height: 62vh; overflow: auto; padding: .6rem; }

/* CONTÍNUO, não folha-a-folha (o desktop já ensinou isso): as folhas empilham e o palco rola;
   miniaturas e setas são atalhos de rolagem. O número fica sobre a folha, como na tira. */
.r2-pagina-continua { margin: 0 auto .9rem; position: relative; width: fit-content; max-width: 100%; }
.r2-pagina-continua img { max-width: 100%; display: block;
                          box-shadow: 0 1px 6px rgba(7,20,38,.18); background: var(--r2-surface); }
.r2-pagina-continua figcaption { position: absolute; bottom: 6px; right: 6px;
                                 background: rgba(7,20,38,.78); color: #fff;
                                 font: 600 .7rem/1 sans-serif; padding: .2rem .35rem;
                                 border-radius: 3px; }
/* Tamanho real: a folha sai da largura do painel e o palco rola nos dois eixos. */
.r2-palco-area.r2-zoom-real .r2-pagina-continua,
.r2-palco-area.r2-zoom-real .r2-pagina-continua img { max-width: none; }

@media (max-width: 900px) {
    .r2-conferencia { grid-template-columns: 1fr; }
    .r2-tira { flex-direction: row; max-height: none; overflow-x: auto; }
    .r2-mini { width: 86px; flex: 0 0 auto; }
}

/* O DESTINO (acervo e tipo) é leitura, não escolha — quem escolhe é a árvore. Rótulo em cima e
   valor embaixo, o mesmo empilhamento dos campos de metadados: label à esquerda com 11rem fixos
   espremia o valor contra a divisória e desalinhava desta coluna inteira. */
.r2-destino { border-left: 3px solid var(--r2-azul, var(--r2-accent)); background: var(--r2-ground);
              border-radius: 0 5px 5px 0; padding: .6rem .75rem; margin-bottom: .9rem; }
.r2-destino-item + .r2-destino-item { margin-top: .55rem; }
.r2-destino-rotulo { display: block; font-size: .72rem; text-transform: uppercase;
                     letter-spacing: .04em; color: var(--r2-muted); margin-bottom: .1rem; }
.r2-destino-valor { display: block; font-weight: 600; color: var(--r2-indigo, #0A2E5C);
                    font-size: .95rem; overflow-wrap: anywhere; }
.r2-destino-vazio { display: flex; align-items: center; gap: .45rem; font-size: .88rem;
                    color: var(--r2-muted); }
.r2-destino-vazio .pi { color: var(--r2-azul, var(--r2-accent)); }

/* Refino da captura: zoom da folha e destaque do envio. */
.r2-palco-zoom { margin-left: auto; font-size: .8rem !important; }
.r2-botao-pronto { box-shadow: 0 0 0 3px rgba(34,114,151,.22); }

/* ---------------------------------------------------------------------------
   Painéis de produto na tela Cliente Desktop (2026-08-19)

   A tela lista DOIS produtos com ciclos de versão independentes — Nexadoc Cliente
   e Nexadoc Agente — em painéis visualmente idênticos, um embaixo do outro. Quem
   bate o olho não distingue de imediato qual tabela está lendo, e aqui isso não é
   estética: publicar/excluir na tabela errada mexe no pacote errado.

   A faixa colorida à esquerda do cabeçalho dá a âncora visual, e a cor é a mesma
   do ícone — dois sinais redundantes, para não depender só de cor.
   --------------------------------------------------------------------------- */
.r2-prod > .ui-panel-titlebar {
    border-left: 4px solid var(--r2-accent);
    padding-left: 10px;
}
.r2-prod .r2-prod-nome { font-weight: 700; letter-spacing: .01em; }
/* O complemento do título é informação secundária: mesma linha, menos peso. */
.r2-prod .r2-prod-sub { color: var(--r2-muted); font-weight: 400; }
.r2-prod .r2-prod-ico { margin-right: 7px; }

.r2-prod-cliente > .ui-panel-titlebar { border-left-color: var(--r2-accent); }
.r2-prod-cliente .r2-prod-ico { color: var(--r2-accent); }
.r2-prod-agente  > .ui-panel-titlebar { border-left-color: #7a4fa3; }
.r2-prod-agente  .r2-prod-ico { color: #7a4fa3; }

/* SHA-256 por extenso: 64 caracteres não cabem numa linha de tabela, e cortado o
   hash não serve para NADA — quem o lê está conferindo contra o do empacotamento.
   Quebra em duas linhas e mantém o monoespaçado alinhado. */
.r2-hash {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem;
    line-height: 1.35;
    word-break: break-all;
    white-space: normal;
    display: inline-block;
    max-width: 20rem;
}

/* ============================================================================
   Informações do documento (diálogo da busca) — ficha em grade de pares.
   Existe porque o p:panelGrid layout="grid" empilhava cada célula num bloco de
   largura cheia dentro do diálogo: rótulos e valores viravam "texto solto". */
.r2-info-doc .ui-dialog-content { max-height: 74vh; overflow-y: auto; }
.r2-info-grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem .6rem;
}
.r2-info-item {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    padding: .35rem .55rem;
    background: var(--r2-ground);
    border: 1px solid var(--r2-line);
    border-radius: 6px;
    min-width: 0;
}
.r2-info-item-largo { grid-column: 1 / -1; }
.r2-info-rotulo {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--r2-muted);
}
.r2-info-valor { font-size: .88rem; color: var(--r2-ink); word-break: break-word; }
.r2-info-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .76rem;
    word-break: break-all;
}
.r2-info-secao {
    margin: .9rem 0 .45rem;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--r2-muted);
    border-bottom: 1px solid var(--r2-line);
    padding-bottom: .25rem;
}
@media (max-width: 620px) {
    .r2-info-grade { grid-template-columns: 1fr; }
}

/* A tabela do histórico QUEBRA linha em toda célula — o r2-compact põe nowrap na última
   coluna (feito para a coluna de ações da busca), e aqui a última é a Descrição: o texto
   saía cortado na borda do diálogo. Os códigos de ação longos (DOCUMENTO_..._VISUALIZADO)
   também quebram quando não cabem. */
.r2-historico-tabela.ui-datatable tbody td,
.r2-historico-tabela.ui-datatable tbody td:last-child {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    vertical-align: top;
}

/* ============================================================================
   Filtros avançados da busca (painel lateral).

   O grosso vem do `.r2-compact` (o padrão da casa, aplicado junto no fieldset):
   fonte 13px, padding 6px 8px, selectOneMenu como flex. Aqui fica só o que é
   específico deste painel — e cada regra existe por um defeito do print do PO
   (2026-08-24): campos com ~90px de altura e o botão do calendário QUEBRANDO
   para a linha de baixo. */

/* Rótulo SEMPRE em bloco: sem isto, "Título" e "Nome do arquivo" ficavam na
   mesma linha do campo (o outputLabel é inline) e o painel virava um zigue-zague. */
.r2-filtros-avancados label.ui-outputlabel {
    display: block;
    margin: 0 0 .15rem;
    font-size: .78rem;
    color: var(--r2-muted);
}

/* ⚠️ O input do p:datePicker tem `ui-inputfield` mas NÃO `ui-inputtext` — mirar
   só o ui-inputtext deixava justamente os campos de data de fora. */
.r2-filtros-avancados .ui-inputfield {
    font-size: 13px;
    padding: 6px 8px;
}
.r2-filtros-avancados .ui-selectonemenu .ui-selectonemenu-label {
    padding: 0;
    font-size: 13px;
}

/* O p:datePicker é um <span> e o BOTÃO do calendário é injetado por JavaScript
   depois: sem o flex, o input de largura cheia empurrava o botão para baixo. */
.r2-filtros-avancados .ui-calendar {
    display: flex;
    align-items: center;
    gap: .25rem;
    width: 100%;
}
.r2-filtros-avancados .ui-calendar > input {
    flex: 1 1 auto;
    min-width: 0;
}
.r2-filtros-avancados .ui-calendar > .ui-datepicker-trigger {
    flex: 0 0 auto;
    width: 2rem;
    height: 1.9rem;
    padding: 0;
}

/* ⚠️ Largura cheia pelo CSS, não pelo `ui-fluid`: no PrimeFaces essa classe vale
   para o CONTAINER (`.ui-fluid .ui-inputtext { width:100% }`) — posta no próprio
   campo, como estava no XHTML, não faz efeito nenhum. */
.r2-filtros-avancados input.ui-inputtext {
    width: 100%;
}

/* O p:inputNumber embrulha o input num <span>: dentro do grupo (operador + valor)
   quem precisa crescer é o WRAPPER — o style inline do componente vai no input. */
.r2-filtros-avancados .ui-inputnumber {
    flex: 1 1 auto;
    display: block;
    min-width: 0;
    width: 100%;
}
.r2-filtros-avancados .ui-inputnumber > input {
    width: 100%;
}

/* Respiro entre os grupos (o margin-top saiu do inline de cada div, de propósito:
   quem manda no espaçamento é a folha, não 12 atributos repetidos). */
.r2-filtros-avancados .ui-fieldset-content > div + div {
    margin-top: .5rem;
}

/* ============================================================================
   Menu de contexto dos resultados da busca (13 itens).

   Dois defeitos do PrimeFaces base, que juntos deixavam as ÚLTIMAS opções
   inalcançáveis ao clicar num documento do fim da lista (print do PO,
   2026-08-24): `.ui-menu` tem largura FIXA de 12.5em e `.ui-menuitem-link`
   ocupa 92% com float — então "Informações do documento" quebrava em duas
   linhas e a altura do menu DOBRAVA, estourando a janela pela borda de baixo.

   Aqui: largura pelo conteúdo (uma linha por item, metade da altura) e teto de
   altura com rolagem — mesmo num menu que cresça, nenhum item fica fora do
   alcance. As métricas são as do menu de ações da busca (r2-acoes-menu-lista),
   para os dois menus da mesma tela terem o mesmo desenho. */
body .ui-contextmenu.r2-menu-documento {
    width: auto;
    min-width: 15rem;
    max-width: 24rem;
    /* ⚠️ 50vh não é estética — é a garantia. O PrimeFaces posiciona assim:
       cabe abaixo do clique? usa; senão sobe o menu inteiro (top = clique − altura).
       Com altura ≤ metade da janela isso NUNCA corta: se o clique está acima da
       metade, o menu cabe abaixo; se está abaixo, o flip para cima sobra espaço.
       Acima de 50vh existe uma faixa de cliques (no MEIO da lista, em janela
       baixa) em que o menu não cabe abaixo e o flip o joga com topo negativo. */
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
}
body .ui-contextmenu.r2-menu-documento .ui-menu-list {
    width: 100%;
}
body .ui-contextmenu.r2-menu-documento .ui-menuitem-link {
    width: 100%;
    box-sizing: border-box;
    float: none;
    white-space: nowrap;
    padding: 5px 12px;
    font-size: 13px;
    line-height: 18px;
}
body .ui-contextmenu.r2-menu-documento .ui-menuitem-text {
    float: none;
}
body .ui-contextmenu.r2-menu-documento .ui-menuitem-icon {
    margin-right: 8px;
    color: var(--r2-muted);
}

/* ---- Toggle switch do tema Day/Night (rodapé do menu / topbar) ---- */
.r2-tema-switch {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem .75rem; cursor: pointer; user-select: none;
}
.r2-tema-switch .pi { font-size: .85rem; color: var(--r2-faint); transition: color .2s; }
.r2-tema-ico-sol { color: #e8a33d; }                 /* o sol sempre com um tom quente */
:root[data-theme="dark"] .r2-tema-ico-lua { color: #90caf9; }  /* a lua acende no escuro */
.r2-tema-trilho {
    position: relative; width: 40px; height: 22px; flex: 0 0 auto;
    border: 0; padding: 0; cursor: pointer; border-radius: 99px;
    background: var(--r2-line-strong); transition: background .2s;
}
.r2-tema-bolha {
    position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--r2-surface); transition: transform .2s, background .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .r2-tema-trilho { background: var(--r2-accent); }
:root[data-theme="dark"] .r2-tema-bolha { transform: translateX(18px); }
.r2-tema-trilho:focus-visible { outline: 2px solid var(--r2-accent); outline-offset: 2px; }

/* ====== PONTE do tema Noite para os grandes contêineres PrimeFaces ======
   O PR-1 é a fundação; a tokenização fina do CSS custom vem no PR-2/PR-3. Estas
   regras — restritas a [data-theme=dark] — evitam que a área de conteúdo (tabelas,
   painéis, inputs, diálogos, árvore) fique branca no escuro enquanto isso. Nada
   disto altera o tema Dia. Ver doc/tema-day-night-web.md. */
:root[data-theme="dark"] .ui-widget-content,
:root[data-theme="dark"] .ui-panel,
:root[data-theme="dark"] .ui-panel-content,
:root[data-theme="dark"] .ui-datatable-tablewrapper,
:root[data-theme="dark"] .ui-datatable table,
:root[data-theme="dark"] .ui-datatable-scrollable-header,
:root[data-theme="dark"] .ui-datatable-scrollable-footer,
:root[data-theme="dark"] .ui-toolbar,
:root[data-theme="dark"] .ui-fieldset,
:root[data-theme="dark"] .ui-tabs,
:root[data-theme="dark"] .ui-tabs-panels,
:root[data-theme="dark"] .ui-dialog .ui-dialog-content,
:root[data-theme="dark"] .ui-dialog .ui-dialog-titlebar,
:root[data-theme="dark"] .ui-overlaypanel,
:root[data-theme="dark"] .ui-tree,
:root[data-theme="dark"] .ui-panelgrid,
:root[data-theme="dark"] .ui-panelgrid > *,
:root[data-theme="dark"] .ui-panelgrid td,
:root[data-theme="dark"] .ui-panelgrid tr,
:root[data-theme="dark"] .r2-cards,
:root[data-theme="dark"] .r2-card,
:root[data-theme="dark"] .r2-cartao,
:root[data-theme="dark"] .r2-painel,
:root[data-theme="dark"] .r2-box,
:root[data-theme="dark"] .r2-secao,
:root[data-theme="dark"] .r2-info,
:root[data-theme="dark"] .r2-linha {
    background: var(--r2-surface);
    color: var(--r2-ink);
    border-color: var(--r2-line);
}

/* ⚠️ Grade do panelGrid no escuro. Os DOIS temas do PrimeFaces desenham 1px em toda célula de
   panelGrid; no claro isso some (transparente nos compactos/diálogos, e #dee2e6 sobre branco é
   invisível). No escuro o Vela redesenha a borda com #304562 sobre #1f2d40 (nítida) e a ponte
   acima a reafirmava com --r2-line: a tela inteira parecia "dentro de uma tabela". Aqui o espelho
   exato do claro: só a COR fica transparente (largura/estilo intocados, nada se desloca); a
   célula de cabeçalho mantém o filete, como no claro. Mesmo seletor do Vela para a célula: ele
   carrega ANTES do r2ecm.css, então o nosso vence no empate. */
:root[data-theme="dark"] body .ui-panelgrid .ui-panelgrid-cell,
:root[data-theme="dark"] .ui-panelgrid,
:root[data-theme="dark"] .ui-panelgrid > *,
:root[data-theme="dark"] .ui-panelgrid td,
:root[data-theme="dark"] .ui-panelgrid tr {
    border-color: transparent;
}
:root[data-theme="dark"] body .ui-panelgrid .ui-panelgrid-cell.ui-widget-header {
    border-color: var(--r2-line);
}

/* ⚠️ Cabeçalho de tabela no escuro. O Vela (prefixado) pinta `thead th` com #1f2d40, a MESMA cor
   das linhas, e vence a ponte acima por especificidade (tem um `body` a mais): o cabeçalho
   desaparecia dentro da tabela. No claro ele é a faixa --r2-ground com texto miúdo em caixa alta
   (.r2-compact). Aqui a faixa ganha o tom de acento (o azul do Vela) e tinta clara, para se
   destacar de fato; barra de título, rodapé e paginador ficam na faixa neutra (--r2-ground), como
   no claro. Mesmo seletor do Vela: o r2ecm carrega depois, o nosso vence no empate. */
:root[data-theme="dark"] body .ui-datatable thead th {
    background: var(--r2-accent-tint);
    color: var(--r2-ink);
    border-color: var(--r2-line-strong);
}
:root[data-theme="dark"] body .ui-datatable .ui-datatable-header,
:root[data-theme="dark"] body .ui-datatable tfoot td,
:root[data-theme="dark"] body .ui-paginator {
    background: var(--r2-ground);
    color: var(--r2-ink);
    border-color: var(--r2-line);
}
:root[data-theme="dark"] .ui-datatable thead th,
:root[data-theme="dark"] .ui-datatable tfoot td,
:root[data-theme="dark"] .ui-paginator {
    background: var(--r2-ground);
    color: var(--r2-ink);
    border-color: var(--r2-line);
}
:root[data-theme="dark"] .ui-datatable tbody tr,
:root[data-theme="dark"] .ui-datatable tbody td {
    background: var(--r2-surface);
    color: var(--r2-ink);
    border-color: var(--r2-line);
}
:root[data-theme="dark"] .ui-datatable tbody tr.ui-datatable-even,
:root[data-theme="dark"] .ui-datatable tbody tr:nth-child(even) {
    background: var(--r2-surface-alt);
}
:root[data-theme="dark"] .ui-datatable tbody tr:hover,
:root[data-theme="dark"] .ui-datatable tbody tr:hover td {
    background: var(--r2-accent-tint);
}
:root[data-theme="dark"] .ui-inputtext,
:root[data-theme="dark"] .ui-selectonemenu,
:root[data-theme="dark"] .ui-selectonemenu-label,
:root[data-theme="dark"] .ui-inputtextarea,
:root[data-theme="dark"] .ui-autocomplete-input,
:root[data-theme="dark"] .ui-spinner-input,
:root[data-theme="dark"] .ui-calendar input {
    background: var(--r2-surface);
    color: var(--r2-ink);
    border-color: var(--r2-line-strong);
}
:root[data-theme="dark"] .ui-inputtext::placeholder { color: var(--r2-faint); }
/* Menus suspensos e itens de overlay (selectonemenu aberto, menu de contexto). */
:root[data-theme="dark"] .ui-selectonemenu-panel,
:root[data-theme="dark"] .ui-menu,
:root[data-theme="dark"] .ui-menu .ui-menuitem-link {
    background: var(--r2-surface);
    color: var(--r2-ink);
}
:root[data-theme="dark"] .ui-selectonemenu-item:hover,
:root[data-theme="dark"] .ui-menuitem-link:hover {
    background: var(--r2-accent-tint);
}

/* ---- Noite: o menu lateral é 100% custom; o Vela não deve tocá-lo ----
   Regra bruta e definitiva: no dark, os botões do menu (p:button = .ui-button
   .r2-menu-link) e a barra de abas do cliente voltam ao visual do menu — fundo
   transparente, texto/ícone claros — vencendo o estilo "primary" do Vela em
   TODOS os descendentes (o texto mora num span .ui-button-text.ui-c). Ver
   doc/tema-day-night-web.md. */
:root[data-theme="dark"] .r2-sidebar .r2-menu-link,
:root[data-theme="dark"] .r2-cliente-tabs .ui-button {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
:root[data-theme="dark"] .r2-sidebar .r2-menu-link,
:root[data-theme="dark"] .r2-sidebar .r2-menu-link *,
:root[data-theme="dark"] .r2-cliente-tabs .ui-button,
:root[data-theme="dark"] .r2-cliente-tabs .ui-button * {
    color: #e6eaf0 !important;
}
:root[data-theme="dark"] .r2-sidebar .r2-menu-link:hover,
:root[data-theme="dark"] .r2-cliente-tabs .ui-button:hover {
    background: rgba(255, 255, 255, 0.07) !important;
}
:root[data-theme="dark"] .r2-sidebar .r2-menu-item-ativo,
:root[data-theme="dark"] .r2-cliente-tabs .r2-cliente-tab-ativa {
    background: var(--r2-accent-tint) !important;
}
:root[data-theme="dark"] .r2-sidebar .r2-menu-item-ativo *,
:root[data-theme="dark"] .r2-cliente-tabs .r2-cliente-tab-ativa * {
    color: var(--r2-accent-ink) !important;
}

/* ---- Noite: restaurar o tamanho/forma dos headers do acordeão do menu ----
   O tema Vela força font-size:1rem e padding:1rem nos h3.ui-panelmenu-header
   (especificidade maior que a do menu custom), deixando CADASTROS/CICLO DE VIDA
   grandes e altos no dark. Aqui voltam ao compacto do tema Dia. !important porque
   o menu é 100% custom e o Vela não deveria tocá-lo. Ver doc/tema-day-night-web.md. */
:root[data-theme="dark"] .r2-sidebar .r2-menu-panel h3.ui-panelmenu-header {
    font-size: 11px !important;
    padding: 5px 8px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
}
:root[data-theme="dark"] .r2-sidebar .r2-menu-panel h3.ui-panelmenu-header a {
    font-size: 11px !important;
}
/* Itens do acordeão: o Vela força padding:.75rem 1rem (espaçamento grande);
   voltam ao compacto do Dia (achado do PO, 2026-08-29). */
:root[data-theme="dark"] .r2-sidebar .r2-menu-panel .ui-panelmenu-content .ui-menuitem-link {
    padding: 5px 8px 5px 20px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
}

/* ---- Logo das telas de login: versão clara do texto no tema Noite ----
   O SVG da assinatura vertical tem o texto em índigo escuro (apaga no escuro).
   Duas imagens no DOM; o CSS mostra a certa por tema. O símbolo (gradiente
   colorido) é o mesmo nas duas — só o texto muda. Ver doc/tema-day-night-web.md. */
.r2-logo-dark { display: none; }
:root[data-theme="dark"] .r2-logo-claro { display: none; }
:root[data-theme="dark"] .r2-logo-dark { display: inline-block; }


/* ---- Noite: o chat de IA não leva o padding do diálogo do Vela ----
   O Vela força padding:.2rem 1.5rem 2rem no .ui-dialog-content (especificidade
   maior que a do chat), espremendo o form de 400px e cortando as bolhas/entrada.
   O chat desenha o próprio espaçamento por dentro — aqui o content volta a 0.
   Achado do PO (2026-08-29). Ver doc/tema-day-night-web.md. */
:root[data-theme="dark"] .ui-dialog.r2-ia-chat .ui-dialog-content {
    padding: 0 !important;
}

/* ============================================================================
   Solicitação de acesso (doc/solicitacao-acesso.md, V115): detalhe da solicitação
   e tela de configuração. Só variáveis do tema (claro e escuro), nenhuma cor fixa.
   ============================================================================ */
.r2-sa-cabecalho {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin: 0 0 .9rem;
}
.r2-sa-protocolo {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--r2-accent-ink);
}
/* A linha do tempo: solicitação → chefia → cadastro. Cada etapa diz em que pé está. */
.r2-sa-etapas {
    display: flex;
    gap: .6rem;
    margin: 0 0 1rem;
}
.r2-sa-etapa {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid var(--r2-line);
    border-radius: 8px;
    padding: .6rem .75rem;
    background: var(--r2-surface);
}
.r2-sa-etapa.feita { border-color: var(--r2-ok); }
.r2-sa-etapa.atual { border-color: var(--r2-accent); box-shadow: inset 0 0 0 1px var(--r2-accent); }
.r2-sa-etapa.parada { border-color: var(--r2-erro); }
.r2-sa-etapa-num {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    background: var(--r2-line);
    color: var(--r2-ink);
    margin-right: .45rem;
    vertical-align: middle;
}
.r2-sa-etapa.feita .r2-sa-etapa-num { background: var(--r2-ok); color: var(--r2-on-accent); }
.r2-sa-etapa.atual .r2-sa-etapa-num { background: var(--r2-accent); color: var(--r2-on-accent); }
.r2-sa-etapa.parada .r2-sa-etapa-num { background: var(--r2-erro); color: var(--r2-on-accent); }
.r2-sa-etapa-titulo { font-weight: 600; font-size: .85rem; vertical-align: middle; }
.r2-sa-etapa-sub { color: var(--r2-muted); font-size: .78rem; margin-top: .3rem; line-height: 1.35; }
/* Os dois blocos lado a lado (solicitante, chefia), cada um em pares rótulo/valor. */
.r2-sa-blocos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 0 0 1rem;
}
.r2-sa-bloco {
    border: 1px solid var(--r2-line);
    border-radius: 8px;
    background: var(--r2-surface);
    padding: .8rem 1rem;
    min-width: 0;
}
.r2-sa-bloco .r2-area-title { margin-bottom: .6rem; }
.r2-sa-kv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem 1rem;
}
.r2-sa-kv > div { min-width: 0; }
.r2-sa-kv .larga { grid-column: 1 / -1; }
.r2-sa-k {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--r2-muted);
    margin-bottom: .1rem;
}
.r2-sa-v { font-size: .9rem; color: var(--r2-ink); word-break: break-word; }
.r2-sa-hash {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .72rem;
    color: var(--r2-muted);
    word-break: break-all;
    white-space: normal;
}
.r2-sa-recusa {
    border-left: 4px solid var(--r2-erro);
    background: var(--r2-erro-tint);
    color: var(--r2-ink);
    padding: .6rem .8rem;
    border-radius: 6px;
    margin: 0 0 1rem;
    font-size: .9rem;
}
/* O link privado da configuração: destacado, copiável, sem quebrar o layout. */
.r2-sa-link {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
    background: var(--r2-accent-tint);
    border: 1px dashed var(--r2-accent);
    border-radius: 8px;
    padding: .6rem .8rem;
    margin: .3rem 0 .5rem;
}
.r2-sa-link code {
    flex: 1 1 320px;
    min-width: 0;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .85rem;
    color: var(--r2-ink);
    word-break: break-all;
}
.r2-sa-passos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .6rem;
    margin: 0 0 .9rem;
}
.r2-sa-passo {
    border: 1px solid var(--r2-line);
    border-radius: 8px;
    padding: .55rem .7rem;
    background: var(--r2-surface);
    font-size: .8rem;
    line-height: 1.35;
}
.r2-sa-passo b { display: block; font-size: .82rem; margin-bottom: .15rem; color: var(--r2-accent-ink); }
@media (max-width: 800px) {
    .r2-sa-etapas { flex-direction: column; }
    .r2-sa-blocos, .r2-sa-passos { grid-template-columns: 1fr; }
}
/* O botão Copiar do link privado responde no próprio botão (verde ao copiar, vermelho se falhou). */
.r2-sa-copiar { transition: background-color .2s ease, border-color .2s ease; }
.r2-sa-copiar.r2-sa-copiado { background: var(--r2-ok) !important; border-color: var(--r2-ok) !important; color: var(--r2-on-accent) !important; }
.r2-sa-copiar.r2-sa-copia-falhou { background: var(--r2-erro) !important; border-color: var(--r2-erro) !important; color: var(--r2-on-accent) !important; }