/* PreserveHub design system primitives.
   Keep reusable tokens and shared component classes here instead of inline Razor styles. */

:root {
    /* ------------------------------------------------------------------------
       CANAIS RGB — auditoria de DS, tarefa 9.5 (07/09/2026).

       O DS escrevia 44 cores em rgba() literal FORA daqui, todas com o canal de
       um token que ja existia; so o alfa variava. Escrever a cor de novo a cada
       transparencia e como o sistema violava a propria regra.

       Cada cor com transparencia passa a ter UMA fonte: o canal. O token de cor
       e DERIVADO dele, entao o valor vive num lugar so — sem isso a tarefa
       trocaria uma violacao (literal solto) por outra (valor em dois tokens).

       Uso: rgb(var(--ph-n-0-rgb) / .12). Foi escolhido em vez de color-mix()
       porque o produto serve o CSS cru, sem etapa de build: se um navegador nao
       entender a funcao, a declaracao e descartada e a cor SOME. A sintaxe de
       barra do rgb() tem suporte bem mais antigo. Nenhum JS le estes tokens
       (grep por getComputedStyle/getPropertyValue em wwwroot: zero).
       ATENÇÃO (Onda HIG 26/09/2026): o triplo é SEPARADO POR ESPAÇO. Com vírgulas, a forma
       rgb(11, 42, 63 / .04) é INVÁLIDA (sintaxe legada não aceita alfa por barra) e o navegador
       descartava a declaração inteira — as 43 sombras/translucidez do DS (--ph-shadow-1/2/3,
       scrim, botões do hero, anéis de seleção) nunca renderizaram até esta correção.
       ------------------------------------------------------------------------ */
    --ph-n-0-rgb: 255 255 255;   /* #FFFFFF */
    --ph-brand-orange-rgb: 199 93 46;   /* #C75D2E */
    --ph-brand-ink-rgb: 11 42 63;   /* #0B2A3F */
    --ph-brand-orange-2-rgb: 224 115 74;   /* #E0734A */
    --ph-brand-ink-3-rgb: 30 83 119;   /* #1E5377 */
    --ph-err-500-rgb: 184 58 31;   /* #B83A1F */

    --ph-brand-ink: rgb(var(--ph-brand-ink-rgb));
    --ph-brand-ink-2: #133C56;
    --ph-brand-ink-3: rgb(var(--ph-brand-ink-3-rgb));
    --ph-brand-orange: rgb(var(--ph-brand-orange-rgb));
    /* Laranja para TEXTO pequeno (WCAG 1.4.3): #C75D2E dava 4,17:1 sobre branco e 3,54:1
       sobre orange-soft (< 4,5:1). Este tom mantém a identidade e passa (5,31:1). */
    --ph-brand-orange-text: #B14D22;
    /* Hover do laranja de texto (fundo com texto branco): tom mais escuro do mesmo laranja,
       mantém >=4,5:1 com branco (6,89:1) — usado no acento .ph-button-hero-accent. */
    --ph-brand-orange-text-2: #96411D;
    --ph-brand-orange-2: rgb(var(--ph-brand-orange-2-rgb));
    /* Laranja para TEXTO sobre fundo ESCURO (o heroi navy). A paleta so tinha laranjas de
       texto para fundo CLARO (-text 5,31:1 no branco, -text-2 6,89:1) e o heroi vinha usando
       --ph-brand-orange-2, que e um laranja DECORATIVO/de borda: como texto de 11px sobre o
       heroi ele da 4,07:1, abaixo dos 4,5:1 exigidos. O calculo tem que incluir o ::before —
       o circulo laranja a 12% 0% soma 18% sobre o --ph-brand-ink justo no topo-esquerdo, que
       e onde o eyebrow fica; sem essa camada a conta daria 4,74:1 e pareceria aprovada.
       Este tom da 6,13:1 no mesmo ponto. O axe NUNCA acusaria isso: ele nao calcula contraste
       sobre gradiente e registra o no como 'incomplete', que nao conta como violacao —
       o gate passava com tolerancia zero sem ter olhado. Auditoria de DS, 07/09/2026. */
    --ph-brand-orange-on-ink: #F0A183;
    --ph-orange-soft: #FBE9DD;

    --ph-n-0: rgb(var(--ph-n-0-rgb));
    --ph-n-25: #FBFAF7;
    --ph-n-50: #F5F3EE;
    --ph-n-100: #ECE9E2;
    --ph-n-200: #DCD8CF;
    --ph-n-300: #C4BFB4;
    --ph-n-400: #9B9588;
    --ph-n-500: #736D60;
    --ph-n-600: #544E43;
    --ph-n-700: #3A352D;
    --ph-n-800: #26221C;

    --ph-ok-50: #E8F4EE;
    --ph-ok-200: #A8D7BC;
    --ph-ok-500: #1F8A5B;
    --ph-ok-700: #155F3F;
    --ph-info-50: #E3EEF6;
    --ph-info-200: #A2C5DE;
    --ph-info-500: #1F5E91;
    --ph-info-700: #143F61;
    --ph-warn-50: #FBF1DC;
    --ph-warn-200: #EFD18A;
    --ph-warn-500: #B7841A;
    --ph-warn-700: #7A560A;
    --ph-err-50: #FBE7E2;
    --ph-err-200: #EDB4A6;
    --ph-err-500: rgb(var(--ph-err-500-rgb));
    --ph-err-700: #7A2110;

    --ph-sig-ostensivo: #155F3F; /* alinhado ao ok-700: 4,33:1 do valor antigo reprovava como texto (AA) */
    /* alinhado ao warn-700: como os demais sig, é usado como TEXTO sobre chip claro; o âmbar
       antigo #B7841A dava 3,32:1 (reprova AA) — #7A560A passa (6,64:1). É o padrão do Perfil. */
    --ph-sig-restrito: #7A560A;
    --ph-sig-reservado: #A35515;
    --ph-sig-secreto: #B83A1F;
    --ph-sig-ultra: #6E1A0C;
    --ph-sig-pessoal: #7A3FAF;
    --ph-sig-sensivel: #B12C73;

    --ph-radius-sm: 4px;
    --ph-radius-md: 6px;
    --ph-radius-lg: 10px;
    --ph-radius-xl: 14px;
    --ph-radius-pill: 999px;

    --ph-shadow-1: 0 1px 1px rgb(var(--ph-brand-ink-rgb) / .04), 0 1px 2px rgb(var(--ph-brand-ink-rgb) / .06);
    --ph-shadow-2: 0 2px 4px rgb(var(--ph-brand-ink-rgb) / .06), 0 4px 12px rgb(var(--ph-brand-ink-rgb) / .06);
    --ph-shadow-3: 0 6px 16px rgb(var(--ph-brand-ink-rgb) / .10), 0 12px 32px rgb(var(--ph-brand-ink-rgb) / .08);

    --ph-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ph-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Layout — largura do menu lateral (igual ao MudDrawer default) */
    --ph-sidebar-w: 240px;
    /* Padding horizontal do topbar */
    --ph-topbar-px: 20px;

    /* Neutro mais escuro (títulos/ink forte) — usado no detalhe do objeto */
    --ph-n-900: #15120E;

    /* Escala roxa — marcações LGPD (dados pessoais/sensíveis) */
    --ph-pur-50: #F4EEFA;
    --ph-pur-200: #D6C2EC;
    --ph-pur-500: #7A3FAF;
    --ph-pur-700: #4E2773;

    /* Escala rosa — fecha a família rosa/LGPD que estava com hex órfão em 3 lugares
       (chip de sigilo Sensível, KPI alt e recepção de preservação). pink-700 sobre pink-50
       passa AA (>=7:1); a magenta 500 continua em --ph-sig-sensivel (semântica de sigilo). */
    --ph-pink-50: #FCEDF4;
    --ph-pink-500: #B12C73; /* mesmo valor de --ph-sig-sensivel, sem a semântica de sigilo (barras/gráficos) */
    --ph-pink-700: #7A2F58;

    /* Onda HIG (26/09/2026) — MOVIMENTO: uma duração e uma curva para toda transição de
       estado (hover/pressão/foco). Nada acima de 160ms fora de carregamento. */
    --ph-motion-fast: 120ms;
    --ph-motion-base: 160ms;
    --ph-ease-out: cubic-bezier(.2, .8, .2, 1);

    /* Onda HIG — SCRIM único (diálogos do Mud via PaletteLight.OverlayDark, overlay de filtros
       e drawer do rail de refinadores): navy da marca a 45%, nunca cinza chapado. */
    --ph-scrim: rgb(var(--ph-brand-ink-rgb) / .45);

    /* Onda HIG — cores que viviam como hex soltos no corpo do DS (item 9, higiene). */
    --ph-digit-bg: #E8D6A8;     /* miniatura/preview de documento DIGITALIZADO (pergaminho) */
    --ph-digit-border: #C9B483;
    --ph-digit-ink: #3E3017;
    --ph-digit-text: #6A5424;
    --ph-digit-seal: #5A4A26;
    --ph-orange-tint-50: #FFF8F3; /* faixa "nova" do comparador de versões */
    --ph-orange-tint-25: #FFFDFB; /* célula "nova" do comparador de versões */
    --ph-ok-on-ink: #57C98C;      /* verde legível sobre o navy (chips do hero de autenticação) */
    --ph-viewer-bg: #F0F0F0;      /* fundo neutro dos visualizadores de PDF (Anexos/Dados/Técnica) */

    /* Tokens de destinação (cor reutilizável; alinhados aos badges de domínio) */
    --ph-dest-elim: var(--ph-err-500);
    /* Permanente = ok-700: o chip usa TEXTO BRANCO sobre esta cor; ok-500 dava 4,33:1 (reprova
       AA como texto 11px bold), ok-700 passa (7,66:1) — mesmo movimento dos avatares do Perfil. */
    --ph-dest-perm: var(--ph-ok-700);
    --ph-dest-int: var(--ph-info-500);

    /* Anel de foco acessível (WCAG 2.1 AA) */
    /* Anel DUPLO (WCAG 2.4.7/1.4.11): halo branco separa do componente + laranja sólido 4,17:1.
       O valor antigo (alpha .35) compunha 1,58:1 sobre branco — foco praticamente invisível. */
    --ph-shadow-focus: 0 0 0 2px var(--ph-n-0), 0 0 0 4px var(--ph-brand-orange);
}

/* ============================================================================
   BASE TIPOGRÁFICA DA PÁGINA (auditoria de DS, 06/09/2026).

   Em 7.013 linhas o design system não tinha UMA regra body: a fonte-base da
   página vinha inteiramente do MudBlazor, que declara
   `body { font-family: var(--mud-typography-default-family) }` e a resolve pela
   Typography do tema — hoje "IBM Plex Sans" (Theme/MudBlazorAdminDashboard.cs).
   Ou seja: a fonte estava CERTA, mas por empréstimo. O design system dependia
   do MudBlazor para pintar a própria base, o que contradiz a direção de reduzir
   o MudBlazor: no dia em que ele sair, a tipografia do produto sai junto.

   Esta regra torna o DS auto-suficiente na tipografia. Deliberadamente NÃO
   declara background nem color: essas o tema do MudBlazor já resolve pela
   paleta, e sobrescrevê-las aqui repintaria o produto inteiro sem que ninguém
   tenha pedido. Quando o MudBlazor sair, elas entram nesta mesma regra, com os
   tokens --ph-n-25 e --ph-n-800 (é o que a referência define em
   system-design/DesignSystem.html:88-95).

   Especificidade mínima de propósito: qualquer componente com estilo próprio
   continua vencendo.
   ============================================================================ */
body {
    font-family: var(--ph-font-sans);
}

