/* ==========================================================================
   Painel — tema global e primitivas de página.

   Toda página nova monta a tela com as classes `pg-*` daqui, em vez de repetir o CSS
   no `.razor.css`. A identidade é a do menu superior: azul-marinho de porto, latão nos
   detalhes, números tabulares (é um painel de operação, o dado é o protagonista).

   Como usar (esqueleto de uma página):

     <div class="pg pg-anim">
       <header class="pg-topo">
         <div>
           <span class="pg-eyebrow">Importação</span>
           <h1 class="pg-titulo">Título</h1>
           <p class="pg-sub">Uma frase que diz para que serve a tela.</p>
         </div>
         <div class="pg-metrica"><strong>12</strong> processos</div>
       </header>
       <div class="pg-filtros"> <input class="pg-input" /> <select class="pg-input">…</select> </div>
       <section class="pg-card"> … </section>
     </div>

   O CSS de um componente (`.razor.css`) fica só para o que é específico daquela tela.
   Ordem de carga: depois de app.css e antes do CSS isolado, em Components/App.razor.
   ========================================================================== */

:root {
    /* Marca (mesmos valores do menu superior) */
    --pt-brand: #0b4f71;
    --pt-brand-deep: #073853;
    --pt-brand-abyss: #041e2c;
    --pt-brass: #d9b46a;
    --pt-brass-deep: #a9803a;

    /* Superfícies e tinta — neutros com leve viés azul, o mesmo da marca */
    --pt-bg: #eef2f6;
    --pt-surface: #ffffff;
    --pt-surface-alt: #f6f8fb;
    --pt-line: #dbe2ea;
    --pt-line-soft: #e9eef4;
    --pt-ink: #16232e;
    --pt-ink-soft: #55636f;
    --pt-ink-mute: #8492a0;

    /* Estados (semânticos, separados da cor da marca) */
    --pt-ok: #1e7a3c;
    --pt-ok-bg: #e3f4ea;
    --pt-warn: #8a6410;
    --pt-warn-bg: #fbf0d3;
    --pt-crit: #b02a37;
    --pt-crit-bg: #fbe4e6;
    --pt-info: #0b4f71;
    --pt-info-bg: #dcecf5;
    --pt-neutro-bg: #e9eef4;

    /* Tipografia */
    --pt-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --pt-font-display: Georgia, "Times New Roman", serif;
    --pt-mono: "Cascadia Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;

    /* Forma e profundidade */
    --pt-radius: 12px;
    --pt-radius-sm: 8px;
    --pt-shadow-1: 0 1px 2px rgba(4, 30, 44, 0.06), 0 1px 1px rgba(4, 30, 44, 0.04);
    --pt-shadow-2: 0 8px 24px rgba(4, 30, 44, 0.12);
    --pt-shadow-3: 0 18px 48px rgba(4, 30, 44, 0.24);

    /* Movimento */
    --pt-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --pt-t-fast: 140ms;
    --pt-t: 220ms;
}

/* ---------- base global ---------- */

html, body {
    font-family: var(--pt-font);
    color: var(--pt-ink);
    background: var(--pt-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a, .btn-link {
    color: var(--pt-brand);
}

.btn-primary {
    color: #fff;
    background-color: var(--pt-brand);
    border-color: var(--pt-brand-deep);
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--pt-brand-deep);
        border-color: var(--pt-brand-abyss);
    }

/* Foco visível e consistente em tudo que se opera com teclado */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--pt-brand);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Números alinham em coluna em qualquer tabela do sistema */
table {
    font-variant-numeric: tabular-nums;
}

/* Transição curta em tudo que reage a hover/foco — sensação de resposta sem chamar atenção */
:where(button, a, input, select, textarea, .pg-card, tr) {
    transition: background-color var(--pt-t-fast) var(--pt-ease),
                border-color var(--pt-t-fast) var(--pt-ease),
                color var(--pt-t-fast) var(--pt-ease),
                box-shadow var(--pt-t-fast) var(--pt-ease),
                transform var(--pt-t-fast) var(--pt-ease);
}

/* Troca de página: a tela nova entra com um fade. Só opacidade de propósito — transform no
   contêiner da página criaria um bloco de contenção que quebra modais (position: fixed) e
   cabeçalhos sticky durante a animação. */
.content > * {
    animation: pt-entrada var(--pt-t) var(--pt-ease) both;
}

@keyframes pt-entrada {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------- página ---------- */

.pg {
    padding: 8px 4px 32px;
    box-sizing: border-box;
    color: var(--pt-ink);
}

/* Entrada escalonada dos blocos da página (subida curta + fade). Vale só para os filhos
   diretos, que são blocos comuns — nunca para overlays. */
.pg-anim > * {
    animation: pt-sobe var(--pt-t) var(--pt-ease) both;
}

    .pg-anim > *:nth-child(2) { animation-delay: 40ms; }
    .pg-anim > *:nth-child(3) { animation-delay: 80ms; }
    .pg-anim > *:nth-child(4) { animation-delay: 120ms; }
    .pg-anim > *:nth-child(n+5) { animation-delay: 160ms; }

@keyframes pt-sobe {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* Cabeçalho: eyebrow em latão + título serifado, o mesmo par do menu superior */
.pg-topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.pg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pt-brass-deep);
}

    .pg-eyebrow::before {
        content: "";
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: var(--pt-brass);
    }

