@charset "UTF-8";

/*!
 * PortalRH.Moderno.css
 * Guia visual oficial para as modernizacoes do PortalRH.
 * Versao: 1.3.0
 * Destino sugerido: App_Themes/<NomeDoTema>/PortalRH.Moderno.css
 *
 * OBJETIVO
 * --------------------------------------------------------------------------
 * Centralizar o visual moderno das paginas ASP.NET WebForms sem alterar
 * regras de negocio, IDs, eventos, ViewState, QueryString ou acesso a dados.
 *
 * COMO INSTALAR
 * --------------------------------------------------------------------------
 * 1. Copie este arquivo para a pasta App_Themes do tema usado pelo portal.
 * 2. Arquivos .css dentro do tema sao carregados automaticamente pelo
 *    ASP.NET quando a pagina usa Theme ou StyleSheetTheme.
 * 3. Em cada pagina modernizada, envolva o conteudo com:
 *
 *    <main class="prh-page">
 *        ...conteudo da pagina...
 *    </main>
 *
 * 4. Aplique apenas classes com prefixo "prh-". Assim, controles antigos
 *    permanecem intactos ate que sejam modernizados conscientemente.
 *
 * PERSONALIZACAO POR CLIENTE/TEMA
 * --------------------------------------------------------------------------
 * A PortalModerna.master pode fornecer as variaveis --portal-* abaixo.
 * Quando nao fornecer, os valores de seguranca deste arquivo serao usados.
 * Cores de sucesso, alerta, erro e informacao sao semanticas e nao devem ser
 * trocadas pela cor institucional do cliente.
 *
 * REGRA DE SEGURANCA VISUAL
 * --------------------------------------------------------------------------
 * Nao adicionar seletores globais como "table", "input", "button" ou
 * ".card" neste arquivo. Todo componente deve continuar prefixado por prh-.
 */

/* ==========================================================================
   01. TOKENS DE DESIGN
   Use estes valores como fonte unica para novas modernizacoes.
   ========================================================================== */