.ph-eyebrow {
    color: var(--ph-brand-orange-text);
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ph-section-heading {
    margin-bottom: 4px;
}

.ph-section-title,
.ph-group-title {
    color: var(--ph-brand-ink);
    font-weight: 600;
}

h1.ph-search-hero-title,
h2.ph-search-hero-title,
h3.ph-search-hero-title {
    font-size: 24px;
    margin: 0;
}

p.ph-search-hero-subtitle,
span.ph-search-hero-subtitle {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

h3.ph-section-title,
h4.ph-section-title,
h5.ph-section-title,
h6.ph-section-title,
p.ph-section-title {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

.ph-muted {
    color: var(--ph-n-500);
}

.ph-count-chip {
    align-items: center;
    background: var(--ph-n-100);
    border-radius: var(--ph-radius-pill);
    color: var(--ph-n-700);
    display: inline-flex;
    font-size: 11px;
    font-weight: 600;
    height: 22px;
    letter-spacing: .04em;
    padding: 0 8px;
    text-transform: uppercase;
    white-space: nowrap;
}

.ph-sig-chip {
    align-items: center;
    background: var(--ph-n-0);
    border: 1px solid currentColor;
    border-radius: var(--ph-radius-pill);
    display: inline-flex;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    height: 20px;
    letter-spacing: .04em;
    padding: 0 8px;
    text-transform: uppercase;
}

.ph-sig-chip span {
    background: currentColor;
    border-radius: 50%;
    height: 6px;
    width: 6px;
}

.ph-sig-chip--sigilo {
    color: var(--ph-warn-700);
}

.ph-sig-chip--ostensivo {
    /* WCAG 1.4.3: texto/traço/ponto sobre chip branco. sig-ostensivo (#1F8A5B) dava 4,34:1;
       ok-700 mantém o verde de identidade e passa (7,66:1). */
    color: var(--ph-ok-700);
}

.ph-sig-chip--pessoal {
    background: var(--ph-pur-50);
    color: var(--ph-sig-pessoal);
}

.ph-sig-chip--sensivel {
    background: var(--ph-pink-50);
    color: var(--ph-sig-sensivel);
}

.ph-button-secondary {
    border-color: var(--ph-n-200);
    border-radius: var(--ph-radius-md);
    color: var(--ph-brand-ink);
    letter-spacing: 0;
    text-transform: none;
}

.ph-button-primary {
    background: var(--ph-brand-ink) !important;
    border-radius: var(--ph-radius-md);
    box-shadow: none;
    color: var(--ph-n-0) !important;
    letter-spacing: 0;
    text-transform: none;
}

.ph-button-primary:hover {
    background: var(--ph-brand-ink-2) !important;
    box-shadow: none;
}

.ph-toolbar-button {
    border-radius: var(--ph-radius-md);
    letter-spacing: 0;
    text-transform: none;
}

.ph-icon-button {
    border-radius: var(--ph-radius-md);
}

/* Foco de teclado VISÍVEL (WCAG 2.4.7): anel padrão do produto nas setas do carrossel e
   em todos os kebabs que usam esta classe. */
.ph-icon-button:focus-visible,
.mud-menu.ph-icon-button .mud-menu-icon-button-activator:focus-visible {
    box-shadow: var(--ph-shadow-focus);
    outline: 0;
}

/* Kebabs migrados para MudMenu nativo (sem ActivatorContent, para zerar axe nested-interactive):
   o MudMenu aplica a Class no wrapper .mud-menu, não no botão-ativador. Refletimos o raio do
   design system no MudIconButton nativo do activator para manter o visual do .ph-icon-button. */
.mud-menu.ph-icon-button .mud-menu-icon-button-activator {
    border-radius: var(--ph-radius-md);
}

.ph-alert {
    border-radius: var(--ph-radius-md);
}

.ph-tabs .mud-tabs-toolbar {
    background: transparent;
    border-bottom: 1px solid var(--ph-n-100);
    min-height: 44px;
}

.ph-tabs .mud-tab {
    color: var(--ph-n-600);
    font-size: 13px;
    font-weight: 500;
    min-height: 44px;
    text-transform: none;
}

.ph-tabs .mud-tab.mud-tab-active {
    color: var(--ph-brand-orange-text);
    font-weight: 600;
}

.ph-user-detail-head {
    align-items: center;
    background: linear-gradient(180deg, var(--ph-n-25), var(--ph-n-0));
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
    padding: 18px 22px;
}

.ph-user-detail-avatar {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 600;
    height: 48px;
    justify-content: center;
    letter-spacing: .02em;
    width: 48px;
}

.ph-user-detail-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ph-user-detail-name {
    color: var(--ph-brand-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

.ph-user-detail-email {
    color: var(--ph-n-500);
    font-size: 12px;
}

.ph-user-detail-role {
    color: var(--ph-brand-orange-text);
    font-family: var(--ph-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    margin-top: 2px;
    text-transform: uppercase;
}

.ph-user-detail-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.ph-perm-toggle-cell {
    text-align: right;
    white-space: nowrap;
    width: 120px;
}

.ph-perm-module {
    color: var(--ph-brand-ink);
    font-weight: 600;
}

.ph-tab-badge {
    background: var(--ph-n-100);
    border-radius: var(--ph-radius-pill);
    color: var(--ph-n-700);
    font-family: var(--ph-font-mono);
    font-size: 10px;
    font-weight: 600;
    margin-left: 6px;
    padding: 2px 8px;
}

.ph-tab-empty-state {
    align-items: center;
    color: var(--ph-n-500);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 56px 24px;
    text-align: center;
}

.ph-tab-empty-state .mud-icon-root {
    color: var(--ph-n-300);
}

.ph-tab-empty-state-title {
    color: var(--ph-brand-ink);
    font-size: 15px;
    font-weight: 600;
    margin-top: 4px;
}

.ph-tab-empty-state-desc {
    font-size: 13px;
    max-width: 420px;
}

.ph-scope-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ph-scope-legend .ph-badge {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.ph-scope-legend .ph-badge::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 6px;
    width: 6px;
}

.ph-perm-module-bold {
    align-items: center;
    color: var(--ph-brand-ink);
    display: inline-flex;
    font-weight: 600;
    gap: 6px;
}

.ph-perm-module-bold .mud-icon-root {
    color: var(--ph-brand-orange-text);
}

.ph-perm-module-sub {
    color: var(--ph-n-500);
    padding-left: 24px;
}

.ph-perm-role {
    color: var(--ph-n-600);
    font-family: var(--ph-font-mono);
    font-size: 11px;
}

.ph-info-card {
    background: linear-gradient(135deg, var(--ph-orange-soft) 0%, var(--ph-n-0) 100%);
    border: 1px solid var(--ph-brand-orange-2);
    border-radius: var(--ph-radius-lg);
    margin-top: 20px;
    padding: 20px 24px;
}

.ph-info-card-body {
    align-items: flex-start;
    display: flex;
    gap: 16px;
}

.ph-info-card-icon {
    align-items: center;
    background: var(--ph-orange-soft);
    border-radius: var(--ph-radius-lg);
    color: var(--ph-brand-orange-text);
    display: grid;
    flex-shrink: 0;
    height: 44px;
    justify-items: center;
    place-items: center;
    width: 44px;
}

.ph-info-card-title {
    color: var(--ph-brand-ink);
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
}

.ph-info-card-text {
    color: var(--ph-n-600);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.ph-info-card-link {
    color: var(--ph-brand-orange-text);
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
}

.ph-info-card-link:hover {
    text-decoration: underline;
}

.ph-wizard-head {
    margin-bottom: 20px;
}

.ph-wizard-head .ph-eyebrow {
    margin-bottom: 6px;
}

.ph-wizard-head-title {
    color: var(--ph-brand-ink);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.015em;
    margin: 0 0 4px;
}

.ph-wizard-head-desc {
    color: var(--ph-n-600);
    font-size: 13px;
    margin: 0;
    max-width: 70ch;
}

.ph-wiz-tabs {
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-bottom: 0;
    border-radius: var(--ph-radius-xl) var(--ph-radius-xl) 0 0;
    box-shadow: var(--ph-shadow-1);
    display: flex;
    gap: 0;
    padding: 0 8px;
}

.ph-wiz-tab {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--ph-n-500);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--ph-font-sans);
    font-size: 13px;
    font-weight: 600;
    gap: 10px;
    height: 52px;
    letter-spacing: .04em;
    padding: 0 18px;
    text-transform: uppercase;
}

.ph-wiz-tab:hover:not(:disabled) {
    color: var(--ph-brand-ink);
}

/* Foco de teclado VISÍVEL (WCAG 2.4.7): anel padrão do produto nos passos do wizard. */
.ph-wiz-tab:focus-visible {
    box-shadow: var(--ph-shadow-focus);
    outline: 0;
}

.ph-wiz-tab.active {
    border-color: var(--ph-brand-orange-text);
    color: var(--ph-brand-ink);
}

.ph-wiz-tab.completed {
    color: var(--ph-ok-700);
}

.ph-wiz-tab:disabled {
    color: var(--ph-n-300);
    cursor: not-allowed;
}

.ph-wiz-tab-step {
    align-items: center;
    background: var(--ph-n-100);
    border-radius: 50%;
    /* n-600 sobre n-100: n-500 dava 4,24:1 (reprova AA para texto 12px) — n-600 passa (6,80:1) */
    color: var(--ph-n-600);
    display: grid;
    flex-shrink: 0;
    font-family: var(--ph-font-mono);
    font-size: 12px;
    font-weight: 600;
    height: 26px;
    place-items: center;
    width: 26px;
}

.ph-wiz-tab.active .ph-wiz-tab-step {
    background: var(--ph-brand-ink);
    color: var(--ph-n-0);
}

.ph-wiz-tab.completed .ph-wiz-tab-step {
    background: var(--ph-ok-700);
    color: var(--ph-n-0);
}

.ph-wiz-tab .mud-icon-root {
    height: 14px;
    width: 14px;
}

.ph-wiz-card {
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-radius: 0 0 var(--ph-radius-xl) var(--ph-radius-xl);
    border-top: 0;
    box-shadow: var(--ph-shadow-1);
    margin-bottom: 20px;
    padding: 28px;
}

.ph-step-h {
    align-items: baseline;
    border-bottom: 1px solid var(--ph-n-100);
    color: var(--ph-n-500);
    display: flex;
    font-family: var(--ph-font-mono);
    font-size: 11px;
    font-weight: 600;
    justify-content: space-between;
    letter-spacing: .08em;
    margin: 0 0 14px;
    padding-bottom: 12px;
    text-transform: uppercase;
}

.ph-step-h:not(:first-child) {
    margin-top: 28px;
}

.ph-step-h-count {
    color: var(--ph-n-500);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.ph-especie-carousel {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.ph-car-track {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 8px;
    overflow: hidden;
}

.ph-especie-card {
    align-items: center;
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-200);
    border-radius: var(--ph-radius-md);
    color: var(--ph-n-700);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-family: var(--ph-font-mono);
    font-size: 12px;
    font-weight: 600;
    gap: 10px;
    height: 44px;
    letter-spacing: .04em;
    padding: 0 18px;
    transition: background-color var(--ph-motion-fast) var(--ph-ease-out), border-color var(--ph-motion-fast) var(--ph-ease-out), color var(--ph-motion-fast) var(--ph-ease-out), box-shadow var(--ph-motion-fast) var(--ph-ease-out), transform var(--ph-motion-fast) var(--ph-ease-out);
}

.ph-especie-card:hover {
    border-color: var(--ph-n-300);
    color: var(--ph-brand-ink);
}

.ph-especie-card.active {
    background: var(--ph-orange-soft);
    border-color: var(--ph-brand-orange-text);
    color: var(--ph-brand-orange-text);
}

/* Foco de teclado VISÍVEL (WCAG 2.4.7): anel padrão do produto — o outline default do
   navegador some sobre o fundo do card. */
.ph-especie-card:focus-visible {
    box-shadow: var(--ph-shadow-focus);
    outline: 0;
}

.ph-especie-card .mud-icon-root {
    flex-shrink: 0;
    height: 16px;
    width: 16px;
}

.ph-car-dots {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 8px;
}

.ph-car-dot {
    background: var(--ph-n-200);
    border-radius: 50%;
    height: 6px;
    width: 6px;
}

.ph-car-dot.on {
    background: var(--ph-brand-orange);
    border-radius: var(--ph-radius-pill);
    width: 18px;
}

/* Passo de ESCOLHA do assistente e do dialogo de tipo. O nome e preservado de
   proposito: AlterarTipoObjetoDialogTests.cs:74 e e2e/tests/43:51 o localizam
   por seletor. So a aparencia comum saiu daqui. */
.ph-empty-pick {
    border-radius: var(--ph-radius-md);
    padding: 56px 32px;
}

.ph-empty-pick .mud-icon-root {
    color: var(--ph-n-500);
}

.ph-empty-pick p {
    font-size: 13px;
    margin: 8px 0 0;
}

.ph-tipo-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1100px) {
    .ph-tipo-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .ph-tipo-grid {
        grid-template-columns: 1fr;
    }
}

/* Card de assunto é um <button> real (foco/teclado nativos). Reset do cromo padrão do
   button para preservar EXATAMENTE o visual do antigo <div>: fonte herdada, texto à
   esquerda, largura total da célula do grid e box-sizing border-box (padding contido). */
.ph-tipo-card {
    appearance: none;
    background: var(--ph-n-0);
    border: 1.5px solid var(--ph-n-200);
    border-radius: var(--ph-radius-md);
    box-sizing: border-box;
    color: inherit;
    cursor: pointer;
    display: block;
    font: inherit;
    padding: 16px 18px 18px;
    position: relative;
    text-align: left;
    transition: background-color var(--ph-motion-fast) var(--ph-ease-out), border-color var(--ph-motion-fast) var(--ph-ease-out), color var(--ph-motion-fast) var(--ph-ease-out), box-shadow var(--ph-motion-fast) var(--ph-ease-out), transform var(--ph-motion-fast) var(--ph-ease-out);
    width: 100%;
}

.ph-tipo-card:hover {
    background: var(--ph-n-25);
    border-color: var(--ph-n-300);
}

.ph-tipo-card.selected {
    background: var(--ph-orange-soft);
    border-color: var(--ph-brand-orange-text);
    box-shadow: 0 0 0 3px rgb(var(--ph-brand-orange-rgb) / .08);
}

/* Foco de teclado VISÍVEL (WCAG 2.4.7): anel padrão do produto, distinto do estado
   selecionado (que usa borda/fundo laranja) — visível mesmo em card já selecionado. */
.ph-tipo-card:focus-visible {
    box-shadow: var(--ph-shadow-focus);
    outline: 0;
}

.ph-tipo-card-check {
    align-items: center;
    background: var(--ph-brand-orange);
    border-radius: 50%;
    color: var(--ph-n-0);
    display: none;
    height: 22px;
    justify-content: center;
    position: absolute;
    right: 14px;
    top: 14px;
    width: 22px;
}

.ph-tipo-card.selected .ph-tipo-card-check {
    display: grid;
}

.ph-tipo-card-doc {
    align-items: center;
    background: var(--ph-n-100);
    border-radius: var(--ph-radius-sm);
    color: var(--ph-n-600);
    display: grid;
    height: 28px;
    margin-bottom: 10px;
    place-items: center;
    width: 28px;
}

.ph-tipo-card.selected .ph-tipo-card-doc {
    background: var(--ph-n-0);
    color: var(--ph-brand-orange-text);
}

.ph-tipo-card-title {
    color: var(--ph-brand-ink);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.35;
    margin: 0;
}

.ph-tipo-card-cls-lbl {
    border-top: 1px solid var(--ph-n-100);
    color: var(--ph-n-500);
    font-family: var(--ph-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    margin-top: 12px;
    padding-top: 10px;
    text-transform: uppercase;
}

.ph-tipo-card.selected .ph-tipo-card-cls-lbl {
    border-color: rgb(var(--ph-brand-orange-rgb) / .18);
    /* WCAG 1.4.3 (axe na popup alterar-tipo): n-500 sobre orange-soft dá 4,35:1; n-600 passa
       (6,99:1). A mesma combinação latente existia no card selecionado do wizard de criação. */
    color: var(--ph-n-600);
}

.ph-tipo-card-cls-val {
    color: var(--ph-n-700);
    font-family: var(--ph-font-mono);
    font-size: 11.5px;
    margin-top: 2px;
    word-break: break-all;
}

.ph-tipo-context {
    align-items: center;
    background: var(--ph-n-25);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-md);
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-bottom: 20px;
    padding: 14px 18px;
}

.ph-ctx-field {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.ph-ctx-field-ic {
    align-items: center;
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-200);
    border-radius: var(--ph-radius-sm);
    color: var(--ph-brand-orange-text);
    display: grid;
    flex-shrink: 0;
    height: 32px;
    place-items: center;
    width: 32px;
}

.ph-ctx-field-lbl {
    color: var(--ph-n-500);
    display: block;
    font-family: var(--ph-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ph-ctx-field-val {
    color: var(--ph-brand-ink);
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-top: 1px;
}

.ph-ctx-field-val--mono {
    font-family: var(--ph-font-mono);
    font-size: 12px;
}

.ph-ctx-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* Mesma proporcao do .ph-anexo-split para o visualizador alinhar ao trocar de aba. */
.ph-file-split {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(420px, 460px) 1fr;
    min-height: 480px;
}

@media (max-width: 1100px) {
    .ph-file-split {
        grid-template-columns: 1fr;
    }
}

.ph-wiz-actions {
    align-items: center;
    border-top: 1px solid var(--ph-n-100);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 20px;
}

.ph-wiz-actions-side {
    align-items: center;
    display: flex;
    gap: 8px;
}

.ph-wiz-step-info {
    color: var(--ph-n-500);
    font-family: var(--ph-font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ph-wiz-step-info b {
    color: var(--ph-brand-ink);
    font-weight: 600;
}

.ph-tabs .mud-tabs-slider {
    background-color: var(--ph-brand-orange-text);
    height: 2px;
}

.ph-tab-panel {
    padding: 16px 0 0;
}

/* Abas da tela de documentos — tipografia/estilo conforme o modelo do DS
   (IBM Plex Sans, 13px, sem caixa-alta; ativo em laranja 600). */
.ph-doc-tabs .mud-tabs-toolbar {
    background: transparent;
    border-bottom: 1px solid var(--ph-n-100);
    min-height: 44px;
}

.ph-doc-tabs .mud-tab {
    color: var(--ph-n-700);
    font-family: var(--ph-font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: normal;
    min-height: 44px;
    text-transform: none;
}

.ph-doc-tabs .mud-tab .mud-icon-root {
    font-size: 16px;
    height: 16px;
    width: 16px;
}

.ph-doc-tabs .mud-tab:hover {
    color: var(--ph-brand-ink);
}

.ph-doc-tabs .mud-tab.mud-tab-active {
    color: var(--ph-brand-orange-text);
    font-weight: 600;
}

.ph-doc-tabs .mud-tabs-slider {
    background-color: var(--ph-brand-orange-text);
    height: 2px;
}

/* .ph-page-header / .ph-page-title / .ph-page-meta REMOVIDAS em 06/09/2026 (auditoria de DS,
   tarefa 9.1). Eram a anatomia "canonica" de cabecalho de pagina segundo este arquivo, e tinham
   ZERO usos em 161 arquivos .razor, nos testes e no JS. O que venceu na pratica foi
   .ph-search-hero (226 usos em 34 telas). Manter as duas fazia o CSS dar DUAS respostas para
   "como se faz um cabecalho", e quem consultasse encontrava primeiro a que ninguem usa.
   Anatomia canonica de cabecalho de pagina = .ph-search-page > .ph-search-hero. */

.ph-search-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ph-search-hero {
    background: linear-gradient(180deg, var(--ph-brand-ink) 0%, var(--ph-brand-ink-2) 100%);
    border-radius: var(--ph-radius-xl);
    box-shadow: var(--ph-shadow-2);
    overflow: hidden;
    position: relative;
}

/* ==========================================================================
   .ph-search-hero--sugestoes — modificador do hero para telas com AUTOCOMPLETE.

   Criado em 07/09/2026 (auditoria de DS, tarefa 9.2). A tela de Pesquisa mantinha
   uma familia .ph-pesquisa-* inteira so para si: das 9 classes pareadas com
   .ph-search-*, SETE eram byte a byte identicas, mais a regra de eMAG do titulo e
   as tres regras de campo. As diferencas REAIS eram estas, e agora vivem aqui:

     · overflow visivel — o dropdown de sugestoes e absoluto DENTRO do hero e
       precisa abrir por cima da borda. Com overflow:hidden a lista era clipada a
       partir de 2 itens (feedback de validacao do dono).
     · o ::before decorativo ganha o border-radius que o hidden dava de graca,
       para nao vazar os cantos.
     · o campo vira ancora de posicionamento do dropdown.
     · no mobile, os botoes de acao esticam.

   As 16 classes .ph-pesquisa-* SEM par (status, matches, mark, restrito,
   scopeline, sigilo-icone, tabs, tab-panel, filtro-*, aviso) NAO sao duplicatas —
   sao componentes proprios da Pesquisa e seguem como estavam.
   ========================================================================== */
.ph-search-hero--sugestoes {
    overflow: visible;
}

.ph-search-hero--sugestoes::before {
    border-radius: var(--ph-radius-xl);
}

.ph-search-hero--sugestoes .ph-search-hero-field {
    position: relative;
}

@media (max-width: 768px) {
    .ph-search-hero--sugestoes .ph-search-hero-actions .mud-button-root {
        flex: 1;
    }
}

.ph-search-hero::before {
    background:
        radial-gradient(circle at 12% 0%, rgb(var(--ph-brand-orange-rgb) / .18), transparent 34%),
        radial-gradient(circle at 88% 100%, rgb(var(--ph-n-0-rgb) / .08), transparent 42%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.ph-search-hero-content {
    display: grid;
    gap: 20px;
    padding: 24px;
    position: relative;
}

.ph-search-hero-copy .ph-eyebrow {
    color: var(--ph-brand-orange-on-ink);
}

/* Recolhido de DOZE telas CRUD que repetiam este mesmo bloco de 18 linhas, byte a byte igual
   a menos do nome da classe — hash conferido nas 12 (item 9.6, 07/09/2026). Cada tela batizava
   o modificador com o proprio nome (.ph-cliente-, .ph-especie-, .ph-faceta-...), o que fazia a
   13a tela CRUD nascer copiando o bloco de novo.

   O BREAKPOINT E 760px DE PROPOSITO. O resto do DS usa 768px, e unificar seria o caminho
   'limpo' — mas mudaria o layout entre 760 e 768px de largura, e a ordem do dono e que o
   layout nao pode mudar. Fica 760 ate haver decisao explicita.

   Serve ao heroi que tem coluna de acoes a direita; sem ele o .ph-search-hero-content e uma
   grade de coluna unica e os botoes cairiam para baixo do texto. */
.ph-search-hero-content--acoes {
    align-items: flex-end;
    grid-template-columns: minmax(0, 1fr) auto;
}

.ph-search-hero-content--acoes .ph-search-hero-actions {
    flex-wrap: nowrap;
}

@media (max-width: 760px) {
    .ph-search-hero-content--acoes {
        grid-template-columns: 1fr;
    }

    .ph-search-hero-content--acoes .ph-search-hero-actions {
        flex-wrap: wrap;
    }
}

.ph-search-hero-title {
    color: var(--ph-n-0);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 4px;
}

.ph-search-hero-subtitle {
    /* .72 era o alfa MAIS BAIXO de texto sobre fundo escuro em todo o DS, e o axe nunca
       o mediu: ele nao calcula contraste sobre GRADIENTE e registrava este elemento como
       'incomplete' — o gate passava com tolerancia zero sem nunca ter olhado para ele.
       Relato do dono (07/09/2026) de baixa legibilidade. .85 e o valor que o proprio
       produto ja usa no MESMO papel em .ph-auth-lede. NAO BASTOU (2o relato do dono,
       07/09/2026): a conta por alfa ignorava o ::before do heroi, que soma ate 8% de branco
       no canto inferior direito — justo onde este texto fica. O fundo efetivo ali e bem mais
       claro que o --ph-brand-ink-2, e o subtitulo caia para ~7,2:1 em 14px regular.
       Agora e BRANCO SOLIDO: ~9,2:1 no pior ponto do heroi. A hierarquia com o titulo
       continua existindo, por TAMANHO (14 x 24px) e PESO (400 x 600), nao por opacidade —
       texto de leitura nao deveria depender de transparencia sobre gradiente. */
    color: var(--ph-n-0);
    max-width: 760px;
}

.ph-search-hero-row {
    align-items: stretch;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.ph-search-hero-field {
    align-items: center;
    background: var(--ph-n-0);
    border-radius: var(--ph-radius-lg);
    box-shadow: var(--ph-shadow-2);
    display: flex;
    min-height: 54px;
    padding: 0 12px;
}

.ph-search-hero-field .mud-input-control {
    margin-top: 0;
}

.ph-search-hero-field .mud-input-slot {
    color: var(--ph-n-800);
    font-size: 15px;
}

.ph-search-hero-field .mud-input::before,
.ph-search-hero-field .mud-input::after {
    border-bottom: 0 !important;
}

.ph-search-hero-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ph-button-hero-secondary {
    background: rgb(var(--ph-n-0-rgb) / .08) !important;
    border-color: rgb(var(--ph-n-0-rgb) / .22) !important;
    border-radius: var(--ph-radius-md);
    color: var(--ph-n-0) !important;
    letter-spacing: 0;
    text-transform: none;
}

.ph-button-hero-secondary:hover {
    background: rgb(var(--ph-n-0-rgb) / .14) !important;
}

.ph-button-hero-accent {
    /* WCAG 1.4.3: texto branco. brand-orange dava 4,17:1 (e o hover orange-2 3,10:1);
       orange-text/orange-text-2 mantêm o acento laranja e passam (5,31:1 / 6,89:1). */
    background: var(--ph-brand-orange-text) !important;
    border: 0 !important;
    border-radius: var(--ph-radius-md);
    box-shadow: none;
    color: var(--ph-n-0) !important;
    letter-spacing: 0;
    text-transform: none;
}

.ph-button-hero-accent:hover {
    background: var(--ph-brand-orange-text-2) !important;
    box-shadow: none;
}

.ph-button-count {
    align-items: center;
    background: var(--ph-brand-orange-text);
    border-radius: var(--ph-radius-pill);
    color: var(--ph-n-0);
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    height: 20px;
    justify-content: center;
    margin-left: 4px;
    min-width: 20px;
    padding: 0 6px;
}

.ph-search-filter-strip {
    align-items: center;
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 12px 14px;
}

.ph-search-filter-strip-content {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.ph-filter-strip-label {
    color: var(--ph-n-500);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ph-filter-strip-empty {
    color: var(--ph-n-500);
    font-size: 13px;
}

.ph-filter-pill {
    align-items: center;
    background: var(--ph-orange-soft);
    border: 1px solid rgb(var(--ph-brand-orange-rgb) / .28);
    border-radius: var(--ph-radius-pill);
    color: var(--ph-brand-orange-text);
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
    max-width: 360px;
    min-height: 26px;
    overflow: hidden;
    padding: 3px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-filter-pill strong {
    color: var(--ph-brand-ink);
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
}

.ph-search-panel,
.ph-results-panel {
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg);
    box-shadow: var(--ph-shadow-1);
    padding: 16px;
}

.ph-panel-header {
    align-items: center;
    border-bottom: 1px solid var(--ph-n-100);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
}

.ph-search-filter-grid {
    align-items: flex-end;
}

.ph-search-options-row {
    align-items: center;
    border-top: 1px solid var(--ph-n-100);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
}

.ph-search-options,
.ph-search-actions,
.ph-results-summary {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ph-preferences-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
}

.ph-preference-panel {
    background: var(--ph-n-25);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 14px;
}

.ph-switch-list {
    display: grid;
    gap: 8px;
}

.ph-switch-list .mud-input-control {
    margin-top: 0;
}

.ph-results-new-tab-switch {
    margin-right: 2px;
}

.ph-search-actions {
    justify-content: flex-end;
}

.ph-filter-action-item {
    align-items: stretch;
    display: flex;
}

.ph-active-filters {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 16px;
}

.ph-active-filter {
    align-items: center;
    background: var(--ph-n-25);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-md);
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(90px, auto) minmax(0, 1fr) auto;
    padding: 8px;
}

.ph-active-filter-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ph-active-filter-label span {
    color: var(--ph-brand-ink);
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-active-filter-label strong {
    color: var(--ph-brand-orange-text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ph-active-filter-input {
    min-width: 0;
}

/* .ph-empty-hint REMOVIDA — virou .ph-results-empty + .ph-results-empty--inline. */

.ph-filter-dialog-overlay {
    align-items: center;
    background: var(--ph-scrim);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 1200;
}

.ph-filter-dialog {
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-xl);
    box-shadow: var(--ph-shadow-3);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    width: min(980px, calc(100vw - 48px));
}

.ph-filter-dialog-header,
.ph-filter-dialog-footer {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 16px 18px;
}

.ph-filter-dialog-header {
    border-bottom: 1px solid var(--ph-n-100);
}

.ph-filter-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    padding: 18px;
}

.ph-filter-dialog-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ph-filter-dialog-section + .ph-filter-dialog-section {
    border-top: 1px solid var(--ph-n-100);
    padding-top: 18px;
}

.ph-filter-section-heading {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.ph-filter-dialog-footer {
    border-top: 1px solid var(--ph-n-100);
}

.ph-filter-dialog-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.ph-results-toolbar {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ph-results-panel-modern {
    padding: 0;
}

.ph-results-panel-modern .ph-results-toolbar {
    border-bottom: 1px solid var(--ph-n-100);
    margin-bottom: 0;
    padding: 16px;
}

.ph-results-title-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ph-results-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.ph-view-toggle {
    background: var(--ph-n-100);
    border-radius: var(--ph-radius-md);
    padding: 3px;
}

.ph-view-toggle .mud-toggle-item {
    border-radius: var(--ph-radius-sm);
    font-size: 12px;
    min-height: 30px;
    text-transform: none;
}

.ph-view-toggle--icons .mud-toggle-item {
    min-width: 34px;
    padding: 0 8px;
}

.ph-view-toggle--icons .mud-icon-root {
    font-size: 18px;
}

.ph-view-switch {
    align-items: center;
    background: var(--ph-n-100);
    border-radius: var(--ph-radius-md);
    display: inline-flex;
    gap: 2px;
    padding: 3px;
}

.ph-view-button {
    border-radius: var(--ph-radius-sm) !important;
    color: var(--ph-n-500) !important;
    height: 32px;
    width: 34px;
}

.ph-view-button:hover {
    background: var(--ph-n-0) !important;
    color: var(--ph-brand-ink) !important;
}

.ph-view-button--active {
    background: var(--ph-n-0) !important;
    box-shadow: var(--ph-shadow-1);
    color: var(--ph-brand-orange-text) !important;
}

/* ==========================================================================
   ESTADO VAZIO — a CAIXA TRACEJADA (auditoria de DS, tarefa 9.3, 07/09/2026).

   O produto tem TRES arquetipos de estado vazio, e eles NAO sao intercambiaveis:
     1. CAIXA TRACEJADA (este bloco) — fundo n-25, borda dashed. Delimita uma
        area que ficaria vazia: painel de resultados, passo de escolha, dica.
     2. PAINEL SEM CAIXA — .ph-tab-empty-state, com icone + titulo + descricao.
        E o estado vazio de ABA, e o unico com estrutura de titulo/descricao.
     3. TEXTO PRESO AO CONTEXTO — .ph-filter-strip-empty (span INLINE dentro da
        faixa de filtros), .ph-vinculo-empty (coluna estreita de dual-list, 12px)
        e .ph-hist-state--vazio (1 de um TRIO carregando/erro/vazio com role ARIA
        proprio). Nenhum deles e caixa, e transformar em caixa quebra o layout.

   Antes desta tarefa as tres caixas repetiam as mesmas 4 declaracoes. Agora a
   aparencia comum vive AQUI e cada variante declara so o que a distingue.
   ========================================================================== */
.ph-results-empty,
.ph-empty-pick {
    background: var(--ph-n-25);
    border: 1px dashed var(--ph-n-200);
    color: var(--ph-n-500);
    text-align: center;
}

.ph-results-empty {
    border-radius: var(--ph-radius-lg);
    font-size: 13px;
    margin: 16px;
    padding: 24px;
}

/* Variante compacta e alinhada a esquerda, colada ao conteudo acima. Era a
   .ph-empty-hint, que duplicava a caixa inteira para mudar 3 declaracoes. */
.ph-results-empty--inline {
    border-radius: var(--ph-radius-md);
    margin: 16px 0 0;
    padding: 12px;
    text-align: left;
}

.ph-result-count {
    color: var(--ph-n-500);
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

.ph-table-wrap {
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg);
    overflow-x: auto;
    overflow-y: hidden;
}

.ph-results-panel-modern .ph-table-wrap {
    border-left: 0;
    border-radius: 0 0 var(--ph-radius-lg) var(--ph-radius-lg);
    border-right: 0;
    border-bottom: 0;
}

.ph-table-wrap--pager-only {
    border-top: 1px solid var(--ph-n-100);
    margin-top: 16px;
}

.ph-table-wrap--pager-only .mud-table-container {
    display: none;
}

.ph-table-wrap--pager-only .mud-table-pagination {
    border-top: 0;
}

.ph-object-card-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 16px;
}

.ph-object-card {
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.ph-object-card:hover,
.ph-object-card:focus-visible {
    border-color: var(--ph-brand-orange-text);
    box-shadow: var(--ph-shadow-2);
    outline: 0;
    transform: translateY(-1px);
}

.ph-object-card-thumb {
    align-items: center;
    background: var(--ph-n-50);
    border-bottom: 1px solid var(--ph-n-100);
    display: grid;
    height: 168px;
    justify-items: center;
    overflow: hidden;
    position: relative;
}

.ph-card-conarq {
    align-items: center;
    background: rgb(var(--ph-brand-ink-rgb) / .94);
    border-radius: var(--ph-radius-pill);
    color: var(--ph-n-0);
    display: inline-flex;
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    font-weight: 500;
    left: 10px;
    max-width: calc(100% - 20px);
    padding: 4px 8px;
    position: absolute;
    top: 10px;
    z-index: 1;
}

.ph-card-conarq span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-doc-preview {
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-200);
    border-radius: var(--ph-radius-sm);
    box-shadow: 0 4px 14px -4px rgb(var(--ph-brand-ink-rgb) / .18);
    color: var(--ph-n-700);
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 82%;
    max-width: 220px;
    padding: 14px 16px;
    position: relative;
    width: 72%;
}

.ph-doc-preview--digitalizado {
    background: var(--ph-digit-bg);
    border-color: var(--ph-digit-border);
    color: var(--ph-digit-ink);
}

.ph-doc-preview-seal {
    align-self: center;
    background: var(--ph-brand-ink);
    border-radius: 50%;
    height: 24px;
    position: relative;
    width: 24px;
}

.ph-doc-preview--digitalizado .ph-doc-preview-seal {
    background: var(--ph-digit-seal);
}

.ph-doc-preview-seal::after {
    border: 1px solid var(--ph-n-0);
    border-radius: 50%;
    content: "";
    inset: 5px;
    position: absolute;
}

.ph-doc-preview-title {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .06em;
    text-align: center;
    text-transform: uppercase;
}

.ph-doc-preview-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ph-doc-preview-lines span {
    background: currentColor;
    border-radius: var(--ph-radius-sm);
    display: block;
    height: 2px;
    opacity: .42;
}

.ph-doc-preview-lines span:nth-child(1) {
    width: 100%;
}

.ph-doc-preview-lines span:nth-child(2) {
    width: 92%;
}

.ph-doc-preview-lines span:nth-child(3) {
    width: 96%;
}

.ph-doc-preview-lines span:nth-child(4) {
    width: 78%;
}

.ph-doc-preview-lines span:nth-child(5) {
    width: 86%;
}

.ph-doc-preview-stamp {
    border: 1px solid var(--ph-err-500);
    border-radius: var(--ph-radius-sm);
    bottom: 10px;
    color: var(--ph-err-500);
    font-size: 6px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 3px 5px;
    position: absolute;
    right: 10px;
    transform: rotate(-8deg);
}

.ph-object-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 16px;
}

.ph-object-card-body h3 {
    color: var(--ph-brand-ink);
    display: -webkit-box;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ph-object-id,
.ph-object-meta-line,
.ph-list-date {
    color: var(--ph-n-500);
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
}

.ph-object-id strong {
    color: var(--ph-n-700);
    font-weight: 600;
}

.ph-object-meta-line {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 0;
}

.ph-meta-dot {
    background: var(--ph-n-300);
    border-radius: 50%;
    height: 3px;
    width: 3px;
}

.ph-object-card-footer {
    align-items: center;
    border-top: 1px solid var(--ph-n-100);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
}

.ph-object-list {
    padding: 16px;
}

.ph-object-list-head,
.ph-object-list-row {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 2.4fr) 140px 96px 132px 132px;
}

.ph-object-list-head {
    background: var(--ph-n-25);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg) var(--ph-radius-lg) 0 0;
    color: var(--ph-n-500);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 10px 14px;
    text-transform: uppercase;
}

.ph-object-list-row {
    align-items: center;
    border: 1px solid var(--ph-n-100);
    border-top: 0;
    cursor: pointer;
    padding: 12px 14px;
    transition: background .12s;
}

.ph-object-list-row > * {
    min-width: 0;
}

.ph-object-list-row > .ph-badge,
.ph-object-list-row > .ph-domain-badge {
    align-self: center;
    height: auto;
    justify-content: center;
    line-height: 1.25;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;
    word-break: break-word;
}

.ph-object-list-row:hover {
    background: var(--ph-n-25);
}

/* Foco de teclado VISÍVEL (WCAG 2.4.7): barra lateral laranja — o fundo n-25 (1,04:1) era imperceptível. */
.ph-object-list-row:focus-visible {
    background: var(--ph-n-25);
    box-shadow: inset 3px 0 0 var(--ph-brand-orange);
    outline: 0;
}

.ph-object-list-row:last-child {
    border-radius: 0 0 var(--ph-radius-lg) var(--ph-radius-lg);
}

.ph-object-list--compact {
    padding: 0;
}

.ph-object-list--compact .ph-object-list-row {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px 4px;
}

.ph-object-list--compact .ph-object-list-row:first-child {
    border-top: 0;
}

.ph-object-list--compact .ph-object-list-row:last-child {
    border-bottom: 0;
}

.ph-object-list-row--static {
    cursor: default;
}

.ph-object-list-row--static:hover,
.ph-object-list-row--static:focus-visible {
    background: transparent;
}

.ph-object-list--compact .ph-object-list-meta {
    align-items: flex-end;
    color: var(--ph-n-500);
    display: flex;
    flex-direction: column;
    font-size: 11px;
    gap: 4px;
}

.ph-object-list--compact .ph-object-list-meta .ph-list-date {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
}

.ph-chart-export {
    align-items: center;
    display: inline-flex;
    gap: 2px;
}

.ph-object-list-main {
    align-items: center;
    display: flex;
    gap: 12px;
    min-width: 0;
}

.ph-object-list-thumb {
    align-items: center;
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-200);
    border-radius: var(--ph-radius-sm);
    box-shadow: var(--ph-shadow-1);
    color: var(--ph-n-500);
    display: inline-flex;
    flex: 0 0 auto;
    height: 48px;
    justify-content: center;
    width: 38px;
}

.ph-object-list-thumb--digitalizado {
    background: var(--ph-digit-bg);
    border-color: var(--ph-digit-border);
    color: var(--ph-digit-text);
}

.ph-object-list-title {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ph-object-list-title strong {
    color: var(--ph-brand-ink);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-object-list-title > span {
    color: var(--ph-n-500);
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-data-table .mud-table-root {
    min-width: 1100px;
}

.ph-data-table .mud-table-head .mud-table-cell {
    background: var(--ph-n-25);
    color: var(--ph-n-500);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ph-data-table .mud-table-body .mud-table-row:hover {
    background: var(--ph-n-25);
}

.ph-data-table .mud-table-cell {
    border-bottom-color: var(--ph-n-100);
    color: var(--ph-n-800);
    font-size: 13px;
}

.ph-action-cell {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.ph-action-cell .ph-icon-button.mud-icon-button {
    background: transparent;
    border-radius: var(--ph-radius-sm);
    color: var(--ph-n-500);
    height: 28px;
    margin-left: 2px;
    min-height: 28px;
    min-width: 28px;
    padding: 0;
    transition: background .12s, color .12s;
    width: 28px;
}

.ph-action-cell .ph-icon-button.mud-icon-button:hover {
    background: var(--ph-n-100);
    color: var(--ph-brand-ink);
}

.ph-action-cell .ph-icon-button.mud-icon-button .mud-icon-root {
    font-size: 16px;
    height: 16px;
    width: 16px;
}

.ph-action-cell .ph-icon-button--danger.mud-icon-button:hover {
    background: var(--ph-err-50);
    color: var(--ph-err-500);
}

.ph-id-text {
    color: var(--ph-n-700);
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

.ph-conarq-chip {
    align-items: center;
    background: var(--ph-brand-ink);
    border-radius: var(--ph-radius-pill);
    color: var(--ph-n-0);
    display: inline-flex;
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 500;
    gap: 8px;
    padding: 4px 10px 4px 4px;
}

.ph-conarq-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-conarq-code {
    background: rgb(var(--ph-n-0-rgb) / .14);
    border-radius: var(--ph-radius-pill);
    display: inline-block;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 2px 8px;
}

.ph-author {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    min-width: 0;
}

.ph-author-avatar {
    align-items: center;
    border-radius: 50%;
    color: var(--ph-n-0);
    display: inline-flex;
    flex-shrink: 0;
    font-family: var(--ph-font-sans, "IBM Plex Sans", system-ui, sans-serif);
    font-size: 11px;
    font-weight: 600;
    height: 28px;
    justify-content: center;
    letter-spacing: .02em;
    text-transform: uppercase;
    width: 28px;
}

.ph-author-avatar--ink {
    background: var(--ph-brand-ink);
}

.ph-author-avatar--orange {
    /* WCAG 1.4.3: iniciais brancas. brand-orange (#C75D2E) dava 4,17:1; orange-text passa (5,31:1). */
    background: var(--ph-brand-orange-text);
}

.ph-author-avatar--info {
    background: var(--ph-info-500);
}

.ph-author-avatar--ok {
    /* WCAG 1.4.3: iniciais brancas. ok-500 (#1F8A5B) dava 4,34:1; ok-700 passa (7,66:1). */
    background: var(--ph-ok-700);
}

.ph-author-avatar--warn {
    /* WCAG 1.4.3: iniciais brancas. warn-500 (#B7841A) dava 3,32:1; warn-700 passa (6,64:1). */
    background: var(--ph-warn-700);
}

.ph-author-avatar--neutral {
    background: var(--ph-n-300);
    color: var(--ph-n-700);
}

.ph-author-name {
    color: var(--ph-n-700);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-badge,
.ph-domain-badge {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--ph-radius-pill);
    display: inline-flex;
    font-size: 11px;
    font-weight: 600;
    gap: 6px;
    letter-spacing: .04em;
    min-height: 22px;
    padding: 2px 8px;
    text-transform: uppercase;
    white-space: nowrap;
}

.ph-badge-info {
    background: var(--ph-info-50);
    border-color: var(--ph-info-200);
    color: var(--ph-info-700);
}

.ph-badge-neutral {
    background: var(--ph-n-100);
    color: var(--ph-n-700);
}

.ph-badge-ok {
    background: var(--ph-ok-50);
    border-color: var(--ph-ok-200);
    color: var(--ph-ok-700);
}

.ph-badge-warn {
    background: var(--ph-warn-50);
    border-color: var(--ph-warn-200);
    color: var(--ph-warn-700);
}

.ph-badge-orange {
    background: var(--ph-orange-soft);
    border-color: var(--ph-brand-orange-2);
    color: var(--ph-brand-orange-text);
}

.ph-badge-ink {
    background: var(--ph-n-50);
    border-color: var(--ph-n-200);
    color: var(--ph-brand-ink);
}

.ph-badge-danger {
    background: var(--ph-err-50);
    border-color: var(--ph-err-200);
    color: var(--ph-err-700);
}

.ph-field-chip {
    align-items: center;
    background: var(--ph-n-100);
    border: 1px solid var(--ph-n-200);
    border-radius: var(--ph-radius-pill);
    color: var(--ph-n-700);
    display: inline-flex;
    font-size: 11px;
    font-weight: 500;
    gap: 4px;
    letter-spacing: .02em;
    line-height: 1;
    min-height: 22px;
    padding: 4px 10px;
    white-space: nowrap;
}

.ph-field-chip-more {
    background: var(--ph-brand-ink);
    border-color: var(--ph-brand-ink);
    color: var(--ph-n-0);
    font-family: var(--ph-font-mono);
    font-weight: 600;
}

.ph-vinculo-picker {
    align-items: stretch;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
    margin-top: 12px;
}

.ph-vinculo-col {
    background: var(--ph-n-25);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg);
    display: flex;
    flex-direction: column;
    min-height: 360px;
    overflow: hidden;
}

.ph-vinculo-col--linked {
    background: var(--ph-n-0);
    border-color: var(--ph-brand-orange-2);
    box-shadow: 0 0 0 1px rgb(var(--ph-brand-orange-rgb) / .08);
}

.ph-vinculo-col-header {
    align-items: center;
    background: var(--ph-n-50);
    border-bottom: 1px solid var(--ph-n-100);
    color: var(--ph-brand-ink);
    display: flex;
    font-size: 12px;
    font-weight: 600;
    justify-content: space-between;
    letter-spacing: .02em;
    padding: 10px 14px;
}

.ph-vinculo-col--linked .ph-vinculo-col-header {
    background: var(--ph-orange-soft);
    border-bottom-color: var(--ph-brand-orange-2);
}

.ph-vinculo-col-count {
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-200);
    border-radius: var(--ph-radius-pill);
    color: var(--ph-brand-ink);
    font-family: var(--ph-font-mono);
    font-size: 11px;
    font-weight: 600;
    min-width: 24px;
    padding: 2px 8px;
    text-align: center;
}

.ph-vinculo-col--linked .ph-vinculo-col-count {
    background: var(--ph-n-0);
    border-color: var(--ph-brand-orange-2);
    color: var(--ph-brand-orange-text);
}

.ph-vinculo-search {
    border-bottom: 1px solid var(--ph-n-100);
    padding: 8px 12px;
}

.ph-vinculo-items {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
    max-height: 320px;
    min-height: 240px;
    overflow-y: auto;
    padding: 8px;
}

.ph-vinculo-item {
    align-items: center;
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-md);
    color: var(--ph-brand-ink);
    cursor: default;
    display: flex;
    font-size: 12.5px;
    gap: 8px;
    padding: 8px 10px;
    transition: background-color .15s ease, border-color .15s ease;
}

/* Reordenacao por arraste na coluna escolhida (relatorio). O item arrastado fica esmaecido e
   o alvo ganha uma guia laranja no topo, para o usuario ver ONDE vai cair. Arrastar nao e
   alcancavel por teclado, entao os botoes subir/descer continuam existindo ao lado — os dois
   caminhos, nao um no lugar do outro. */
.ph-vinculo-item[draggable="true"] { cursor: grab; }
.ph-vinculo-item--arrastando { opacity: .45; cursor: grabbing; }
.ph-vinculo-item--alvo { box-shadow: inset 0 2px 0 var(--ph-brand-orange); }

@media (prefers-reduced-motion: reduce) {
    .ph-vinculo-item--arrastando { opacity: .6; }
}

.ph-vinculo-item:hover {
    background: var(--ph-n-50);
    border-color: var(--ph-n-200);
}

.ph-vinculo-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-vinculo-item-required {
    background: var(--ph-warn-50);
    border: 1px solid var(--ph-warn-200);
    border-radius: var(--ph-radius-pill);
    color: var(--ph-warn-700);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 2px 6px;
    text-transform: uppercase;
}

.ph-vinculo-arrows {
    align-items: center;
    color: var(--ph-n-500);
    display: flex;
    justify-content: center;
}

.ph-vinculo-empty {
    color: var(--ph-n-500);
    font-size: 12px;
    padding: 24px 8px;
    text-align: center;
}

.ph-vinculo-empty--cta {
    color: var(--ph-brand-orange-text);
    font-weight: 500;
}

@media (max-width: 760px) {
    .ph-vinculo-picker {
        grid-template-columns: 1fr;
    }

    .ph-vinculo-arrows {
        transform: rotate(90deg);
    }
}

.ph-domain-badge--elim {
    background: var(--ph-err-500);
    color: var(--ph-n-0);
}

.ph-domain-badge--perm {
    background: var(--ph-ok-700);
    color: var(--ph-n-0);
}

.ph-domain-badge--int {
    background: var(--ph-info-500);
    color: var(--ph-n-0);
}

.ph-sig-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 180px;
}

.ph-group,
.ph-panel-section {
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg);
    box-shadow: var(--ph-shadow-1);
    padding: 16px;
}

.ph-group-header {
    align-items: center;
    border-bottom: 1px solid var(--ph-n-100);
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
}

.ph-field-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ph-field-card {
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-md);
    min-height: 58px;
    padding: 8px 10px;
    transition: background .12s, border-color .12s, box-shadow .12s;
}

.ph-field-card:hover,
.ph-field-card.is-selected {
    border-color: var(--ph-n-200);
    box-shadow: var(--ph-shadow-1);
}

.ph-field-card.is-selected {
    background: var(--ph-n-25);
}

.ph-field-card.has-restriction {
    border-left: 3px solid var(--ph-brand-orange);
}

.ph-field-checkbox .mud-typography {
    color: var(--ph-n-800);
    font-size: 13px;
    line-height: 1.35;
}

.ph-restriction-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 0 30px;
}

.ph-order-row {
    align-items: center;
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-md);
    display: flex;
    justify-content: space-between;
    min-height: 42px;
    padding: 6px 8px;
}

.ph-order-ident {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.ph-order-index {
    background: var(--ph-n-100);
    border-radius: var(--ph-radius-pill);
    color: var(--ph-brand-ink);
    flex: 0 0 auto;
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
}

.ph-order-name {
    color: var(--ph-n-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-order-preview {
    align-items: center;
    background: var(--ph-info-50);
    border: 1px solid var(--ph-info-200);
    border-radius: var(--ph-radius-md);
    color: var(--ph-info-700);
    display: flex;
    font-size: 13px;
    font-weight: 500;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
}

.ph-export-dialog {
    border-radius: var(--ph-radius-xl);
    color: var(--ph-n-800);
    box-shadow: var(--ph-shadow-3);
}

.ph-export-dialog .mud-dialog-title {
    border-bottom: 1px solid var(--ph-n-100);
    padding: 20px 24px 16px;
}

.ph-export-dialog .mud-dialog-content {
    padding: 0 24px 20px;
}

.ph-export-dialog .mud-dialog-actions {
    border-top: 1px solid var(--ph-n-100);
    padding: 16px 24px;
    gap: 8px;
}

/* ===================================================================================
   Container "card arredondado" para pop-ups (modelo system-design/Perfil 2FA.html .modal):
   caixa mais arredondada + elevada + recortada; cabeçalho com borda inferior; rodapé creme
   com borda superior. Aplicado por chamada via parâmetro ContainerClass="ph-card-dialog" no
   MudDialog (o DialogOptions do MudBlazor 9.x NÃO tem CssClass p/ o paper), mantendo o escopo
   local — não vaza para dialogs de outras telas. Só o CONTAINER muda; o conteúdo, os fluxos e
   a reautenticação/reveal permanecem intactos.

   O MudBlazor 9.x aplica o Class do <MudDialog> na "caixa" branca do dialog (o paper .mud-dialog),
   como o .ph-export-dialog. Os dois seletores do paper (compound e descendente) cobrem o alvo
   independentemente do nó exato. =================================================================== */
.ph-card-dialog.mud-dialog,
.ph-card-dialog .mud-dialog {
    border-radius: var(--ph-radius-xl);
    box-shadow: var(--ph-shadow-3);
    overflow: hidden;
}

.ph-card-dialog .mud-dialog-title {
    border-bottom: 1px solid var(--ph-n-100);
    padding: 20px 24px;
}

.ph-card-dialog .mud-dialog-content {
    padding: 22px 24px;
}

.ph-card-dialog .mud-dialog-actions {
    background: var(--ph-n-25);
    border-top: 1px solid var(--ph-n-100);
    gap: 8px;
    padding: 16px 24px;
}

.ph-export-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ph-title-icon {
    align-items: center;
    background: var(--ph-orange-soft);
    border-radius: var(--ph-radius-md);
    color: var(--ph-brand-orange-text);
    display: inline-flex;
    flex: 0 0 auto;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.ph-title-text {
    color: var(--ph-brand-ink);
    font-weight: 600;
    line-height: 1.25;
}

.ph-title-subtitle {
    color: var(--ph-n-500);
}

.ph-export-body {
    min-width: min(920px, 82vw);
    padding-top: 16px;
}

.ph-summary-strip {
    background: var(--ph-n-25);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg);
    display: grid;
    gap: 0;
    grid-template-columns: 128px 128px 1fr;
    margin-bottom: 16px;
    overflow: hidden;
}

.ph-summary-item {
    border-right: 1px solid var(--ph-n-100);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
}

.ph-summary-item:last-child {
    border-right: 0;
}

.ph-summary-item span {
    color: var(--ph-n-500);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ph-summary-item strong {
    color: var(--ph-brand-ink);
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-groups {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ph-export-fields-scroll {
    max-height: 56vh;
    overflow-y: auto;
    padding-right: 4px;
}

.ph-export-order-scroll {
    max-height: 32vh;
    overflow-y: auto;
    padding-right: 4px;
}

.ph-sort-grid {
    margin-top: 0;
}

/* ============================================================
   Dashboard — KPIs, gráficos compactos e chips de preservação
   ============================================================ */

.ph-kpi-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ph-kpi-card {
    align-items: center;
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg);
    display: grid;
    gap: 16px;
    grid-template-columns: 44px 1fr;
    padding: 16px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ph-kpi-card:hover {
    border-color: var(--ph-n-200);
    box-shadow: var(--ph-shadow-1);
    transform: translateY(-1px);
}

.ph-kpi-card .ph-kpi-icon {
    align-items: center;
    background: var(--ph-orange-soft);
    border-radius: var(--ph-radius-md);
    color: var(--ph-brand-orange-text);
    display: flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.ph-kpi-card.ph-kpi-card--info .ph-kpi-icon {
    background: var(--ph-info-50);
    color: var(--ph-info-500);
}

.ph-kpi-card.ph-kpi-card--ok .ph-kpi-icon {
    background: var(--ph-ok-50);
    color: var(--ph-ok-500);
}

.ph-kpi-card.ph-kpi-card--alt .ph-kpi-icon {
    background: var(--ph-pink-50);
    color: var(--ph-pink-700);
}

.ph-kpi-label {
    color: var(--ph-n-500);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ph-kpi-value {
    color: var(--ph-brand-ink);
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 24px;
    font-weight: 600;
    margin-top: 2px;
}

.ph-chart-grid {
    align-items: stretch;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ph-chart-grid--asym {
    grid-template-columns: 1.2fr 1fr;
}

.ph-chart-grid--wide {
    grid-template-columns: 1.3fr 1fr;
}

.ph-chart-grid > .ph-chart-card {
    height: 100%;
}

.ph-chart-card {
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg);
    box-shadow: var(--ph-shadow-1);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.ph-chart-card-header {
    align-items: center;
    color: var(--ph-brand-ink);
    display: flex;
    font-size: 14px;
    font-weight: 600;
    justify-content: space-between;
}

.ph-chart-card-subtitle {
    color: var(--ph-n-500);
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 400;
}

.ph-chart-card-body {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: center;
    min-height: 200px;
}

.ph-chart-card-body--start {
    align-items: stretch;
    justify-content: flex-start;
}

.ph-chart-card-body--bars {
    align-items: flex-end;
    justify-content: center;
    min-height: 240px;
    padding: 8px 0 0;
}

.ph-chart-card-legend {
    color: var(--ph-n-600);
    display: flex;
    flex-wrap: wrap;
    font-size: 11px;
    gap: 16px;
    margin-top: auto;
}

.ph-chart-card-legend span {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.ph-chart-card-legend i {
    border-radius: 2px;
    display: inline-block;
    height: 8px;
    width: 8px;
}

.ph-progress-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.ph-progress-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ph-progress-row-head {
    align-items: center;
    color: var(--ph-n-700);
    display: flex;
    font-size: 12px;
    justify-content: space-between;
}

.ph-progress-row-value {
    color: var(--ph-n-700);
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
}

.ph-progress-bar {
    background: var(--ph-n-100);
    border-radius: var(--ph-radius-pill);
    height: 8px;
    overflow: hidden;
}

.ph-progress-fill {
    height: 100%;
    transition: width .3s ease;
}

.ph-progress-fill--ok {
    background: var(--ph-ok-500);
}

.ph-progress-fill--err {
    background: var(--ph-err-500);
}

.ph-progress-fill--info {
    background: var(--ph-info-500);
}

.ph-progress-fill--warn {
    background: var(--ph-warn-500);
}

.ph-progress-fill--brand {
    background: var(--ph-brand-orange);
}

.ph-progress-fill--ink {
    background: var(--ph-brand-ink);
}

.ph-progress-fill--violet {
    background: var(--ph-pur-500);
}

.ph-progress-fill--pink {
    background: var(--ph-pink-500);
}

.ph-bars {
    align-items: flex-end;
    display: flex;
    gap: 32px;
    height: 180px;
    justify-content: center;
    margin: 0 auto;
    max-width: 100%;
    padding: 16px 0 32px;
    width: 100%;
}

.ph-bar {
    background: var(--ph-info-500);
    border-radius: 4px 4px 0 0;
    flex: 0 0 64px;
    max-width: 96px;
    min-height: 20px;
    position: relative;
    width: 64px;
}

.ph-bar.ph-bar--alt {
    background: var(--ph-brand-ink-3);
}

.ph-bar-label {
    bottom: -22px;
    color: var(--ph-n-500);
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    left: -12px;
    overflow: hidden;
    position: absolute;
    right: -12px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-bar-value {
    color: var(--ph-brand-ink);
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    font-weight: 600;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: -16px;
}

.ph-pres {
    border-radius: var(--ph-radius-pill);
    display: inline-flex;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
}

.ph-pres-arq {
    background: var(--ph-info-50);
    border: 1px solid var(--ph-info-200);
    color: var(--ph-info-700);
}

.ph-pres-env {
    background: var(--ph-pur-50);
    color: var(--ph-pur-700);
}

.ph-pres-recep {
    background: var(--ph-pink-50);
    color: var(--ph-pink-700);
}

.ph-pres-mig {
    background: var(--ph-warn-50);
    border: 1px solid var(--ph-warn-200);
    color: var(--ph-warn-700);
}

.ph-pres-ok {
    background: var(--ph-ok-50);
    border: 1px solid var(--ph-ok-200);
    color: var(--ph-ok-700);
}

/* ============================================================
   Topbar — barra branca com pill duplo, ações e user chip
   ============================================================ */

.ph-topbar {
    align-items: center;
    background: var(--ph-n-0);
    border-bottom: 1px solid var(--ph-n-100);
    box-shadow: var(--ph-shadow-1);
    display: flex;
    gap: 16px;
    height: 64px;
    padding: 0 20px;
    width: 100%;
}

.ph-topbar-left {
    align-items: center;
    display: inline-flex;
    flex: 0 1 auto;
    gap: 0;
    margin-right: auto;
    min-width: 0;
}

.ph-topbar-brand {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 auto;
    /* Slot da logo ocupa a coluna do menu lateral.
       Subtrai o padding-left do toolbar para que o final do slot fique exatamente
       alinhado com a borda direita do MudDrawer (e portanto com o início do conteúdo). */
    min-width: calc(var(--ph-sidebar-w) - var(--ph-topbar-px));
    padding-right: 16px;
    text-decoration: none;
}

.ph-topbar-brand img {
    display: block;
    max-height: 36px;
    max-width: 180px;
    object-fit: contain;
}

/* Pill duplo (breadcrumb) começa logo após a coluna do menu */
.ph-topbar-left > .ph-topbar-ctx,
.ph-topbar-left > .mud-tooltip-root {
    margin-left: 0;
}

.ph-topbar-spacer {
    flex: 1 1 auto;
}

.ph-topbar-ctx {
    align-items: stretch;
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-pill);
    box-shadow: var(--ph-shadow-1);
    cursor: pointer;
    display: inline-flex;
    overflow: hidden;
    padding: 4px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.ph-topbar-ctx:hover {
    background: var(--ph-n-25);
    border-color: var(--ph-info-200);
    box-shadow: var(--ph-shadow-2);
}

.ph-topbar-ctx-pill {
    align-items: center;
    border-radius: var(--ph-radius-pill);
    display: inline-flex;
    gap: 10px;
    padding: 4px 14px;
}

.ph-topbar-ctx-ic {
    align-items: center;
    color: var(--ph-info-500);
    display: inline-flex;
    flex-shrink: 0;
    height: 18px;
    justify-content: center;
    width: 18px;
}

.ph-topbar-ctx-ic .mud-icon-root,
.ph-topbar-ctx-ic svg {
    height: 18px;
    width: 18px;
}

.ph-topbar-ctx-text {
    align-items: flex-start;
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.15;
    min-width: 0;
}

.ph-topbar-ctx-label {
    color: var(--ph-n-500);
    font-family: var(--ph-font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .10em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ph-topbar-ctx-value {
    color: var(--ph-brand-ink);
    font-family: var(--ph-font-sans);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -.005em;
    white-space: nowrap;
}

.ph-topbar-ctx-sep {
    align-items: center;
    color: var(--ph-n-300);
    display: inline-flex;
    justify-content: center;
    width: 22px;
}

.ph-topbar-ctx-sep .mud-icon-root,
.ph-topbar-ctx-sep svg {
    height: 14px;
    width: 14px;
}

.ph-topbar-actions {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    gap: 4px;
    margin-left: auto;
}

.ph-topbar-icon-btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--ph-radius-md);
    color: var(--ph-n-600);
    cursor: pointer;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    position: relative;
    transition: background .15s ease, color .15s ease;
    width: 40px;
}

.ph-topbar-icon-btn:hover {
    background: var(--ph-n-50);
    color: var(--ph-brand-ink);
}

.ph-topbar-icon-btn .mud-icon-root,
.ph-topbar-icon-btn svg {
    height: 20px;
    width: 20px;
}

.ph-topbar-icon-btn-dot {
    background: var(--ph-err-500);
    border: 2px solid var(--ph-n-0);
    border-radius: 50%;
    height: 9px;
    position: absolute;
    right: 9px;
    top: 8px;
    width: 9px;
}

.ph-topbar-user-chip {
    align-items: center;
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-pill);
    box-shadow: var(--ph-shadow-1);
    cursor: pointer;
    display: inline-flex;
    gap: 10px;
    padding: 3px 14px 3px 4px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.ph-topbar-user-chip:hover {
    background: var(--ph-n-25);
    border-color: var(--ph-info-200);
    box-shadow: var(--ph-shadow-2);
}

.ph-topbar-user-avatar {
    align-items: center;
    background: var(--ph-brand-ink);
    border-radius: 50%;
    color: var(--ph-n-0);
    display: inline-flex;
    flex-shrink: 0;
    font-family: var(--ph-font-sans);
    font-size: 12px;
    font-weight: 600;
    height: 36px;
    justify-content: center;
    letter-spacing: .02em;
    overflow: hidden;
    position: relative;
    text-transform: uppercase;
    width: 36px;
}

.ph-topbar-user-avatar img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.ph-topbar-user-avatar-online {
    background: var(--ph-ok-500);
    border: 2px solid var(--ph-n-0);
    border-radius: 50%;
    bottom: -1px;
    height: 11px;
    position: absolute;
    right: -1px;
    width: 11px;
    z-index: 1;
}

.ph-topbar-user-info {
    align-items: flex-start;
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
    min-width: 0;
}

.ph-topbar-user-name {
    color: var(--ph-brand-ink);
    font-family: var(--ph-font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.005em;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-topbar-user-role {
    color: var(--ph-n-500);
    font-family: var(--ph-font-sans);
    font-size: 11px;
    font-weight: 400;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-topbar-user-chev {
    color: var(--ph-n-500);
    display: inline-flex;
    flex-shrink: 0;
    margin-left: 4px;
}

.ph-topbar-user-chev .mud-icon-root,
.ph-topbar-user-chev svg {
    height: 14px;
    width: 14px;
}

@media (max-width: 960px) {
    .ph-topbar {
        gap: 8px;
        padding: 0 12px;
    }

    /* Em telas md- o MudDrawer vira overlay, então a logo perde o slot fixo */
    .ph-topbar-brand {
        min-width: 0;
        padding-right: 12px;
    }

    .ph-topbar-left {
        gap: 8px;
    }

    .ph-topbar-user-info {
        display: none;
    }
}

@media (max-width: 720px) {
    .ph-topbar-ctx {
        display: none;
    }

    .ph-topbar-brand img {
        max-width: 140px;
    }
}

/* ============================================================
   Nav menu — IBM Plex Sans, seções e estados alinhados ao DS
   ============================================================ */

.ph-nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    font-family: var(--ph-font-sans);
    min-height: 100%;
}

.ph-nav .mud-nav-menu {
    font-family: var(--ph-font-sans);
}

.ph-nav-section {
    color: var(--ph-n-500);
    font-family: var(--ph-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    margin: 18px 16px 6px;
    text-transform: uppercase;
}

.ph-nav .mud-nav-link {
    color: var(--ph-n-700);
    font-family: var(--ph-font-sans);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    transition: background .12s ease, color .12s ease;
}

.ph-nav .mud-nav-link .mud-nav-link-text {
    font-size: 13px;
    font-weight: inherit;
    letter-spacing: 0;
}

.ph-nav .mud-nav-link:hover {
    background: var(--ph-n-25);
    color: var(--ph-brand-ink);
}

.ph-nav .mud-nav-link.active,
.ph-nav .mud-nav-link.mud-nav-link-active,
.ph-nav .mud-nav-link.active.mud-nav-link-active {
    background: var(--ph-orange-soft);
    border-left: 2px solid var(--ph-brand-orange);
    color: var(--ph-brand-orange-text);
    font-weight: 500;
}

.ph-nav .mud-nav-link.active .mud-icon-root,
.ph-nav .mud-nav-link.mud-nav-link-active .mud-icon-root {
    color: var(--ph-brand-orange-text);
}

.ph-nav .mud-nav-group .mud-nav-link {
    font-weight: 500;
}

.ph-nav .mud-nav-group .mud-collapse-container .mud-nav-link {
    font-weight: 400;
}

.ph-nav-footer {
    font-family: var(--ph-font-mono);
}

.ph-nav-footer .ph-nav-footer-text {
    color: var(--ph-n-500);
    font-family: var(--ph-font-mono);
    font-size: 10px;
    letter-spacing: .04em;
    line-height: 1.4;
}

/* ============================================================
   Dialogs — header, descrição e campos no padrão do DS
   ============================================================ */

.ph-dialog-header {
    align-items: center;
    display: flex;
    gap: 12px;
    width: 100%;
}

.ph-dialog-header-icon {
    align-items: center;
    background: var(--ph-orange-soft);
    border-radius: var(--ph-radius-md);
    color: var(--ph-brand-orange-text);
    display: flex;
    flex: 0 0 44px;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.ph-dialog-header-icon--success {
    background: var(--ph-ok-50);
    color: var(--ph-ok-700);
}

.ph-dialog-header-icon--error {
    background: var(--ph-err-50);
    color: var(--ph-err-700);
}

.ph-dialog-header-icon--info {
    background: var(--ph-info-50);
    color: var(--ph-info-700);
}

/* Quarto modificador da familia, recolhido do <style> de CertificadoDialog.razor (item 9.6,
   07/09/2026). Os VALORES sao os locais (ink-3 sobre n-0), nao um tom novo: a ordem e nao
   mudar o layout do dialogo de upload, que ja era navy.

   CORRIGE UM DEFEITO: a classe era declarada SO no CertificadoDialog e usada tambem no
   CertificadoDetalheDialog (l.17), que nunca a declarou. Como os dois nunca estao montados
   ao mesmo tempo, o detalhe caia no laranja do .ph-dialog-header-icon base — dois dialogos
   da mesma familia, abertos do mesmo lugar (Perfil), com cabecalhos de cores diferentes. */
.ph-dialog-header-icon--ink {
    background: var(--ph-brand-ink-3);
    color: var(--ph-n-0);
}

.ph-dialog-header-title {
    color: var(--ph-brand-ink);
    font-weight: 600;
    line-height: 1.25;
    margin: 2px 0 0;
}

.ph-dialog-description {
    color: var(--ph-n-700);
    line-height: 1.5;
    margin: 0 0 16px;
}

.ph-dialog-description strong {
    color: var(--ph-brand-ink);
    font-weight: 600;
}

/* Recolhida do <style> de MetadadoFormDialog.razor e TipoDocumentalDialog.razor, onde estava
   declarada DUAS vezes, byte a byte igual (item 9.6, 07/09/2026).

   CORRIGE UM DEFEITO: outros TRES dialogos usam a classe sem nunca a declararem —
   UsuarioFormDialog.razor:133, UnidadeAdministrativaDialog.razor:75 e
   VinculoMetadadoDialog.razor:156. Eles sao abertos por Usuario.razor, UnidadeAdministrativa.razor
   e TipoDocumentalMetadado.razor, telas que nunca montam os dois dialogos que declaravam a regra.
   Resultado ate hoje: em Usuarios > Novo, Unidades > Nova e Vinculo de Campos > Novo o texto de
   ajuda perdia cor e tamanho e, sem o margin-right:auto, COLAVA nos botoes Cancelar/Salvar em
   vez de ficar encostado a esquerda.

   O fallback literal das copias (var(--ph-n-500, #736D60)) foi retirado: #736D60 E o valor de
   --ph-n-500 (linha 59 deste arquivo), entao o valor computado nao muda. */
.ph-dialog-help-inline {
    color: var(--ph-n-500);
    font-size: 12px;
    margin-right: auto;
}

.ph-dialog-help {
    color: var(--ph-n-500);
    display: block;
    font-size: 11px;
    font-style: italic;
    line-height: 1.5;
    margin: 16px 0 0;
}

/* UNICA colisao direta com o DS que existia no produto: ClassificacaoDialog.razor:249 declarava
   .ph-dialog-help com o MESMO seletor e a MESMA especificidade, valores diferentes. Como o
   <style> do dialogo entra no body e o DS no head, o razor vencia font-size e margin-right
   enquanto o DS impunha italico, bloco, line-height e margin-top: o rodape de Classificacao > Novo
   renderizava um hibrido que nenhum dos dois autores desenhou (item 9.6, 07/09/2026).

   Este modificador carrega EXATAMENTE as duas declaracoes que venciam, entao o resultado
   computado naquele dialogo continua identico: 12px e margin-right auto sobre a base italica.
   O margin-right:auto e o que empurra Cancelar/Salvar para a direita dentro do DialogActions
   (flex) — sem ele o texto deixaria de ficar encostado a esquerda.

   Difere do .ph-dialog-help-inline (mais acima): aquele NAO e italico e nao tem margin-top. */
.ph-dialog-help--inline {
    font-size: 12px;
    margin-right: auto;
}

.ph-dialog-field {
    margin-top: 16px;
}

.ph-dialog-alert {
    align-items: flex-start;
    background: var(--ph-warn-50);
    border: 1px solid var(--ph-warn-200);
    border-radius: var(--ph-radius-md);
    color: var(--ph-warn-700);
    display: flex;
    font-size: 13px;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px 12px;
}

.ph-dialog-alert--error {
    background: var(--ph-err-50);
    border-color: var(--ph-err-200);
    color: var(--ph-err-700);
}

@media (max-width: 1180px) {
    .ph-object-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ph-object-list-head,
    .ph-object-list-row {
        grid-template-columns: minmax(0, 2fr) 120px 92px 120px;
    }

    .ph-object-list-head span:nth-child(5),
    .ph-object-list-row > span:nth-child(5) {
        display: none;
    }
}

@media (max-width: 920px) {
    .ph-preferences-grid {
        grid-template-columns: 1fr;
    }

    .ph-object-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ph-object-list-head,
    .ph-object-list-row {
        grid-template-columns: minmax(0, 2fr) 120px;
    }

    .ph-object-list-head span:nth-child(3),
    .ph-object-list-head span:nth-child(4),
    .ph-object-list-row > span:nth-child(3),
    .ph-object-list-row > span:nth-child(4) {
        display: none;
    }
}

@media (max-width: 760px) {
    .ph-export-body {
        min-width: 0;
        width: 100%;
    }

    .ph-summary-strip {
        grid-template-columns: 1fr;
    }

    .ph-summary-item {
        border-bottom: 1px solid var(--ph-n-100);
        border-right: 0;
    }

    .ph-summary-item:last-child {
        border-bottom: 0;
    }

    .ph-field-grid {
        grid-template-columns: 1fr;
    }

    .ph-section-heading {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 8px;
    }

    .ph-search-hero-row,
    .ph-search-options-row,
    .ph-results-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .ph-search-filter-strip,
    .ph-search-hero-actions,
    .ph-results-actions,
    .ph-search-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .ph-search-hero-content {
        padding: 18px;
    }

    .ph-search-hero-row {
        display: flex;
    }

    .ph-search-hero-field {
        width: 100%;
    }

    .ph-search-filter-strip {
        align-items: flex-start;
        flex-direction: column;
    }

    .ph-search-actions .mud-button-root {
        flex: 1 1 180px;
    }

    .ph-results-new-tab-switch {
        margin-right: 0;
    }

    .ph-filter-dialog-overlay {
        align-items: stretch;
        padding: 12px;
    }

    .ph-filter-dialog {
        max-height: calc(100vh - 24px);
        width: 100%;
    }

    .ph-filter-dialog-header,
    .ph-filter-dialog-footer,
    .ph-filter-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .ph-filter-dialog-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .ph-filter-dialog-actions .mud-button-root,
    .ph-filter-dialog-footer > .mud-button-root {
        flex: 1 1 160px;
    }

    .ph-results-panel-modern .ph-results-toolbar {
        align-items: stretch;
    }

    .ph-object-card-grid {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .ph-object-list {
        padding: 12px;
    }

    .ph-object-list-head {
        display: none;
    }

    .ph-object-list-row {
        grid-template-columns: 1fr;
    }

    .ph-object-list-row > :not(.ph-object-list-main) {
        display: none;
    }

    .ph-active-filters {
        grid-template-columns: 1fr;
    }

    .ph-active-filter {
        grid-template-columns: 1fr auto;
    }

    .ph-active-filter-label,
    .ph-active-filter-input {
        grid-column: 1 / -1;
    }

    .ph-kpi-grid {
        grid-template-columns: 1fr;
    }

    .ph-chart-grid,
    .ph-chart-grid--asym,
    .ph-chart-grid--wide {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1180px) {
    .ph-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Syncfusion Uploader (SfUploader) — reskin para o design system PreserveHub.
   Escopado em .ph-uploader (CssClass do SfUploader) para não vazar para
   outros componentes Syncfusion. Sobrescreve as classes e-* do tema base.
   ========================================================================== */

/* Container raiz */
.ph-uploader.e-upload {
    border: 0;
    border-radius: var(--ph-radius-lg);
    font-family: var(--ph-font-sans);
    box-shadow: none;
}

/* --- Área de seleção / drop --- */
.ph-uploader .e-file-select-wrap {
    background: var(--ph-n-25);
    border: 1.5px dashed var(--ph-n-200);
    border-radius: var(--ph-radius-lg);
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    transition: border-color .15s ease, background .15s ease;
}

.ph-uploader .e-file-select-wrap:hover {
    border-color: var(--ph-info-200);
    background: var(--ph-n-50);
}

/* Estado "arrastando arquivo por cima" */
.ph-uploader.e-upload.e-disabled .e-file-select-wrap,
.ph-uploader .e-file-select-wrap.e-upload-drag-hover,
.ph-uploader.e-dragarea .e-file-select-wrap {
    border-color: var(--ph-brand-orange-2);
    background: var(--ph-orange-soft);
}

/* Texto "ou arraste os arquivos aqui" */
.ph-uploader .e-file-select-wrap .e-file-drop {
    color: var(--ph-n-500);
    font-size: 13px;
    margin: 0;
}

/* Botão "Procurar..." */
.ph-uploader .e-file-select-wrap .e-css.e-btn,
.ph-uploader .e-file-select-wrap .e-file-select .e-btn {
    background: var(--ph-brand-ink) !important;
    border: 0 !important;
    border-radius: var(--ph-radius-md) !important;
    color: var(--ph-n-0) !important;
    box-shadow: var(--ph-shadow-1);
    text-transform: none;
    font-weight: 600;
    padding: 8px 18px;
    transition: background .15s ease, box-shadow .15s ease;
}

.ph-uploader .e-file-select-wrap .e-css.e-btn:hover,
.ph-uploader .e-file-select-wrap .e-file-select .e-btn:hover {
    background: var(--ph-brand-ink-2) !important;
    box-shadow: var(--ph-shadow-2);
}

/* --- Lista de arquivos --- */
.ph-uploader .e-upload-files {
    border-top: 1px solid var(--ph-n-100);
    margin-top: 14px;
}

.ph-uploader .e-upload-files .e-upload-file-list {
    border-bottom: 1px solid var(--ph-n-100);
    padding: 12px 6px;
}

.ph-uploader .e-upload-files .e-upload-file-list:hover {
    background: var(--ph-n-25);
}

.ph-uploader .e-upload-file-list .e-file-name {
    color: var(--ph-brand-ink);
    font-weight: 600;
    font-size: 13px;
}

.ph-uploader .e-upload-file-list .e-file-type,
.ph-uploader .e-upload-file-list .e-file-size {
    color: var(--ph-n-500);
    font-size: 12px;
}

/* Status por arquivo */
.ph-uploader .e-upload-file-list .e-file-status.e-upload-success {
    /* ok-700: como texto de status, ok-500 dava 4,33:1 (reprova AA); ok-700 passa (7,66:1) */
    color: var(--ph-ok-700);
}

.ph-uploader .e-upload-file-list .e-file-status.e-upload-fails {
    color: var(--ph-err-500);
}

/* --- Barra de progresso por arquivo --- */
.ph-uploader .e-upload-progress-wrap {
    padding: 6px 0;
}

.ph-uploader .e-upload-progress-bar .e-progress-inner-wrap {
    background: var(--ph-n-100);
    border-radius: var(--ph-radius-pill);
}

.ph-uploader .e-upload-progress-bar .e-progress {
    background: var(--ph-brand-ink);
    border-radius: var(--ph-radius-pill);
}

.ph-uploader .e-upload-file-list.e-upload-success .e-progress {
    background: var(--ph-ok-500);
}

.ph-uploader .e-upload-file-list.e-upload-fails .e-progress {
    background: var(--ph-err-500);
}

.ph-uploader .e-upload-progress-bar .e-progress-bar-text {
    color: var(--ph-n-600);
    font-family: var(--ph-font-sans);
    font-size: 11px;
}

/* Ícones de ação por arquivo (remover / cancelar / reenviar) */
.ph-uploader .e-upload-file-list .e-icons {
    color: var(--ph-n-500);
    transition: color .15s ease;
}

.ph-uploader .e-upload-file-list .e-file-remove-btn:hover,
.ph-uploader .e-upload-file-list .e-file-delete-btn:hover,
.ph-uploader .e-upload-file-list .e-file-abort-icon:hover {
    color: var(--ph-err-500);
}

/* --- Botões de ação no rodapé (Enviar / Limpar) --- */
.ph-uploader .e-upload-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 14px;
}

.ph-uploader .e-upload-actions .e-css.e-btn {
    border-radius: var(--ph-radius-md) !important;
    text-transform: none;
    font-weight: 600;
}

.ph-uploader .e-upload-actions .e-file-upload-btn {
    /* Botão "Enviar" tem texto branco: ok-500 dava 4,33:1 (reprova AA); ok-700 passa (7,66:1).
       O hover mantém ok-700 e reforça o feedback pela elevação (shadow-2). */
    background: var(--ph-ok-700) !important;
    border: 0 !important;
    color: var(--ph-n-0) !important;
    box-shadow: var(--ph-shadow-1);
}

.ph-uploader .e-upload-actions .e-file-upload-btn:hover {
    background: var(--ph-ok-700) !important;
    box-shadow: var(--ph-shadow-2);
}

.ph-uploader .e-upload-actions .e-file-clear-btn {
    background: transparent !important;
    border: 1px solid var(--ph-n-200) !important;
    color: var(--ph-n-600) !important;
}

.ph-uploader .e-upload-actions .e-file-clear-btn:hover {
    background: var(--ph-n-50) !important;
    border-color: var(--ph-n-300) !important;
}

/* ==========================================================================
   Detalhe do objeto/documento — primitivas (refatorar-tela-documentos-ds)
   Centralizadas aqui para evitar duplicação de CSS inline no Razor.
   ========================================================================== */

/* Breadcrumb do detalhe (fiel ao modelo v3.2 .crumbs) */
.ph-crumbs {
    align-items: center;
    color: var(--ph-n-500);
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 8px;
    margin-bottom: 8px;
}

.ph-crumbs a {
    color: var(--ph-n-600);
    cursor: pointer;
    text-decoration: none;
}

.ph-crumbs a:hover {
    color: var(--ph-brand-ink);
}

.ph-crumbs-sep {
    color: var(--ph-n-300);
}

.ph-crumbs-here {
    color: var(--ph-brand-ink);
    font-weight: 500;
}

/* Hero do objeto — cabeçalho (fiel ao modelo v3.2 .obj-head) */
.ph-object-head {
    background: var(--ph-n-25);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg);
    margin-bottom: 16px;
    padding: 14px 18px;
}

.ph-object-head-row {
    align-items: flex-start;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    padding-bottom: 14px;
}

.ph-object-head-ident {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ph-object-head-ident-line {
    align-items: center;
    color: var(--ph-n-500);
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 10px;
}

.ph-object-head-id {
    background: var(--ph-n-50);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-sm);
    color: var(--ph-brand-ink);
    font-family: var(--ph-font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 3px 9px;
}

.ph-object-head-type {
    align-items: center;
    background: var(--ph-orange-soft);
    border-radius: var(--ph-radius-pill);
    color: var(--ph-brand-orange-text);
    display: inline-flex;
    font-family: var(--ph-font-mono);
    font-size: 11px;
    font-weight: 600;
    gap: 6px;
    letter-spacing: .08em;
    padding: 3px 10px;
    text-transform: uppercase;
}

.ph-object-head-title {
    color: var(--ph-brand-ink);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.2;
    margin: 0;
}

.ph-object-head-actions {
    align-items: flex-start;
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
}

.ph-object-head-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Uniformiza tamanho dos chips na linha de badges do hero (altura/fonte iguais),
   sem alterar as classes globais usadas em outras telas. */
.ph-object-head-badges .ph-conarq-chip,
.ph-object-head-badges .ph-sig-chip,
.ph-object-head-badges .ph-dest,
.ph-object-head-badges .ph-dsig,
.ph-object-head-badges .ph-badge {
    font-size: 11px;
    height: 24px;
}

.ph-object-head-badges .ph-badge {
    min-height: 24px;
}

.ph-object-head-badges .ph-sig-chip {
    padding: 0 10px;
}

@media (max-width: 980px) {
    .ph-object-head-row {
        flex-direction: column;
    }

    .ph-object-head-actions {
        width: 100%;
    }
}

/* Destinação — chip sólido (fiel ao modelo v3.2 .dest) */
.ph-dest {
    align-items: center;
    border-radius: var(--ph-radius-pill);
    color: var(--ph-n-0);
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    gap: 6px;
    height: 22px;
    letter-spacing: .04em;
    padding: 0 10px;
    text-transform: uppercase;
}

.ph-dest--elim { background: var(--ph-dest-elim); }
.ph-dest--perm { background: var(--ph-dest-perm); }
.ph-dest--int { background: var(--ph-dest-int); }
/* n-500: com texto branco, n-400 dava 2,98:1 (pior chip do sistema); n-500 passa (4,92:1) */
.ph-dest--nd { background: var(--ph-n-500); }

/* Assinatura digital (fiel ao modelo v3.2 .dsig) */
.ph-dsig {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--ph-radius-pill);
    display: inline-flex;
    font-size: 11.5px;
    font-weight: 600;
    gap: 6px;
    height: 24px;
    padding: 0 10px 0 8px;
}

.ph-dsig--ok { background: var(--ph-ok-50); border-color: var(--ph-ok-200); color: var(--ph-ok-700); }
.ph-dsig--pend { background: var(--ph-warn-50); border-color: var(--ph-warn-200); color: var(--ph-warn-700); }
.ph-dsig--inv { background: var(--ph-err-50); border-color: var(--ph-err-200); color: var(--ph-err-700); }

/* Card genérico (contêiner mais usado nas abas) */
.ph-card {
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg);
    box-shadow: var(--ph-shadow-1);
    overflow: hidden;
}

.ph-card + .ph-card {
    margin-top: 16px;
}

.ph-card-head {
    align-items: center;
    border-bottom: 1px solid var(--ph-n-100);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 14px 16px;
}

.ph-card-title {
    color: var(--ph-brand-ink);
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.ph-card-desc {
    color: var(--ph-n-500);
    font-size: 12px;
    margin: 2px 0 0;
}

.ph-card-tools {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.ph-card-body {
    padding: 16px;
}

/* Layout 2 colunas com trilho lateral (aba Dados / detalhes) */
.ph-detail-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}

.ph-detail-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

@media (max-width: 1000px) {
    .ph-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Lista chave-valor (resumos/painéis técnicos) */
.ph-kv {
    display: grid;
    gap: 10px 16px;
    grid-template-columns: auto 1fr;
}

.ph-kv-key {
    color: var(--ph-n-500);
    font-size: 12px;
}

.ph-kv-val {
    color: var(--ph-brand-ink);
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

.ph-kv-val--mono {
    font-family: var(--ph-font-mono);
    font-size: 12px;
    font-weight: 500;
}

/* Timeline / cadeia de custódia (Histórico, Preservação) */
.ph-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ph-timeline-item {
    display: grid;
    gap: 4px 12px;
    grid-template-columns: 14px 1fr;
    padding: 0 0 18px 0;
    position: relative;
}

.ph-timeline-item::before {
    background: var(--ph-n-200);
    content: "";
    grid-column: 1;
    justify-self: center;
    position: absolute;
    top: 16px;
    bottom: 0;
    width: 1px;
}

.ph-timeline-item:last-child::before {
    display: none;
}

.ph-timeline-dot {
    align-self: start;
    background: var(--ph-n-0);
    border: 2px solid var(--ph-n-300);
    border-radius: 50%;
    grid-column: 1;
    height: 12px;
    margin-top: 3px;
    width: 12px;
    z-index: 1;
}

.ph-timeline-dot--ok { border-color: var(--ph-ok-500); }
.ph-timeline-dot--info { border-color: var(--ph-info-500); }
.ph-timeline-dot--warn { border-color: var(--ph-warn-500); }
.ph-timeline-dot--err { border-color: var(--ph-err-500); }

.ph-timeline-body {
    grid-column: 2;
}

.ph-timeline-title {
    color: var(--ph-brand-ink);
    font-size: 13px;
    font-weight: 600;
}

.ph-timeline-meta {
    color: var(--ph-n-500);
    font-size: 12px;
}

/* Stepper horizontal reutilizável (ciclo de tramitação / preservação) */
.ph-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ph-flow-step {
    align-items: center;
    background: var(--ph-n-25);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-md);
    color: var(--ph-n-500);
    display: inline-flex;
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 600;
    gap: 8px;
    justify-content: center;
    min-width: 120px;
    padding: 10px 12px;
}

.ph-flow-step--done {
    background: var(--ph-ok-50);
    border-color: var(--ph-ok-200);
    color: var(--ph-ok-700);
}

.ph-flow-step--active {
    background: var(--ph-orange-soft);
    border-color: var(--ph-brand-orange-2);
    color: var(--ph-brand-orange-text);
}

.ph-flow-step-no {
    align-items: center;
    background: currentColor;
    border-radius: 50%;
    color: var(--ph-n-0);
    display: grid;
    flex-shrink: 0;
    font-family: var(--ph-font-mono);
    font-size: 11px;
    height: 20px;
    place-items: center;
    width: 20px;
}

.ph-flow-step-no span {
    color: var(--ph-n-0);
}

/* ==========================================================================
   Foco de teclado — REDE DE SEGURANÇA GLOBAL (WCAG 2.4.7)
   Qualquer elemento focável por teclado que NÃO tenha anel próprio herda este
   anel laranja. Componentes com indicador dedicado declaram `outline: 0` (ou o
   próprio outline) na sua regra :focus-visible — especificidade maior (0,2,0 >
   0,1,0) neutraliza este fallback automaticamente. Só dispara por teclado
   (:focus-visible): clique de mouse não altera nada.
   ========================================================================== */
:focus-visible {
    outline: 2px solid var(--ph-brand-orange);
    outline-offset: 2px;
}

/* Inputs de texto/numérico/data/select do MudBlazor já sinalizam foco pela
   própria borda/underline — dispensam o anel global (evita indicador duplo).
   Mantido o foco nativo do Mud; o fallback global segue intacto para o resto. */
.mud-input-slot:focus-visible {
    outline: 0;
}

/* Acessibilidade — anel de foco consistente */
.ph-tabs .mud-tab:focus-visible,
.ph-card a:focus-visible,
.ph-flow-step:focus-visible {
    box-shadow: var(--ph-shadow-focus);
    outline: 0;
}

/* ==========================================================================
   Marcação de abas de demonstração (dados fictícios)
   Visível, redundante e acessível — não depende só de cor.
   ========================================================================== */

.ph-tab-badge--demo {
    background: var(--ph-warn-50);
    color: var(--ph-warn-700);
}

.ph-demo-banner {
    align-items: center;
    background: var(--ph-warn-50);
    border: 1px solid var(--ph-warn-200);
    border-radius: var(--ph-radius-md);
    color: var(--ph-warn-700);
    display: flex;
    gap: 10px;
    font-size: 13px;
    margin-bottom: 16px;
    padding: 10px 14px;
}

.ph-demo-banner .mud-icon-root {
    /* alinhado ao texto do próprio banner (warn-700): o âmbar claro warn-500 destoava do padrão */
    color: var(--ph-warn-700);
    flex-shrink: 0;
}

.ph-demo-banner strong {
    font-weight: 600;
}

/* Contêiner com marca d'água de demonstração sobre o conteúdo */
.ph-demo-area {
    position: relative;
}

.ph-demo-area::after {
    color: var(--ph-warn-500);
    content: "EXEMPLO · DADOS FICTÍCIOS";
    font-family: var(--ph-font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    opacity: .08;
    pointer-events: none;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transform: rotate(-18deg);
    white-space: nowrap;
    z-index: 0;
}

.ph-demo-area > * {
    position: relative;
    z-index: 1;
}

/* Selo individual "exemplo" para blocos que induzem confiança */
.ph-demo-seal {
    align-items: center;
    background: var(--ph-warn-50);
    border: 1px solid var(--ph-warn-200);
    border-radius: var(--ph-radius-pill);
    color: var(--ph-warn-700);
    display: inline-flex;
    font-size: 10px;
    font-weight: 600;
    gap: 4px;
    letter-spacing: .04em;
    padding: 2px 8px;
    text-transform: uppercase;
}

/* ==========================================================================
   Aba Anexos — card de anexo (fiel ao modelo v3.2 .anex-rich)
   ========================================================================== */

/* Split da aba Anexos — lista mais larga que o .ph-file-split (card respira) */
.ph-anexo-split {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(420px, 460px) 1fr;
    min-height: 480px;
}

@media (max-width: 1100px) {
    .ph-anexo-split {
        grid-template-columns: 1fr;
    }
}

.ph-anexo-list {
    /* display:block (nao flex) para os spacers do <Virtualize> funcionarem:
       eles sao divs irmaos dos cards e nao podem virar flex-items/encolher. */
    display: block;
    max-height: 800px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Espacamento entre cards (antes via gap do flex; agora por margem, escopo na lista). */
.ph-anexo-list .ph-anexo-card {
    margin-bottom: 12px;
}

.ph-anexo-list-head {
    align-items: center;
    background: var(--ph-n-0);
    border-bottom: 1px solid var(--ph-n-100);
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    padding-top: 2px;
    position: sticky;
    top: 0;
    z-index: 2;
}

.ph-anexo-list-head-actions {
    align-items: center;
    display: flex;
    gap: 6px;
}

/* Botao de acao (icone) em estado "ativo" — ex.: filtros abertos/aplicados. */
.ph-icon-button--active {
    /* --ph-brand-orange-50 era referenciado e NUNCA definido: quem pintava era o
       fallback. Agora e explicito, pelo canal. */
    background: rgb(var(--ph-brand-orange-rgb) / .10);
    color: var(--ph-brand-orange-text);
}

/* Painel de filtros da lista de componentes digitais (client-side). */
.ph-anexo-filtros {
    background: var(--ph-n-25);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg);
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px;
}

.ph-anexo-filtros-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ph-anexo-filtros-foot {
    display: flex;
    justify-content: flex-end;
}

.ph-anexo-card {
    background: var(--ph-n-0);
    border: 1.5px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg);
    box-shadow: var(--ph-shadow-1);
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    transition: border-color .12s, box-shadow .12s;
}

.ph-anexo-card:hover {
    border-color: var(--ph-n-300);
}

/* Foco de teclado VISÍVEL (WCAG 2.4.7): borda laranja como no --active — n-300 (1,83:1) não indicava foco. */
.ph-anexo-card:focus-visible {
    border-color: var(--ph-brand-orange);
    outline: 0;
}

.ph-anexo-card--active {
    border-color: var(--ph-brand-orange-text);
    box-shadow: 0 0 0 3px rgb(var(--ph-brand-orange-rgb) / .10), var(--ph-shadow-2);
}

.ph-anexo-head {
    align-items: center;
    border-bottom: 1px solid var(--ph-n-100);
    display: flex;
    gap: 12px;
    padding: 14px 16px;
}

.ph-ftype {
    align-items: center;
    border-radius: var(--ph-radius-sm);
    box-shadow: var(--ph-shadow-1);
    color: var(--ph-n-0);
    display: grid;
    flex-shrink: 0;
    font-family: var(--ph-font-mono);
    font-size: 9px;
    font-weight: 700;
    height: 42px;
    letter-spacing: .04em;
    place-items: center;
    text-transform: uppercase;
    width: 36px;
}

.ph-ftype--pdf { background: var(--ph-err-500); }
.ph-ftype--video { background: var(--ph-info-500); }
.ph-ftype--img { background: var(--ph-pur-500); }
.ph-ftype--doc { background: var(--ph-info-500); }
/* texto branco: ok-500/warn-500 davam 4,33:1 / 3,32:1 (reprovam) — 700 passa (7,66:1 / 6,64:1) */
.ph-ftype--xls { background: var(--ph-ok-700); }
.ph-ftype--ppt { background: var(--ph-warn-700); }

.ph-anexo-id {
    flex: 1;
    min-width: 0;
}

.ph-anexo-id .iid {
    color: var(--ph-n-700);
    font-family: var(--ph-font-mono);
    font-size: 11.5px;
    font-weight: 600;
}

.ph-anexo-id .iname {
    color: var(--ph-brand-ink);
    font-size: 13.5px;
    font-weight: 600;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-anexo-badges {
    background: linear-gradient(180deg, var(--ph-n-25), var(--ph-n-0));
    border-bottom: 1px solid var(--ph-n-100);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 16px;
}

.ph-anexo-meta {
    display: grid;
    font-size: 11.5px;
    grid-template-columns: 1fr 1fr;
    padding: 0 16px;
}

.ph-anexo-meta .kv {
    border-bottom: 1px dashed var(--ph-n-100);
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding: 8px 0;
}

.ph-anexo-meta .kv:nth-last-child(-n+2) {
    border-bottom: 0;
}

.ph-anexo-meta .kv:nth-child(odd) {
    padding-right: 14px;
}

.ph-anexo-meta .kv:nth-child(even) {
    border-left: 1px dashed var(--ph-n-100);
    padding-left: 14px;
}

.ph-anexo-meta .k {
    color: var(--ph-n-500);
    font-family: var(--ph-font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ph-anexo-meta .v {
    color: var(--ph-brand-ink);
    font-size: 12.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-anexo-meta .v.mono {
    font-family: var(--ph-font-mono);
    font-size: 11.5px;
}

.ph-anexo-hash {
    background: var(--ph-n-25);
    border-top: 1px solid var(--ph-n-100);
    color: var(--ph-n-600);
    font-family: var(--ph-font-mono);
    font-size: 10.5px;
    line-height: 1.45;
    padding: 8px 16px;
    word-break: break-all;
}

.ph-anexo-hash b {
    color: var(--ph-n-500);
    font-weight: 500;
    margin-right: 4px;
}

.ph-anexo-acts {
    background: var(--ph-n-0);
    border-top: 1px solid var(--ph-n-100);
    display: flex;
    gap: 2px;
    padding: 6px 8px;
}

/* ==========================================================================
   Campos somente-leitura em grade (Classificação, Avaliação, Privacidade…)
   ========================================================================== */

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

.ph-ro-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ph-ro-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
    .ph-ro-grid--3,
    .ph-ro-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .ph-ro-grid,
    .ph-ro-grid--3,
    .ph-ro-grid--4 { grid-template-columns: 1fr; }
}

.ph-ro-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ph-ro-label {
    color: var(--ph-n-500);
    font-family: var(--ph-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ph-ro-value {
    color: var(--ph-brand-ink);
    font-size: 13px;
    font-weight: 500;
    word-break: break-word;
}

.ph-ro-value--mono {
    font-family: var(--ph-font-mono);
    font-size: 12px;
}

.ph-ro-value--block {
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ==========================================================================
   Formulário / campos somente-leitura (fiel ao modelo v3.2 .form-grid/.field/.input)
   ========================================================================== */

.ph-form-grid {
    display: grid;
    gap: 14px 18px;
    grid-template-columns: 1fr 1fr;
}

.ph-form-grid--cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.ph-form-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.ph-form-grid .ph-field--full { grid-column: 1 / -1; }

@media (max-width: 1100px) {
    .ph-form-grid--cols-3,
    .ph-form-grid--cols-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .ph-form-grid,
    .ph-form-grid--cols-3,
    .ph-form-grid--cols-4 { grid-template-columns: 1fr; }
}

.ph-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.ph-field-label {
    align-items: center;
    color: var(--ph-n-700);
    display: flex;
    font-size: 11px;
    font-weight: 600;
    gap: 6px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ph-input {
    align-items: center;
    background: var(--ph-n-25);
    border: 1px solid var(--ph-n-200);
    border-radius: var(--ph-radius-md);
    color: var(--ph-n-700);
    display: flex;
    font-family: var(--ph-font-sans);
    font-size: 13.5px;
    height: 38px;
    overflow: hidden;
    padding: 0 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-input--mono {
    font-family: var(--ph-font-mono);
    font-size: 12.5px;
}

.ph-input--chip {
    overflow: visible;
    white-space: normal;
}

.ph-textarea {
    background: var(--ph-n-25);
    border: 1px solid var(--ph-n-200);
    border-radius: var(--ph-radius-md);
    color: var(--ph-n-700);
    font-family: var(--ph-font-sans);
    font-size: 13.5px;
    line-height: 1.5;
    min-height: 72px;
    padding: 9px 12px;
    white-space: pre-wrap;
    word-break: break-word;
}

.ph-help-txt {
    color: var(--ph-n-500);
    font-size: 11px;
    margin: 0 0 14px;
}

.ph-form-section-title {
    color: var(--ph-brand-ink);
    font-family: var(--ph-font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    margin: 0 0 14px;
    text-transform: uppercase;
}

.ph-form-section-title:not(:first-child) {
    margin-top: 22px;
}

/* eMAG 6.7 — agrupamento de campos. Fieldset visualmente neutro (sem borda pesada nem
   min-inline-size que quebre grids/flex) + legenda com a mesma tipografia dos títulos de seção. */
.ph-fieldset {
    border: 0;
    margin: 16px 0 0;
    min-inline-size: 0;
    padding: 0;
}

.ph-legend {
    color: var(--ph-brand-ink);
    font-family: var(--ph-font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    margin: 0 0 14px;
    padding: 0;
    text-transform: uppercase;
}

/* Alerta com título + texto (fiel ao modelo v3.2 .alert) */
.ph-alert-note {
    align-items: flex-start;
    background: var(--ph-n-25);
    border: 1px solid var(--ph-n-200);
    border-radius: var(--ph-radius-md);
    display: flex;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
}

.ph-alert-note .mud-icon-root {
    flex-shrink: 0;
    margin-top: 2px;
}

.ph-alert-note b {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}

.ph-alert-note p {
    color: var(--ph-n-700);
    font-size: 12.5px;
    margin: 0;
}

.ph-alert-note--lgpd { background: var(--ph-pur-50); border-color: var(--ph-pur-200); color: var(--ph-sig-pessoal); }
.ph-alert-note--info { background: var(--ph-info-50); border-color: var(--ph-info-200); color: var(--ph-info-700); }
.ph-alert-note--warn { background: var(--ph-warn-50); border-color: var(--ph-warn-200); color: var(--ph-warn-700); }
.ph-alert-note--ok { background: var(--ph-ok-50); border-color: var(--ph-ok-200); color: var(--ph-ok-700); }
.ph-alert-note--danger { background: var(--ph-err-50); border-color: var(--ph-err-200); color: var(--ph-err-700); }

/* ==========================================================================
   Aba Temporalidade — KPIs, linha do tempo das 3 idades, fases (modelo v3.2)
   ========================================================================== */

.ph-temp-kpis {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 20px;
}

@media (max-width: 1100px) { .ph-temp-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ph-temp-kpis { grid-template-columns: 1fr; } }

.ph-temp-kpi {
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg);
    box-shadow: var(--ph-shadow-1);
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    padding: 16px 18px;
    position: relative;
}

.ph-temp-kpi::before {
    background: var(--ph-brand-orange);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 3px;
}

.ph-temp-kpi--corrente::before { background: var(--ph-info-500); }
.ph-temp-kpi--interm::before { background: var(--ph-warn-500); }
.ph-temp-kpi--perm::before { background: var(--ph-ok-500); }
.ph-temp-kpi--elim::before { background: var(--ph-err-500); }

.ph-temp-kpi .lbl {
    color: var(--ph-n-500);
    font-family: var(--ph-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ph-temp-kpi .val {
    color: var(--ph-brand-ink);
    font-family: var(--ph-font-mono);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
}

.ph-temp-kpi .sub { color: var(--ph-n-500); font-size: 11.5px; margin-top: 4px; }
.ph-temp-kpi .sub b { color: var(--ph-n-700); font-weight: 600; }

.ph-temp-pill {
    align-items: center;
    align-self: flex-start;
    border-radius: var(--ph-radius-pill);
    color: var(--ph-n-0);
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    gap: 5px;
    letter-spacing: .04em;
    margin-top: 2px;
    padding: 3px 10px;
    text-transform: uppercase;
}

.ph-temp-pill--corrente { background: var(--ph-info-500); }
/* texto branco: warn-500/ok-500 reprovam (3,32:1 / 4,33:1) — 700 passa (6,64:1 / 7,66:1) */
/* Fase intermediária em âmbar warn-500 (decisão do dono 18/08 — distinto do vermelho de eliminação);
   texto ESCURO para manter AA: n-800 sobre warn-500 = 4,77:1 (branco daria 3,32:1 — reprovado). */
.ph-temp-pill--interm { background: var(--ph-warn-500); color: var(--ph-n-800); }
.ph-temp-pill--perm { background: var(--ph-ok-700); }
.ph-temp-pill--elim { background: var(--ph-err-500); }

/* Linha do tempo */
.ph-temp-tl {
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-xl);
    box-shadow: var(--ph-shadow-1);
    margin-bottom: 20px;
    padding: 24px 28px 28px;
}

.ph-temp-tl-head {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 20px;
}

.ph-temp-tl-head h3 {
    align-items: center;
    color: var(--ph-brand-ink);
    display: inline-flex;
    font-size: 15px;
    font-weight: 600;
    gap: 8px;
    margin: 0;
}

.ph-temp-tl-head .desc { color: var(--ph-n-500); font-size: 12.5px; margin: 4px 0 0; }

.ph-temp-legend {
    color: var(--ph-n-600);
    display: flex;
    flex-wrap: wrap;
    font-family: var(--ph-font-mono);
    font-size: 10.5px;
    gap: 12px;
}

.ph-temp-legend .item { align-items: center; display: inline-flex; gap: 6px; }
.ph-temp-legend .sw { border-radius: 3px; height: 12px; width: 12px; }

.ph-temp-track {
    background: var(--ph-n-50);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-md);
    height: 36px;
    margin: 56px 0 44px;
    position: relative;
}

.ph-temp-seg {
    align-items: center;
    bottom: 0;
    color: var(--ph-n-0);
    display: flex;
    font-family: var(--ph-font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    overflow: hidden;
    padding: 0 14px;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    white-space: nowrap;
}

.ph-temp-seg--corrente { background: var(--ph-info-500); border-radius: var(--ph-radius-md) 0 0 var(--ph-radius-md); }
.ph-temp-seg--interm { background: var(--ph-warn-500); color: var(--ph-n-800); }
.ph-temp-seg--perm { background: var(--ph-ok-700); border-radius: 0 var(--ph-radius-md) var(--ph-radius-md) 0; }
.ph-temp-seg--elim { background: var(--ph-err-500); border-radius: 0 var(--ph-radius-md) var(--ph-radius-md) 0; }

.ph-temp-now {
    background: var(--ph-brand-orange);
    bottom: -16px;
    position: absolute;
    top: -16px;
    width: 2px;
    z-index: 5;
}

.ph-temp-now::before {
    background: var(--ph-brand-orange);
    border: 3px solid var(--ph-n-0);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgb(var(--ph-brand-orange-rgb) / .20);
    content: "";
    height: 14px;
    left: 50%;
    position: absolute;
    top: -5px;
    transform: translateX(-50%);
    width: 14px;
}

.ph-temp-now-lbl {
    background: var(--ph-brand-orange-text);
    border-radius: var(--ph-radius-md);
    color: var(--ph-n-0);
    font-family: var(--ph-font-mono);
    font-size: 11px;
    font-weight: 600;
    left: 50%;
    padding: 5px 10px;
    position: absolute;
    top: -52px;
    transform: translateX(-50%);
    white-space: nowrap;
}

.ph-temp-event {
    background: var(--ph-n-700);
    bottom: -8px;
    position: absolute;
    top: -8px;
    width: 1.5px;
    z-index: 4;
}

.ph-temp-event::before {
    background: var(--ph-n-0);
    border: 2px solid var(--ph-n-700);
    border-radius: 50%;
    content: "";
    height: 9px;
    left: 50%;
    position: absolute;
    top: -1.5px;
    transform: translateX(-50%);
    width: 9px;
}

.ph-temp-event--info::before { border-color: var(--ph-info-500); }
.ph-temp-event--warn::before { border-color: var(--ph-warn-500); }
.ph-temp-event--elim { background: var(--ph-err-500); }
.ph-temp-event--elim::before { border-color: var(--ph-err-500); }
.ph-temp-event--perm { background: var(--ph-ok-500); }
.ph-temp-event--perm::before { border-color: var(--ph-ok-500); }

.ph-temp-event-lbl {
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-sm);
    bottom: -34px;
    color: var(--ph-n-600);
    font-family: var(--ph-font-mono);
    font-size: 10px;
    left: 50%;
    padding: 2px 6px;
    position: absolute;
    text-align: center;
    transform: translateX(-50%);
    white-space: nowrap;
}

.ph-temp-years {
    color: var(--ph-n-500);
    display: flex;
    font-family: var(--ph-font-mono);
    font-size: 10px;
    justify-content: space-between;
    margin-top: 16px;
}

.ph-temp-years b { color: var(--ph-brand-ink); font-weight: 600; }

/* Cards de fase */
.ph-phase-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 4px;
}

@media (max-width: 1100px) { .ph-phase-grid { grid-template-columns: 1fr; } }

.ph-phase-card {
    background: var(--ph-n-0);
    border: 1.5px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg);
    box-shadow: var(--ph-shadow-1);
    padding: 18px 20px;
    position: relative;
}

.ph-phase-card--current { border-color: var(--ph-brand-orange-text); box-shadow: 0 0 0 3px rgb(var(--ph-brand-orange-rgb) / .08), var(--ph-shadow-2); }
.ph-phase-card--future { background: var(--ph-n-25); }

.ph-phase-head { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 12px; }
.ph-phase-head-l { align-items: flex-start; display: flex; gap: 12px; }

.ph-phase-num {
    align-items: center;
    border-radius: var(--ph-radius-sm);
    color: var(--ph-n-0);
    display: grid;
    font-family: var(--ph-font-mono);
    font-size: 14px;
    font-weight: 700;
    height: 32px;
    place-items: center;
    width: 32px;
}

.ph-phase-card--corrente .ph-phase-num { background: var(--ph-info-500); }
.ph-phase-card--interm .ph-phase-num { background: var(--ph-warn-500); color: var(--ph-n-800); }
.ph-phase-card--perm .ph-phase-num { background: var(--ph-ok-700); }
.ph-phase-card--elim .ph-phase-num { background: var(--ph-err-500); }

.ph-phase-head h4 { color: var(--ph-brand-ink); font-size: 14px; font-weight: 600; margin: 0; }
.ph-phase-sub { color: var(--ph-n-500); font-size: 11.5px; margin-top: 2px; }

.ph-phase-st {
    border-radius: var(--ph-radius-pill);
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 8px;
    white-space: nowrap;
}

.ph-phase-st--current { background: var(--ph-orange-soft); color: var(--ph-brand-orange-text); }
.ph-phase-st--future { background: var(--ph-n-100); color: var(--ph-n-600); }

.ph-phase-dates {
    align-items: center;
    color: var(--ph-brand-ink);
    display: flex;
    font-family: var(--ph-font-mono);
    font-size: 12px;
    gap: 8px;
    margin-bottom: 12px;
}

.ph-phase-dates .ar { color: var(--ph-n-500); }
.ph-phase-dates .yrs { font-weight: 700; margin-left: auto; }

.ph-phase-prog-lbl {
    color: var(--ph-n-500);
    display: flex;
    font-size: 11px;
    justify-content: space-between;
    margin-bottom: 4px;
}

.ph-phase-prog {
    background: var(--ph-n-100);
    border-radius: var(--ph-radius-pill);
    height: 6px;
    margin-bottom: 12px;
    overflow: hidden;
}

.ph-phase-prog .fill { background: var(--ph-info-500); border-radius: var(--ph-radius-pill); height: 100%; }
.ph-phase-card--interm .ph-phase-prog .fill { background: var(--ph-warn-500); }

.ph-phase-meta { display: flex; flex-direction: column; gap: 7px; }
.ph-phase-meta .kv { display: flex; gap: 10px; justify-content: space-between; }
.ph-phase-meta .k { color: var(--ph-n-500); font-size: 11.5px; }
.ph-phase-meta .v { color: var(--ph-brand-ink); font-size: 11.5px; font-weight: 500; text-align: right; }

/* Ações sobre a temporalidade (referência — desabilitadas) */
.ph-temp-actions {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) { .ph-temp-actions { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ph-temp-actions { grid-template-columns: 1fr; } }

.ph-temp-action {
    align-items: flex-start;
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-200);
    border-radius: var(--ph-radius-md);
    display: flex;
    flex-direction: column;
    font-family: var(--ph-font-sans);
    gap: 6px;
    padding: 14px;
    text-align: left;
    width: 100%;
}

.ph-temp-action[disabled] {
    cursor: not-allowed;
    opacity: .6;
}

.ph-temp-action-title {
    align-items: center;
    color: var(--ph-brand-ink);
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
}

.ph-temp-action-title--orange { color: var(--ph-brand-orange-text); }
.ph-temp-action-title--ok { color: var(--ph-ok-700); } /* WCAG 1.4.3: ok-500 dava 4,33:1 em texto pequeno */
.ph-temp-action-title--neutral { color: var(--ph-n-700); }

.ph-temp-action-desc {
    color: var(--ph-n-600);
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.4;
}

/* Linhas de marcação/toggle (aba Privacidade — fiel ao modelo v3.2 .toggle-row) */
.ph-toggle-list {
    border-top: 1px solid var(--ph-n-100);
    margin: 10px 0 6px;
}

.ph-toggle-row {
    align-items: center;
    border-bottom: 1px solid var(--ph-n-100);
    display: flex;
    gap: 14px;
    padding: 14px 0;
}

.ph-toggle-row:last-child { border-bottom: 0; }

.ph-toggle-meta {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ph-toggle-meta b { color: var(--ph-brand-ink); font-size: 13.5px; font-weight: 600; }
.ph-toggle-meta span { color: var(--ph-n-500); font-size: 12px; line-height: 1.45; }

/* Tabela de auditoria (Privacidade) — estrutura pronta para dados futuros */
.ph-audit-table {
    border-collapse: collapse;
    width: 100%;
}

.ph-audit-table th {
    background: var(--ph-n-25);
    border-bottom: 1px solid var(--ph-n-100);
    color: var(--ph-n-500);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    padding: 10px 14px;
    text-align: left;
    text-transform: uppercase;
}

.ph-audit-table td {
    border-bottom: 1px solid var(--ph-n-100);
    color: var(--ph-n-800);
    font-size: 13px;
    padding: 10px 14px;
}

.ph-audit-table tbody tr:last-child td { border-bottom: 0; }

/* Split metadados + visualizador para dialogs (metadados mais largo que na tela) */
.ph-dialog-split {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(460px, 560px) 1fr;
    align-items: start;
}

/* Cards lado a lado em grid não devem herdar o margin-top de cards empilhados. */
.ph-dialog-split > .ph-card,
.ph-file-split > .ph-card {
    margin-top: 0;
}

/* ==========================================================================
   Reclassificação — alerta de impacto + painel comparativo (modelo v2)
   ========================================================================== */

.ph-impact {
    align-items: flex-start;
    background: var(--ph-warn-50);
    border: 1px solid var(--ph-warn-200);
    border-radius: var(--ph-radius-md);
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px 16px;
}

.ph-impact .mud-icon-root { color: var(--ph-warn-700); flex-shrink: 0; margin-top: 1px; }
.ph-impact b { color: var(--ph-warn-700); display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.ph-impact p { color: var(--ph-n-700); font-size: 12.5px; line-height: 1.5; margin: 0; }

.ph-impact-changes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.ph-impact-chg {
    align-items: center;
    background: var(--ph-n-0);
    border: 1px solid var(--ph-warn-200);
    border-radius: var(--ph-radius-pill);
    color: var(--ph-n-700);
    display: inline-flex;
    font-family: var(--ph-font-mono);
    font-size: 11px;
    font-weight: 500;
    gap: 6px;
    padding: 3px 10px;
}

.ph-impact-chg b { color: var(--ph-brand-ink); display: inline; margin: 0; }

/* Painel comparativo: grade única (atual | nova) com linhas alinhadas */
.ph-cmp {
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg);
    box-shadow: var(--ph-shadow-1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 18px;
    overflow: hidden;
}

.ph-cmp-band {
    align-items: center;
    background: var(--ph-n-25);
    border-bottom: 1px solid var(--ph-n-100);
    display: flex;
    gap: 8px;
    padding: 13px 20px;
}

.ph-cmp-band--nova { background: var(--ph-orange-tint-50); border-left: 1px solid var(--ph-n-100); }
.ph-cmp-band h2 { color: var(--ph-brand-ink); font-size: 13.5px; font-weight: 600; margin: 0; }

/* ==========================================================================
   Assistente IA (aba Inteligência) — change assistente-ia-ds
   Restyle visual + chips de sugestão + status de arquivos indexados.
   Namespace .ph-ia-* específico da aba (blast radius baixo): reusa .ph-card-head,
   .ph-progress-* e os tokens laranja de "IA". Formaliza estilos antes inline
   (chat/bolhas) e adiciona affordances — sem remover comportamento.
   ========================================================================== */

/* Badge de ícone laranja (cabeçalho dos cards + empty-state) */
.ph-ia-badge {
    align-items: center;
    background: var(--ph-orange-soft);
    border-radius: var(--ph-radius-md);
    color: var(--ph-brand-orange-text);
    display: inline-flex;
    flex-shrink: 0;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.ph-ia-badge .mud-icon-root { color: var(--ph-brand-orange-text); }
.ph-ia-badge--lg { border-radius: 14px; height: 54px; width: 54px; }
.ph-ia-badge--lg .mud-icon-root { font-size: 30px; }

/* Cabeçalho do expander de arquivos da aba IA: 13px (o padrão do MudExpansionPanel é 15px, grande
   vs. protótipo). Obs.: o override de FONTE da aba foi removido — a tipografia IBM Plex Sans passou
   a ser global no tema MudBlazor (Typography.*.FontFamily), tornando o override redundante. */
.ph-ia-tab .mud-expand-panel-text { font-size: 13px; font-weight: 500; }

/* Grupo ícone + textos dentro do .ph-card-head */
.ph-ia-head-main { align-items: center; display: flex; flex: 1 1 300px; gap: 12px; min-width: 0; }

/* Cabeçalho da aba IA: herda .ph-card-head e PERMITE QUEBRA em telas estreitas (1366×768 e menores),
   restaurando o wrap que a aba tinha antes — sem alterar a primitiva .ph-card-head compartilhada. */
.ph-ia-cardhead { flex-wrap: wrap; row-gap: 10px; }

/* Resumo de indexação (barra "X de Y pesquisáveis") — reusa .ph-progress-* */
.ph-ia-index-meta { color: var(--ph-n-600); font-size: 12px; margin-top: 2px; }

/* Lista de arquivos indexados / não indexados — layout do protótipo:
   [pill de status] [nome do arquivo em MONO] .......... [nº de trechos] */
.ph-ia-files { display: flex; flex-direction: column; }

.ph-ia-file {
    align-items: center;
    display: flex;
    gap: 10px;
    padding: 7px 4px;
}

.ph-ia-file + .ph-ia-file { border-top: 1px solid var(--ph-n-100); }

.ph-ia-file-status {
    border-radius: var(--ph-radius-pill);
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    white-space: nowrap;
}

.ph-ia-file-status--ok { background: var(--ph-ok-50); color: var(--ph-ok-700); }
.ph-ia-file-status--pend { background: var(--ph-warn-50); color: var(--ph-warn-700); }

.ph-ia-file-name {
    color: var(--ph-n-700);
    flex: 1 1 auto;
    font-family: var(--ph-font-mono);
    font-size: 12px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-ia-file-size {
    color: var(--ph-n-500);
    flex-shrink: 0;
    font-family: var(--ph-font-mono);
    font-size: 11.5px;
}

/* Chat: log de mensagens (formaliza o estilo antes inline) */
.ph-ia-chat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
    padding: 8px 2px;
}

/* Bolhas (formaliza EstiloBolha inline → classes, com tokens reais do DS) */
.ph-ia-bubble { border-radius: 12px; max-width: 85%; padding: 10px 14px; }

.ph-ia-bubble--user {
    align-self: flex-end;
    background: var(--ph-brand-ink);
    border-radius: 12px 12px 2px 12px;
    color: var(--ph-n-0);
}

.ph-ia-bubble--bot {
    align-self: flex-start;
    background: var(--ph-n-50);
    border: 1px solid var(--ph-n-100);
    border-radius: 12px 12px 12px 2px;
    color: var(--ph-brand-ink);
}

.ph-ia-bubble--error {
    align-self: center;
    background: var(--ph-err-50);
    border: 1px solid var(--ph-err-200);
    border-radius: var(--ph-radius-md);
    color: var(--ph-brand-ink);
    max-width: 90%;
    padding: 8px 12px;
}

/* Chips de sugestão de pergunta (empty-state) */
.ph-ia-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 6px;
}

.ph-ia-chip {
    align-items: center;
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-200);
    border-radius: var(--ph-radius-pill);
    color: var(--ph-brand-ink);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    gap: 6px;
    padding: 7px 14px;
    transition: background .15s ease, border-color .15s ease;
}

.ph-ia-chip:hover:not(:disabled) { background: var(--ph-orange-soft); border-color: var(--ph-brand-orange-2); }
.ph-ia-chip:focus-visible { box-shadow: var(--ph-shadow-focus); outline: none; }
.ph-ia-chip:disabled { cursor: not-allowed; opacity: .55; }
.ph-ia-chip .mud-icon-root { color: var(--ph-brand-orange-text); font-size: 16px; }

/* Composer (entrada) — input e botões na mesma linha (alinhamento central); a dica
   fica numa linha própria abaixo, para não deslocar os botões da caixa de texto. */
.ph-ia-composer { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ph-ia-composer-field { flex: 1 1 240px; min-width: 0; }
.ph-ia-hint { color: var(--ph-n-500); font-size: 11.5px; margin: 6px 2px 0; }

/* Nota de rodapé da aba: trilha de auditoria (e-ARQ) + aviso de que a IA pode errar. */
.ph-ia-footnote { margin-top: 14px; text-align: center; }
.ph-ia-footnote p { color: var(--ph-n-500); font-size: 11.5px; line-height: 1.5; margin: 0; }
.ph-ia-footnote p + p { margin-top: 3px; }

.ph-cmp-tag-new {
    background: var(--ph-orange-soft);
    border-radius: var(--ph-radius-pill);
    color: var(--ph-brand-orange-text);
    font-family: var(--ph-font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    margin-left: auto;
    padding: 2px 8px;
    text-transform: uppercase;
}

.ph-cmp-search {
    background: var(--ph-n-0);
    border-bottom: 1px solid var(--ph-n-100);
    grid-column: 1 / -1;
    padding: 16px 20px;
}

.ph-cmp-cell {
    border-top: 1px solid var(--ph-n-100);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 12px 20px;
}

.ph-cmp-cell--nova { background: var(--ph-orange-tint-25); border-left: 1px solid var(--ph-n-100); }
.ph-cmp-k { color: var(--ph-n-500); font-family: var(--ph-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ph-cmp-v { color: var(--ph-brand-ink); font-size: 14px; font-weight: 500; }
.ph-cmp-v.mono { font-family: var(--ph-font-mono); font-size: 13px; }
.ph-cmp-v.empty { color: var(--ph-n-500); font-weight: 400; }

/* mini-grid dos 4 códigos */
.ph-codes { display: grid; gap: 8px 12px; grid-template-columns: repeat(4, 1fr); }
.ph-codes-c { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ph-codes-ck { color: var(--ph-n-500); font-family: var(--ph-font-mono); font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ph-codes-cv { color: var(--ph-brand-ink); font-family: var(--ph-font-mono); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

/* diff */
.ph-cmp-cell--changed { background: var(--ph-warn-50); }
.ph-cmp-cell--changed .ph-cmp-k { color: var(--ph-warn-700); }
.ph-cmp-cell--changed .ph-cmp-v { color: var(--ph-warn-700); font-weight: 700; }
.ph-cmp-cell--was .ph-cmp-v { color: var(--ph-n-500); text-decoration: line-through; text-decoration-color: var(--ph-err-500); }

.ph-cmp-flag {
    align-items: center;
    color: var(--ph-warn-700);
    display: inline-flex;
    font-family: var(--ph-font-mono);
    font-size: 9px;
    font-weight: 700;
    gap: 4px;
    letter-spacing: .06em;
    margin-left: 6px;
    text-transform: uppercase;
}

@media (max-width: 720px) {
    .ph-cmp { grid-template-columns: 1fr; }
    .ph-cmp-band--nova,
    .ph-cmp-cell--nova { border-left: 0; }
}

/* ==========================================================================
   Substituição de arquivo — label de seção, dropzone, novo arquivo (modelo)
   ========================================================================== */

.ph-lbl-row {
    align-items: center;
    color: var(--ph-n-500);
    display: flex;
    font-family: var(--ph-font-mono);
    font-size: 10px;
    font-weight: 600;
    gap: 8px;
    letter-spacing: .08em;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.ph-lbl-row .mud-icon-root { color: var(--ph-brand-orange-text); }
.ph-lbl-row::after { background: var(--ph-n-100); content: ""; flex: 1; height: 1px; }

.ph-dropzone {
    background: var(--ph-n-25);
    border: 2px dashed var(--ph-n-200);
    border-radius: var(--ph-radius-lg);
    cursor: pointer;
    padding: 28px 24px;
    text-align: center;
    transition: border-color .15s, background .15s;
    width: 100%;
}

.ph-dropzone:hover,
.ph-dropzone--drag {
    background: var(--ph-orange-soft);
    border-color: var(--ph-brand-orange-text);
}

.ph-dropzone-ic {
    align-items: center;
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-radius: 50%;
    box-shadow: var(--ph-shadow-1);
    color: var(--ph-brand-orange-text);
    display: grid;
    height: 48px;
    margin: 0 auto 12px;
    place-items: center;
    width: 48px;
}

.ph-dropzone h3 { color: var(--ph-brand-ink); font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.ph-dropzone h3 .pick { color: var(--ph-brand-orange-text); text-decoration: underline; text-underline-offset: 2px; }
.ph-dropzone p { color: var(--ph-n-500); font-size: 12px; margin: 0; }
.ph-dropzone-formats { color: var(--ph-n-500); font-family: var(--ph-font-mono); font-size: 10.5px; letter-spacing: .04em; margin-top: 10px; }

.ph-nf-card {
    border: 1.5px solid var(--ph-brand-orange);
    border-radius: var(--ph-radius-lg);
    box-shadow: 0 0 0 3px rgb(var(--ph-brand-orange-rgb) / .08);
    margin-bottom: 16px;
    overflow: hidden;
}

.ph-nf-head { align-items: center; background: var(--ph-orange-soft); display: flex; gap: 12px; padding: 13px 16px; }
.ph-nf-name { flex: 1; min-width: 0; }
.ph-nf-name .nm { color: var(--ph-brand-ink); font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-nf-name .meta { color: var(--ph-n-600); font-family: var(--ph-font-mono); font-size: 11px; margin-top: 1px; }

@media (max-width: 1100px) {
    .ph-dialog-split {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Visualização do arquivo — layout 2 colunas + viewer (modelo "Visualizar Arquivo")
   ========================================================================== */

.ph-viewer-split {
    display: grid;
    grid-template-columns: 480px 1fr;
    height: 78vh;
    min-height: 0;
}

@media (max-width: 1024px) {
    .ph-viewer-split { grid-template-columns: 1fr; height: auto; }
}

/* coluna esquerda — metadados */
.ph-meta-pane {
    background: var(--ph-n-25);
    border-right: 1px solid var(--ph-n-100);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ph-meta-scroll { flex: 1; overflow-y: auto; padding: 20px 22px; }

.ph-meta-foot {
    background: var(--ph-n-0);
    border-top: 1px solid var(--ph-n-100);
    flex-shrink: 0;
    padding: 14px 22px;
}

.ph-meta-stamps { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.ph-meta-stamps .row { align-items: center; display: flex; font-size: 12px; justify-content: space-between; }
.ph-meta-stamps .k { color: var(--ph-n-500); }
.ph-meta-stamps .v { color: var(--ph-n-700); font-family: var(--ph-font-mono); font-size: 11.5px; }

.ph-section-label {
    align-items: center;
    border-top: 1px solid var(--ph-n-100);
    color: var(--ph-n-500);
    display: flex;
    font-family: var(--ph-font-mono);
    font-size: 10px;
    font-weight: 600;
    gap: 8px;
    letter-spacing: .10em;
    margin: 22px 0 14px;
    padding-top: 16px;
    text-transform: uppercase;
}

.ph-section-label .mud-icon-root { color: var(--ph-brand-orange-text); }

/* coluna direita — técnico + viewer */
.ph-doc-pane { background: var(--ph-n-0); display: flex; flex-direction: column; min-height: 0; }

.ph-tech-strip { border-bottom: 1px solid var(--ph-n-100); flex-shrink: 0; padding: 16px 24px; }
.ph-tech-status { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

/* Fundo do visualizador igual ao da aba Anexos (token --ph-viewer-bg) para consistencia. */
.ph-viewer { background: var(--ph-viewer-bg); display: flex; flex: 1; flex-direction: column; min-height: 0; }

.ph-viewer-bar {
    align-items: center;
    background: var(--ph-brand-ink);
    color: var(--ph-n-0);
    display: flex;
    flex-shrink: 0;
    gap: 10px;
    padding: 8px 16px;
}

.ph-viewer-bar .vtitle {
    color: rgb(var(--ph-n-0-rgb) / .85);
    flex: 1;
    font-family: var(--ph-font-mono);
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-viewer-bar .vbtn {
    align-items: center;
    background: rgb(var(--ph-n-0-rgb) / .06);
    border: 0;
    border-radius: var(--ph-radius-sm);
    color: rgb(var(--ph-n-0-rgb) / .85);
    cursor: pointer;
    display: grid;
    height: 30px;
    place-items: center;
    width: 30px;
}

.ph-viewer-bar .vbtn:hover { background: rgb(var(--ph-n-0-rgb) / .15); color: var(--ph-n-0); }

.ph-viewer-canvas { flex: 1; min-height: 0; }
.ph-viewer-canvas iframe { border: 0; height: 100%; width: 100%; }

/* ícone de tipo de arquivo com extensão (header do dialog) */
.ph-filetype-ic {
    align-items: center;
    background: var(--ph-orange-soft);
    border-radius: var(--ph-radius-md);
    color: var(--ph-brand-orange-text);
    display: grid;
    flex-shrink: 0;
    height: 44px;
    place-items: center;
    position: relative;
    width: 44px;
}

.ph-filetype-ext {
    background: var(--ph-err-500);
    border-radius: 2px;
    bottom: 4px;
    color: var(--ph-n-0);
    font-family: var(--ph-font-mono);
    font-size: 7px;
    font-weight: 700;
    line-height: 1;
    padding: 1px 3px;
    position: absolute;
    right: 3px;
}

/* Dialog de visualização sem padding interno (layout full-bleed) */
.ph-viewer-dialog .mud-dialog-content { overflow: hidden; padding: 0; }

/* badge de referência legal inline (toggles LGPD) */
.ph-law {
    background: var(--ph-n-100);
    border-radius: var(--ph-radius-sm);
    /* WCAG 1.4.3: n-500 sobre n-100 dava 4,24:1 em 9,5px — n-600 passa com folga. */
    color: var(--ph-n-600);
    font-family: var(--ph-font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 1px 6px;
    text-transform: none;
}

/* ==========================================================================
   Menu "Mais ações" — dropdown agrupado (modelo Object Detailv3.2)
   Estiliza a lista do MudMenu via ListClass="ph-actions-menu".
   ========================================================================== */

.ph-actions-menu.mud-list {
    background: var(--ph-n-0);
    min-width: 252px;
    padding: 6px;
}

.ph-actions-menu .mud-menu-item {
    border-radius: var(--ph-radius-sm);
    color: var(--ph-n-700);
    gap: 10px;
    min-height: 0;
    padding: 8px 12px;
}

/* fonte/tamanho aplicados ao item e ao texto interno (modelo de referência) */
.ph-actions-menu .mud-menu-item,
.ph-actions-menu .mud-menu-item .mud-typography,
.ph-actions-menu .mud-menu-item .mud-list-item-text {
    font-family: var(--ph-font-sans);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

.ph-actions-menu .mud-menu-item:hover {
    background: var(--ph-n-25);
    color: var(--ph-brand-ink);
}

.ph-actions-menu .mud-menu-item .mud-icon-root {
    color: var(--ph-n-500);
    font-size: 15px;
    height: 15px;
    width: 15px;
}

.ph-actions-menu .mud-menu-item:hover .mud-icon-root {
    color: currentColor;
}

/* item destrutivo */
.ph-actions-menu .ph-menu-item--danger:hover {
    background: var(--ph-err-50);
    color: var(--ph-err-500);
}

/* cabeçalho de seção */
.ph-menu-h {
    color: var(--ph-n-500);
    font-family: var(--ph-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 8px 12px 4px;
    text-transform: uppercase;
}

/* separador */
.ph-menu-sep {
    background: var(--ph-n-100);
    border: 0;
    height: 1px;
    margin: 4px 0;
}

/* linha do item (label + atalho) */
.ph-menu-row { align-items: center; display: flex; gap: 10px; width: 100%; }
.ph-menu-row .lbl { flex: 1; }

/* atalho de teclado */
.ph-kbd {
    background: var(--ph-n-25);
    border: 1px solid var(--ph-n-200);
    border-radius: 3px;
    color: var(--ph-n-500);
    font-family: var(--ph-font-mono);
    font-size: 10px;
    margin-left: auto;
    padding: 1px 5px;
}

/* utilitário: conteúdo só para leitores de tela (visualmente oculto, acessível a AT) */
.ph-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* ============================================================================================
   2FA — caixas de OTP (uma por dígito). Componente compartilhado OtpInput (setup no Perfil + desafio
   no Login). Foco visível (WCAG 2.1 AA); estado comunicado por texto + cor.
   ============================================================================================ */
.ph-2fa-otp {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 6px 0 2px;
}

.ph-2fa-otp-box {
    background: var(--ph-n-0);
    border: 1.5px solid var(--ph-n-200);
    border-radius: var(--ph-radius-md);
    color: var(--ph-brand-ink);
    font-family: var(--ph-font-mono);
    font-size: 22px;
    font-weight: 600;
    height: 54px;
    text-align: center;
    width: 46px;
}

.ph-2fa-otp-box:focus {
    border-color: var(--ph-brand-orange-text);
    box-shadow: var(--ph-shadow-focus);
    outline: none;
}

.ph-2fa-otp-box:disabled {
    background: var(--ph-n-50);
    color: var(--ph-n-500);
}

@media (max-width: 420px) {
    .ph-2fa-otp-box {
        font-size: 18px;
        height: 46px;
        width: 38px;
    }
}

/* ============================================================================================
   Pesquisa unificada (/pesquisa) — change busca-unificada.
   Variantes NOVAS .ph-pesquisa-*: derivadas do padrão do hero de pesquisa, SEM mutar
   .ph-search-page/.ph-search-hero e irmãs (compartilhadas com telas de IA — blast radius).
   A página reusa os blocos genéricos do DS (.ph-results-panel, .ph-filter-dialog,
   .ph-object-card, .ph-data-table etc.) apenas por referência no markup.
   ============================================================================================ */
/* eMAG 1.3 — o título do hero da Pesquisa é o h1 da página; a tipografia vem da classe
   (não do nível), então h1/h2/h3 rendem o mesmo tamanho, espelhando o hero de busca. */
/* change pesquisa-autocomplete — dropdown de sugestões (listbox) ancorado à caixa do hero.
   Reusa tokens do DS (superfície/borda/sombra/raios/tipografia mono nos identificadores). */
.ph-sug-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
    margin: 0;
    padding: 6px;
    list-style: none;
    max-height: 340px;
    overflow-y: auto;
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg);
    box-shadow: var(--ph-shadow-3);
}

.ph-sug-group-lb {
    padding: 8px 8px 4px;
    font-family: var(--ph-font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ph-brand-orange-text);
}

.ph-sug-opt {
    display: flex;
    align-items: center;
    padding: 7px 8px;
    border-radius: var(--ph-radius-sm);
    cursor: pointer;
    font: 500 13px var(--ph-font-sans);
    color: var(--ph-n-700);
}

.ph-sug-opt:hover {
    background: var(--ph-n-25);
    color: var(--ph-brand-ink);
}

.ph-sug-opt--active {
    background: var(--ph-orange-soft);
    color: var(--ph-brand-ink);
    font-weight: 600;
}

.ph-sug-opt-txt {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* abas (complementa .ph-tabs, que já traz cores/foco WCAG) */
.ph-pesquisa-tabs .mud-tabs-toolbar {
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg);
    padding: 0 8px;
}

.ph-pesquisa-tab-panel {
    padding-top: 16px;
}

/* ações de filtro na faixa de pills (a tela unificada move Filtros/Limpar do hero p/ a aba) */
.ph-pesquisa-filtro-acoes {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
}

/* estados explícitos (vazio orientado / erro com retry / sem permissão / sem repositório) */
.ph-pesquisa-status {
    align-items: center;
    background: var(--ph-n-0);
    border: 1px dashed var(--ph-n-200);
    border-radius: var(--ph-radius-lg);
    color: var(--ph-n-500);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
}

.ph-pesquisa-status .mud-icon-root {
    color: var(--ph-n-300);
}

.ph-pesquisa-status--erro {
    background: var(--ph-err-50);
    border-color: var(--ph-err-200);
    border-style: solid;
}

.ph-pesquisa-status--erro .mud-icon-root {
    color: var(--ph-err-500);
}

.ph-pesquisa-status-texto {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 520px;
}

.ph-pesquisa-status-titulo {
    color: var(--ph-brand-ink);
    font-size: 15px;
    font-weight: 600;
}

.ph-pesquisa-status-desc {
    font-size: 13px;
}

/* aviso discreto: backend antigo sem paginação server-side (modo lote local) */
.ph-pesquisa-aviso {
    background: var(--ph-n-25);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-pill);
    color: var(--ph-n-500);
    font-size: 11px;
    padding: 2px 10px;
}

/* filtro local do resultado (aba Conteúdo) */
.ph-pesquisa-filtro-local {
    max-width: 280px;
    min-width: 220px;
}

/* trechos de correspondência (aba Conteúdo) — destaque único e seguro via TrechoDestacado */
.ph-pesquisa-matches {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 720px;
}

.ph-pesquisa-match {
    background: var(--ph-n-25);
    border: 1px solid var(--ph-n-100);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.45;
    padding: 6px 8px;
}

.ph-pesquisa-match mark,
.ph-pesquisa-mark {
    background: rgb(var(--ph-brand-orange-rgb) / .18);
    border-radius: 3px;
    color: inherit;
    padding: 0 2px;
}

@media (max-width: 768px) {
    .ph-pesquisa-filtro-local {
        max-width: 100%;
        min-width: 0;
    }
}

/* =====================================================================
   Pesquisa Semântica (change busca-semantica-cross-objeto)
   Tradução 1:1 do modelo system-design/Pesquisa Semântica.html para os
   tokens --ph-* (contrato de aceite, design.md D13). Bloco ADITIVO —
   nenhuma classe compartilhada é mutada.
   ===================================================================== */

/* Scopeline do hero (escopo = repositório selecionado, vale para as 3 abas) */
/* 12px com alfa .65 sobre a regiao mais clara do heroi (gradiente + ::before) dava ~4,95:1
   — tecnicamente acima do minimo, na pratica ilegivel; o dono relatou como "quase impossivel
   visualizar" (07/09/2026). Branco solido leva a ~9,2:1 no pior ponto. O tamanho de 12px e
   mantido: e informacao auxiliar, e mexer nele desloca o layout do heroi. */
.ph-pesquisa-scopeline { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; color: var(--ph-n-0); }
.ph-pesquisa-scopeline .mud-icon-root { width: 14px; height: 14px; font-size: 14px; color: var(--ph-brand-orange-2); }
.ph-pesquisa-scopeline b { color: var(--ph-n-0); font-weight: 500; }

/* Container da aba: como no modelo, o conteúdo flui DIRETO no fundo da página (sem o card
   .ph-results-panel em volta — os grupos já são cards); respiro vertical próprio. */
.ph-psem { display: block; padding: 2px 2px 48px; }

/* fulltext-sigilo-trecho — sigilo por resultado na busca de conteúdo (paridade com a Semântica):
   badge de cadeado no identificador + nota de conteúdo restrito no lugar dos trechos. */
.ph-pesquisa-sigilo-icone { width: 14px; height: 14px; font-size: 14px; vertical-align: -2px; margin-left: 6px; color: var(--ph-warn-700); }
.ph-pesquisa-restrito { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--ph-n-600); background: var(--ph-n-25); border: 1px dashed var(--ph-n-200); border-radius: var(--ph-radius-md); padding: 8px 10px; max-width: 560px; }
.ph-pesquisa-restrito .mud-icon-root { width: 15px; height: 15px; font-size: 15px; flex-shrink: 0; margin-top: 1px; }

/* Tag IA da aba */
.ph-psem-ai-tag { font-family: var(--ph-font-mono); font-size: 9px; font-weight: 600; letter-spacing: .06em; background: var(--ph-orange-soft); color: var(--ph-brand-orange-text); border: 1px solid var(--ph-warn-200); padding: 1px 6px; border-radius: var(--ph-radius-pill); margin-left: 6px; }

/* Faixa de transparência (chips) */
.ph-psem-transp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; }
.ph-psem-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border-radius: var(--ph-radius-pill); font-family: var(--ph-font-mono); font-size: 10.5px; font-weight: 500; border: 1px solid var(--ph-n-200); background: var(--ph-n-0); color: var(--ph-n-600); }
.ph-psem-chip .mud-icon-root { width: 12px; height: 12px; font-size: 12px; flex-shrink: 0; }
.ph-psem-chip b { color: var(--ph-brand-ink); font-weight: 600; }
.ph-psem-chip--cov { border-color: var(--ph-info-200); background: var(--ph-info-50); color: var(--ph-info-700); }
.ph-psem-chip--cov b { color: var(--ph-info-700); }
.ph-psem-chip--stale { border-color: var(--ph-warn-200); background: var(--ph-warn-50); color: var(--ph-warn-700); }
.ph-psem-chip--stale b { color: var(--ph-warn-700); }

/* Filtros compactos */
.ph-psem-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.ph-psem-filtros-lbl { font-family: var(--ph-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ph-n-500); font-weight: 600; }
.ph-psem-select { max-width: 220px; }
.ph-psem-select .mud-input-slot, .ph-psem-data .mud-input-slot { font-size: 12.5px; }
.ph-psem-data { max-width: 150px; }
.ph-psem-limpar { height: 32px; padding: 0 10px; color: var(--ph-n-500); font-size: 12px; font-weight: 500; text-transform: none; }
.ph-psem-limpar:hover { color: var(--ph-brand-ink); background: var(--ph-n-50); }

/* Meta dos resultados */
.ph-psem-rmeta { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 12px; flex-wrap: wrap; }
.ph-psem-rmeta h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ph-brand-ink); }
.ph-psem-count { font-family: var(--ph-font-mono); font-size: 11px; color: var(--ph-n-500); }
.ph-psem-count b { color: var(--ph-brand-ink); }

/* Grupo por objeto */
.ph-psem-grupo { background: var(--ph-n-0); border: 1px solid var(--ph-n-100); border-radius: var(--ph-radius-xl); box-shadow: var(--ph-shadow-1); margin-bottom: 14px; overflow: hidden; }
.ph-psem-ghead { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--ph-n-100); background: linear-gradient(180deg, var(--ph-n-25), var(--ph-n-0)); flex-wrap: wrap; }
.ph-psem-oid { font-family: var(--ph-font-mono); font-size: 11px; font-weight: 600; color: var(--ph-n-700); background: var(--ph-n-50); border: 1px solid var(--ph-n-100); padding: 2px 8px; border-radius: var(--ph-radius-sm); }
.ph-psem-otitle { font-weight: 600; color: var(--ph-brand-ink); font-size: 13.5px; min-width: 0; }
.ph-psem-ometa { font-family: var(--ph-font-mono); font-size: 10.5px; color: var(--ph-n-500); }
.ph-psem-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--ph-radius-pill); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--ph-orange-soft); color: var(--ph-brand-orange-text); border: 1px solid var(--ph-warn-200); }
.ph-psem-badge--sig { background: var(--ph-n-0); color: var(--ph-pur-700); border-color: var(--ph-pur-500); }
.ph-psem-gacts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.ph-psem-btn-ask.mud-button-root, .ph-psem-btn-abrir.mud-button-root { height: 30px; padding: 0 12px; border-radius: var(--ph-radius-md); font-weight: 600; font-size: 12px; text-transform: none; }
.ph-psem-btn-ask.mud-button-root { background: var(--ph-orange-soft); color: var(--ph-brand-orange-text); border: 1px solid var(--ph-warn-200); }
.ph-psem-btn-ask.mud-button-root:hover { background: var(--ph-warn-50); }
.ph-psem-btn-abrir.mud-button-root { background: var(--ph-n-0); color: var(--ph-brand-ink); border: 1px solid var(--ph-n-200); }
.ph-psem-btn-abrir.mud-button-root:hover { background: var(--ph-n-25); border-color: var(--ph-n-300); }

/* Trecho com barra e relevância */
.ph-psem-trecho { display: grid; grid-template-columns: 3px 1fr; border-bottom: 1px solid var(--ph-n-50); }
.ph-psem-trecho:last-child { border-bottom: 0; }
.ph-psem-bar { background: var(--ph-n-100); }
.ph-psem-trecho--r3 .ph-psem-bar { background: var(--ph-brand-orange); }
.ph-psem-trecho--r2 .ph-psem-bar { background: var(--ph-brand-orange-2); opacity: .55; }
.ph-psem-trecho-inner { padding: 14px 20px 12px; }
.ph-psem-trecho-inner blockquote { margin: 0 0 8px; font-size: 13.5px; line-height: 1.65; color: var(--ph-n-700); }
.ph-psem-mark { background: transparent; color: var(--ph-brand-ink); font-weight: 600; }
.ph-psem-src { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--ph-font-mono); font-size: 10.5px; color: var(--ph-n-500); }
.ph-psem-file { display: inline-flex; align-items: center; gap: 5px; color: var(--ph-n-600); }
.ph-psem-file .mud-icon-root { width: 12px; height: 12px; font-size: 12px; color: var(--ph-brand-orange-text); }
.ph-psem-rel { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.ph-psem-rel-bars { display: inline-flex; gap: 2px; align-items: flex-end; }
.ph-psem-rel-bars i { width: 3.5px; border-radius: 1px; background: var(--ph-n-200); }
.ph-psem-rel-bars i:nth-child(1) { height: 5px; }
.ph-psem-rel-bars i:nth-child(2) { height: 8px; }
.ph-psem-rel-bars i:nth-child(3) { height: 11px; }
.ph-psem-rel--r3 .ph-psem-rel-bars i { background: var(--ph-brand-orange); }
.ph-psem-rel--r2 .ph-psem-rel-bars i:nth-child(-n+2) { background: var(--ph-brand-orange-2); }
.ph-psem-rel--r1 .ph-psem-rel-bars i:nth-child(1) { background: var(--ph-n-400); }
.ph-psem-rel-t { font-family: var(--ph-font-mono); font-size: 10px; color: var(--ph-n-500); letter-spacing: .04em; }

/* Card restrito (sigilo) */
.ph-psem-grupo--restrito .ph-psem-ghead { background: var(--ph-n-25); }
.ph-psem-restrito { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; }
.ph-psem-lock { width: 34px; height: 34px; border-radius: var(--ph-radius-md); background: var(--ph-n-100); color: var(--ph-n-500); display: grid; place-items: center; flex-shrink: 0; }
.ph-psem-lock .mud-icon-root { width: 16px; height: 16px; font-size: 16px; }
.ph-psem-restrito h4 { margin: 0 0 3px; font-size: 13px; font-weight: 600; color: var(--ph-n-700); }
.ph-psem-restrito p { margin: 0; font-size: 12.5px; color: var(--ph-n-500); max-width: 70ch; }

/* Carregar mais */
.ph-psem-loadmore { text-align: center; padding: 8px 0 4px; }
.ph-psem-loadmore .mud-button-root { height: 36px; padding: 0 20px; border-radius: var(--ph-radius-pill); border: 1px solid var(--ph-n-200); background: var(--ph-n-0); color: var(--ph-brand-ink); font-weight: 600; font-size: 12.5px; text-transform: none; }
.ph-psem-loadmore .mud-button-root:hover:not(.mud-disabled) { border-color: var(--ph-brand-orange-text); color: var(--ph-brand-orange-text); }
.ph-psem-loadmore .mud-button-root.mud-disabled { opacity: .5; color: var(--ph-n-500); border-color: var(--ph-n-100); }
.ph-psem-note { display: block; margin-top: 8px; font-family: var(--ph-font-mono); font-size: 10px; color: var(--ph-n-500); }

/* Cards de estado (vitrine, sem conexão, franquia, indisponível, cobertura zero, vazio, sem permissão) */
.ph-psem-estado { background: var(--ph-n-0); border: 1px solid var(--ph-n-100); border-radius: var(--ph-radius-xl); box-shadow: var(--ph-shadow-1); margin-top: 20px; padding: 56px 32px; text-align: center; }
.ph-psem-estado-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--ph-n-50); color: var(--ph-n-500); display: grid; place-items: center; margin: 0 auto 14px; }
.ph-psem-estado-ic .mud-icon-root { width: 24px; height: 24px; font-size: 24px; }
.ph-psem-estado-ic--marca { background: var(--ph-orange-soft); color: var(--ph-brand-orange-text); }
.ph-psem-estado-ic--erro { background: var(--ph-err-50); color: var(--ph-err-500); }
.ph-psem-estado-ic--warn { background: var(--ph-warn-50); color: var(--ph-warn-700); }
.ph-psem-estado h3 { margin: 0 0 6px; color: var(--ph-brand-ink); font-size: 16px; font-weight: 600; }
.ph-psem-estado p { margin: 0 auto 18px; font-size: 13px; color: var(--ph-n-500); max-width: 56ch; }
.ph-psem-estado p b { color: var(--ph-n-700); }
.ph-psem-estado-acts { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ph-psem-fine { display: block; margin-top: 16px; font-family: var(--ph-font-mono); font-size: 10px; color: var(--ph-n-500); }
.ph-psem-mono { font-family: var(--ph-font-mono); font-size: 12px; }

/* Skeleton de carregamento ("vetorizando a pergunta…") */
.ph-psem-skel-msg { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 24px 0 16px; font-size: 13px; color: var(--ph-n-600); }
.ph-psem-skel-eta { font-family: var(--ph-font-mono); font-size: 11px; color: var(--ph-n-500); }
/* ==========================================================================
   .spinner — indicador de carregamento de PAGINA (auditoria de DS, 06/09/2026).

   Nao e uma classe nova: e a que 51 pontos do app ja usam. Ela so existia no
   bloco <style> do splash de inicializacao do index.html, com `silver` e
   `#337AB7` — azul do Bootstrap 3, estranho a paleta. Como o DS e carregado
   depois daquele bloco, esta regra vence e alinha os 51 usos de uma vez, sem
   tocar em nenhum call site. A geometria e mantida IDENTICA de proposito:
   mudar tamanho aqui moveria layout em 51 telas.
   ========================================================================== */
.spinner {
    border: 16px solid var(--ph-n-300);
    border-top-color: var(--ph-brand-orange-text);
}

@media (prefers-reduced-motion: reduce) {
    /* Desacelera em vez de parar: sem giro o indicador vira um arco estatico e deixa de
       comunicar "carregando". WCAG 2.3.3 excetua animacao essencial a funcao. */
    .spinner { animation-duration: 2.4s; }
}

.ph-psem-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ph-n-200); border-top-color: var(--ph-brand-orange-text); animation: ph-psem-spin .7s linear infinite; }
@keyframes ph-psem-spin { to { transform: rotate(360deg); } }
.ph-psem-skel { background: var(--ph-n-0); border: 1px solid var(--ph-n-100); border-radius: var(--ph-radius-xl); margin-bottom: 14px; padding: 16px 20px; }
.ph-psem-sk { border-radius: var(--ph-radius-sm); background: linear-gradient(90deg, var(--ph-n-50) 25%, var(--ph-n-100) 50%, var(--ph-n-50) 75%); background-size: 200% 100%; animation: ph-psem-shimmer 1.4s infinite; }
@keyframes ph-psem-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .ph-psem-sk { animation: none; }
    .ph-psem-spin { animation: none; }
}

@media (max-width: 1100px) {
    .ph-psem-gacts { margin-left: 0; width: 100%; }
    .ph-psem-rel { margin-left: 0; }
}

/* =====================================================================
   Pesquisa "Tudo" — fusão RRF (change pesquisa-fusao-rrf)
   Bloco ADITIVO: reusa a linguagem visual da aba Semântica (.ph-psem-*),
   os trechos de conteúdo (.ph-pesquisa-match) e os estados (.ph-pesquisa-status);
   só o que é específico da visão combinada ganha prefixo .ph-ptudo-.
   ===================================================================== */

/* Container: o conteúdo flui direto no fundo (os cards já têm moldura própria). */
.ph-ptudo { display: block; padding: 2px 2px 48px; }

/* Título do objeto clicável (abre /documents/{id}) — botão sem cromo, foco visível. */
.ph-ptudo-title { appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; font: inherit; font-weight: 600; font-size: 13.5px; color: var(--ph-brand-ink); min-width: 0; }
.ph-ptudo-title:hover { color: var(--ph-brand-orange-text); text-decoration: underline; }
.ph-ptudo-title:focus-visible { outline: 2px solid var(--ph-brand-orange); outline-offset: 2px; border-radius: var(--ph-radius-sm); }

/* Badges de ORIGEM (em quais modalidades o objeto foi encontrado) — empurrados à direita. */
.ph-ptudo-origens { margin-left: auto; display: inline-flex; gap: 5px; flex-wrap: wrap; }
.ph-ptudo-origem { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--ph-radius-pill); font-family: var(--ph-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--ph-n-200); background: var(--ph-n-25); color: var(--ph-n-600); }
.ph-ptudo-origem--meta { border-color: var(--ph-info-200); background: var(--ph-info-50); color: var(--ph-info-700); }
.ph-ptudo-origem--cont { border-color: var(--ph-n-200); background: var(--ph-n-50); color: var(--ph-n-700); }
.ph-ptudo-origem--sem { border-color: var(--ph-warn-200); background: var(--ph-orange-soft); color: var(--ph-brand-orange-text); }

/* Chip DISCRETO de modalidade sem permissão (não é degradação — nunca disparou). */
.ph-ptudo-chip-perm { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border-radius: var(--ph-radius-pill); font-family: var(--ph-font-mono); font-size: 10.5px; font-weight: 500; border: 1px dashed var(--ph-n-200); background: var(--ph-n-25); color: var(--ph-n-500); }
.ph-ptudo-chip-perm .mud-icon-root { width: 12px; height: 12px; font-size: 12px; flex-shrink: 0; }
.ph-ptudo-chip-perm b { color: var(--ph-n-600); font-weight: 600; }

/* Corpo do card: trechos de conteúdo (via TrechoDestacado) + trecho semântico. */
.ph-ptudo-body { padding: 14px 20px 16px; display: flex; flex-direction: column; gap: 12px; }
.ph-ptudo-body:empty { display: none; }
.ph-ptudo-body .ph-pesquisa-matches { max-width: none; }

/* Trecho semântico (texto puro + faixa de relevância) — barra à esquerda como na Semântica. */
.ph-ptudo-sem { display: grid; grid-template-columns: 3px 1fr; border: 1px solid var(--ph-n-100); border-radius: var(--ph-radius-md); overflow: hidden; }
.ph-ptudo-sem-bar { background: var(--ph-n-100); }
.ph-ptudo-sem--r3 .ph-ptudo-sem-bar { background: var(--ph-brand-orange); }
.ph-ptudo-sem--r2 .ph-ptudo-sem-bar { background: var(--ph-brand-orange-2); opacity: .55; }
.ph-ptudo-sem-inner { padding: 10px 14px; }
.ph-ptudo-sem-inner blockquote { margin: 0 0 6px; font-size: 13px; line-height: 1.6; color: var(--ph-n-700); }
.ph-ptudo-rel { display: inline-flex; align-items: center; gap: 6px; }
.ph-ptudo-rel--r3 .ph-psem-rel-bars i { background: var(--ph-brand-orange); }
.ph-ptudo-rel--r2 .ph-psem-rel-bars i:nth-child(-n+2) { background: var(--ph-brand-orange-2); }
.ph-ptudo-rel--r1 .ph-psem-rel-bars i:nth-child(1) { background: var(--ph-n-400); }

/* Rodapé "Refinar em:" — atalhos para as abas próprias (só as permitidas). */
.ph-ptudo-refinar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding: 12px 4px 0; border-top: 1px dashed var(--ph-n-100); }
.ph-ptudo-refinar-lbl { font-family: var(--ph-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ph-n-500); font-weight: 600; }
.ph-ptudo-refinar-link { appearance: none; background: none; border: 0; padding: 2px 4px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ph-brand-orange-text); }
.ph-ptudo-refinar-link:hover { text-decoration: underline; }
.ph-ptudo-refinar-link:focus-visible { outline: 2px solid var(--ph-brand-orange); outline-offset: 2px; border-radius: var(--ph-radius-sm); }

@media (max-width: 1100px) {
    .ph-ptudo-origens { margin-left: 0; width: 100%; }
}

/* =========================================================================
   change pesquisa-refinadores — painel "Refinar resultados" (rail lateral).
   Réplica 1:1 do mock system-design/Refinar Resultados B.html com os tokens
   reais do design system. Prefixo .ph-ref-*. Acento-line derivado do pill.
   ========================================================================= */

/* workspace = rail + resultados */
.ph-ref-work { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.ph-ref-work.railoff { grid-template-columns: 48px minmax(0, 1fr); }
/* Grid item tem min-width:auto por default — sem o min-width:0 a TABELA larga empurra a
   página para fora da borda em vez de rolar dentro do próprio card (feedback do dono
   30/07). O conteúdo largo rola no wrapper interno; a página nunca rola na horizontal. */
.ph-ref-work > * { min-width: 0; }
.ph-ref-work > .ph-results-panel { min-width: 0; overflow-x: auto; }

/* rail colapsado → tira vertical */
.ph-ref-railmini { display: none; background: var(--ph-n-0); border: 1px solid var(--ph-n-100); border-radius: var(--ph-radius-xl); box-shadow: var(--ph-shadow-1); padding: 10px 6px; position: sticky; top: 12px; flex-direction: column; align-items: center; gap: 10px; }
.ph-ref-work.railoff .ph-ref-rail { display: none; }
.ph-ref-work.railoff .ph-ref-railmini { display: flex; }
.ph-ref-railmini button { width: 32px; height: 32px; border: 1px solid var(--ph-n-200); background: var(--ph-n-0); border-radius: var(--ph-radius-sm); color: var(--ph-n-600); display: grid; place-items: center; cursor: pointer; }
.ph-ref-railmini button:hover { border-color: var(--ph-brand-orange-text); color: var(--ph-brand-orange-text); }
.ph-ref-railmini button svg { width: 15px; height: 15px; }
.ph-ref-railmini .vert { writing-mode: vertical-rl; font-family: var(--ph-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ph-n-500); font-weight: 600; }
.ph-ref-railmini .badge { min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--ph-radius-pill); background: var(--ph-brand-orange-text); color: var(--ph-n-0); font-family: var(--ph-font-mono); font-size: 10px; font-weight: 600; display: grid; place-items: center; }

/* rail */
.ph-ref-rail { background: var(--ph-n-0); border: 1px solid var(--ph-n-100); border-radius: var(--ph-radius-xl); box-shadow: var(--ph-shadow-1); overflow: hidden; position: sticky; top: 12px; }
.ph-ref-rail-head { display: flex; align-items: center; gap: 8px; padding: 13px 14px; border-bottom: 1px solid var(--ph-n-100); background: linear-gradient(180deg, var(--ph-n-25), var(--ph-n-0)); }
.ph-ref-rail-title { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ph-brand-ink); }
.ph-ref-rail-title svg { width: 15px; height: 15px; color: var(--ph-brand-orange-text); }
.ph-ref-rail-toggle { margin-left: auto; width: 28px; height: 28px; border: 1px solid var(--ph-n-200); background: var(--ph-n-0); border-radius: var(--ph-radius-sm); color: var(--ph-n-500); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.ph-ref-rail-toggle:hover { border-color: var(--ph-brand-orange-text); color: var(--ph-brand-orange-text); }
.ph-ref-rail-toggle svg { width: 14px; height: 14px; }
.ph-ref-rail-total { display: flex; align-items: baseline; gap: 5px; padding: 10px 14px; border-bottom: 1px solid var(--ph-n-100); background: var(--ph-orange-soft); font-family: var(--ph-font-mono); font-size: 11.5px; color: var(--ph-brand-orange-text); }
.ph-ref-rail-total b { font-size: 15px; color: var(--ph-brand-ink); font-weight: 600; }
.ph-ref-total-skel { display: inline-block; width: 54px; height: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--ph-n-50) 25%, var(--ph-n-100) 50%, var(--ph-n-50) 75%); background-size: 200% 100%; animation: ph-ref-shim 1.3s infinite; }
.ph-ref-rail-clear { padding: 8px 14px 0; }
.ph-ref-clear-btn { width: 100%; justify-content: center; }
.ph-ref-num { font-variant-numeric: tabular-nums; }

/* accordion */
.ph-ref-acc { border-bottom: 1px solid var(--ph-n-50); }
.ph-ref-acc:last-of-type { border-bottom: 0; }
.ph-ref-acc-title { margin: 0; }
.ph-ref-acc-h { width: 100%; display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: transparent; border: 0; cursor: pointer; text-align: left; font: 600 12px var(--ph-font-sans); color: var(--ph-brand-ink); }
.ph-ref-acc-h:hover { background: var(--ph-n-25); }
.ph-ref-acc-label { min-width: 0; }
.ph-ref-acc-cnt { font-family: var(--ph-font-mono); font-size: 10px; color: var(--ph-n-500); font-weight: 500; }
.ph-ref-acc-on { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--ph-radius-pill); background: var(--ph-brand-orange-text); color: var(--ph-n-0); font-family: var(--ph-font-mono); font-size: 9.5px; font-weight: 600; }
.ph-ref-chev { margin-left: auto; width: 14px; height: 14px; color: var(--ph-n-500); transition: transform .15s; flex-shrink: 0; }
.ph-ref-acc-h[aria-expanded="true"] .ph-ref-chev { transform: rotate(180deg); }
.ph-ref-acc-b { padding: 0 8px 10px; }

/* linhas (checkbox + rótulo + contagem à direita) */
.ph-ref-row { width: 100%; display: flex; align-items: center; gap: 9px; padding: 6px; background: transparent; border: 0; border-radius: var(--ph-radius-sm); cursor: pointer; text-align: left; font: 500 12.5px var(--ph-font-sans); color: var(--ph-n-700); }
.ph-ref-row:hover { background: var(--ph-n-25); color: var(--ph-brand-ink); }
.ph-ref-row .ph-ref-bx { width: 15px; height: 15px; border: 1.5px solid var(--ph-n-300); border-radius: 3px; display: grid; place-items: center; flex-shrink: 0; background: var(--ph-n-0); }
.ph-ref-row[aria-pressed="true"] { background: var(--ph-orange-soft); color: var(--ph-brand-ink); font-weight: 600; }
.ph-ref-row[aria-pressed="true"] .ph-ref-bx { background: var(--ph-brand-ink); border-color: var(--ph-brand-ink); }
.ph-ref-row[aria-pressed="true"] .ph-ref-bx::after { content: ""; width: 8px; height: 4px; border: 1.7px solid var(--ph-n-0); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.ph-ref-row .ph-ref-lb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-ref-row .ph-ref-n { font-family: var(--ph-font-mono); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ph-n-500); flex-shrink: 0; }
.ph-ref-row[aria-pressed="true"] .ph-ref-n { color: var(--ph-brand-orange-text); }
.ph-ref-row.mono .ph-ref-lb { font-family: var(--ph-font-mono); font-size: 11px; }
.ph-ref-more { margin: 4px 0 0 6px; height: 26px; padding: 0 10px; background: transparent; border: 1px dashed var(--ph-n-300); border-radius: var(--ph-radius-pill); font: 600 11.5px var(--ph-font-sans); color: var(--ph-n-600); cursor: pointer; }
.ph-ref-more:hover { border-color: var(--ph-brand-orange-text); color: var(--ph-brand-orange-text); }
.ph-ref-none { padding: 6px 8px; font-size: 11.5px; color: var(--ph-n-500); }

/* skeleton de contagens (re-busca com dados anteriores) */
.ph-ref-rail.loading .ph-ref-row .ph-ref-n { position: relative; min-width: 34px; color: transparent; }
.ph-ref-rail.loading .ph-ref-row .ph-ref-n::before { content: ""; position: absolute; right: 0; top: 1px; width: 34px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--ph-n-50) 25%, var(--ph-n-100) 50%, var(--ph-n-50) 75%); background-size: 200% 100%; animation: ph-ref-shim 1.3s infinite; }
/* linhas-fantasma (primeira carga) */
.ph-ref-row--skel { pointer-events: none; }
.ph-ref-row--skel .ph-ref-bx { border-color: var(--ph-n-200); }
.ph-ref-row--skel .ph-ref-lb { height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--ph-n-50) 25%, var(--ph-n-100) 50%, var(--ph-n-50) 75%); background-size: 200% 100%; animation: ph-ref-shim 1.3s infinite; }
.ph-ref-row--skel .ph-ref-n { width: 28px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--ph-n-50) 25%, var(--ph-n-100) 50%, var(--ph-n-50) 75%); background-size: 200% 100%; animation: ph-ref-shim 1.3s infinite; }
@keyframes ph-ref-shim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.ph-ref-loadnote { display: flex; align-items: center; gap: 7px; padding: 8px 14px 12px; font-family: var(--ph-font-mono); font-size: 10.5px; color: var(--ph-n-500); }
.ph-ref-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ph-n-200); border-top-color: var(--ph-brand-orange-text); animation: ph-ref-spin-rot .7s linear infinite; flex-shrink: 0; }
@keyframes ph-ref-spin-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ph-ref-total-skel, .ph-ref-rail.loading .ph-ref-row .ph-ref-n::before, .ph-ref-row--skel .ph-ref-lb, .ph-ref-row--skel .ph-ref-n, .ph-ref-spin { animation: none; }
}

/* erro discreto de contagens (a tabela nunca é bloqueada) */
.ph-ref-erro { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; font-size: 12px; color: var(--ph-n-600); }
.ph-ref-erro svg { width: 16px; height: 16px; color: var(--ph-warn-500); }
.ph-ref-retry { background: transparent; border: 1px solid var(--ph-n-200); border-radius: var(--ph-radius-sm); padding: 3px 10px; font: 600 11.5px var(--ph-font-sans); color: var(--ph-brand-ink); cursor: pointer; }
.ph-ref-retry:hover { border-color: var(--ph-brand-orange-text); color: var(--ph-brand-orange-text); }

/* foco acessível (WCAG 2.1 AA) */
.ph-ref-rail-toggle:focus-visible, .ph-ref-acc-h:focus-visible, .ph-ref-row:focus-visible, .ph-ref-more:focus-visible, .ph-ref-retry:focus-visible, .ph-ref-clear-btn:focus-visible, .ph-ref-railmini button:focus-visible, .ph-ref-drawer-btn:focus-visible { outline: none; box-shadow: var(--ph-shadow-focus); }

/* pill removível do refinador na strip existente ("Espécie: PROCESSO" + X) */
.ph-ref-pill { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 6px 0 11px; background: var(--ph-orange-soft); border: 1px solid rgb(var(--ph-brand-orange-rgb) / .28); border-radius: var(--ph-radius-pill); font-size: 12px; color: var(--ph-brand-ink); max-width: 300px; }
.ph-ref-pill .ph-ref-pill-dim { font-family: var(--ph-font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ph-brand-orange-text); font-weight: 600; }
.ph-ref-pill .ph-ref-pill-val { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-ref-pill .ph-ref-pill-x { width: 18px; height: 18px; border: 0; border-radius: 50%; background: rgb(var(--ph-brand-orange-rgb) / .16); color: var(--ph-brand-orange-text); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.ph-ref-pill .ph-ref-pill-x:hover { background: var(--ph-brand-orange-text); color: var(--ph-n-0); }
.ph-ref-pill .ph-ref-pill-x svg { width: 9px; height: 9px; }
.ph-ref-pill .ph-ref-pill-x:focus-visible { outline: none; box-shadow: var(--ph-shadow-focus); }

/* botão "Refinar (n)" na strip + rodapé de aplicar do drawer (só telas estreitas) */
.ph-ref-drawer-btn { display: none; align-items: center; gap: 7px; }
.ph-ref-drawer-btn svg { width: 14px; height: 14px; }
.ph-ref-rail-apply { display: none; }
.ph-ref-scrim { position: fixed; inset: 0; background: var(--ph-scrim); z-index: 80; opacity: 0; pointer-events: none; transition: opacity .18s; }
.ph-ref-scrim.on { opacity: 1; pointer-events: auto; }

@media (max-width: 1100px) {
    .ph-ref-work, .ph-ref-work.railoff { grid-template-columns: 1fr; }
    .ph-ref-railmini { display: none !important; }
    .ph-ref-drawer-btn { display: inline-flex; }
    /* <1100px o rail vira bottom-sheet acionado por botão com contador — a tabela usa a largura toda. */
    .ph-ref-work.railoff .ph-ref-rail { display: block; }
    .ph-ref-rail { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 90; border-radius: var(--ph-radius-xl) var(--ph-radius-xl) 0 0; max-height: 82vh; overflow-y: auto; transform: translateY(102%); transition: transform .22s ease; box-shadow: var(--ph-shadow-3); }
    .ph-ref-rail.open { transform: translateY(0); }
    .ph-ref-rail-head { position: sticky; top: 0; z-index: 2; padding-top: 18px; box-shadow: 0 8px 10px -10px rgb(var(--ph-brand-ink-rgb) / .22); }
    .ph-ref-rail-apply { display: flex; position: sticky; bottom: 0; gap: 8px; padding: 10px 14px; background: var(--ph-n-0); border-top: 1px solid var(--ph-n-100); box-shadow: 0 -8px 10px -10px rgb(var(--ph-brand-ink-rgb) / .22); }
    .ph-ref-rail-apply button { flex: 1; justify-content: center; height: 40px; }
}
@media (min-width: 1101px) {
    .ph-ref-rail { transform: none !important; }
}

/* ===== Comentários (change comentarios-objeto-arquivo) =====
   Thread compartilhada (aba Comentários do objeto + diálogo de comentários do arquivo),
   anatomia 1:1 com o protótipo system-design/Object Detailv3.3.html (.comment/.comment-input).
   Primitivas ADITIVAS no global: o CSS isolation (.razor.css) não está plugado no app —
   o index.html não referencia SafeGed.styles.css (descoberta desta change, registrada). */
.ph-comment-form { display: flex; gap: 12px; padding: 4px 0 14px; border-bottom: 2px solid var(--ph-n-100); }
.ph-comment-form-ipt { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ph-comment-form-ipt .ph-textarea { width: 100%; box-sizing: border-box; }
.ph-comment-form-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ph-comment-count { font-family: var(--ph-font-mono); font-size: 11px; color: var(--ph-n-500); }
.ph-comment { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--ph-n-100); }
.ph-comment-list .ph-comment:last-child { border-bottom: 0; }
.ph-comment-body { flex: 1; min-width: 0; }
.ph-comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.ph-comment-author { font-size: 13px; font-weight: 600; color: var(--ph-brand-ink); }
.ph-comment-when { font-family: var(--ph-font-mono); font-size: 10.5px; color: var(--ph-n-500); }
.ph-comment-text { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ph-n-700); white-space: pre-wrap; overflow-wrap: anywhere; }
.ph-comment-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px; border: 1px solid var(--ph-err-200); background: var(--ph-err-50); border-radius: var(--ph-radius-md); font-size: 13px; color: var(--ph-err-700); margin-top: 12px; }
.ph-comment-skel { display: block; background: var(--ph-n-100); border-radius: 6px; animation: ph-comment-pulse 1.4s ease-in-out infinite; }
.ph-comment-skel--av { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.ph-comment-skel--line { height: 12px; margin: 5px 0; }
.ph-comment-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes ph-comment-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .ph-comment-skel { animation: none; } }

/* ===== Comentários v2 (change comentarios-v2) — respostas, menções e edição ===== */
.ph-comment--reply { margin-left: 40px; padding-top: 10px; }
.ph-comment-actions { margin-left: auto; display: flex; gap: 2px; align-items: center; }
.ph-comment-mention { color: var(--ph-brand-ink); background: var(--ph-info-50); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.ph-comment-mention--file { cursor: pointer; text-decoration: underline dotted; }
.ph-comment-mention--file:hover, .ph-comment-mention--file:focus-visible { background: var(--ph-info-200); }
.ph-comment-editbox { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ph-comment-mention-list { list-style: none; margin: 2px 0 0; padding: 4px; border: 1px solid var(--ph-n-200); border-radius: var(--ph-radius-md); background: var(--ph-n-0); box-shadow: var(--ph-shadow-2); max-height: 240px; overflow-y: auto; }
.ph-comment-mention-list button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; padding: 6px 8px; border-radius: 4px; font-size: 13px; cursor: pointer; text-align: left; color: var(--ph-n-700); }
.ph-comment-mention-list button:hover, .ph-comment-mention-list button:focus-visible { background: var(--ph-n-50); }
.ph-comment-mention-list .ph-comment-mention-tipo { margin-left: auto; font-family: var(--ph-font-mono); font-size: 10px; color: var(--ph-n-500); }
.ph-comment-confirm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--ph-err-700); background: var(--ph-err-50); border: 1px solid var(--ph-err-200); border-radius: var(--ph-radius-md); padding: 8px 12px; margin-top: 8px; }
.ph-comment-reply-form { margin: 8px 0 4px 40px; }

/* ==========================================================================
   Acessibilidade — skip-link e alvo de foco do conteúdo (change acessibilidade-remediacao)
   Visível SOMENTE ao receber foco por teclado (WCAG 2.4.1 / eMAG 1.5).
   ========================================================================== */

.ph-skip-link {
    background: var(--ph-brand-ink);
    border-radius: 0 0 8px 0;
    color: var(--ph-n-0);
    font-size: 13px;
    font-weight: 600;
    left: 0;
    padding: 10px 16px;
    position: fixed;
    top: -60px;
    transition: top .15s ease;
    z-index: 3000;
}

.ph-skip-link:focus,
.ph-skip-link:focus-visible {
    color: var(--ph-n-0);
    outline: 3px solid var(--ph-brand-orange);
    outline-offset: 2px;
    top: 0;
}

/* eMAG EP-2 — barra de acessibilidade: grupo de skip-links (conteúdo/menu/busca/acessibilidade).
   Fica acima da viewport e desliza para dentro quando QUALQUER link do grupo recebe foco
   (:focus-within), aparecendo como uma linha horizontal — cada link mantém o visual .ph-skip-link. */
.ph-skip-links {
    display: flex;
    gap: 8px;
    left: 0;
    padding: 8px;
    position: fixed;
    top: 0;
    transform: translateY(-120%);
    transition: transform .15s ease;
    z-index: 3000;
}

.ph-skip-links:focus-within {
    transform: translateY(0);
}

/* Dentro do grupo os links fluem lado a lado (posição estática) em vez de fixados no canto. */
.ph-skip-links .ph-skip-link {
    position: static;
    top: auto;
}

/* Alvo do skip-link/FocusOnNavigate: main é focável programaticamente, sem anel próprio. */
main#conteudo:focus {
    outline: none;
}

/* Alvos de foco programático dos skip-links/atalhos (navegação e busca): sem anel próprio. */
#navegacao:focus,
#busca:focus {
    outline: none;
}

/* Página de acessibilidade (eMAG EP-3 / 3.12) — listas de recursos, glossário e teclas. */
.ph-a11y-list {
    line-height: 1.6;
    margin: 0 0 16px;
    padding-left: 22px;
}

.ph-a11y-list li {
    margin-bottom: 6px;
}

.ph-glossario dt {
    color: var(--ph-brand-ink);
    font-weight: 600;
    margin-top: 12px;
}

.ph-glossario dd {
    color: var(--ph-n-600);
    margin: 2px 0 0;
    padding-left: 0;
}

/* No glossário a sigla já vem escrita por extenso ao lado — dispensa a pista pontilhada. */
.ph-glossario abbr[title] {
    cursor: default;
    font-family: var(--ph-font-mono);
    text-decoration: none;
}

/* eMAG 3.12/4.2 — siglas em texto corrido ganham uma pista NÃO cromática (sublinhado
   pontilhado + cursor de ajuda), independente de cor, sinalizando que há explicação no title. */
abbr[title] {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

kbd {
    background: var(--ph-n-50);
    border: 1px solid var(--ph-n-300);
    border-radius: var(--ph-radius-sm);
    box-shadow: inset 0 -1px 0 var(--ph-n-200);
    color: var(--ph-n-700);
    font-family: var(--ph-font-mono);
    font-size: .85em;
    padding: 1px 6px;
}

/* ==========================================================================
   Páginas de conteúdo/documentação (Acessibilidade, Sobre) — reapresentadas no
   padrão do produto: hero do DS + cards ph-*. Este bloco é ADITIVO e cobre só o
   texto corrido dentro dos cards e as métricas de conformidade. Escopo restrito
   a .ph-doc / .ph-doc-* (blast radius baixo — usado apenas por essas telas).
   Reusa tokens já validados; sem cor nova. Contraste sobre card branco (n-0):
   n-800 #26221C ≈ 15,8:1 (AAA) · n-700 #3A352D ≈ 11,3:1 (AAA) · ambos AA/AAA.
   ========================================================================== */
.ph-doc .ph-card-body {
    color: var(--ph-n-800);
}

.ph-doc .ph-card-body > p {
    line-height: 1.6;
    margin: 0 0 12px;
}

.ph-doc .ph-card-body > p:last-child {
    margin-bottom: 0;
}

/* Métricas do "Estado de conformidade": rótulo do padrão + chips ph-badge. */
.ph-doc-metrics {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 4px 0 16px;
}

.ph-doc-metric {
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-md);
    padding: 12px 14px;
}

.ph-doc-metric-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.ph-doc-metric-name {
    color: var(--ph-brand-ink);
    font-weight: 600;
}

.ph-doc-metric-desc {
    color: var(--ph-n-700);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

/* ===== Telas de autenticação (change refatorar-telas-autenticacao-ds) =====
   Shell split do modelo system-design/Login.html, DS nativo (reduz MudBlazor). Primitivas
   ADITIVAS no global (CSS isolation não plugado). Contrastes corrigidos p/ o gate axe
   (baseline vazio): texto pequeno do painel ≥85% branco; laranja só no headline grande;
   Caps Lock em --ph-brand-orange-text (5,31:1); foco BRANCO no chip do painel escuro. */
.ph-auth { min-height: 100vh; display: grid; background: var(--ph-n-25);
    grid-template-columns: minmax(400px, 1fr) minmax(520px, 1fr); }
.ph-auth[data-layout="centered"] { grid-template-columns: 1fr; }
.ph-auth[data-layout="centered"] .ph-auth-brand { display: none; }
.ph-auth[data-layout="centered"] .ph-auth-form { background: var(--ph-n-25); align-items: center; justify-content: center; }

.ph-auth-brand { position: relative; overflow: hidden; color: var(--ph-n-0); padding: 44px; display: flex; flex-direction: column;
    background: linear-gradient(120deg, var(--ph-brand-ink) 0%, var(--ph-brand-ink-2) 60%, var(--ph-brand-ink-3) 100%); }
.ph-auth-brand::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 95% 0%, rgb(var(--ph-brand-orange-rgb) / .22), transparent 42%), radial-gradient(circle at 0% 100%, rgb(var(--ph-brand-ink-3-rgb) / .55), transparent 55%); }
.ph-auth-brand > * { position: relative; z-index: 1; }
.ph-auth-brand-head { display: flex; align-items: center; gap: 10px; }
.ph-auth-brand-name { font-weight: 600; font-size: 18px; letter-spacing: -.01em; color: var(--ph-n-0); }
/* bloco de valor: ocupa o espaço entre a marca (topo) e os selos (base) e centraliza verticalmente */
.ph-auth-brand-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 32px 0; }
.ph-auth-eyebrow { font-family: var(--ph-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: rgb(var(--ph-n-0-rgb) / .85); margin: 0 0 12px; }
.ph-auth-headline { font-size: 32px; line-height: 1.12; letter-spacing: -.02em; font-weight: 600; color: var(--ph-n-0); margin: 0 0 16px; max-width: 16ch; text-wrap: balance; }
.ph-auth-headline em { font-style: normal; color: var(--ph-brand-orange-2); }
.ph-auth-lede { margin: 0; color: rgb(var(--ph-n-0-rgb) / .85); font-size: 15px; max-width: 48ch; }
.ph-auth-highlights { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.ph-auth-highlights li { display: flex; align-items: flex-start; gap: 11px; color: rgb(var(--ph-n-0-rgb) / .9); font-size: 14px; line-height: 1.4; max-width: 42ch; }
.ph-auth-highlights li svg { width: 18px; height: 18px; color: var(--ph-brand-orange-2); flex-shrink: 0; margin-top: 1px; }
/* métricas do painel (só quando LoginBranding.ShowMetrics + valores reais) — contraste AA no gradiente */
.ph-auth-metrics { display: flex; flex-wrap: wrap; gap: 22px; border-top: 1px solid rgb(var(--ph-n-0-rgb) / .12); padding-top: 18px; margin-top: 24px; }
.ph-auth-metric-label { font-family: var(--ph-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--ph-n-0-rgb) / .86); margin-bottom: 4px; }
.ph-auth-metric-value { font-size: 20px; font-weight: 600; color: var(--ph-n-0); line-height: 1.2; }
.ph-auth-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.ph-auth-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ph-font-mono); font-size: 10.5px; letter-spacing: .03em; padding: 5px 9px; border-radius: var(--ph-radius-pill); background: rgb(var(--ph-n-0-rgb) / .08); border: 1px solid rgb(var(--ph-n-0-rgb) / .16); color: rgb(var(--ph-n-0-rgb) / .92); }
.ph-auth-chip svg { width: 11px; height: 11px; color: var(--ph-ok-on-ink); flex-shrink: 0; }
button.ph-auth-chip { appearance: none; -webkit-appearance: none; cursor: pointer; }
.ph-auth-chip--link { text-decoration: none; color: var(--ph-n-0); background: rgb(var(--ph-brand-orange-2-rgb) / .18); border-color: rgb(var(--ph-brand-orange-2-rgb) / .6); }
.ph-auth-chip--link svg { color: var(--ph-brand-orange-on-ink); }
.ph-auth-chip--link:hover { background: rgb(var(--ph-brand-orange-2-rgb) / .28); text-decoration: underline; text-underline-offset: 3px; }
.ph-auth-chip--link:focus-visible { outline: 2px solid var(--ph-n-0); outline-offset: 2px; }

.ph-auth-form { background: var(--ph-n-0); padding: 40px 48px; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; }
.ph-auth-card { width: 100%; max-width: 440px; margin: 0 auto; }
.ph-auth-cardbrand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 30px; }
.ph-auth-cardbrand--client { flex-direction: column; gap: 7px; }
.ph-auth-logo { height: clamp(72px, 8vw, 96px); width: auto; max-width: 300px; }
.ph-auth-powered { font-size: 11px; color: var(--ph-n-500); }
.ph-auth-powered b { color: var(--ph-brand-ink); font-weight: 600; }
.ph-auth-client-plate { display: inline-flex; align-items: center; gap: 10px; background: var(--ph-n-0); border: 1px solid var(--ph-n-200); border-radius: 8px; padding: 8px 16px 8px 10px; }
.ph-auth-client-plate img { height: 32px; width: auto; max-width: 170px; }
.ph-auth-client-name { font-size: 14px; font-weight: 600; color: var(--ph-brand-ink); }
.ph-auth-title { margin: 0 0 6px; font-size: 25px; font-weight: 600; letter-spacing: -.015em; color: var(--ph-brand-ink); line-height: 1.15; }
.ph-auth-sub { margin: 0 0 22px; color: var(--ph-n-600); font-size: 14px; }

.ph-auth-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ph-auth-flabel { font-size: 12px; font-weight: 600; color: var(--ph-n-600); display: flex; align-items: center; gap: 5px; }
.ph-auth-flabel .req { color: var(--ph-brand-orange-text); font-weight: 700; }
.ph-auth-input-wrap { position: relative; display: flex; align-items: center; }
.ph-auth-input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--ph-n-200); border-radius: var(--ph-radius-md); background: var(--ph-n-25); color: var(--ph-n-800); font-family: var(--ph-font-sans); font-size: 14px; }
.ph-auth-input.mono { font-family: var(--ph-font-mono); font-size: 13.5px; }
/* Placeholder e texto e conta para o 1.4.3: n-400 sobre o n-25 do campo dava 2,86:1,
   nos campos de login/2FA/recuperar senha. n-500 passa (auditoria de DS, 06/09/2026). */
.ph-auth-input::placeholder { color: var(--ph-n-500); }
.ph-auth-input:hover { border-color: var(--ph-n-300); }
.ph-auth-input:focus { outline: none; border-color: var(--ph-brand-orange); box-shadow: 0 0 0 3px rgb(var(--ph-brand-orange-rgb) / .18); }
.ph-auth-input.has-lead { padding-left: 40px; }
.ph-auth-input.has-trail { padding-right: 44px; }
.ph-auth-input[aria-invalid="true"] { border-color: var(--ph-err-500); box-shadow: 0 0 0 3px rgb(var(--ph-err-500-rgb) / .14); }
.ph-auth-lead-ic { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--ph-n-400); pointer-events: none; }
.ph-auth-eye { position: absolute; right: 6px; width: 32px; height: 32px; border: 0; background: transparent; border-radius: var(--ph-radius-sm); color: var(--ph-n-500); cursor: pointer; display: grid; place-items: center; }
.ph-auth-eye:hover { background: var(--ph-n-25); color: var(--ph-brand-ink); }
.ph-auth-eye svg { width: 16px; height: 16px; }
.ph-auth-caps-region { }
.ph-auth-caps { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ph-font-mono); font-size: 11px; color: var(--ph-brand-orange-text); margin-top: 4px; }
.ph-auth-caps svg { width: 12px; height: 12px; }
/* Texto de ajuda do campo (o HelperText que o MudTextField dava de graca). Criado para o antigo
   /cadastro-externo (item 5.1, 08/09/2026; removido no T13) e hoje usado na ativacao de conta do convite
   (/compartilhado/convite), em Senha e CPF. Fica um degrau ABAIXO
   do .ph-auth-fielderr em tamanho e no tom neutro, para nao competir com a mensagem de erro:
   ajuda e permanente, erro e excecao. Nao reusa .ph-help-txt do DS porque aquela traz
   margin-bottom 14px, pensada para formulario de configuracao, e aqui empurraria o campo. */
.ph-auth-help { font-size: 11.5px; color: var(--ph-n-500); margin: 3px 0 0; }

.ph-auth-fielderr { font-size: 12px; color: var(--ph-err-700); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.ph-auth-fielderr svg { width: 12px; height: 12px; flex-shrink: 0; }

.ph-auth-row { display: flex; align-items: center; justify-content: flex-end; margin: 6px 0 18px; }
.ph-auth-link { color: var(--ph-info-500); font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.ph-auth-link:hover { color: var(--ph-brand-ink); }

/* Botões nativos das telas de auth (reduz MudBlazor). Loading IN-BUTTON com aria-disabled/aria-busy —
   o botão fica no mesmo nó do DOM (foco preservado, sem salto de layout). change auth-load-botao. */
.ph-auth-btn { align-items: center; border: 1px solid transparent; border-radius: var(--ph-radius-md); cursor: pointer; display: inline-flex; font-family: var(--ph-font-sans); font-size: 14px; font-weight: 600; gap: 8px; height: 44px; justify-content: center; padding: 0 20px; text-decoration: none; transition: background .12s, border-color .12s, color .12s; width: 100%; }
.ph-auth-btn svg { height: 16px; width: 16px; }
.ph-auth-btn--primary { background: var(--ph-brand-ink); color: var(--ph-n-0); }
.ph-auth-btn--primary:hover { background: var(--ph-brand-ink-2); }
.ph-auth-btn--secondary { background: var(--ph-n-0); border-color: var(--ph-n-200); color: var(--ph-brand-ink); font-weight: 500; margin-top: 10px; }
.ph-auth-btn--secondary:hover { background: var(--ph-n-25); border-color: var(--ph-n-300); }
.ph-auth-btn[aria-disabled="true"] { cursor: progress; }
.ph-auth-spin { animation: ph-auth-spin .7s linear infinite; border: 2px solid rgb(var(--ph-n-0-rgb) / .45); border-radius: 50%; border-top-color: var(--ph-n-0); flex-shrink: 0; height: 16px; width: 16px; }
@keyframes ph-auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ph-auth-spin { animation: none; } }
/* bloqueio dos campos durante o envio: SEM opacity (opacity em texto reprova contraste no axe) —
   o cue visual é o botão em loading; os campos só ficam não-interativos. */
.ph-auth-form-busy { cursor: progress; }
.ph-auth-form-busy .ph-auth-field, .ph-auth-form-busy .ph-auth-row { pointer-events: none; }
.ph-auth-form-busy .ph-auth-input { background: var(--ph-n-50); }

.ph-auth-alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 16px; background: var(--ph-err-50); border: 1px solid var(--ph-err-200); border-left: 3px solid var(--ph-err-500); border-radius: var(--ph-radius-md); }
.ph-auth-alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--ph-err-500); }
.ph-auth-alert b { display: block; color: var(--ph-err-700); font-weight: 600; font-size: 13px; margin-bottom: 1px; }
.ph-auth-alert span { color: var(--ph-n-700); font-size: 12.5px; }
.ph-auth-alert--warn { background: var(--ph-warn-50); border-color: var(--ph-warn-200); border-left-color: var(--ph-warn-500); }
.ph-auth-alert--warn svg, .ph-auth-alert--warn b { color: var(--ph-warn-700); }

.ph-auth-note { padding: 15px 16px; border-radius: var(--ph-radius-md); background: var(--ph-n-25); border: 1px solid var(--ph-n-100); border-left: 3px solid var(--ph-ok-500); }
.ph-auth-note--warn { border-left-color: var(--ph-warn-500); }
.ph-auth-note h2 { margin: 0 0 5px; font-size: 16px; color: var(--ph-brand-ink); }
.ph-auth-note p { margin: 0; font-size: 13px; color: var(--ph-n-600); line-height: 1.5; }

.ph-auth-policy { list-style: none; margin: 0 0 16px; padding: 11px 13px; background: var(--ph-n-25); border: 1px solid var(--ph-n-100); border-radius: var(--ph-radius-md); font-size: 12.5px; }
.ph-auth-policy li { display: flex; align-items: center; gap: 8px; color: var(--ph-n-600); padding: 2px 0; }
.ph-auth-policy li svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--ph-n-400); }
.ph-auth-policy li.ok { color: var(--ph-ok-700); }
.ph-auth-policy li.ok svg { color: var(--ph-ok-500); }

.ph-auth-foot { margin-top: auto; padding-top: 26px; font-size: 12px; color: var(--ph-n-500); display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ph-auth-foot-copy { line-height: 1.55; }
.ph-auth-foot .build { font-family: var(--ph-font-mono); font-size: 11px; color: var(--ph-n-500); }
.ph-auth-foot .build .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ph-ok-500); display: inline-block; margin-right: 6px; vertical-align: 1px; }
/* link de acessibilidade do rodapé (botão que abre a popup) */
.ph-auth-footlink { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; line-height: inherit; vertical-align: baseline; color: var(--ph-info-500); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ph-auth-footlink:hover { color: var(--ph-brand-ink); }

/* conteúdo da popup de acessibilidade */
.ph-a11y-dlg-lead { margin: 0 0 4px; font-size: 13.5px; color: var(--ph-n-700); line-height: 1.55; }
.ph-a11y-dlg-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
.ph-a11y-dlg-h { margin: 16px 0 8px; font-size: 14px; color: var(--ph-brand-ink); }
.ph-a11y-dlg-list { margin: 0 0 16px; padding-left: 18px; font-size: 13px; color: var(--ph-n-700); line-height: 1.6; }
.ph-a11y-dlg-list li { margin-bottom: 4px; }
.ph-a11y-dlg kbd { font-family: var(--ph-font-mono); font-size: 11px; background: var(--ph-n-50); border: 1px solid var(--ph-n-200); border-radius: 4px; padding: 1px 5px; color: var(--ph-n-800); }

@media (max-width: 1024px) {
    .ph-auth { grid-template-columns: 1fr; min-height: 100vh; }
    .ph-auth-brand { display: none; }
    .ph-auth-form { background: var(--ph-n-25); align-items: center; justify-content: center; }
    .ph-auth-card { background: var(--ph-n-0); border: 1px solid var(--ph-n-100); border-radius: var(--ph-radius-xl); box-shadow: var(--ph-shadow-3); padding: 32px 28px 24px; }
}
@media (max-width: 480px) {
    .ph-auth-form { padding: 20px 16px; }
}

/* ============================================================================
   Aba "Histórico" do objeto (trilha de auditoria) — change objeto-eventos-historico.
   Timeline híbrida (evento legível + detalhe técnico + selo de integridade), filtro de
   escopo Objeto/Arquivo/Tudo. Reusa .ph-card/.ph-button-* e os tokens --ph-*. CSS global
   (isolation não plugado no SafeGed); namespace .ph-hist-*.
   ============================================================================ */
.ph-hist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ph-hist-head-main { display: flex; gap: 12px; min-width: 260px; flex: 1 1 300px; }
.ph-hist-badge { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--ph-radius-sm, 4px); background: var(--ph-orange-soft); color: var(--ph-brand-orange-text); display: grid; place-items: center; }
.ph-hist-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ph-hist-seal { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ph-font-mono); font-size: 11px; font-weight: 600; color: var(--ph-ok-700); background: var(--ph-ok-50); border: 1px solid var(--ph-ok-200); padding: 4px 9px; border-radius: var(--ph-radius-pill, 999px); }

/* Toolbar de filtros */
.ph-hist-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--ph-n-100); }
.ph-hist-scope { display: inline-flex; background: var(--ph-n-0); border: 1px solid var(--ph-n-200); border-radius: var(--ph-radius-md, 6px); padding: 2px; gap: 2px; }
.ph-hist-seg { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; background: transparent; border-radius: var(--ph-radius-sm, 4px); font-family: var(--ph-font-sans); font-size: 12.5px; font-weight: 500; color: var(--ph-n-600); cursor: pointer; }
.ph-hist-seg:hover { color: var(--ph-brand-ink); }
.ph-hist-seg--on { background: var(--ph-orange-soft); color: var(--ph-brand-orange-text); font-weight: 600; }
.ph-hist-field { display: inline-flex; align-items: center; gap: 8px; }
.ph-hist-field-label { font-size: 11px; font-weight: 600; color: var(--ph-n-500); text-transform: uppercase; letter-spacing: .05em; }
.ph-hist-select { height: 34px; padding: 0 10px; border: 1px solid var(--ph-n-200); border-radius: var(--ph-radius-md, 6px); background: var(--ph-n-0); font-family: var(--ph-font-sans); font-size: 12.5px; color: var(--ph-n-800); }
.ph-hist-field--search { flex: 1; min-width: 200px; max-width: 340px; }
.ph-hist-search { display: flex; align-items: center; gap: 7px; flex: 1; height: 34px; padding: 0 11px; border: 1px solid var(--ph-n-200); border-radius: var(--ph-radius-md, 6px); background: var(--ph-n-0); color: var(--ph-n-400); }
.ph-hist-search-input { border: 0; outline: 0; flex: 1; width: 100%; background: transparent; font-family: var(--ph-font-sans); font-size: 12.5px; color: var(--ph-n-800); }

/* Estados */
.ph-hist-state { display: flex; align-items: center; gap: 10px; padding: 22px 4px; color: var(--ph-n-600); font-size: 13px; }
.ph-hist-state--erro { color: var(--ph-err-700); }
.ph-hist-state--vazio { color: var(--ph-n-500); }

/* Timeline */
.ph-hist-tl { position: relative; list-style: none; margin: 18px 0 0; padding: 0 0 0 30px; }
.ph-hist-tl::before { content: ""; position: absolute; top: 6px; bottom: 14px; left: 9px; width: 2px; background: var(--ph-n-100); border-radius: 1px; }
.ph-hist-item { position: relative; padding: 0 0 20px; }
.ph-hist-item::before { content: ""; position: absolute; left: -29px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--ph-n-0); border: 2px solid var(--ph-n-300); z-index: 1; }
.ph-hist-item--ok::before { border-color: var(--ph-ok-500); background: var(--ph-ok-500); }
.ph-hist-item--warn::before { border-color: var(--ph-warn-500); background: var(--ph-warn-500); }
.ph-hist-item--info::before { border-color: var(--ph-info-500); background: var(--ph-info-500); }
.ph-hist-item--danger::before { border-color: var(--ph-err-500); background: var(--ph-err-500); }
.ph-hist-item--neutral::before { border-color: var(--ph-n-300); background: var(--ph-n-0); }

.ph-hist-when { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--ph-font-mono); font-size: 11px; color: var(--ph-n-500); margin-bottom: 3px; }
.ph-hist-scopetag { font-family: var(--ph-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 1px 7px; border-radius: var(--ph-radius-pill, 999px); border: 1px solid; }
.ph-hist-scopetag--obj { color: var(--ph-info-700); background: var(--ph-info-50); border-color: var(--ph-info-200); }
.ph-hist-scopetag--arq { color: var(--ph-brand-orange-text-2); background: var(--ph-orange-soft); border-color: var(--ph-brand-orange-2); }
.ph-hist-what { display: flex; align-items: flex-start; gap: 7px; font-size: 13.5px; color: var(--ph-brand-ink); font-weight: 600; line-height: 1.4; }
.ph-hist-what-ico { color: var(--ph-brand-orange-text); flex-shrink: 0; margin-top: 1px; }
.ph-hist-by { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ph-n-600); margin-top: 5px; }
.ph-hist-avatar { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-family: var(--ph-font-mono); font-size: 9px; font-weight: 700; color: var(--ph-n-0); background: var(--ph-brand-ink-3); flex-shrink: 0; }
.ph-hist-agente { color: var(--ph-n-700); font-weight: 500; }
.ph-hist-sep { color: var(--ph-n-300); }
.ph-hist-via { display: inline-flex; align-items: center; gap: 5px; color: var(--ph-n-500); }
/* n-400 (#9B9588) sobre n-0 dava 2,98:1 e reprovava WCAG 1.4.3 num identificador
   forense de 10,5px; n-500 da 4,93:1 (auditoria de DS, 06/09/2026). */
.ph-hist-trace { font-family: var(--ph-font-mono); font-size: 10.5px; color: var(--ph-n-500); }

/* Disclosure de detalhe técnico */
.ph-hist-disclose { margin-top: 8px; }
.ph-hist-disclose-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 1px solid var(--ph-n-200); background: var(--ph-n-0); border-radius: var(--ph-radius-pill, 999px); font-family: var(--ph-font-sans); font-size: 11.5px; font-weight: 600; color: var(--ph-n-600); cursor: pointer; }
.ph-hist-disclose-btn:hover { border-color: var(--ph-n-300); color: var(--ph-brand-ink); }
.ph-hist-detail { margin-top: 10px; border: 1px solid var(--ph-n-100); border-radius: var(--ph-radius-md, 6px); background: var(--ph-n-25); overflow: hidden; }
.ph-hist-detail-head { padding: 8px 12px; border-bottom: 1px solid var(--ph-n-100); font-family: var(--ph-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ph-n-500); }
.ph-hist-diff { width: 100%; border-collapse: collapse; font-size: 12px; }
.ph-hist-diff th { text-align: left; font-family: var(--ph-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ph-n-500); padding: 7px 12px; border-bottom: 1px solid var(--ph-n-100); background: var(--ph-n-50); }
.ph-hist-diff td { padding: 8px 12px; border-bottom: 1px solid var(--ph-n-100); vertical-align: top; color: var(--ph-n-700); }
.ph-hist-diff tr:last-child td { border-bottom: 0; }
.ph-hist-diff-campo { font-weight: 600; color: var(--ph-brand-ink); width: 26%; }
.ph-hist-diff-antes { color: var(--ph-err-700); background: var(--ph-err-50); font-family: var(--ph-font-mono); font-size: 11px; word-break: break-word; }
.ph-hist-diff-depois { color: var(--ph-ok-700); background: var(--ph-ok-50); font-family: var(--ph-font-mono); font-size: 11px; word-break: break-word; }
.ph-hist-mask-note { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; font-size: 11.5px; color: var(--ph-warn-700); background: var(--ph-warn-50); border-top: 1px solid var(--ph-n-100); }
.ph-hist-hashline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-top: 1px solid var(--ph-n-100); background: var(--ph-n-0); }
.ph-hist-hk { font-family: var(--ph-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ph-n-500); }
.ph-hist-hv { font-family: var(--ph-font-mono); font-size: 10.5px; color: var(--ph-n-600); word-break: break-all; }
.ph-hist-integridade { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-family: var(--ph-font-mono); font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--ph-radius-pill, 999px); border: 1px solid; }
.ph-hist-integridade--ok { color: var(--ph-ok-700); background: var(--ph-ok-50); border-color: var(--ph-ok-200); }
.ph-hist-integridade--bad { color: var(--ph-err-700); background: var(--ph-err-50); border-color: var(--ph-err-200); }

