html {
    min-height: 100%;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f2f3f5;
    color: #1f2b37;
}

.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: #e8edf2;
    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: #0a2e5c;
    font-weight: 600;
}

.r2-cliente-tabs .ui-button:hover {
    background: #ffffff;
    color: #0a2e5c;
}

.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: #ffffff;
    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: #e8edf2;
    color: #0a2e5c;
    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: #ffffff;
    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;
}

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

.r2-sidebar {
    width: 286px;
    background: #ffffff;
    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: #0a2e5c;
}

.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: #1f2b37;
}

.r2-sidebar .ui-button.r2-menu-link:hover {
    background: #edf1f5;
    color: #0a2e5c;
}

/* ---------------------------------------------------------------- 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: #edf1f5;
    color: #0a2e5c;
}

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: #1f2b37;
}

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: #edf1f5;
    color: #0a2e5c;
}

/* 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: #0a2e5c;
}

.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: #ffffff;
    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: #e8edf2;
    color: #0a2e5c;
    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: #0a2e5c;
}

.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: #ffffff;
    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: #ffffff;
    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: #ffffff;
}

.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: #f6f8fa;
    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: #ffffff;
    box-sizing: border-box;
    display: block;
}

.r2-login-body {
    background: linear-gradient(180deg, #f2f3f5 0%, #e3e7ec 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: #0a2e5c;
}

.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;
}

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

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

.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-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 #227297, 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 {
    --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;
    /* Espaçamento único entre botões irmãos (doc/botoes-padrao.md). */
    --r2-gap-botoes: 8px;
    --nexadoc-no: #30b0c5;
}

/* 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: #ffffff;
    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: #f2f5f9;
    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: #0a2e5c; }
.r2-tag.fech { background: #eef7f0; color: #0f7b43; }
.r2-tag.gen { background: #eef1f5; color: var(--r2-muted); }
.r2-ocr-ok { color: #0f9d58; font-weight: 600; }
.r2-ocr-pend { color: #c77700; font-weight: 600; }
.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: #f1f4f8;
    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: #f4f6f8;
}
.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: #ffffff;
    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: #ffffff;
    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: #ffffff;
    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: #f6f7fb;
    border-bottom: 1px solid var(--r2-line);
}
.r2-cliente-toolbar .ui-button {
    min-width: 0;
    background: #ffffff;
    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: #ffffff; }
.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: #fafbfc;
}
.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: #fff;
}
.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: #fff;
    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: #fff;
    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: #fff;
    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: #767a7b; font-size: .78rem; margin-bottom: .75rem; }
.r2-ficha-secao {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: #767a7b; margin: .5rem 0 .35rem;
}
.r2-indice { display: flex; flex-direction: column; margin-bottom: .55rem; }
.r2-indice-rotulo { font-size: .72rem; color: #767a7b; }
/* 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: #fff;
}

/* ---------------------------------------------------------------------------
   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: #fff;
    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: #0A2E5C;                     /* Índigo Arquivo */
}
.r2-sessao-texto { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: #333; }
.r2-sessao-secundario { color: #767A7B; font-size: 13px; }
.r2-sessao-tempo { font-variant-numeric: tabular-nums; color: #b42318; 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: #227297; color: #fff; }        /* Azul Fluxo */
.r2-sessao-botao:hover { background: #1b5c7a; }
.r2-sessao-botao-secundario { background: #fff; color: #767A7B; border-color: #d6d9dd; }
.r2-sessao-botao-secundario:hover { background: #f2f3f5; }

/* ---------- 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: #fff;
    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: #b42318;
}
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: #b42318;
}

/* ---------- 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: #fff;
    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: #fff;
    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: #fff;
        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: #fafbfc;
        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: #fff; }

    /* 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%, #227297 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; }
.r2-ia-chat-form { display: flex; flex-direction: column; height: 560px; max-height: 78vh; width: 400px; max-width: 92vw; }

/* Cabeçalho */
.r2-ia-chat-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .9rem;
    color: #fff;
    background: linear-gradient(120deg, #173069 0%, #227297 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: #f6f8fa; 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: #fff; 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, #227297, #173069); color: #fff; border-bottom-right-radius: 4px; }
.r2-ia-bubble-bot { background: #fff; 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: #fff; }
.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, #227297, #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) {
    .r2-ia-chat-form { width: 96vw; 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: #fff; 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: #0f7b43; }
.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: #fff;
    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: #fafbfc;
}
.r2-atencao-rotulo {
    font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
    font-weight: 700; color: #b91c1c;
}
.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: #fff; 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: #0f7b43; }
.r2-delta.desce { color: #b45309; }

/* ── Grade de painéis ──────────────────────────────────────────────────── */
.r2-paineis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: .9rem; align-items: start;
}
.r2-linhas { display: flex; flex-direction: column; }
.r2-linha {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem 0; border-bottom: 1px solid var(--r2-line);
}
.r2-linha:last-child { border-bottom: 0; }
.r2-linha-nome { flex: 1; min-width: 0; font-size: .88rem; }
.r2-linha-sub { display: block; font-size: .74rem; color: var(--r2-muted); }
.r2-qtd { font-size: .95rem; font-weight: 600; }
.r2-qtd.crit   { color: #b91c1c; }
.r2-qtd.warn   { color: #b45309; }
.r2-qtd.neutro { color: var(--r2-ink); }

/* 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: #fff; border: 1px solid #dfe3e8; border-left: 3px solid var(--r2-azul, #227297);
    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: #4a5158; }
.r2-agente-icone { font-size: 1.4rem; color: var(--r2-azul, #227297); margin-top: .15rem; }
.r2-agente-nota { font-size: .84rem !important; color: #767A7B !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: #e8edf2; }
.r2-divisoria:hover::after { background: var(--r2-azul, #227297); }
/* 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, junto do visualizador: é olhando o resultado que se decide repetir com
   outro dpi ou outra cor. */
.r2-captura-barra { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
                    padding-bottom: .7rem; border-bottom: 1px solid #eef1f4; margin-bottom: .7rem; }
.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: #4a5158; 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: #4a5158; }
.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 #dfe3e8; border-radius: 4px; display: block; }
.r2-folha figcaption { font-size: .78rem; color: #767A7B; 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: #4a5158; }
.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: #fee2e2; border-left: 3px solid #b3261e;
    padding: .55rem .7rem; border-radius: 4px;
}
.r2-captura-retorno.r2-retorno-aviso {
    color: #713f12; background: #fef3c7; 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, #227297); }
.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 #dfe3e8; 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, #227297); }
.r2-palco { border: 1px solid #dfe3e8; border-radius: 8px; background: #f7f8fa; }
.r2-palco-barra { display: flex; align-items: center; justify-content: center; gap: .8rem;
                  padding: .35rem; border-bottom: 1px solid #e6eaee; background: #fff;
                  border-radius: 8px 8px 0 0; }
.r2-palco-contador { font-size: .82rem; color: #767A7B; 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: #fff; }
.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, #227297); background: #f7f9fb;
              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: #767A7B; 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: #767A7B; }
.r2-destino-vazio .pi { color: var(--r2-azul, #227297); }

/* 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); }