:root {
    /* Marca: herda da PortalModerna.master e mantem fallback institucional. */
    --prh-primary: var(--portal-primary, #c29031);
    --prh-primary-dark: var(--portal-primary-dark, #8c6721);
    --prh-primary-soft: var(--portal-primary-soft, #fbf7ef);
    --prh-accent: var(--portal-accent, #d8b66e);
    --prh-on-primary: var(--portal-on-primary, #ffffff);
    /* Superficies e textos. */
    --prh-page-bg: var(--portal-page, var(--portal-page-bg, #f4f7fb));
    --prh-surface: var(--portal-surface, #ffffff);
    --prh-surface-subtle: #f8fafc;
    --prh-surface-muted: #f1f5f9;
    --prh-text: var(--portal-text, #172033);
    --prh-text-secondary: #475569;
    --prh-muted: var(--portal-muted, #64748b);
    --prh-border: var(--portal-border, #e2e8f0);
    --prh-border-strong: #cbd5e1;
    /* Estados semanticos: preservar o significado em todos os clientes. */
    --prh-success: #2f7251;
    --prh-success-soft: #e7f4ec;
    --prh-success-border: #a8d1b8;
    --prh-warning: #806515;
    --prh-warning-soft: #fff6d8;
    --prh-warning-border: #e5cf7a;
    --prh-danger: #9f3027;
    --prh-danger-soft: #fbe9e7;
    --prh-danger-border: #e3aaa5;
    --prh-info: #285f8f;
    --prh-info-soft: #eaf3fb;
    --prh-info-border: #a9cbe6;
    /* Escala de avaliacao suavizada: 1 vermelho, 2 amarelo, 3 laranja, 4 verde. */
    --prh-score-1: #9f3027;
    --prh-score-1-bg: #f9e3e1;
    --prh-score-1-border: #dfa29d;
    --prh-score-2: #806515;
    --prh-score-2-bg: #fff4c7;
    --prh-score-2-border: #e1c66a;
    --prh-score-3: #98531b;
    --prh-score-3-bg: #fbe7d2;
    --prh-score-3-border: #e0ad78;
    --prh-score-4: #2f7251;
    --prh-score-4-bg: #e1f2e8;
    --prh-score-4-border: #99c8ae;
    /* Espacamento oficial: multiplos de 4 px. */
    --prh-space-1: 4px;
    --prh-space-2: 8px;
    --prh-space-3: 12px;
    --prh-space-4: 16px;
    --prh-space-5: 20px;
    --prh-space-6: 24px;
    --prh-space-8: 32px;
    /* Dimensoes e efeitos. */
    --prh-control-height: 40px;
    --prh-radius-control: 6px;
    --prh-radius-small: 8px;
    --prh-radius-card: 12px;
    --prh-radius-pill: 999px;
    --prh-shadow-card: 0 2px 8px rgba(15, 23, 42, 0.06);
    --prh-shadow-raised: 0 14px 35px rgba(15, 23, 42, 0.14);
    --prh-focus-ring: 0 0 0 3px rgba(194, 144, 49, 0.20);
    --prh-transition: 160ms ease;
    --prh-content-width: 1440px;
}

/*
 * Ponte com a PortalModerna.master.
 *
 * A propriedade CorPrimaria da master grava --portal-primary no elemento
 * <body>. Por isso, os tokens prh-* precisam ser resolvidos dentro da pagina
 * e dos modais, que sao descendentes do <body>, e nao somente no :root.
 *
 * Uso no code-behind:
 *   Dim oMaster = TryCast(Me.Master, PortalModerna)
 *   If oMaster IsNot Nothing Then oMaster.CorPrimaria = "#075985"
 */
.prh-page,
.prh-modal {
    --prh-primary: var(--portal-primary, #c29031);
    --prh-primary-dark: var(--portal-primary-dark, var(--portal-primary, #8c6721));
    --prh-primary-soft: var(--portal-primary-soft, #fbf7ef);
    --prh-accent: var(--portal-accent, #d8b66e);
    --prh-on-primary: var(--portal-on-primary, #ffffff);
    --prh-page-bg: var(--portal-page, var(--portal-page-bg, #f4f7fb));
    --prh-surface: var(--portal-surface, #ffffff);
    --prh-text: var(--portal-text, #172033);
    --prh-muted: var(--portal-muted, #64748b);
    --prh-border: var(--portal-border, #e2e8f0);
}

/* Cria tons suaves coerentes com a cor do cliente em navegadores modernos. */
@supports (color: color-mix(in srgb, #000000 10%, #ffffff)) {
    .prh-page,
    .prh-modal {
        --prh-primary-soft: var(--portal-primary-soft, color-mix(in srgb, var(--portal-primary, #c29031) 10%, #ffffff));
        --prh-focus-ring: 0 0 0 3px color-mix(in srgb, var(--portal-primary, #c29031) 20%, transparent);
    }
}

/* ==========================================================================
   02. ESCOPO, RESET LOCAL E ACESSIBILIDADE

   Uso obrigatorio na raiz de cada tela:
   <asp:Panel ID="pnlPagina" runat="server" CssClass="prh-page">
       ...
   </asp:Panel>
   ========================================================================== */

.prh-page,
.prh-page *,
.prh-page *::before,
.prh-page *::after,
.prh-modal,
.prh-modal *,
.prh-modal *::before,
.prh-modal *::after {
    box-sizing: border-box;
}

.prh-page {
    width: 100%;
    max-width: var(--prh-content-width);
    margin: 0 auto;
    padding: var(--prh-space-5);
    color: var(--prh-text);
    font-family: inherit;
    line-height: 1.5;
}

    .prh-page :where(button, input, select, textarea),
    .prh-modal :where(button, input, select, textarea) {
        font: inherit;
    }

    .prh-page :where(a, button, input, select, textarea, [tabindex]):focus-visible,
    .prh-modal :where(a, button, input, select, textarea, [tabindex]):focus-visible {
        outline: 2px solid var(--prh-primary);
        outline-offset: 2px;
    }

/* Texto apenas para leitores de tela. Utilize em labels que nao devem aparecer. */
.prh-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Use no container de controles legados que precisam continuar no markup. */
.prh-legacy-hidden {
    display: none !important;
}

/* ==========================================================================
   03. CABECALHO DA PAGINA

   Exemplo:
   <header class="prh-hero">
       <div>
           <span class="prh-eyebrow">Gestao de pessoas</span>
           <h1 class="prh-title">Avisos gerenciais</h1>
           <p class="prh-subtitle">Consulte comunicados e alteracoes.</p>
       </div>
       <div class="prh-hero-actions">...</div>
   </header>
   ========================================================================== */

.prh-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--prh-space-4);
    margin-bottom: var(--prh-space-4);
}

.prh-hero-main {
    min-width: 0;
}

.prh-eyebrow {
    display: block;
    margin-bottom: var(--prh-space-1);
    color: var(--prh-primary-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.prh-title {
    margin: 0;
    color: var(--prh-text);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 850;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.prh-subtitle {
    max-width: 800px;
    margin: var(--prh-space-2) 0 0;
    color: var(--prh-muted);
    font-size: 14px;
}

.prh-hero-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--prh-space-2);
}

.prh-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 0 0 var(--prh-space-3);
    padding: 0;
    color: var(--prh-muted);
    font-size: 12px;
    list-style: none;
}

    .prh-breadcrumb a {
        color: var(--prh-primary-dark);
        text-decoration: none;
    }

        .prh-breadcrumb a:hover {
            text-decoration: underline;
        }

    .prh-breadcrumb li + li::before {
        content: "/";
        margin-right: 6px;
        color: #94a3b8;
    }

/* ==========================================================================
   04. CARDS E SECOES

   WebForms:
   <asp:Panel runat="server" CssClass="prh-card">
       <div class="prh-card-header">...</div>
       <div class="prh-card-body">...</div>
   </asp:Panel>

   O filete superior identifica a secao sem usar cores intensas em excesso.
   Adicione prh-card-plain quando o filete nao for necessario.
   ========================================================================== */

.prh-card {
    position: relative;
    margin-bottom: var(--prh-space-4);
    overflow: hidden;
    border: 1px solid var(--prh-border);
    border-radius: var(--prh-radius-card);
    background: var(--prh-surface);
    box-shadow: var(--prh-shadow-card);
}

    .prh-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: var(--prh-space-5);
        width: 52px;
        height: 4px;
        border-radius: 0 0 5px 5px;
        background: var(--prh-primary);
    }

    .prh-card.prh-card-plain::before {
        display: none;
    }

/* Use quando a pagina nao precisa separar cabecalho e corpo do card. */
.prh-card-padded {
    padding: var(--prh-space-5);
}

    .prh-card-padded > .prh-section-title {
        margin-bottom: var(--prh-space-3);
    }

    .prh-card-padded > .prh-section-copy {
        margin: -6px 0 var(--prh-space-4);
    }

.prh-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--prh-space-3);
    padding: var(--prh-space-5) var(--prh-space-5) var(--prh-space-3);
}

.prh-card-body {
    padding: var(--prh-space-3) var(--prh-space-5) var(--prh-space-5);
}

.prh-card-header + .prh-card-body {
    padding-top: 0;
}

.prh-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--prh-space-2);
    padding: var(--prh-space-3) var(--prh-space-5);
    border-top: 1px solid var(--prh-border);
    background: var(--prh-surface-subtle);
}

.prh-section-title {
    margin: 0;
    color: var(--prh-text);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
}

.prh-section-copy {
    margin: 5px 0 0;
    color: var(--prh-muted);
    font-size: 13px;
}

.prh-subsection {
    margin-top: var(--prh-space-6);
}

.prh-divider {
    height: 1px;
    margin: var(--prh-space-4) 0;
    border: 0;
    background: var(--prh-border);
}

/* ==========================================================================
   05. LAYOUTS REUTILIZAVEIS

   prh-grid-layout-2: formularios em duas colunas.
   prh-grid-layout-3: indicadores ou filtros curtos.
   prh-stack: elementos verticais com espacamento regular.
   prh-cluster: acoes horizontais com quebra automatica.
   ========================================================================== */

.prh-grid-layout-2,
.prh-grid-layout-3,
.prh-grid-layout-4 {
    display: grid;
    gap: var(--prh-space-4);
}

.prh-grid-layout-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prh-grid-layout-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.prh-grid-layout-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.prh-span-full {
    grid-column: 1 / -1;
}

.prh-stack {
    display: flex;
    flex-direction: column;
    gap: var(--prh-space-3);
}

.prh-stack-lg {
    gap: var(--prh-space-5);
}

.prh-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--prh-space-2);
}

.prh-split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--prh-space-3);
}

.prh-inline-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--prh-space-2);
    margin-bottom: var(--prh-space-3);
}

.prh-field-medium {
    width: min(320px, 100%);
}

/* ==========================================================================
   06. FORMULARIOS E CONTROLES WEBFORMS

   TextBox / DropDownList:
   <asp:Label AssociatedControlID="txtNome" CssClass="prh-label" ... />
   <asp:TextBox ID="txtNome" runat="server" CssClass="prh-control" />
   <span class="prh-help">Instrucao curta.</span>

   TextArea:
   <asp:TextBox TextMode="MultiLine"
       CssClass="prh-control prh-textarea" ... />

   Erro no campo:
   adicione a classe is-invalid ao controle e use um validator com
   CssClass="prh-field-error".
   ========================================================================== */

.prh-field {
    min-width: 0;
}

.prh-label {
    display: block;
    margin-bottom: 6px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.prh-label-required::after {
    content: " *";
    color: var(--prh-danger);
}

.prh-control {
    display: block;
    width: 100%;
    min-height: var(--prh-control-height);
    padding: 8px 11px;
    border: 1px solid var(--prh-border-strong);
    border-radius: var(--prh-radius-control);
    background: var(--prh-surface);
    color: var(--prh-text);
    outline: 0;
    transition: border-color var(--prh-transition), box-shadow var(--prh-transition), background var(--prh-transition);
}

    .prh-control:hover:not(:disabled):not([readonly]) {
        border-color: #94a3b8;
    }

    .prh-control:focus {
        border-color: var(--prh-primary);
        box-shadow: var(--prh-focus-ring);
    }

    .prh-control::placeholder {
        color: #94a3b8;
    }

    .prh-control:disabled,
    .prh-control[readonly] {
        border-color: var(--prh-border);
        background: var(--prh-surface-muted);
        color: var(--prh-muted);
        cursor: not-allowed;
        opacity: 1;
    }

    .prh-control.is-invalid,
    .prh-field.is-invalid .prh-control {
        border-color: var(--prh-danger);
        background: #fffafa;
    }

    .prh-control.is-valid,
    .prh-field.is-valid .prh-control {
        border-color: var(--prh-success);
    }

.prh-textarea {
    min-height: 108px;
    resize: vertical;
}

.prh-control-sm {
    min-height: 34px;
    padding-block: 5px;
    font-size: 13px;
}

.prh-help,
.prh-counter {
    display: block;
    margin-top: 5px;
    color: var(--prh-muted);
    font-size: 12px;
}

.prh-counter {
    text-align: right;
}

.prh-field-error,
.prh-validator {
    display: block;
    margin-top: 5px;
    color: var(--prh-danger);
    font-size: 12px;
    font-weight: 700;
}

.prh-validation-summary {
    margin-bottom: var(--prh-space-3);
    padding: var(--prh-space-3) var(--prh-space-4);
    border: 1px solid var(--prh-danger-border);
    border-radius: var(--prh-radius-small);
    background: var(--prh-danger-soft);
    color: var(--prh-danger);
}

    .prh-validation-summary ul {
        margin: 6px 0 0;
        padding-left: var(--prh-space-5);
    }

/* CheckBox e RadioButton: aplique CssClass no controle ASP.NET. */
.prh-check,
.prh-radio {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: var(--prh-space-2);
    color: #334155;
    cursor: pointer;
}

    .prh-check input,
    .prh-radio input {
        width: 17px;
        height: 17px;
        margin: 0;
        accent-color: var(--prh-primary);
    }

/* RadioButtonList/CheckBoxList: preferir RepeatLayout="Flow". */
.prh-choice-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--prh-space-3);
}

    .prh-choice-list label {
        margin-left: 5px;
    }

/* Entrada com prefixo/sufixo, por exemplo lupa, moeda ou calendario. */
.prh-input-group {
    display: flex;
    min-width: 0;
    align-items: stretch;
}

    .prh-input-group .prh-control {
        min-width: 0;
        border-radius: 0;
    }

        .prh-input-group .prh-control:first-child,
        .prh-input-addon:first-child {
            border-radius: var(--prh-radius-control) 0 0 var(--prh-radius-control);
        }

        .prh-input-group .prh-control:last-child,
        .prh-input-addon:last-child {
            border-radius: 0 var(--prh-radius-control) var(--prh-radius-control) 0;
        }

.prh-input-addon {
    display: inline-flex;
    min-width: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border: 1px solid var(--prh-border-strong);
    background: var(--prh-surface-subtle);
    color: var(--prh-muted);
}

    .prh-input-addon + .prh-control,
    .prh-control + .prh-input-addon {
        margin-left: -1px;
    }

/* FileUpload: use CssClass="prh-file" no asp:FileUpload. */
.prh-file {
    width: 100%;
    padding: 7px;
    border: 1px dashed var(--prh-border-strong);
    border-radius: var(--prh-radius-small);
    background: var(--prh-surface-subtle);
    color: var(--prh-text-secondary);
}

    .prh-file::file-selector-button {
        min-height: 34px;
        margin-right: var(--prh-space-3);
        padding: 6px 12px;
        border: 1px solid var(--prh-border-strong);
        border-radius: var(--prh-radius-control);
        background: var(--prh-surface);
        color: var(--prh-text);
        font-weight: 750;
        cursor: pointer;
    }

/* ==========================================================================
   07. BUSCA, FILTROS E SELETORES SOB DEMANDA

   Evite carregar listas extensas no inicio. Mostre o resultado apenas depois
   de uma busca. Para abrir o painel, altere hidden ou adicione is-open.
   ========================================================================== */

.prh-filter-bar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(150px, 0.35fr)) auto;
    gap: var(--prh-space-3);
    align-items: end;
}

.prh-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--prh-space-2);
}

.prh-search {
    position: relative;
}

    .prh-search .prh-control {
        padding-left: 40px;
    }

.prh-search-icon {
    position: absolute;
    top: 50%;
    left: 13px;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    color: var(--prh-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.prh-selector {
    position: relative;
}

.prh-selector-menu {
    position: absolute;
    z-index: 80;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    display: none;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--prh-border);
    border-radius: var(--prh-radius-small);
    background: var(--prh-surface);
    box-shadow: var(--prh-shadow-raised);
}

    .prh-selector-menu.is-open,
    .prh-selector-menu:not([hidden]) {
        display: block;
    }

.prh-selector-option {
    display: block;
    width: 100%;
    padding: 11px 13px;
    border: 0;
    border-bottom: 1px solid var(--prh-border);
    background: transparent;
    color: var(--prh-text);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

    .prh-selector-option:last-child {
        border-bottom: 0;
    }

    .prh-selector-option:hover,
    .prh-selector-option:focus,
    .prh-selector-option.is-selected {
        background: var(--prh-primary-soft);
        color: var(--prh-primary-dark);
    }

    .prh-selector-option small {
        display: block;
        margin-top: 2px;
        color: var(--prh-muted);
    }

/* ==========================================================================
   08. BOTOES E ACOES

   Button / LinkButton:
   <asp:Button CssClass="prh-btn prh-btn-primary" Text="Salvar" ... />
   <asp:LinkButton CssClass="prh-btn prh-btn-secondary" ...>Voltar</asp:LinkButton>

   Ordem visual recomendada: acoes secundarias a esquerda; acao principal
   no final. Nao usar mais de uma acao primaria no mesmo bloco.
   ========================================================================== */

.prh-btn {
    display: inline-flex;
    min-height: var(--prh-control-height);
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--prh-radius-control);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--prh-transition), border-color var(--prh-transition), color var(--prh-transition), transform var(--prh-transition), box-shadow var(--prh-transition);
}

    .prh-btn:hover {
        text-decoration: none;
    }

    .prh-btn:active:not(:disabled):not(.is-disabled) {
        transform: translateY(1px);
    }

    .prh-btn:disabled,
    .prh-btn.is-disabled {
        cursor: not-allowed;
        opacity: 0.55;
        pointer-events: none;
    }

.prh-btn-primary {
    border-color: var(--prh-primary);
    background: var(--prh-primary);
    color: var(--prh-on-primary);
}

    .prh-btn-primary:hover,
    .prh-btn-primary:focus {
        border-color: var(--prh-primary-dark);
        background: var(--prh-primary-dark);
        color: var(--prh-on-primary);
    }

.prh-btn-secondary {
    border-color: var(--prh-border-strong);
    background: var(--prh-surface);
    color: #334155;
}

    .prh-btn-secondary:hover,
    .prh-btn-secondary:focus {
        border-color: var(--prh-primary);
        color: var(--prh-primary-dark);
    }

.prh-btn-soft {
    border-color: var(--prh-accent);
    background: var(--prh-primary-soft);
    color: var(--prh-primary-dark);
}

    .prh-btn-soft:hover,
    .prh-btn-soft:focus {
        border-color: var(--prh-primary);
        background: #f7edda;
    }

.prh-btn-danger {
    border-color: var(--prh-danger);
    background: var(--prh-danger);
    color: #ffffff;
}

    .prh-btn-danger:hover,
    .prh-btn-danger:focus {
        border-color: #7f241d;
        background: #7f241d;
        color: #ffffff;
    }

.prh-btn-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--prh-primary-dark);
}

    .prh-btn-ghost:hover,
    .prh-btn-ghost:focus {
        background: var(--prh-primary-soft);
    }

.prh-btn-icon {
    width: var(--prh-control-height);
    padding: 0;
}

.prh-btn-sm {
    min-height: 34px;
    padding: 6px 11px;
    font-size: 12px;
}

.prh-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--prh-space-3);
    margin-top: var(--prh-space-5);
    padding-top: var(--prh-space-4);
    border-top: 1px solid var(--prh-border);
}

.prh-actions-copy {
    color: var(--prh-muted);
    font-size: 13px;
}

.prh-actions-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--prh-space-2);
}

/* ==========================================================================
   09. ALERTAS, MENSAGENS E ESTADOS

   <asp:Panel CssClass="prh-alert prh-alert-success" role="status">...</asp:Panel>
   Para erro que exige acao imediata, use role="alert".
   ========================================================================== */

.prh-alert {
    display: flex;
    gap: var(--prh-space-3);
    align-items: flex-start;
    margin-bottom: var(--prh-space-3);
    padding: var(--prh-space-3) var(--prh-space-4);
    border: 1px solid var(--prh-info-border);
    border-radius: var(--prh-radius-small);
    background: var(--prh-info-soft);
    color: var(--prh-info);
    font-size: 13px;
}

    .prh-alert strong {
        display: block;
        margin-bottom: 2px;
    }

.prh-alert-success {
    border-color: var(--prh-success-border);
    background: var(--prh-success-soft);
    color: var(--prh-success);
}

.prh-alert-warning {
    border-color: var(--prh-warning-border);
    background: var(--prh-warning-soft);
    color: var(--prh-warning);
}

.prh-alert-danger {
    border-color: var(--prh-danger-border);
    background: var(--prh-danger-soft);
    color: var(--prh-danger);
}

.prh-alert-neutral {
    border-color: var(--prh-border);
    background: var(--prh-surface-subtle);
    color: var(--prh-text-secondary);
}

.prh-alert-icon {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    font-weight: 900;
}

/* ==========================================================================
   10. INDICADORES (KPIs)

   Usar apenas quando o numero ajuda uma decisao. Altura minima oficial: 88px.
   <div class="prh-kpi">
       <span class="prh-kpi-icon">...</span>
       <span><strong class="prh-kpi-value">18</strong>
             <span class="prh-kpi-label">Pendencias</span></span>
   </div>
   ========================================================================== */

.prh-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--prh-space-3);
    margin-bottom: var(--prh-space-4);
}

.prh-kpi {
    display: flex;
    min-height: 88px;
    align-items: center;
    gap: var(--prh-space-3);
    padding: var(--prh-space-4);
    border: 1px solid var(--prh-border);
    border-radius: var(--prh-radius-card);
    background: var(--prh-surface);
    box-shadow: var(--prh-shadow-card);
}

.prh-kpi-icon {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border-radius: var(--prh-radius-card);
    background: var(--prh-primary-soft);
    color: var(--prh-primary-dark);
    font-size: 20px;
}

.prh-kpi-value {
    display: block;
    color: var(--prh-text);
    font-size: 27px;
    font-weight: 900;
    line-height: 1;
}

.prh-kpi-label {
    display: block;
    margin-top: 5px;
    color: var(--prh-muted);
    font-size: 12px;
    font-weight: 700;
}

/* ==========================================================================
   11. GRIDVIEW E TABELAS DE DADOS

   Exemplo recomendado:
   <div class="prh-grid-scroll">
       <asp:GridView ID="grdRegistros" runat="server"
           CssClass="prh-grid"
           AutoGenerateColumns="False"
           GridLines="None">
           <HeaderStyle CssClass="prh-grid-header" />
           <RowStyle CssClass="prh-grid-row" />
           <AlternatingRowStyle CssClass="prh-grid-row prh-grid-row-alt" />
           <PagerStyle CssClass="prh-pager" />
       </asp:GridView>
   </div>

   As linhas usam 48px para melhorar leitura e clique. Somente telas muito
   densas devem adicionar prh-grid-compact, que reduz para 40px.
   ========================================================================== */

.prh-grid-scroll {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--prh-border);
    border-radius: var(--prh-radius-small);
    background: var(--prh-surface);
}

.prh-grid {
    width: 100%;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--prh-surface);
    color: var(--prh-text-secondary);
    font-size: 13px;
}

    .prh-grid > thead > tr > th,
    .prh-grid > tbody > tr.prh-grid-header > th,
    .prh-grid > tbody > tr > th {
        height: 42px;
        padding: 9px 12px;
        border: 0;
        border-bottom: 1px solid var(--prh-border);
        background: var(--prh-surface-subtle);
        color: #475569;
        font-size: 11px;
        font-weight: 850;
        letter-spacing: 0.035em;
        text-align: left;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .prh-grid > tbody > tr > td {
        height: 48px;
        padding: 10px 12px;
        border: 0;
        border-bottom: 1px solid var(--prh-border);
        vertical-align: middle;
    }

    .prh-grid > tbody > tr:last-child > td {
        border-bottom: 0;
    }

    .prh-grid > tbody > tr.prh-grid-row-alt > td,
    .prh-grid > tbody > tr:nth-child(even):not(.prh-pager) > td {
        background: #fbfdff;
    }

    .prh-grid > tbody > tr:not(.prh-pager):hover > td {
        background: var(--prh-primary-soft);
    }

    .prh-grid a:not(.prh-btn) {
        color: var(--prh-primary-dark);
        font-weight: 750;
        text-decoration: none;
    }

        .prh-grid a:not(.prh-btn):hover {
            text-decoration: underline;
        }

    .prh-grid .prh-cell-number {
        font-variant-numeric: tabular-nums;
        text-align: right;
    }

    .prh-grid .prh-cell-actions {
        width: 1%;
        text-align: right;
        white-space: nowrap;
    }

.prh-grid-compact > tbody > tr > td {
    height: 40px;
    padding-block: 7px;
}

.prh-grid-empty {
    padding: var(--prh-space-8) !important;
    color: var(--prh-muted);
    text-align: center;
}

/*
 * GridView em formato de cards/lista:
 * <asp:GridView CssClass="prh-grid prh-grid-records" ShowHeader="false" ...>
 *     <ItemTemplate><div class="prh-record">...</div></ItemTemplate>
 * </asp:GridView>
 *
 * Este modificador remove a aparencia tabular das celulas sem interferir na
 * paginacao gerada pelo GridView. E indicado para avisos, tarefas e historicos.
 */
.prh-grid.prh-grid-records {
    border-collapse: separate;
    border-spacing: 0 var(--prh-space-2);
    background: transparent;
}

    .prh-grid.prh-grid-records > tbody > tr:not(.prh-pager) > td {
        height: auto;
        padding: 0;
        border: 0;
        background: transparent !important;
    }

    .prh-grid.prh-grid-records > tbody > tr:not(.prh-pager):hover > td {
        background: transparent !important;
    }

/* ==========================================================================
   12. LISTAS GERENCIAIS, AVISOS E LINHAS EXPANSIVAS

   Use quando o conteudo possui titulo repetido e data/hora ou metadados que
   precisam ser comparados. A linha alta (minimo 84px) melhora leitura e alvo.
   Cada linha deve conter apenas um LinkButton principal cobrindo o conteudo.
   ========================================================================== */

.prh-record-list {
    display: flex;
    flex-direction: column;
    gap: var(--prh-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.prh-record {
    position: relative;
    display: grid;
    min-height: 84px;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: var(--prh-space-3);
    align-items: center;
    padding: var(--prh-space-4);
    border: 1px solid var(--prh-border);
    border-radius: 10px;
    background: var(--prh-surface);
    transition: border-color var(--prh-transition), background var(--prh-transition), box-shadow var(--prh-transition), transform var(--prh-transition);
}

    .prh-record:hover,
    .prh-record:focus-within {
        border-color: var(--prh-accent);
        background: var(--prh-primary-soft);
        box-shadow: var(--prh-shadow-card);
        transform: translateY(-1px);
    }

.prh-record-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 12px;
    background: var(--prh-primary-soft);
    color: var(--prh-primary-dark);
    font-size: 19px;
    font-weight: 900;
}

.prh-record-body {
    min-width: 0;
}

.prh-record-title {
    display: block;
    overflow: hidden;
    color: var(--prh-text);
    font-size: 15px;
    font-weight: 850;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prh-record-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px var(--prh-space-4);
    margin-top: 7px;
    color: var(--prh-muted);
    font-size: 12px;
}

.prh-record-action {
    color: var(--prh-primary-dark);
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

/* Faz um link ocupar toda a linha sem impedir selecao de texto visual. */
.prh-record-hit::after {
    content: "";
    position: absolute;
    inset: 0;
}

.prh-record-new {
    border-left: 4px solid var(--prh-primary);
}

/* ==========================================================================
   13. BADGES E STATUS

   <asp:Label CssClass="prh-badge prh-badge-success" Text="Concluido" />
   Nao comunicar status somente pela cor: sempre manter texto ou icone.
   ========================================================================== */

.prh-badge {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid var(--prh-border);
    border-radius: var(--prh-radius-pill);
    background: var(--prh-surface-muted);
    color: var(--prh-text-secondary);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.prh-badge-primary {
    border-color: var(--prh-accent);
    background: var(--prh-primary-soft);
    color: var(--prh-primary-dark);
}

.prh-badge-success {
    border-color: var(--prh-success-border);
    background: var(--prh-success-soft);
    color: var(--prh-success);
}

.prh-badge-warning {
    border-color: var(--prh-warning-border);
    background: var(--prh-warning-soft);
    color: var(--prh-warning);
}

.prh-badge-danger {
    border-color: var(--prh-danger-border);
    background: var(--prh-danger-soft);
    color: var(--prh-danger);
}

.prh-badge-info {
    border-color: var(--prh-info-border);
    background: var(--prh-info-soft);
    color: var(--prh-info);
}

/* ==========================================================================
   14. PAGINACAO DO GRIDVIEW

   Configure <PagerStyle CssClass="prh-pager" />. O GridView normalmente
   gera uma tabela interna; estas regras tratam essa estrutura sem atingir
   outras tabelas do sistema.
   ========================================================================== */

.prh-grid > tbody > tr.prh-pager > td {
    height: auto;
    padding: var(--prh-space-3);
    background: var(--prh-surface) !important;
    text-align: center;
}

.prh-pager table {
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 5px;
}

.prh-pager td {
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
}

.prh-pager a,
.prh-pager span {
    display: inline-grid;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    place-items: center;
    border: 1px solid var(--prh-border);
    border-radius: var(--prh-radius-control);
    background: var(--prh-surface);
    color: var(--prh-text-secondary);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.prh-pager span {
    border-color: var(--prh-primary);
    background: var(--prh-primary);
    color: var(--prh-on-primary);
}

.prh-pager a:hover,
.prh-pager a:focus {
    border-color: var(--prh-primary);
    color: var(--prh-primary-dark);
}

/* ==========================================================================
   15. PERFIL, RESUMO E PARES ROTULO/VALOR
   ========================================================================== */

.prh-profile {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: var(--prh-space-3);
    align-items: center;
}

.prh-avatar {
    display: grid;
    width: 52px;
    height: 52px;
    overflow: hidden;
    place-items: center;
    border-radius: 50%;
    background: var(--prh-primary-soft);
    color: var(--prh-primary-dark);
    font-size: 15px;
    font-weight: 850;
}

    .prh-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.prh-profile-name {
    color: var(--prh-text);
    font-size: 18px;
    font-weight: 850;
}

.prh-profile-code {
    margin-right: var(--prh-space-2);
    color: var(--prh-primary-dark);
}

.prh-profile-detail {
    margin-top: 2px;
    color: var(--prh-muted);
    font-size: 13px;
}

.prh-data-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--prh-space-3);
    margin: 0;
}

.prh-data-item {
    min-width: 0;
    padding: var(--prh-space-3);
    border: 1px solid var(--prh-border);
    border-radius: var(--prh-radius-small);
    background: var(--prh-surface-subtle);
}

    .prh-data-item dt,
    .prh-data-label {
        margin: 0;
        color: var(--prh-muted);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.025em;
        text-transform: uppercase;
    }

    .prh-data-item dd,
    .prh-data-value {
        display: block;
        margin: 4px 0 0;
        overflow-wrap: anywhere;
        color: var(--prh-text);
        font-size: 14px;
        font-weight: 750;
    }

/* ==========================================================================
   16. ETAPAS E ABAS

   Etapas: adicione is-done e is-active conforme o estado do fluxo.
   Abas: use button ou LinkButton; adicione is-active e aria-selected="true".
   ========================================================================== */

.prh-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--prh-space-2);
    margin: 0 0 var(--prh-space-4);
}

.prh-step {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: var(--prh-space-2);
    padding: 9px 11px;
    border: 1px solid var(--prh-border);
    border-radius: 10px;
    background: var(--prh-surface);
    color: var(--prh-muted);
    font-size: 12px;
    font-weight: 750;
}

.prh-step-number {
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    place-items: center;
    border-radius: 50%;
    background: var(--prh-surface-muted);
}

.prh-step.is-done {
    border-color: var(--prh-accent);
    color: var(--prh-primary-dark);
}

    .prh-step.is-done .prh-step-number {
        background: var(--prh-primary-soft);
    }

.prh-step.is-active {
    border-color: var(--prh-primary);
    background: var(--prh-primary-soft);
    color: var(--prh-primary-dark);
}

    .prh-step.is-active .prh-step-number {
        background: var(--prh-primary);
        color: var(--prh-on-primary);
    }

.prh-tabs {
    display: flex;
    gap: var(--prh-space-1);
    overflow-x: auto;
    border-bottom: 1px solid var(--prh-border);
}

.prh-tab {
    min-height: 42px;
    padding: 9px 13px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--prh-muted);
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

    .prh-tab:hover,
    .prh-tab:focus,
    .prh-tab.is-active {
        border-bottom-color: var(--prh-primary);
        color: var(--prh-primary-dark);
    }

.prh-tab-panel {
    padding-top: var(--prh-space-4);
}

/* Cabecalho intermediario entre cards, usado em formularios longos. */
.prh-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--prh-space-3);
    margin: var(--prh-space-6) 0 var(--prh-space-3);
}

    .prh-section-heading h2 {
        margin: 0;
        font-size: 21px;
    }

    .prh-section-heading p {
        margin: 0;
        color: var(--prh-muted);
        font-size: 13px;
    }