/* Rodapé de paginação */
.ph-hist-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--ph-n-100); }
.ph-hist-count { font-size: 12px; color: var(--ph-n-500); }
.ph-hist-count strong { color: var(--ph-brand-ink); font-weight: 600; }

/* ---- Aba Eventos: nota de marco ---- */
.ph-hist-marco-note { display: flex; gap: 9px; align-items: center; font-size: 12px; color: var(--ph-info-700); background: var(--ph-info-50); border: 1px solid var(--ph-info-200); border-radius: var(--ph-radius-md, 6px); padding: 9px 12px; margin: 0 0 18px; }
.ph-hist-marco-note .mud-icon-root { width: 15px; height: 15px; font-size: 15px; flex-shrink: 0; }

/* ---- Aba Histórico: GRID (modelo DS Object Detailv3.3 · table.t) ---- */
.ph-hist-grid-wrap { overflow-x: auto; }
.ph-hist-grid { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 760px; }
.ph-hist-grid thead th { background: var(--ph-n-25); text-align: left; font-family: var(--ph-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ph-n-500); padding: 10px 16px; border-bottom: 1px solid var(--ph-n-100); white-space: nowrap; }
.ph-hist-grid tbody td { padding: 10px 16px; border-bottom: 1px solid var(--ph-n-100); color: var(--ph-n-700); vertical-align: middle; }
.ph-hist-grid tbody tr:last-child td { border-bottom: 0; }
.ph-hist-grid-row { cursor: pointer; }
.ph-hist-grid-row:hover { background: var(--ph-n-25); }
.ph-hist-grid-when { font-family: var(--ph-font-mono); font-size: 11px; color: var(--ph-n-600); white-space: nowrap; }
.ph-hist-tipo { color: var(--ph-n-700); font-size: 12.5px; white-space: nowrap; }
.ph-hist-recurso { color: var(--ph-n-700); font-size: 12.5px; }
.ph-hist-det-req-state { display: flex; align-items: center; gap: 8px; color: var(--ph-n-600); font-size: 13px; padding: 4px 0; }
.ph-hist-det-req-vazio { color: var(--ph-n-600); font-size: 13px; font-style: italic; margin: 2px 0 0; }
.ph-hist-grid-act { width: 1%; white-space: nowrap; text-align: right; }
/* Ícones pequenos e condizentes na grid (feedback do dono) */
.ph-hist-grid .mud-icon-root { width: 14px; height: 14px; font-size: 14px; }
.ph-hist-trilha .mud-icon-root, .ph-hist-integ .mud-icon-root { width: 12px; height: 12px; font-size: 12px; }