.pg-titulo {
    margin: 2px 0 0;
    font-family: var(--pt-font-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--pt-brand-deep);
    text-wrap: balance;
}

.pg-sub {
    margin: 4px 0 0;
    max-width: 68ch;
    font-size: 13px;
    line-height: 1.45;
    color: var(--pt-ink-soft);
}

.pg-metrica {
    font-size: 12px;
    color: var(--pt-ink-soft);
    white-space: nowrap;
}

    .pg-metrica strong {
        margin-right: 4px;
        font-family: var(--pt-mono);
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--pt-brand-deep);
    }

/* ---------- superfícies ---------- */

.pg-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-1);
}

.pg-card-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--pt-line-soft);
    font-weight: 600;
    color: var(--pt-brand-deep);
}

.pg-card-corpo {
    padding: 16px;
}

/* ---------- filtros e campos ---------- */

.pg-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.pg-input {
    box-sizing: border-box;
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius-sm);
    background: var(--pt-surface);
    color: var(--pt-ink);
    font: inherit;
    font-size: 13px;
}

    .pg-input::placeholder {
        color: var(--pt-ink-mute);
    }

    .pg-input:hover {
        border-color: #c3ceda;
    }

    .pg-input:focus {
        outline: none;
        border-color: var(--pt-brand);
        box-shadow: 0 0 0 3px rgba(11, 79, 113, 0.16);
    }

textarea.pg-input {
    min-height: 0;
    resize: vertical;
}

.pg-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--pt-ink-soft);
    cursor: pointer;
    user-select: none;
}

    .pg-check input {
        accent-color: var(--pt-brand);
    }

/* ---------- botões ---------- */

.pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 14px;
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius-sm);
    background: var(--pt-surface);
    color: var(--pt-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .pg-btn:hover:not(:disabled) {
        border-color: var(--pt-brand);
        color: var(--pt-brand);
    }

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

    .pg-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.pg-btn-primario {
    background: var(--pt-brand);
    border-color: var(--pt-brand-deep);
    color: #fff;
}

    .pg-btn-primario:hover:not(:disabled) {
        background: var(--pt-brand-deep);
        border-color: var(--pt-brand-abyss);
        color: #fff;
    }

.pg-btn-perigo {
    background: var(--pt-crit);
    border-color: var(--pt-crit);
    color: #fff;
}

    .pg-btn-perigo:hover:not(:disabled) {
        background: #93222d;
        border-color: #93222d;
        color: #fff;
    }

.pg-link {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-brand);
    cursor: pointer;
}

    .pg-link:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

/* ---------- chips e avisos ---------- */

.pg-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--pt-neutro-bg);
    color: var(--pt-ink-soft);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pg-chip-ok { background: var(--pt-ok-bg); color: var(--pt-ok); }
.pg-chip-aviso { background: var(--pt-warn-bg); color: var(--pt-warn); }
.pg-chip-critico { background: var(--pt-crit-bg); color: var(--pt-crit); }
.pg-chip-info { background: var(--pt-info-bg); color: var(--pt-info); }

.pg-aviso {
    margin-bottom: 12px;
    padding: 9px 13px;
    border-radius: var(--pt-radius-sm);
    border: 1px solid var(--pt-crit-bg);
    background: var(--pt-crit-bg);
    color: var(--pt-crit);
    font-size: 13px;
}

.pg-vazio {
    padding: 36px 16px;
    text-align: center;
    color: var(--pt-ink-mute);
    font-size: 13px;
}

/* ---------- tabela ---------- */

.pg-tabela-wrap {
    overflow-x: auto;
    background: var(--pt-surface);
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-1);
}

.pg-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .pg-tabela th {
        padding: 10px 12px;
        text-align: left;
        white-space: nowrap;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--pt-ink-mute);
        background: var(--pt-surface-alt);
        border-bottom: 1px solid var(--pt-line);
    }

    .pg-tabela td {
        padding: 9px 12px;
        vertical-align: middle;
        border-bottom: 1px solid var(--pt-line-soft);
    }

    .pg-tabela tbody tr:last-child td {
        border-bottom: none;
    }

    .pg-tabela tbody tr:hover {
        background: #f0f6fb;
    }

/* ---------- modal ---------- */

.pg-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background: rgba(4, 30, 44, 0.45);
    animation: pt-entrada var(--pt-t) var(--pt-ease) both;
}

.pg-modal {
    width: min(560px, 100%);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--pt-surface);
    border-radius: 14px;
    box-shadow: var(--pt-shadow-3);
    color: var(--pt-ink);
    animation: pt-modal var(--pt-t) var(--pt-ease) both;
}

@keyframes pt-modal {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.pg-modal-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--pt-line-soft);
}

    .pg-modal-cab h2 {
        margin: 0;
        font-family: var(--pt-font-display);
        font-size: 18px;
        color: var(--pt-brand-deep);
    }

.pg-modal-corpo {
    padding: 16px 18px;
    overflow-y: auto;
}

.pg-modal-rodape {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--pt-line-soft);
    background: var(--pt-surface-alt);
}

/* ---------- responsivo e acessibilidade ---------- */

@media (max-width: 720px) {
    .pg-topo {
        flex-direction: column;
        align-items: flex-start;
    }

    .pg-titulo {
        font-size: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content > *,
    .pg-anim > *,
    .pg-overlay,
    .pg-modal {
        animation: none;
    }

    :where(button, a, input, select, textarea, .pg-card, tr) {
        transition: none;
    }
}