/* Orientacao curta dentro da pagina, sem o peso visual de um alerta. */
.prh-guidance {
    display: flex;
    gap: var(--prh-space-3);
    margin-top: var(--prh-space-3);
    padding: var(--prh-space-3) var(--prh-space-4);
    border-radius: var(--prh-radius-small);
    background: var(--prh-surface-subtle);
    color: var(--prh-text-secondary);
}

.prh-guidance-mark {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    place-items: center;
    border-radius: 50%;
    background: var(--prh-primary-soft);
    color: var(--prh-primary-dark);
    font-weight: 900;
}

/* Resumo horizontal de notas: oito criterios e um resultado percentual. */
.prh-score-summary {
    display: grid;
    grid-template-columns: repeat(8, minmax(72px, 1fr)) minmax(86px, 1.1fr);
    overflow-x: auto;
    border: 1px solid var(--prh-border);
    border-radius: 10px;
}

.prh-score-summary-item {
    min-width: 72px;
    padding: 10px 7px;
    border-right: 1px solid var(--prh-border);
    text-align: center;
}

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

.prh-score-summary-label {
    display: block;
    min-height: 34px;
    color: var(--prh-text-secondary);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.prh-score-summary-value {
    display: grid;
    width: 34px;
    height: 34px;
    margin: 5px auto 0;
    place-items: center;
    border-radius: 9px;
    background: var(--prh-surface-muted);
    font-size: 17px;
    font-weight: 900;
}

.prh-score-summary-result .prh-score-summary-value {
    width: auto;
    padding: 0 var(--prh-space-2);
    background: var(--prh-primary-soft);
    color: var(--prh-primary-dark);
}

/* Tabela visual para valores pequenos e comparaveis, sem usar tabela HTML. */
.prh-metric-table {
    display: grid;
    overflow-x: auto;
    border: 1px solid var(--prh-border);
    border-radius: 10px;
}

.prh-metric-table-9 {
    grid-template-columns: repeat(9, minmax(70px, 1fr));
}

.prh-metric-cell {
    min-width: 70px;
    padding: 10px var(--prh-space-2);
    border-right: 1px solid var(--prh-border);
    text-align: center;
}

.prh-metric-table-9 .prh-metric-cell:nth-child(9n) {
    border-right: 0;
}

.prh-metric-head {
    background: var(--prh-surface-subtle);
    color: var(--prh-text-secondary);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.prh-metric-value {
    border-top: 1px solid var(--prh-border);
    font-weight: 800;
}

.prh-period {
    margin-bottom: var(--prh-space-4);
    padding: var(--prh-space-3) var(--prh-space-4);
    border-left: 4px solid var(--prh-primary);
    border-radius: var(--prh-radius-small);
    background: var(--prh-primary-soft);
    color: var(--prh-primary-dark);
    font-weight: 800;
}

/* Legenda da escala de avaliacao. */
.prh-scale {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--prh-space-2);
    margin-bottom: var(--prh-space-4);
}

.prh-scale-item {
    padding: 10px;
    border: 1px solid var(--prh-border);
    border-radius: var(--prh-radius-small);
    background: var(--prh-surface-subtle);
    color: var(--prh-text-secondary);
    font-size: 13px;
}

    .prh-scale-item strong {
        display: inline-grid;
        width: 24px;
        height: 24px;
        margin-right: 5px;
        place-items: center;
        border-radius: 50%;
        background: var(--prh-surface);
        color: var(--prh-primary-dark);
    }

/* Card de competencia com descricao e escala de selecao. */
.prh-competencies {
    display: grid;
    gap: var(--prh-space-3);
}

.prh-competency {
    display: grid;
    grid-template-columns: 42px minmax(260px, 1fr) minmax(330px, 0.9fr);
    gap: var(--prh-space-3);
    align-items: center;
    padding: var(--prh-space-4);
    border: 1px solid var(--prh-border);
    border-radius: var(--prh-radius-card);
    background: var(--prh-surface);
}

.prh-competency-index {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    background: var(--prh-primary-soft);
    color: var(--prh-primary-dark);
    font-weight: 800;
}

.prh-competency h3 {
    margin: 0 0 var(--prh-space-1);
    font-size: 16px;
}

.prh-competency p {
    margin: 0;
    color: var(--prh-text-secondary);
    font-size: 13px;
}

/* Indicadores compactos para ocorrencias ou quantidades auxiliares. */
.prh-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.prh-stat {
    padding: 13px;
    border: 1px solid var(--prh-border);
    border-radius: 10px;
    background: var(--prh-surface-subtle);
}

.prh-stat-label {
    display: block;
    color: var(--prh-muted);
    font-size: 12px;
    font-weight: 700;
}

.prh-stat-value {
    display: block;
    margin-top: 2px;
    font-size: 22px;
    font-weight: 900;
}

/* ==========================================================================
   16A. ESTADOS DE CRUD: CONSULTA E EDICAO

   O estado deve ser controlado pelo servidor ou pelo JavaScript existente,
   sem duplicar regras de negocio. Exemplo:

   <asp:Panel runat="server" CssClass="prh-crud" data-mode="view">
       <div class="prh-view-only">Resumo somente leitura</div>
       <div class="prh-edit-only">Campos para inclusao/alteracao</div>
   </asp:Panel>

   Valores aceitos: data-mode="view" e data-mode="edit".
   ========================================================================== */

.prh-mode-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--prh-space-3);
    margin-bottom: var(--prh-space-4);
    padding: var(--prh-space-3) var(--prh-space-4);
    border: 1px solid var(--prh-border);
    border-radius: var(--prh-radius-small);
    background: var(--prh-surface-subtle);
}