.ph-hist-trilha { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ph-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--ph-radius-pill, 999px); border: 1px solid; white-space: nowrap; }
.ph-hist-trilha--ev { color: var(--ph-info-700); background: var(--ph-info-50); border-color: var(--ph-info-200); }
.ph-hist-trilha--alt { color: var(--ph-warn-700); background: var(--ph-warn-50); border-color: var(--ph-warn-200); }
.ph-hist-trilha--req { color: var(--ph-n-600); background: var(--ph-n-50); border-color: var(--ph-n-200); }

.ph-hist-sevdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; background: var(--ph-n-300); }
.ph-hist-sevdot--ok { background: var(--ph-ok-500); } .ph-hist-sevdot--info { background: var(--ph-info-500); }
.ph-hist-sevdot--warn { background: var(--ph-warn-500); } .ph-hist-sevdot--danger { background: var(--ph-err-500); }
.ph-hist-sevdot--neutral { background: var(--ph-n-300); }

.ph-hist-gridagente { display: inline-flex; align-items: center; gap: 7px; }
.ph-hist-avatar--sm { width: 18px; height: 18px; font-size: 8px; }
.ph-hist-integ { display: inline-flex; align-items: center; gap: 4px; font-family: var(--ph-font-mono); font-size: 10px; font-weight: 600; color: var(--ph-ok-700); white-space: nowrap; }
.ph-hist-integ--bad { color: var(--ph-err-700); }
.ph-hist-detbtn { color: var(--ph-n-500); }
.ph-hist-detbtn:hover { color: var(--ph-brand-ink); }

/* ---- Popup: detalhe forense da entrada (HistoricoDetalheDialog) ---- */
.ph-hist-det-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 15px; font-weight: 600; color: var(--ph-brand-ink); }
.ph-hist-det-acao { font-weight: 600; }
.ph-hist-det-when { font-family: var(--ph-font-mono); font-size: 11px; color: var(--ph-n-500); margin-top: 3px; }
.ph-hist-det { display: flex; flex-direction: column; gap: 4px; }
.ph-hist-det-sec { margin-top: 12px; }
.ph-hist-det-h { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--ph-n-100); font-family: var(--ph-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ph-n-500); }
.ph-hist-det-h .mud-icon-root { width: 13px; height: 13px; font-size: 13px; color: var(--ph-n-400); }
.ph-hist-det-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 22px; }
.ph-hist-det-kv .row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--ph-n-100); font-size: 12.5px; }
.ph-hist-det-kv .k { color: var(--ph-n-500); }
.ph-hist-det-kv .v { color: var(--ph-brand-ink); font-weight: 600; text-align: right; font-family: var(--ph-font-mono); font-size: 11.5px; word-break: break-all; }
.ph-hist-det-integ { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-family: var(--ph-font-mono); font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: var(--ph-radius-pill, 999px); border: 1px solid; }
.ph-hist-det-integ .mud-icon-root { width: 13px; height: 13px; font-size: 13px; }
.ph-hist-det-integ--ok { color: var(--ph-ok-700); background: var(--ph-ok-50); border-color: var(--ph-ok-200); }
.ph-hist-det-integ--bad { color: var(--ph-err-700); background: var(--ph-err-50); border-color: var(--ph-err-200); }