.prh-mode-title {
    color: var(--prh-text);
    font-size: 14px;
    font-weight: 850;
}

.prh-mode-copy {
    display: block;
    margin-top: 2px;
    color: var(--prh-muted);
    font-size: 12px;
}

.prh-crud[data-mode="view"] .prh-edit-only,
.prh-crud[data-mode="edit"] .prh-view-only {
    display: none !important;
}

/* ==========================================================================
   17. AVALIACAO POR ESCALA (1 A 4)

   Ordem e cores oficiais:
   1 = Vermelho | 2 = Amarelo | 3 = Laranja | 4 = Verde.
   As cores sao propositalmente suaves para nao competir com o conteudo.

   Exemplo de opcao:
   <button type="button" class="prh-rating-option" data-value="1">
       <strong class="prh-rating-number">1</strong>
       <span class="prh-rating-label">A desenvolver</span>
   </button>
   O JavaScript adiciona is-selected e atualiza o controle WebForms real.
   ========================================================================== */

.prh-rating-group {
    display: grid;
    grid-template-columns: repeat(4, minmax(70px, 1fr));
    gap: 7px;
}

.prh-rating-option {
    min-height: 58px;
    padding: 8px 6px;
    border: 1px solid var(--prh-border);
    border-radius: var(--prh-radius-small);
    background: var(--prh-surface-subtle);
    color: var(--prh-text-secondary);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--prh-transition), background var(--prh-transition), transform var(--prh-transition), box-shadow var(--prh-transition);
}

    .prh-rating-option:hover,
    .prh-rating-option:focus {
        border-color: var(--prh-primary);
        outline: 0;
        transform: translateY(-1px);
    }