/* ============================================================
   Auditoria global (change auditoria-consulta-global) — páginas
   /auditoria e /configuracoes/auditoria-sistema. Só ADIÇÕES:
   reusa .ph-search-page/.ph-search-hero/.ph-card/.ph-hist-*;
   nada existente muda (as páginas seguem o padrão de largura
   total das telas CRUD — sem container próprio com max-width).
   ============================================================ */

/* Nome do repositório junto ao recurso na grid da trilha global. */
.ph-hist-recurso-repo {
    color: var(--ph-n-500);
    font-size: 11px;
}

/* Revisão de DS (06/09) — foco visível do campo de busca (WCAG 2.4.7): .ph-hist-search-input tem
   outline: 0 sem substituto (dívida herdada da aba Histórico), então o anel vai no wrapper. */
.ph-hist-search:focus-within {
    box-shadow: var(--ph-shadow-focus);
    border-color: var(--ph-brand-orange);
}

/* Revisão de DS (06/09) — nas linhas de Requisição, Recurso e Ação repetem a rota inteira e empurravam
   Agente/Integridade/Detalhe para fora da viewport em 1280px. Teto de largura + quebra, ESCOPADOS em
   .ph-hist--global: a aba Histórico do objeto reusa as mesmas classes e não muda. */
.ph-hist--global .ph-hist-recurso,
.ph-hist--global .ph-hist-acao {
    max-width: 260px;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Revisão de DS (06/09) — respiro da barra de filtros alinhado ao do corpo do card (padding 16px). */
.ph-hist--global .ph-hist-toolbar {
    padding-left: 16px;
    padding-right: 16px;
}

/* Revisão de DS (06/09) — reflow em 320px: os 4 segmentos de fonte (Todas/Eventos/Alterações/
   Requisições) não cabem numa linha e .ph-hist-scope não quebra por padrão. */
@media (max-width: 640px) {
    .ph-hist--global .ph-hist-scope {
        flex-wrap: wrap;
    }
}

/* Gate axe (06/09) — scrollable-region-focusable (serious, WCAG 2.1.1): o .mud-dialog-content do popup
   forense rolava sem ser alcançável pelo teclado. A rolagem passa para o .ph-hist-det, que é focável
   (tabindex=0 + role=region + aria-label no Razor); o contêiner do MudDialog deixa de rolar por cima. */
.ph-hist-det-dialog-content {
    overflow: visible;
}

.ph-hist-det--scroll {
    max-height: min(62vh, 640px);
    overflow: auto;
    padding-right: 4px;
}

.ph-hist-det--scroll:focus-visible {
    outline: 0;
    box-shadow: var(--ph-shadow-focus);
    border-radius: var(--ph-radius-md);
}

/* Achado A1 / decisão D24 — aviso de recorte da fonte "Requisições" no topo do corpo do card. Reusa a
   primitiva .ph-alert-note--info (a mesma das páginas /auditoria e /configuracoes/auditoria-sistema);
   ela só tem margin-top, então o respiro até a grid/estado vazio vem daqui — ESCOPADO em
   .ph-hist--global, sem tocar em nenhuma regra existente. */
.ph-hist--global .ph-hist-recorte-note {
    margin-bottom: 14px;
}

/* ============================================================================================
   UTILITARIO HERDADO — .fw-bold

   Recolhida do <style> de Pages/Dashboard.razor (item 9.6 da auditoria de DS, 07/09/2026).
   A Dashboard DECLARAVA esta classe e nao a usava em lugar nenhum do proprio markup; quem
   usa sao cinco outras telas, que nunca a declararam:
     Admin/AssistentesPadrao.razor:73 · Admin/CategoriasIa.razor:71
     Admin/MotorGerenciado.razor:86  · Admin/ProvedoresHabilitados.razor:72
     (o visualizador de objeto do compartilhamento antigo tambem usava; removido no T13, 27/09/2026)

   Como o <style> de um componente Blazor sai do DOM junto com o componente, e a Dashboard
   nunca esta montada com nenhuma dessas telas, o negrito NUNCA era aplicado: os nomes
   apareciam em peso normal e, no visualizador, a especie escolhida ficava sem destaque.
   Nem o MudBlazor 9.5.0 nem o Syncfusion definem .fw-bold — nao havia rede de seguranca.

   O nome NAO segue o padrao .ph-*: e um resquicio de Bootstrap. Fica como esta de proposito —
   renomear exigiria mexer no C# das telas que a usam,
   o que e mudanca de comportamento, fora do escopo desta tarefa. O !important e mantido
   verbatim: e o que vencia a tipografia do MudBlazor, e a ordem e nao mudar o layout.
   ============================================================================================ */
.fw-bold {
    font-weight: 600 !important;
}

/* ============================================================================================
   TOPBAR — recolhida dos <style> de UsuarioInternoLayout.razor e UsuarioExternoLayout.razor,
   onde estava DUPLICADA quase byte a byte (item 9.6, 07/09/2026).

   Por que aqui e nao num .razor.css de cada layout: o CSS escopado marca com [b-xxxxxxxxxx] os
   elementos que o componente emite, e ::deep depende de haver um ANCESTRAL marcado. Num LAYOUT
   o <MudAppBar> e emitido pela lib e nao ha markup proprio acima dele — nao existe ancestral com
   a marca. Tentar escopar aqui derrubou 538 propriedades em 22 telas (a topbar perdeu o fundo
   branco, o texto navy e os espacadores automaticos), medido pela suite 91.

   O !important NAO e supersticao: o MudAppBar e declarado com Color="Color.Transparent" e o
   MudBlazor 9.5.0 emite .mud-theme-transparent { background-color: rgba(0,0,0,0) !important }.
   Sem estes dois !important a topbar fica TRANSPARENTE — e o gate axe nao acusa, porque nao
   calcula contraste sobre fundo transparente.
   ============================================================================================ */
.mud-appbar.ph-topbar {
    background-color: var(--ph-n-0) !important;
    color: var(--ph-brand-ink) !important;
    border-bottom: 1px solid var(--ph-n-100);
    height: 64px;
}

.mud-appbar.ph-topbar .mud-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 16px;
    padding: 0 20px;
}

.mud-appbar.ph-topbar .mud-icon-root {
    color: inherit;
}

/* Grupo da esquerda — empurrado para a esquerda; actions usa margin-left auto */
.mud-appbar.ph-topbar .ph-topbar-left {
    margin-right: auto;
}

.mud-appbar.ph-topbar .ph-topbar-actions {
    margin-left: auto;
}

/* Hover/foco do MudToggleIconButton herda a cor do topbar */
.mud-appbar.ph-topbar .ph-topbar-icon-btn .mud-icon-button-label .mud-icon-root {
    color: inherit;
}

/* Botao de contexto (pill duplo) — herda font do topbar e usa borda do DS.
   Vinha so do layout interno, mas a classe e do DS: fica aqui, com os demais. */
.ph-topbar-ctx {
    border: 1px solid var(--ph-n-100);
    font: inherit;
}

/* ============================================================================================
   REGRAS QUE VESTEM MARKUP DO MUDBLAZOR — recolhidas dos 17 {Tela}.razor.css (item 9.6,
   correcao de 07/09/2026 apos reprovacao na revisao).

   Elas MORAM AQUI, e nao no .razor.css de cada tela, por um motivo tecnico e nao estetico.
   O CSS escopado marca com [b-xxxxxxxxxx] apenas os elementos que o componente emite. Uma classe
   posta via Class= num componente MudBlazor cai em markup que a LIB emite, sem a marca, entao a
   regra precisa de ::deep — que o compilador transforma em "[b-xxx] .alvo", exigindo um
   ANCESTRAL marcado. Em dialogo esse ancestral NAO EXISTE: o conteudo renderiza no
   MudDialogProvider, fora da arvore do componente. Treze regras ficaram mortas assim, entre elas
   o vermelho do botao "Desativar 2FA" e o azul da nota informativa dos certificados.

   No <style> original todas eram GLOBAIS (valiam enquanto a tela estivesse montada). Aqui elas
   voltam a ser globais: mesmo alcance de antes, que e a ordem do dono — o layout nao muda.
   Efeito colateral bem-vindo: o ::deep, e toda a sua sutileza, some do projeto.
   ============================================================================================ */