.prh-rating-number {
    display: block;
    font-size: 19px;
    font-weight: 900;
    line-height: 1;
}

.prh-rating-label {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.15;
}

.prh-rating-option[data-value="1"] .prh-rating-number {
    color: var(--prh-score-1);
}

.prh-rating-option[data-value="2"] .prh-rating-number {
    color: var(--prh-score-2);
}

.prh-rating-option[data-value="3"] .prh-rating-number {
    color: var(--prh-score-3);
}

.prh-rating-option[data-value="4"] .prh-rating-number {
    color: var(--prh-score-4);
}

.prh-rating-option[data-value="1"].is-selected {
    border-color: var(--prh-score-1-border);
    background: var(--prh-score-1-bg);
    color: var(--prh-score-1);
}

.prh-rating-option[data-value="2"].is-selected {
    border-color: var(--prh-score-2-border);
    background: var(--prh-score-2-bg);
    color: var(--prh-score-2);
}

.prh-rating-option[data-value="3"].is-selected {
    border-color: var(--prh-score-3-border);
    background: var(--prh-score-3-bg);
    color: var(--prh-score-3);
}

.prh-rating-option[data-value="4"].is-selected {
    border-color: var(--prh-score-4-border);
    background: var(--prh-score-4-bg);
    color: var(--prh-score-4);
}