/* ----- de Pages/Cliente/SelecaoCliente.razor.css ----- */
.ph-repo-card {
    background: var(--ph-n-0);
    border: 1px solid var(--ph-n-100);
    border-radius: var(--ph-radius-lg);
    box-shadow: var(--ph-shadow-1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow .15s, border-color .15s, transform .15s;
}

.ph-repo-card:hover {
    border-color: var(--ph-n-200);
    box-shadow: var(--ph-shadow-2);
    outline: 0;
    transform: translateY(-1px);
}

/* Foco SEPARADO do hover (auditoria de DS, 06/09/2026): o cartao e focavel por teclado
   (tabindex=0) e as duas regras juntas deixavam o foco indistinguivel do passar do mouse
   — n-100 -> n-200 da 1,17:1, longe dos 3:1 exigidos. Mesmo tratamento do
   .ph-object-card:focus-visible do DS: borda no laranja de texto, que passa. */
.ph-repo-card:focus-visible {
    border-color: var(--ph-brand-orange-text);
    box-shadow: var(--ph-shadow-2);
    outline: 0;
    transform: translateY(-1px);
}

.ph-repo-card:hover .ph-repo-access,
.ph-repo-card:focus-visible .ph-repo-access {
    /* WCAG 1.4.3: texto branco. brand-orange dava 4,17:1; orange-text passa (5,31:1). */
    background: var(--ph-brand-orange-text);
}

/* Seções do MudCard ajustadas ao design system */
.ph-repo-card .mud-card-header {
    align-items: flex-start;
    gap: 10px;
    padding: 20px 20px 0;
}

.ph-repo-card .mud-card-header-avatar {
    margin: 0;
}

.ph-repo-card .mud-card-header-actions {
    align-self: flex-start;
    margin: 0;
    padding: 0;
}

.ph-repo-card .mud-card-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    padding: 12px 20px 0;
}

.ph-repo-card .mud-card-header-content {
    flex: 1;
    min-width: 0;
}

.ph-repo-card-actions {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    /* O padding: 16px 20px 20px que estava aqui foi REMOVIDO, e nao por engano.
       Ele nunca chegou a pintar: o MudBlazor declara .mud-card-actions.mud-card-actions-padding
       { padding: 8px }, que e 0,2,0 e vencia esta regra quando ela era 0,1,0 dentro de um <style>.
       Ao virar CSS escopado a regra passou a ser [b-...] .ph-repo-card-actions — tambem 0,2,0 —
       e ganharia por ordem, ressuscitando um valor que o produto NUNCA exibiu: o cartao cresceria
       20px (medido pela suite 91). A ordem do dono e nao mudar o layout, entao o efetivo de hoje
       (8px, do MudBlazor) fica.
       Se o 16/20/20 era a intencao do autor, isso e uma DECISAO de design a tomar a parte. */
}


/* ----- de Pages/Documents/Documents.razor.css ----- */
/* Mantém a faixa de abas sempre acima do conteúdo dos painéis e clicável,
   evitando que o conteúdo "suba" e cubra as abas. */
.ph-doc-tabs .mud-tabs-toolbar {
    position: relative;
    z-index: 2;
}

/* Garante um espaçamento mínimo entre o grupo de abas e o painel renderizado.
   Usa padding (não colapsa como margin) para um mínimo confiável. */
.ph-doc-tabs .mud-tabs-panels {
    padding-top: 16px;
}


/* ----- de Pages/Documents/Fulltext.razor.css ----- */
.ph-fulltext-filter-input {
    max-width: 280px;
    min-width: 220px;
}


/* ----- de Pages/Perfil/Perfil.razor.css ----- */
.ph-perfil-policy-ic .mud-icon-root {
    font-size: 14px;
    height: 14px;
    width: 14px;
}

.ph-tab-card-ic {
    color: var(--ph-brand-orange);
    height: 16px !important;
    width: 16px !important;
}

.ph-perfil-foot-note .mud-icon-root {
    height: 13px !important;
    width: 13px !important;
}

.ph-2fa-shield .mud-icon-root {
    height: 28px;
    width: 28px;
}

.ph-2fa-mic .mud-icon-root {
    height: 21px;
    width: 21px;
}

.ph-2fa-star {
    height: 12px !important;
    width: 12px !important;
}

.ph-2fa-chip-ic {
    height: 11px !important;
    width: 11px !important;
}

.ph-2fa-meta-ic {
    color: var(--ph-n-400);
    height: 12px !important;
    width: 12px !important;
}

.ph-2fa-panel-ic {
    color: var(--ph-brand-orange);
    height: 16px !important;
    width: 16px !important;
}

.ph-2fa-remove {
    color: var(--ph-err-500) !important;
}


/* ----- de Pages/Permissoes/PermissaoUsuario.razor.css ----- */
.ph-2fa-admin-danger-btn {
    background: var(--ph-err-500);
    color: var(--ph-n-0);
}

.ph-2fa-admin-danger-btn:hover {
    background: var(--ph-err-700);
}


/* ----- de Pages/Permissoes/PermissoesDefinicao.razor.css ----- */
/* Renomeadas no item 5.2 (09/09/2026): .expandable-grid-header/-panel eram heranca do
   template, fora do padrao .ph-*. Viram .ph-perm-def-row/-item. Continuam aqui e nao no
   .razor.css porque na aba Perfis o alvo e um MudPaper/MudGrid — markup da lib. */
.ph-perm-def-row {
    cursor: pointer;
    padding: 0.4rem;
}

.ph-perm-def-item {
    border-bottom: 1px solid var(--ph-n-100);
}


/* ----- de Shared/Auth/TwoFactorChallenge.razor.css ----- */
.ph-2fa-challenge-icon {
    color: var(--ph-brand-orange);
}

.ph-2fa-challenge-field, .ph-2fa-challenge-block, .ph-2fa-challenge-submit {
    margin-top: 4px;
}

.ph-2fa-challenge-remember {
    margin: 2px 0;
}

.ph-2fa-challenge-back {
    margin-top: 2px;
}

/* Campo do codigo no desafio 2FA do login. Estava declarada no <style> do TwoFactorDialog e e
   consumida por TwoFactorChallenge.razor:60, num MudTextField — markup da lib, que nao carrega
   a marca de escopo. Por isso mora aqui e nao no .razor.css da tela. */
.ph-2fa-code-input {
    margin-top: 8px;
}


/* ----- de Shared/Modal/CertificadoDialog.razor.css ----- */
.ph-cert-drop-ic {
    color: var(--ph-n-400);
    height: 26px !important;
    width: 26px !important;
}

.ph-cert-filechip-ic {
    color: var(--ph-ok-500);
    flex-shrink: 0;
    height: 18px !important;
    width: 18px !important;
}

.ph-cert-filechip .ph-icon-button {
    margin-left: auto;
}


/* ----- de Shared/Modal/ClassificacaoDialog.razor.css ----- */
.ph-classif-col-title .mud-icon-root {
    color: var(--ph-brand-orange);
}


/* ----- de Shared/Modal/CredencialDialog.razor.css ----- */
.ph-cred-scope-filter {
    margin-bottom: 8px;
}

.ph-cred-copy {
    flex-shrink: 0;
}

.ph-cred-email-title {
    color: var(--ph-brand-ink);
    font-weight: 600;
}

.ph-cred-email-desc {
    color: var(--ph-n-700);
    line-height: 1.5;
    max-width: 46ch;
}


/* ----- de Shared/Modal/MetadadoFormDialog.razor.css ----- */
.ph-meta-col-title .mud-icon-root {
    color: var(--ph-brand-orange);
}

.ph-meta-notice .mud-icon-root {
    color: var(--ph-info-700);
    flex-shrink: 0;
    margin-top: 1px;
}


/* ----- de Shared/Modal/ReprovarObjetoDialog.razor.css ----- */
.text-wrap {
    white-space: normal; /* Permite múltiplas linhas */
    word-wrap: break-word; /* Quebra longas palavras */
    overflow-wrap: anywhere; /* Mais agressivo em alguns navegadores */
}


/* ----- de Shared/Modal/TipoDocumentalDialog.razor.css ----- */
.ph-tipo-col-title .mud-icon-root {
    color: var(--ph-brand-orange);
}


/* ----- de Shared/Modal/TwoFactorDialog.razor.css ----- */
/* Subtítulo do cabeçalho (modelo: título + "Sua conta ficará menos protegida"). */
.ph-2fa-dialog-subtitle {
    color: var(--ph-n-500);
    display: block;
    margin-top: 2px;
}

.ph-2fa-foot-note .mud-icon-root {
    color: var(--ph-n-400);
    height: 14px;
    width: 14px;
}

.ph-2fa-copy {
    flex-shrink: 0;
}

.ph-2fa-reauth-options {
    margin: 8px 0 12px;
}

.ph-2fa-setup-footnote .mud-icon-root {
    color: var(--ph-brand-orange);
    height: 15px;
    width: 15px;
}


/* ============================================================================================
   COMPARTILHADO ENTRE COMPONENTES — recolhido na correcao do 9.6 (07/09/2026).

   Tudo aqui era global no <style> de origem e VESTE markup de outro componente. Escopar
   quebraria, porque o escopo do CSS isolation nao atravessa a fronteira do componente.
   ============================================================================================ */

/* Botao de perigo do dialogo de 2FA. Vai num MudButton cuja Class e montada em C#
   (TwoFactorDialog.razor:312), entao o alvo e markup da lib. Escopado, o botao "Desativar 2FA"
   perdia o vermelho — sumia o sinal de perigo de uma acao de seguranca. */
.ph-2fa-danger-btn {
    background: var(--ph-err-500);
    color: var(--ph-n-0);
}

.ph-2fa-danger-btn:hover {
    background: var(--ph-err-700);
}

/* Modificador informativo do .ph-dialog-alert (a base do DS e ambar). Era declarado no Perfil e
   e consumido por CertificadoDialog.razor:96,98 e CertificadoDetalheDialog.razor:38,55,57 —
   dialogos que o Perfil abre. Escopado no Perfil, a nota "A senha nao e armazenada" virava
   ambar em vez de azul. */
.ph-dialog-alert.ph-dialog-alert--info {
    background: var(--ph-info-50);
    border-color: var(--ph-info-200);
    color: var(--ph-info-700);
}

.ph-tab-alert-body strong {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}

.ph-tab-alert-body span {
    display: block;
}

/* Botao "Tentar novamente" do erro de carga do certificado — mesmo caso: era declarado no
   Perfil e usado no CertificadoDetalheDialog. */
.ph-cert-erro-retry {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* Descricao de cabecalho de secao: identica em Perfil.razor e PermissaoUsuario.razor —
   duplicidade, entao mora no DS. */
.ph-perfil-main-desc {
    color: var(--ph-n-500);
    font-size: 13px;
    line-height: 1.5;
    margin: 4px 0 0;
    max-width: 70ch;
}

/* Moldura do editor de documentos. O #containerEditor e emitido por DadosTab.razor:96 e
   AnexosTab.razor:288 — componentes FILHOS do Documents, que nao carregam a marca dele. */
#containerEditor {
    height: 100%;
    width: 100%;
    border: 1px solid var(--ph-n-200);
}

#containerEditor iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ----- alvos emitidos por COMPONENTE FILHO ou por MarkupString ----- */

/* O <mark> do destaque de busca e emitido pelo componente filho TrechoDestacado
   (Fulltext.razor:128 passa ClasseDestaque="ph-fulltext-mark"), nao pelo Fulltext. Markup de
   filho nao carrega a marca de escopo do pai, entao escopada a regra morria e o destaque caia
   no amarelo padrao do navegador. Mesmo caso do markup da lib: mora no DS. */
.ph-fulltext-match mark,
.ph-fulltext-mark {
    background: rgba(199, 93, 46, .18);
    border-radius: 3px;
    color: inherit;
    padding: 0 2px;
}

/* O SVG do QR code entra por @((MarkupString)_qrSvg) (TwoFactorDialog.razor:159). Conteudo
   injetado como MarkupString nao passa pelo compilador Razor e portanto nao recebe a marca de
   escopo — escopada, a regra nao dimensionava o QR. */
.ph-2fa-qr svg {
    display: block;
    height: 100%;
    width: 100%;
}

/* ============================================================================================
   Onda HIG (26/09/2026) — lote rápido. Fontes: Apple HIG (Feedback, Motion, Accessibility) e
   WWDC 2018 "Designing Fluid Interfaces". Regras transversais; ficam no FIM para vencer as
   declarações locais de mesma especificidade.
   ============================================================================================ */

/* Item 1 — RESPOSTA NO POINTER-DOWN. Toda superfície clicável do DS reage no instante da pressão
   (não só no clique/ripple de 500ms do Mud): escala sutil e imediata, curva ease-out. */
.ph-button-primary,
.ph-button-secondary,
.ph-button-hero-secondary,
.ph-icon-button,
.ph-view-button {
    transition: background-color var(--ph-motion-fast) var(--ph-ease-out), border-color var(--ph-motion-fast) var(--ph-ease-out), color var(--ph-motion-fast) var(--ph-ease-out), box-shadow var(--ph-motion-fast) var(--ph-ease-out), transform var(--ph-motion-fast) var(--ph-ease-out);
}

.ph-button-primary:active:not(:disabled),
.ph-button-secondary:active:not(:disabled),
.ph-button-hero-secondary:active:not(:disabled),
.ph-icon-button:active:not(:disabled),
.ph-view-button:active:not(:disabled),
.ph-especie-card:active,
.ph-tipo-card:active:not(:disabled) {
    transform: scale(.98);
}

/* Cards e linhas: a pressão "assenta" o card (anula o levantar do hover) e escurece a linha. */
.ph-object-card:active,
.ph-repo-card:active {
    box-shadow: var(--ph-shadow-1);
    transform: translateY(0) scale(.99);
}

.ph-object-list-row:active {
    background: var(--ph-n-50);
}

/* Item 2 — MOVIMENTO REDUZIDO DE VERDADE (WCAG 2.3.3 / HIG Motion). Vale para o DS E para o
   MudBlazor, que não trata a preferência: toda transição/animação vira instantânea. Exceções
   ESSENCIAIS (indicadores de carregamento): desaceleram em vez de parar — um arco parado deixa
   de comunicar "carregando". */
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .spinner,
    .mud-progress-circular-indeterminate-child,
    .mud-progress-circular-indeterminate-child *,
    .mud-progress-linear-indeterminate *,
    .mud-progress-linear .mud-progress-linear-bar {
        animation-duration: 2.4s !important;
        animation-iteration-count: infinite !important;
    }
}

/* Item 2 — CONTRASTE AUMENTADO: bordas que hoje são sutis (n-100/n-200) sobem para um tom que
   delimita a superfície sem depender da sombra. */
@media (prefers-contrast: more) {
    .ph-badge,
    .ph-domain-badge {
        border-color: currentColor;
    }

    .ph-object-card,
    .ph-object-list-row,
    .ph-repo-card,
    .ph-especie-card,
    .ph-tipo-card,
    .ph-filter-dialog,
    .ph-ref-rail,
    .ph-ref-railmini,
    .ph-data-table {
        border-color: var(--ph-n-500);
    }

    .ph-button-secondary,
    .ph-button-hero-secondary {
        border-color: currentColor !important;
    }
}

/* Item 2 — CORES FORÇADAS (Windows High Contrast): o sistema apaga fundos, então badges e pontos
   de severidade ganham contorno na cor do texto do sistema; botões preenchidos ganham borda. */
@media (forced-colors: active) {
    .ph-badge,
    .ph-domain-badge,
    .ph-hist-sevdot,
    .ph-timeline-dot,
    .ph-field-chip {
        border: 1px solid CanvasText;
    }

    .ph-button-primary,
    .ph-button-secondary,
    .ph-button-hero-secondary {
        border: 1px solid ButtonText;
    }
}