.prh-rating-option.is-selected {
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.10);
}

    .prh-rating-option.is-selected .prh-rating-number {
        color: inherit;
    }

/* ==========================================================================
   18. CRITERIOS, PAINEIS DE EDICAO E REFERENCIAS

   Componente util para avaliacao, plano de acao e formularios longos.
   ========================================================================== */

.prh-criteria-list {
    display: flex;
    flex-direction: column;
    gap: var(--prh-space-3);
}

.prh-criterion {
    overflow: hidden;
    border: 1px solid var(--prh-border);
    border-radius: var(--prh-radius-card);
    background: var(--prh-surface);
    box-shadow: var(--prh-shadow-card);
}

.prh-criterion-header {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: var(--prh-space-3);
    align-items: center;
    padding: var(--prh-space-4) var(--prh-space-5);
    background: linear-gradient(135deg, var(--prh-primary-soft), #ffffff);
}

.prh-criterion-index {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    background: var(--prh-primary);
    color: var(--prh-on-primary);
    font-weight: 900;
}

.prh-criterion-title {
    color: var(--prh-text);
    font-size: 16px;
    font-weight: 850;
}

.prh-criterion-description {
    margin: -6px 0 0;
    padding: 0 var(--prh-space-5) var(--prh-space-4) 72px;
    color: var(--prh-text-secondary);
    font-size: 13px;
}

.prh-criterion-body {
    padding: var(--prh-space-4) var(--prh-space-5) var(--prh-space-5);
    border-top: 1px solid var(--prh-border);
}

.prh-reference {
    margin-bottom: var(--prh-space-3);
    padding: var(--prh-space-3) var(--prh-space-4);
    border-left: 4px solid var(--prh-accent);
    border-radius: var(--prh-radius-small);
    background: var(--prh-primary-soft);
    color: var(--prh-text-secondary);
}

.prh-reference-title {
    display: block;
    margin-bottom: 4px;
    color: var(--prh-primary-dark);
    font-weight: 850;
}

.prh-reference-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--prh-space-2);
    margin-bottom: 5px;
    color: var(--prh-primary-dark);
    font-weight: 800;
}

.prh-reference-content {
    color: var(--prh-text-secondary);
}

.prh-development-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--prh-space-3);
}

.prh-field-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--prh-space-2);
    margin-bottom: 6px;
    color: #334155;
    font-weight: 800;
}

.prh-development-help {
    margin: 0 0 var(--prh-space-2);
    color: var(--prh-muted);
    font-size: 12px;
}

/* Ordem logica dos oito criterios oficiais. */
.prh-order-1 {
    order: 1;
}

.prh-order-2 {
    order: 2;
}

.prh-order-3 {
    order: 3;
}

.prh-order-4 {
    order: 4;
}

.prh-order-5 {
    order: 5;
}

.prh-order-6 {
    order: 6;
}

.prh-order-7 {
    order: 7;
}

.prh-order-8 {
    order: 8;
}

/* ==========================================================================
   19. VAZIO, CARREGAMENTO E SKELETON
   ========================================================================== */

.prh-empty {
    display: grid;
    min-height: 180px;
    padding: var(--prh-space-8);
    place-items: center;
    color: var(--prh-muted);
    text-align: center;
}

.prh-empty-icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin: 0 auto var(--prh-space-3);
    place-items: center;
    border-radius: 50%;
    background: var(--prh-surface-muted);
    color: var(--prh-primary-dark);
    font-size: 22px;
}

.prh-empty strong {
    display: block;
    color: var(--prh-text);
    font-size: 16px;
}

.prh-empty span {
    display: block;
    max-width: 480px;
    margin-top: 5px;
    font-size: 13px;
}

.prh-empty-bordered {
    border: 1px dashed var(--prh-border-strong);
    border-radius: var(--prh-radius-card);
    background: var(--prh-surface-subtle);
}

.prh-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--prh-space-2);
    color: var(--prh-muted);
    font-size: 13px;
}

.prh-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--prh-border);
    border-top-color: var(--prh-primary);
    border-radius: 50%;
    animation: prh-spin 700ms linear infinite;
}

.prh-skeleton {
    min-height: 14px;
    overflow: hidden;
    border-radius: 5px;
    background: linear-gradient(90deg, #eef2f6 25%, #f8fafc 50%, #eef2f6 75%);
    background-size: 200% 100%;
    animation: prh-skeleton 1.2s ease-in-out infinite;
}

@keyframes prh-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes prh-skeleton {
    to {
        background-position: -200% 0;
    }
}

/* ==========================================================================
   20. MODAL E OVERLAY

   O modal pode ficar fora de .prh-page, mas todas as classes permanecem
   prefixadas. Alterne a classe is-open e o atributo aria-hidden via JavaScript.

   <div class="prh-modal" role="dialog" aria-modal="true" aria-hidden="true">
       <div class="prh-modal-card">...</div>
   </div>
   ========================================================================== */

.prh-overlay {
    position: fixed;
    z-index: 9990;
    inset: 0;
    display: none;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(2px);
}

    .prh-overlay.is-open {
        display: block;
    }

.prh-modal {
    position: fixed;
    z-index: 9991;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--prh-space-5);
    background: rgba(15, 23, 42, 0.58);
}

    .prh-modal.is-open {
        display: flex;
    }

.prh-modal-card {
    width: min(560px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border-radius: var(--prh-radius-card);
    background: var(--prh-surface);
    color: var(--prh-text);
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
}

.prh-modal-lg .prh-modal-card {
    width: min(920px, 100%);
}

.prh-modal-sm .prh-modal-card {
    width: min(520px, 100%);
}

.prh-modal-md .prh-modal-card {
    width: min(620px, 100%);
}

/* Use quando existe um .prh-overlay separado controlado pelo mesmo script. */
.prh-modal-clear {
    background: transparent;
}

.prh-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--prh-space-3);
    padding: 18px var(--prh-space-5);
    border-bottom: 1px solid var(--prh-border);
    background: var(--prh-primary-soft);
}

.prh-modal-title {
    margin: 0;
    color: var(--prh-primary-dark);
    font-size: 20px;
}

.prh-modal-header h2 {
    margin: 0;
    color: var(--prh-primary-dark);
    font-size: 20px;
}

.prh-modal-body {
    padding: var(--prh-space-5);
}

.prh-modal-copy {
    margin: 0 0 var(--prh-space-3);
    color: var(--prh-muted);
}

.prh-modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--prh-space-2);
    padding: var(--prh-space-3) var(--prh-space-5);
    border-top: 1px solid var(--prh-border);
}

.prh-modal-footer-split {
    align-items: center;
    justify-content: space-between;
}

.prh-modal-step {
    color: var(--prh-muted);
    font-size: 12px;
    font-weight: 700;
}

/* Quadro simples de frequencia usado em modais e resumos. */
.prh-frequency-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    overflow: hidden;
    border: 1px solid var(--prh-border);
    border-radius: 10px;
}

    .prh-frequency-grid > div {
        padding: 11px 13px;
        border-bottom: 1px solid var(--prh-border);
    }

        .prh-frequency-grid > div:nth-last-child(-n+2) {
            border-bottom: 0;
        }

.prh-frequency-head {
    background: var(--prh-surface-subtle);
    color: var(--prh-text-secondary);
    font-weight: 800;
}

.prh-frequency-number {
    min-width: 70px;
    border-left: 1px solid var(--prh-border);
    text-align: center;
    font-weight: 900;
}

.prh-result-score {
    margin-bottom: var(--prh-space-3);
    padding: var(--prh-space-3) var(--prh-space-4);
    border-radius: 10px;
    background: var(--prh-primary-soft);
    font-size: 16px;
}

    .prh-result-score strong {
        color: var(--prh-primary-dark);
        font-size: 23px;
    }

/*
 * Resultado percentual da avaliacao.
 * A pagina adiciona is-positive para valores >= 50 e is-negative para < 50.
 * A regra e semantica: verde significa que atingiu o limite; vermelho, que
 * ficou abaixo. Pode ser usada em spans, labels, celulas ou resumos.
 *
 * Exemplo:
 *   <span class="prh-percentage is-positive">50%</span>
 */
.prh-percentage {
    border-radius: var(--prh-radius-control);
    transition: background var(--prh-transition), color var(--prh-transition), box-shadow var(--prh-transition);
}

    .prh-percentage.is-positive {
        background: var(--prh-success-soft);
        color: var(--prh-success);
        box-shadow: inset 0 0 0 1px var(--prh-success-border);
    }

    .prh-percentage.is-negative {
        background: var(--prh-danger-soft);
        color: var(--prh-danger);
        box-shadow: inset 0 0 0 1px var(--prh-danger-border);
    }

.prh-result-score .prh-percentage {
    display: inline-block;
    padding: 0 var(--prh-space-2);
}

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

.prh-result-column {
    min-height: 130px;
    padding: var(--prh-space-3) var(--prh-space-4);
    border: 1px solid var(--prh-border);
    border-radius: 10px;
}

    .prh-result-column h3 {
        margin: 0 0 var(--prh-space-2);
        font-size: 15px;
    }

    .prh-result-column.is-good h3 {
        color: var(--prh-success);
    }

    .prh-result-column.is-improve h3 {
        color: var(--prh-danger);
    }

/* ==========================================================================
   21. DOCUMENTOS E ANEXOS
   ========================================================================== */

.prh-dropzone {
    padding: var(--prh-space-6);
    border: 2px dashed var(--prh-border-strong);
    border-radius: var(--prh-radius-card);
    background: var(--prh-surface-subtle);
    color: var(--prh-muted);
    text-align: center;
    transition: border-color var(--prh-transition), background var(--prh-transition);
}

    .prh-dropzone:hover,
    .prh-dropzone:focus-within,
    .prh-dropzone.is-dragging {
        border-color: var(--prh-primary);
        background: var(--prh-primary-soft);
    }

.prh-document-list {
    display: flex;
    flex-direction: column;
    gap: var(--prh-space-2);
    margin: var(--prh-space-3) 0 0;
    padding: 0;
    list-style: none;
}

.prh-document {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: var(--prh-space-3);
    padding: 9px var(--prh-space-3);
    border: 1px solid var(--prh-border);
    border-radius: var(--prh-radius-small);
    background: var(--prh-surface);
}

.prh-document-name {
    min-width: 0;
    overflow: hidden;
    color: var(--prh-text);
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   22. UTILITARIOS CONTROLADOS

   Utilitarios evitam CSS pontual no .aspx. Use com moderacao; se o mesmo
   conjunto se repetir, transforme-o em componente prh-* nesta folha.
   ========================================================================== */

.prh-hidden {
    display: none !important;
}

.prh-block {
    display: block !important;
}

.prh-inline-flex {
    display: inline-flex !important;
}

.prh-flex {
    display: flex !important;
}

.prh-flex-wrap {
    flex-wrap: wrap !important;
}

.prh-grow {
    flex: 1 1 auto !important;
}

.prh-min-w-0 {
    min-width: 0 !important;
}

.prh-items-center {
    align-items: center !important;
}

.prh-justify-end {
    justify-content: flex-end !important;
}

.prh-text-left {
    text-align: left !important;
}

.prh-text-center {
    text-align: center !important;
}

.prh-text-right {
    text-align: right !important;
}

.prh-text-muted {
    color: var(--prh-muted) !important;
}

.prh-text-danger {
    color: var(--prh-danger) !important;
}

.prh-text-success {
    color: var(--prh-success) !important;
}

.prh-font-bold {
    font-weight: 800 !important;
}

.prh-nowrap {
    white-space: nowrap !important;
}

.prh-break-word {
    overflow-wrap: anywhere !important;
}

.prh-w-full {
    width: 100% !important;
}

.prh-m-0 {
    margin: 0 !important;
}

.prh-mt-1 {
    margin-top: var(--prh-space-1) !important;
}

.prh-mt-2 {
    margin-top: var(--prh-space-2) !important;
}

.prh-mt-3 {
    margin-top: var(--prh-space-3) !important;
}

.prh-mt-4 {
    margin-top: var(--prh-space-4) !important;
}

.prh-mb-0 {
    margin-bottom: 0 !important;
}

.prh-mb-2 {
    margin-bottom: var(--prh-space-2) !important;
}

.prh-mb-3 {
    margin-bottom: var(--prh-space-3) !important;
}

.prh-mb-4 {
    margin-bottom: var(--prh-space-4) !important;
}

.prh-gap-1 {
    gap: var(--prh-space-1) !important;
}

.prh-gap-2 {
    gap: var(--prh-space-2) !important;
}

.prh-gap-3 {
    gap: var(--prh-space-3) !important;
}

.prh-gap-4 {
    gap: var(--prh-space-4) !important;
}

/* ==========================================================================
   23. RESPONSIVIDADE

   Pontos de quebra oficiais. Novos componentes devem encaixar nestes pontos
   antes de criar uma media query exclusiva na pagina.
   ========================================================================== */

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

    .prh-grid-layout-3,
    .prh-data-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .prh-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .prh-filter-actions {
        grid-column: 1 / -1;
    }

    .prh-competency {
        grid-template-columns: 42px minmax(0, 1fr);
    }

        .prh-competency .prh-rating-group {
            grid-column: 2;
        }
}

@media (max-width: 720px) {
    .prh-page {
        padding: var(--prh-space-4);
    }

    .prh-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .prh-hero-actions {
        justify-content: flex-start;
    }

    .prh-grid-layout-2,
    .prh-grid-layout-3,
    .prh-data-list,
    .prh-filter-bar {
        grid-template-columns: 1fr;
    }

    .prh-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .prh-profile {
        grid-template-columns: 52px minmax(0, 1fr);
    }

        .prh-profile > :last-child {
            grid-column: 2;
            justify-self: start;
        }

    .prh-record {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .prh-record-icon {
        width: 42px;
        height: 42px;
    }

    .prh-record-action {
        grid-column: 2;
        justify-self: start;
    }

    .prh-criterion-header {
        grid-template-columns: 40px minmax(0, 1fr);
    }

        .prh-criterion-header > :last-child {
            grid-column: 2;
            justify-self: start;
        }

    .prh-criterion-description {
        padding-left: var(--prh-space-5);
    }

    .prh-development-grid,
    .prh-result-columns {
        grid-template-columns: 1fr;
    }

    .prh-scale,
    .prh-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .prh-competency {
        grid-template-columns: 36px minmax(0, 1fr);
        padding: var(--prh-space-3);
    }

        .prh-competency .prh-rating-group {
            grid-column: 1 / -1;
        }

    .prh-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .prh-page {
        padding-inline: var(--prh-space-1);
    }

    .prh-title {
        font-size: 25px;
    }

    .prh-card-header,
    .prh-card-body,
    .prh-card-footer,
    .prh-criterion-header,
    .prh-criterion-body {
        padding-right: var(--prh-space-4);
        padding-left: var(--prh-space-4);
    }

    .prh-card-header,
    .prh-card-footer,
    .prh-actions,
    .prh-modal-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .prh-kpi-grid,
    .prh-grid-layout-4,
    .prh-steps,
    .prh-scale,
    .prh-stat-grid {
        grid-template-columns: 1fr;
    }

    .prh-rating-group {
        grid-template-columns: repeat(2, minmax(70px, 1fr));
    }

    .prh-actions-buttons,
    .prh-actions-buttons .prh-btn,
    .prh-card-footer .prh-btn,
    .prh-modal-footer .prh-btn,
    .prh-hero-actions .prh-btn {
        width: 100%;
    }

    .prh-modal {
        padding: var(--prh-space-2);
    }

    .prh-modal-card {
        max-height: calc(100vh - 16px);
    }

    .prh-card-padded {
        padding: var(--prh-space-4);
    }

    .prh-inline-actions,
    .prh-modal-footer-split {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ==========================================================================
   24. IMPRESSAO
   Elementos operacionais desaparecem; conteudo permanece legivel e economico.
   ========================================================================== */

@media print {
    .prh-page {
        max-width: none;
        padding: 0;
        color: #000000;
    }

    .prh-no-print,
    .prh-hero-actions,
    .prh-filter-bar,
    .prh-actions,
    .prh-card-footer,
    .prh-pager,
    .prh-btn {
        display: none !important;
    }

    .prh-card,
    .prh-kpi,
    .prh-criterion,
    .prh-grid-scroll {
        break-inside: avoid;
        box-shadow: none;
    }

    .prh-grid-scroll {
        overflow: visible;
    }

    .prh-grid > tbody > tr > td {
        height: auto;
    }
}

/* Respeita usuarios que reduziram animacoes no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
    .prh-page *,
    .prh-page *::before,
    .prh-page *::after,
    .prh-modal *,
    .prh-modal *::before,
    .prh-modal *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   25. CHECKLIST PARA NOVAS MODERNIZACOES

   [ ] Pagina usa PortalModerna.master e mantem ProgramID/contexto existente.
   [ ] Conteudo esta dentro de .prh-page.
   [ ] Nenhum seletor CSS global foi criado no .aspx.
   [ ] Controles preservam ID, runat, eventos e validacoes originais.
   [ ] Campos usam Label com AssociatedControlID.
   [ ] Botoes possuem texto claro e somente uma acao primaria por bloco.
   [ ] GridView usa .prh-grid, linhas legiveis e wrapper .prh-grid-scroll.
   [ ] Status combinam cor com texto; mensagens usam role adequado.
   [ ] Listas extensas sao pesquisadas sob demanda.
   [ ] Tela foi conferida em desktop, tablet, celular e teclado.
   [ ] Cores do cliente entram apenas por variaveis --portal-*.
   [ ] Regras de negocio e acesso ao banco nao foram alterados pelo front-end.

   CONVENCAO PARA EXTENSOES
   --------------------------------------------------------------------------
   1. Reaproveite componentes existentes antes de criar novas classes.
   2. Novas classes globais devem iniciar com prh-.
   3. Modificadores usam nomes como .is-active, .is-open e .prh-*-compact.
   4. Variantes visuais devem consumir tokens --prh-*.
   5. CSS especifico de uma pagina deve usar prefixo proprio dentro de
      .prh-page e conter apenas o que nao for reutilizavel.
   ========================================================================== */