/* ══════════════════════════════════════════════════════════════════════════
   Panorama — tema por empresa
   As cores-base da empresa ativa (--brand-p, --brand-a, --brand-x e as triplas
   -rgb) chegam por um <style> gerado em `shared/tema.py`. Daqui sai o resto:
   tons derivados, modo escuro, o layout (sidebar/cabeçalho) e os componentes
   `pn-*` usados pelas telas novas. As telas antigas herdam a marca pelas cores
   do Tailwind (primary, card, border...), que apontam para estas variáveis.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --font-body: "Archivo", system-ui, sans-serif;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --brand: var(--brand-p);
    --brand-deep: color-mix(in oklch, var(--brand-p) 74%, black);
    --brand-accent: var(--brand-a);
    --chart-1: var(--brand-p);

    --color-bg: #f4f4f6;
    --color-surface: #ffffff;
    --color-text: #201e1d;
    --color-divider: rgba(32, 30, 29, .14);
    --color-accent: var(--brand-p);
    --color-accent-100: color-mix(in oklch, var(--color-accent) 10%, var(--color-bg));
    --color-accent-200: color-mix(in oklch, var(--color-accent) 24%, var(--color-bg));
    --color-accent-600: color-mix(in oklch, var(--color-accent) 85%, black);
    --color-accent-700: color-mix(in oklch, var(--color-accent) 70%, black);
    --color-accent-800: color-mix(in oklch, var(--color-accent) 70%, black);
    --color-neutral-100: #e3e1e1;
    --color-neutral-800: #444141;
    --muted: rgba(32, 30, 29, .64);
    --hair: rgba(32, 30, 29, .10);
    --panel: #ffffff;

    --shadow-card: 0 1px 2px rgba(20, 20, 40, .04), 0 6px 18px rgba(20, 20, 40, .05);
    --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

    /* Painel de marca do login */
    --lp-bg: color-mix(in oklch, var(--brand-p) 7%, white);
    --lp-ink: var(--brand-p);
    --lp-glass: rgba(255, 255, 255, .72);
    --lp-glass-sh: 0 10px 30px color-mix(in srgb, var(--brand-p) 10%, transparent);
    --lp-chip: #ffffff;
    --lp-blob: color-mix(in oklch, var(--brand-p) 35%, transparent);

    /* Lidos pelo tailwind.config do base.html */
    --pn-primary-rgb: var(--pn-p-rgb);
    --pn-primary-50-rgb: var(--pn-p50-rgb);
    --pn-primary-600-rgb: var(--pn-p600-rgb);
    --pn-primary-700-rgb: var(--pn-p700-rgb);

    color-scheme: light;
}

/* No escuro o acento assume o papel de cor de interface: a primária das marcas
   é escura demais para destacar algo sobre fundo quase preto. */
html.dark {
    --brand: color-mix(in oklch, var(--brand-p) 82%, black);
    --brand-deep: color-mix(in oklch, var(--brand-p) 60%, black);
    --chart-1: color-mix(in oklch, var(--brand-p) 50%, white);

    --color-bg: #121214;
    --color-surface: #1f1f24;
    --color-text: #ecebe9;
    --color-divider: rgba(236, 235, 233, .16);
    --color-accent: var(--brand-a);
    --color-accent-100: color-mix(in oklch, var(--color-accent) 18%, var(--color-bg));
    --color-accent-600: color-mix(in oklch, var(--color-accent) 85%, white);
    --color-accent-700: color-mix(in oklch, var(--color-accent) 70%, white);
    --color-accent-800: color-mix(in oklch, var(--color-accent) 45%, white);
    --color-neutral-100: #2a2a2f;
    --color-neutral-800: #d4d2cf;
    --muted: rgba(236, 235, 233, .62);
    --hair: rgba(236, 235, 233, .12);
    --panel: #1b1b1f;

    --shadow-card: 0 1px 0 rgba(255, 255, 255, .03);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);

    --lp-bg: color-mix(in oklch, var(--brand-p) 82%, black);
    --lp-ink: #ffffff;
    --lp-glass: rgba(255, 255, 255, .07);
    --lp-glass-sh: none;
    --lp-chip: rgba(255, 255, 255, .92);
    --lp-blob: rgba(110, 150, 255, .55);

    --pn-primary-rgb: var(--pn-a-rgb);
    --pn-primary-50-rgb: var(--pn-a50-rgb);
    --pn-primary-600-rgb: var(--pn-a600-rgb);
    --pn-primary-700-rgb: var(--pn-a700-rgb);

    color-scheme: dark;
}

html {
    background-color: var(--color-bg);
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
}

::selection {
    background: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: rgba(127, 127, 127, .35);
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* Campos no escuro. As telas antigas nasceram sem tema escuro e muitas não têm
   variante `dark:` nos campos: o plugin de forms do Tailwind os deixava brancos
   com texto claro, ilegíveis. Especificidade (0,1,1) de propósito: vence o plugin
   e o `bg-white` (0,1,0), mas perde para um `dark:bg-*` da própria tela (0,2,0). */
html.dark :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"],
        [type="submit"], [type="button"], [type="reset"]), select, textarea) {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-divider);
}

.pn-icon {
    display: block;
    flex-shrink: 0;
}

.pn-only-dark {
    display: none !important;
}

html.dark .pn-only-dark {
    display: block !important;
}

html.dark .pn-only-light {
    display: none !important;
}

.turbo-progress-bar {
    height: 3px;
    background: var(--brand-a);
}

/* ── Animações ───────────────────────────────────────────────────────────── */
@keyframes pnFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pnRise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes pnSpin { to { transform: rotate(360deg); } }
@keyframes pnDrift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(18%, 22%) scale(1.15); } }
@keyframes pnDrift2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-20%, -14%) scale(.95); } }
@keyframes pnBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pnSlideIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes pnPop { from { opacity: 0; transform: scale(.85) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pnProg { from { width: 0; } to { width: 100%; } }
@keyframes pnRing { from { transform: scale(.6); opacity: .7; } to { transform: scale(1.9); opacity: 0; } }
@keyframes pnType { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes pnWidth { from { width: 0; } }

/* ── Componentes ─────────────────────────────────────────────────────────── */
.pn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-text);
    background: transparent;
    border: 1px solid transparent;
    padding: 8px 14.4px;
    border-radius: var(--radius-md);
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .2s ease, box-shadow .2s ease;
}

.pn-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.pn-btn:focus-visible,
.pn-nav-item:focus-visible,
.pn-ctx-btn:focus-visible,
.pn-pop-item:focus-visible,
.pn-pick:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.pn-btn-primary {
    background: var(--color-accent);
    color: var(--color-bg);
}

.pn-btn-primary:hover {
    background: var(--color-accent-600);
}

.pn-btn-primary:active {
    background: var(--color-accent-700);
}

.pn-btn-secondary {
    border-color: var(--color-divider);
}

.pn-btn-secondary:hover,
.pn-btn-icon:hover {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.pn-btn-secondary:active,
.pn-btn-icon:active {
    background: color-mix(in srgb, var(--color-text) 14%, transparent);
}

.pn-btn-ghost {
    color: var(--color-accent);
    padding-inline: 4px;
}

.pn-btn-ghost:hover {
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.pn-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
}

.pn-field > label {
    display: block;
    font-size: 12px;
    margin-bottom: 5px;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* Qualificado pelo elemento: o plugin de forms do Tailwind estiliza
   `[type='email']`, `select` etc. com a mesma especificidade de uma classe. */
input.pn-input,
select.pn-input,
textarea.pn-input {
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text);
    caret-color: var(--color-accent);
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

textarea.pn-input {
    min-height: 90px;
    resize: vertical;
}

input.pn-input::placeholder,
textarea.pn-input::placeholder {
    color: var(--muted);
    opacity: 1;
}

input.pn-input:hover,
select.pn-input:hover,
textarea.pn-input:hover {
    border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

input.pn-input:focus,
select.pn-input:focus,
textarea.pn-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-accent-100);
}

.pn-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    letter-spacing: .02em;
    padding: 3px 10px;
    border-radius: calc(var(--radius-md) * .75);
    white-space: nowrap;
}

.pn-tag-accent {
    background: var(--color-accent-100);
    color: var(--color-accent-800);
}

.pn-tag-neutral {
    background: var(--color-neutral-100);
    color: var(--color-neutral-800);
}

/* ── Casca do app: sidebar ───────────────────────────────────────────────── */
.app-shell {
    height: 100vh;
    height: 100dvh;
}

.pn-sidebar {
    position: relative;
    z-index: 45;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    width: 240px;
    background: var(--brand);
    color: rgba(255, 255, 255, .74);
    transition: width .18s ease, background .3s ease;
}

.pn-sb-logo {
    height: 52px;
    margin: 12px 10px 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.pn-sb-logo img {
    max-height: 38px;
    max-width: 196px;
    object-fit: contain;
}

/* Logo sem versão para fundo escuro: vai numa placa clara. */
.pn-sb-logo-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    width: 100%;
    padding: 0 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .95);
}

.pn-sb-logo .pn-sb-mark {
    height: 22px;
    margin: 0 auto;
}

.pn-ctx {
    position: relative;
    padding: 4px 0 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.pn-ctx-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 20px);
    margin: 3px 10px;
    border-radius: 10px;
    padding: 8px 10px;
    border: 0;
    background: rgba(255, 255, 255, .06);
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: background .15s ease;
}

.pn-ctx-btn:hover,
.pn-ctx-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, .1);
}

.pn-ctx-kicker {
    display: block;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.pn-ctx-value {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pn-ctx-chev {
    display: flex;
    color: rgba(255, 255, 255, .6);
}

.pn-pop {
    position: absolute;
    left: 12px;
    right: -140px;
    z-index: 50;
    background: var(--panel);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--hair);
    border-radius: 14px;
    padding: 6px;
    overflow: hidden;
    animation: pnPop .16s cubic-bezier(.2, .7, .2, 1) both;
}

.pn-pop-title {
    padding: 10px 14px 6px;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.pn-pop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
}

.pn-pop-item:hover {
    background: var(--color-accent-100);
}

.pn-pop-item .pn-pop-check {
    display: flex;
    color: var(--color-accent);
}

.pn-pop-swatch {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
}

.pn-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0 12px;
}

.pn-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .14);
}

.pn-nav-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px 6px 20px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .5);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: left;
    cursor: default;
}

button.pn-nav-label {
    cursor: pointer;
}

button.pn-nav-label:hover {
    color: rgba(255, 255, 255, .8);
}

.pn-nav-label .pn-chev {
    display: flex;
    transition: transform .15s ease;
}

.pn-nav-rule {
    height: 1px;
    margin: 8px 14px;
    background: rgba(255, 255, 255, .14);
}

.pn-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 20px);
    margin: 1px 10px;
    height: 34px;
    border-radius: 9px;
    padding: 0 10px;
    color: rgba(255, 255, 255, .74);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.pn-nav-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.pn-nav-item.is-active {
    color: #fff;
    font-weight: 600;
    background: color-mix(in srgb, var(--brand-accent) 26%, transparent);
}

.pn-nav-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pn-nav-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand-accent);
}

/* Grupo recolhível (Administração). Abre por: tela ativa dentro dele (servidor
   marca .is-open), preferência guardada (html.pn-admin-open) ou sidebar só com
   ícones — sem rótulo não há onde clicar para abrir. */
.pn-nav-group-toggle .pn-nav-items {
    display: none;
}

.pn-nav-group-toggle.is-open .pn-nav-items,
html.pn-admin-open .pn-nav-group-toggle .pn-nav-items {
    display: block;
}

.pn-nav-group-toggle.is-open .pn-chev,
html.pn-admin-open .pn-nav-group-toggle .pn-chev {
    transform: rotate(90deg);
}

.pn-sb-foot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.pn-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

.pn-sb-user {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.pn-sb-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pn-sb-user-role {
    font-size: 11px;
    color: rgba(255, 255, 255, .6);
}

.pn-sb-logout {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: rgba(255, 255, 255, .74);
    transition: background .15s ease, color .15s ease;
}

.pn-sb-logout:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.pn-only-collapsed {
    display: none !important;
}

/* Modo só ícones existe apenas no desktop; abaixo disso a sidebar vira gaveta. */
@media (min-width: 1024px) {
    html.sidebar-is-collapsed .pn-sidebar {
        width: 64px;
    }

    html.sidebar-is-collapsed .pn-sidebar .pn-only-expanded {
        display: none !important;
    }

    html.sidebar-is-collapsed .pn-sidebar .pn-only-collapsed {
        display: flex !important;
    }

    html.sidebar-is-collapsed .pn-sidebar .pn-nav-rule.pn-only-collapsed {
        display: block !important;
    }

    html.sidebar-is-collapsed .pn-sb-logo {
        justify-content: center;
    }

    html.sidebar-is-collapsed .pn-nav-item {
        justify-content: center;
        padding: 0;
    }

    /* Com 64px, a barra de rolagem tirava os ícones do centro. Continua rolando. */
    html.sidebar-is-collapsed .pn-nav {
        scrollbar-width: none;
    }

    html.sidebar-is-collapsed .pn-nav::-webkit-scrollbar {
        display: none;
    }

    html.sidebar-is-collapsed .pn-nav-group-toggle .pn-nav-items {
        display: block;
    }

    /* Só ícones: avatar e Sair empilhados. Antes o Sair sumia e não havia como sair. */
    html.sidebar-is-collapsed .pn-sb-foot {
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        padding: 12px 0;
    }
}

#sidebar-backdrop {
    display: none;
}

@media (max-width: 1023px) {
    .pn-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(280px, 85vw);
        z-index: 50;
        transform: translateX(-100%);
        transition: transform .3s ease;
    }

    html.sidebar-is-expanded .pn-sidebar {
        transform: translateX(0);
    }

    html.sidebar-is-expanded #sidebar-backdrop {
        display: block;
    }

    .pn-pop {
        right: 12px;
    }
}

/* ── Casca do app: cabeçalho e conteúdo ──────────────────────────────────── */
.pn-header {
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px 0 12px;
    border-bottom: 1px solid var(--color-divider);
    background: var(--color-bg);
}

.pn-header .pn-btn-icon {
    color: var(--color-text);
}

.pn-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
}

.pn-crumb-mod,
.pn-crumb-sep {
    color: var(--muted);
    white-space: nowrap;
}

.pn-crumb-cur {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pn-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pn-main {
    flex: 1;
    overflow-y: auto;
}

.pn-main-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 18px 22px 40px;
}

@media (max-width: 640px) {
    .pn-header {
        padding: 0 12px 0 8px;
    }

    .pn-crumb-mod,
    .pn-crumb-sep {
        display: none;
    }

    .pn-main-inner {
        padding: 14px 12px 32px;
    }
}

/* ── Toasts ──────────────────────────────────────────────────────────────── */
#gco-toasts {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

.gco-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--hair);
    background: var(--panel);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
    font-size: 14px;
    line-height: 1.4;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .25s ease, transform .25s ease;
}

.gco-toast.is-visible {
    opacity: 1;
    transform: none;
}

.gco-toast.is-leaving {
    opacity: 0;
    transform: translateX(24px);
}

.gco-toast-icon {
    display: flex;
    flex-shrink: 0;
    margin-top: 1px;
}

.gco-toast-success .gco-toast-icon { color: #139A5B; }
.gco-toast-error .gco-toast-icon { color: #D92D20; }
.gco-toast-warning .gco-toast-icon { color: #D99A00; }
.gco-toast-info .gco-toast-icon { color: var(--color-accent); }

.gco-toast-msg {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.gco-toast-close {
    display: flex;
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
}

.gco-toast-close:hover {
    color: var(--color-text);
}

/* Campo reprovado na validação: o balão nativo some, então o destaque
   visual é o que aponta onde está o problema. */
.gco-campo-invalido {
    border-color: #D92D20 !important;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, .15) !important;
}

/* ── Confirmação ─────────────────────────────────────────────────────────── */
.gco-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(12, 12, 22, .52);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .15s ease;
}

.gco-modal-overlay.is-visible {
    opacity: 1;
}

.gco-modal {
    width: min(480px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--panel);
    color: var(--color-text);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    padding: 20px;
    opacity: 0;
    transform: scale(.85) translateY(8px);
    transition: opacity .22s ease, transform .22s cubic-bezier(.2, .7, .2, 1);
}

.gco-modal-overlay.is-visible .gco-modal {
    opacity: 1;
    transform: none;
}

.gco-modal-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.gco-modal-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #D92D20 14%, transparent);
    color: #D92D20;
}

.gco-modal-neutro .gco-modal-icon {
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent);
}

.gco-modal-body {
    flex: 1;
    min-width: 0;
}

.gco-modal-title {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}

.gco-modal-msg {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.gco-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.gco-modal-actions .pn-btn {
    height: 38px;
}

.gco-modal-ok {
    min-width: 120px;
    justify-content: space-between !important;
    gap: 10px !important;
    background: #D92D20;
    color: #fff;
}

.gco-modal-ok:hover {
    background: #b42318;
}

.gco-modal-neutro .gco-modal-ok {
    background: var(--color-accent);
    color: var(--color-bg);
}

.gco-modal-neutro .gco-modal-ok:hover {
    background: var(--color-accent-600);
}

/* ── Campo de arquivo ────────────────────────────────────────────────────── */
.gco-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.gco-file input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.gco-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-divider);
    background: transparent;
    color: var(--color-text);
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.gco-file-btn:hover {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.gco-file-btn .material-symbols-outlined {
    font-size: 18px;
}

.gco-file-nome {
    font-size: 13px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.gco-file-limpar {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--muted);
    line-height: 1;
    padding: 0;
    font-size: 18px;
}

/* ── Telas de entrada: login ─────────────────────────────────────────────── */
.pn-login {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
}

.pn-login-wrap {
    display: flex;
    flex-wrap: wrap;
    min-height: 100%;
}

.pn-login-aside {
    flex: 1 1 440px;
    position: relative;
    overflow: hidden;
    min-height: 320px;
    background: var(--lp-bg);
    color: var(--lp-ink);
    border-right: 1px solid var(--hair);
    transition: background .3s ease, color .3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    padding: clamp(28px, 5vw, 56px);
}

.pn-login-main {
    flex: 1 1 420px;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(28px, 5vw, 64px);
}

/* No celular o formulário vem primeiro: o painel de marca é vitrine, não tarefa. */
@media (max-width: 879px) {
    .pn-login-main {
        order: -1;
        min-height: 100dvh;
    }

    .pn-login-aside {
        border-right: 0;
        border-top: 1px solid var(--hair);
    }
}

.pn-fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.pn-fx > * {
    position: absolute;
}

.pn-fx-dots {
    inset: 0;
    background-image: radial-gradient(color-mix(in srgb, var(--lp-ink) 10%, transparent) 1px, transparent 1.2px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(160deg, rgba(0, 0, 0, .9), transparent 70%);
    mask-image: linear-gradient(160deg, rgba(0, 0, 0, .9), transparent 70%);
}

.pn-fx-blob1 {
    width: 70%;
    aspect-ratio: 1;
    left: -20%;
    top: -25%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand-accent) 60%, transparent), transparent 62%);
    filter: blur(30px);
    opacity: .5;
    animation: pnDrift1 16s ease-in-out infinite alternate;
}

.pn-fx-blob2 {
    width: 80%;
    aspect-ratio: 1;
    right: -30%;
    bottom: -35%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lp-blob), transparent 62%);
    filter: blur(40px);
    opacity: .45;
    animation: pnDrift2 20s ease-in-out infinite alternate;
}

.pn-fx-orbit1 {
    width: 62%;
    aspect-ratio: 1;
    right: -16%;
    top: 8%;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--lp-ink) 14%, transparent);
    animation: pnSpin 60s linear infinite;
}

.pn-fx-orbit1 > span {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: -5px;
    left: calc(50% - 5px);
    background: var(--brand-accent);
    box-shadow: 0 0 16px var(--brand-accent);
}

.pn-fx-orbit2 {
    width: 44%;
    aspect-ratio: 1;
    right: -7%;
    top: 17%;
    border-radius: 50%;
    border: 1px dashed color-mix(in srgb, var(--lp-ink) 18%, transparent);
    animation: pnSpin 40s linear infinite reverse;
}

.pn-fx-orbit2 > span {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    bottom: -3px;
    left: calc(50% - 3px);
    background: var(--lp-ink);
    opacity: .8;
}

.pn-lockup {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    animation: pnFadeUp .7s cubic-bezier(.2, .7, .2, 1) both;
}

.pn-lockup-mark {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--lp-ink) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--lp-ink) 16%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pn-lockup-mark img {
    height: 34px;
}

.pn-lockup-name {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.15;
}

.pn-lockup-sub {
    font-size: 11px;
    letter-spacing: .22em;
    line-height: 1.15;
    color: color-mix(in srgb, var(--lp-ink) 70%, transparent);
}

.pn-car {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 3vh, 28px);
}

.pn-glass {
    position: relative;
    width: min(420px, 100%);
    min-height: 176px;
    border-radius: 20px;
    background: var(--lp-glass);
    box-shadow: var(--lp-glass-sh);
    border: 1px solid color-mix(in srgb, var(--lp-ink) 16%, transparent);
    backdrop-filter: blur(6px);
    padding: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    animation: pnPop .6s cubic-bezier(.2, .7, .2, 1) both;
}

.pn-glass-radar {
    align-items: center;
}

.pn-radar-ring {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--lp-ink) 50%, transparent);
    animation: pnRing 3s ease-out infinite;
}

.pn-radar-core {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.pn-radar-core img {
    height: 36px;
}

.pn-radar-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-ink) 18%, transparent);
    animation: pnPop .5s ease both;
}

.pn-bars-stats {
    display: flex;
    gap: 18px;
    font-size: 11px;
    color: color-mix(in srgb, var(--lp-ink) 75%, transparent);
}

.pn-bars-stats strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: var(--lp-ink);
}

.pn-bars {
    height: 96px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.pn-bars > span {
    flex: 1;
    border-radius: 6px 6px 2px 2px;
    background: color-mix(in srgb, var(--lp-ink) 70%, transparent);
    transform-origin: bottom;
    animation: pnBar .7s cubic-bezier(.2, .7, .2, 1) both;
}

.pn-bars > span:last-child {
    background: var(--brand-accent);
}

.pn-mail-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--lp-ink) 8%, transparent);
    animation: pnSlideIn .55s cubic-bezier(.2, .7, .2, 1) both;
}

.pn-mail-ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--lp-chip);
    color: var(--brand);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pn-mail-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pn-line {
    height: 8px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--lp-ink) 55%, transparent);
    animation: pnWidth .7s ease both;
}

.pn-line.is-soft {
    background: color-mix(in srgb, var(--lp-ink) 30%, transparent);
}

.pn-mail-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 99px;
    background: var(--lp-chip);
    color: #201e1d;
    white-space: nowrap;
}

.pn-mail-chip > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.pn-chat-user {
    align-self: flex-end;
    max-width: 78%;
    padding: 8px 12px;
    border-radius: 14px 14px 4px 14px;
    background: var(--brand-accent);
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    animation: pnPop .45s ease .2s both;
}

.pn-chat-nora {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    animation: pnPop .45s ease .8s both;
}

.pn-chat-nora img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.pn-chat-bubble {
    flex: 1;
    max-width: 80%;
    padding: 10px 12px;
    border-radius: 4px 14px 14px 14px;
    background: var(--lp-chip);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pn-typing {
    display: flex;
    gap: 4px;
    height: 8px;
    align-items: center;
}

.pn-typing > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
    animation: pnType 1s ease infinite;
}

.pn-chat-line {
    height: 7px;
    border-radius: 99px;
    animation: pnWidth .8s ease both;
}

.pn-car-text {
    min-height: clamp(120px, 13vw, 190px);
}

.pn-car-kicker {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--lp-ink) 70%, transparent);
    animation: pnFadeUp .5s ease .05s both;
}

.pn-car-title-clip {
    overflow: hidden;
    padding-bottom: .08em;
    margin-top: 10px;
}

.pn-car-title {
    margin: 0;
    font-size: clamp(32px, 4vw, 76px);
    font-weight: 800;
    line-height: .98;
    overflow-wrap: anywhere;
    letter-spacing: -.035em;
    color: var(--lp-ink);
    text-wrap: balance;
    animation: pnRise .8s cubic-bezier(.2, .7, .2, 1) .1s both;
}

.pn-car-sub {
    margin: 16px 0 0;
    max-width: 440px;
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.45;
    color: color-mix(in srgb, var(--lp-ink) 86%, transparent);
    animation: pnFadeUp .6s ease .35s both;
}

.pn-car-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pn-car-dot {
    width: 28px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    cursor: pointer;
    background: color-mix(in srgb, var(--lp-ink) 25%, transparent);
    overflow: hidden;
    transition: width .3s ease;
}

.pn-car-dot.is-past {
    background: color-mix(in srgb, var(--lp-ink) 70%, transparent);
}

.pn-car-dot.is-active {
    width: 56px;
}

.pn-car-dot > span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--lp-ink);
    animation: pnProg 5.5s linear both;
}

.pn-themeseg {
    position: absolute;
    top: clamp(16px, 3vw, 28px);
    right: clamp(16px, 3vw, 28px);
    z-index: 2;
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--panel);
    border: 1px solid var(--hair);
    box-shadow: var(--shadow-card);
    animation: pnFadeUp .6s ease .1s both;
}

.pn-themeseg button {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: var(--muted);
    transition: background .2s ease, color .2s ease;
}

html:not(.dark) .pn-themeseg [data-tema="claro"],
html.dark .pn-themeseg [data-tema="escuro"] {
    background: var(--color-accent);
    color: var(--color-bg);
}

.pn-login-form {
    width: 100%;
    max-width: 400px;
    margin: auto;
    display: flex;
    flex-direction: column;
}

.pn-login-logo {
    height: 40px;
    width: auto;
    align-self: flex-start;
    margin-bottom: 40px;
}

.pn-login-title {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.015em;
}

.pn-login-sub {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--muted);
}

.pn-input-ico {
    position: relative;
    display: flex;
    align-items: center;
}

.pn-input-ico > .pn-input-ico-lead {
    position: absolute;
    left: 12px;
    display: flex;
    color: var(--muted);
    pointer-events: none;
}

.pn-input-ico input.pn-input {
    padding-left: 40px;
    min-height: 46px;
}

.pn-eye {
    position: absolute;
    right: 6px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.pn-eye:hover {
    background: var(--color-accent-100);
    color: var(--color-text);
}

.pn-login-submit {
    margin-top: 8px;
    height: 48px;
    width: 100%;
    justify-content: space-between;
    padding: 0 18px;
    font-size: 15px;
}

.pn-login-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.pn-spin {
    display: flex;
    animation: pnSpin .8s linear infinite;
}

.pn-divider-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.pn-divider-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-divider);
}

.pn-login-google {
    height: 48px;
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 18px;
    font-size: 14px;
    background: var(--panel);
}

.pn-login-google:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
    background: var(--panel);
}

.pn-login-copy {
    margin: 40px 0 0;
    font-size: 12px;
    color: var(--muted);
}

.pn-fade-1 { animation: pnFadeUp .6s ease .2s both; }
.pn-fade-2 { animation: pnFadeUp .6s ease .28s both; }
.pn-fade-3 { animation: pnFadeUp .6s ease .34s both; }
.pn-fade-4 { animation: pnFadeUp .6s ease .42s both; }
.pn-fade-5 { animation: pnFadeUp .6s ease .5s both; }
.pn-fade-6 { animation: pnFadeUp .6s ease .58s both; }
.pn-fade-7 { animation: pnFadeUp .6s ease .66s both; }
.pn-fade-8 { animation: pnFadeUp .6s ease .72s both; }
.pn-fade-9 { animation: pnFadeUp .6s ease .8s both; }

/* Modal de credenciais inválidas: mesmo desenho da confirmação. */
.pn-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 250;
    background: rgba(12, 12, 22, .52);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: pnFadeUp .15s ease both;
}

.pn-dialog {
    width: min(480px, 100%);
    background: var(--panel);
    color: var(--color-text);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    padding: 20px;
    animation: pnPop .22s cubic-bezier(.2, .7, .2, 1) both;
}

/* ── Telas de entrada: seleção de empresa e módulo ───────────────────────── */
.pn-entry {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.pn-entry-header {
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 40px;
    border-bottom: 1px solid var(--color-divider);
}

.pn-entry-header .pn-btn-ghost {
    color: var(--color-text);
}

.pn-entry-sep {
    width: 1px;
    height: 28px;
    background: var(--color-divider);
}

.pn-entry-actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

/* Centralizado também na vertical: com poucos cartões o bloco ficava no topo e
   sobrava a tela inteira vazia embaixo. */
.pn-entry-body {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 32px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pn-kicker {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.pn-entry-title {
    margin: 10px 0 0;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.015em;
}

.pn-entry-sub {
    margin: 8px 0 0;
    font-size: 15px;
    color: var(--muted);
}

.pn-pick-grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.pn-pick {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding: 24px 24px 20px;
    min-height: 210px;
    text-align: left;
    border: 1px solid var(--hair);
    border-radius: 20px;
    background: var(--panel);
    box-shadow: var(--shadow-card);
    color: inherit;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.pn-pick:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(20, 20, 40, .12);
    border-color: var(--color-accent);
}

.pn-pick-top {
    height: 22px;
    display: flex;
    align-items: center;
}

.pn-pick-logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 8px;
    min-height: 120px;
}

.pn-pick-logo img {
    max-height: 72px;
    max-width: 100%;
    object-fit: contain;
}

.pn-pick-logo-fallback {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: var(--color-accent-100);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pn-pick-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pn-pick-name {
    font-size: 16px;
    font-weight: 800;
}

.pn-pick-arrow {
    display: flex;
    color: var(--color-accent);
}

.pn-pick-mod {
    gap: 16px;
    padding: 24px;
    min-height: 200px;
}

.pn-mod-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 30%, transparent);
}

.pn-mod-name {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

.pn-mod-desc {
    margin: 0;
    flex: 1;
    font-size: 14px;
    color: var(--muted);
}

.pn-mod-go {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 800;
    color: var(--color-accent);
}

@media (max-width: 600px) {

    /* No celular os botões do cabeçalho ficam só com o ícone (rótulo no title). */
    .pn-entry-label {
        display: none;
    }
}

@media (max-width: 640px) {
    .pn-entry-header {
        padding: 0 16px;
        gap: 12px;
    }

    .pn-entry-body {
        padding: 24px 16px;
    }

    .pn-entry-title {
        font-size: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .pn-login *,
    .pn-entry *,
    .pn-pop,
    .gco-toast,
    .gco-modal-overlay,
    .gco-modal {
        animation: none !important;
        transition: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Componentes de página (telas internas)
   Os blocos que se repetem no design: cabeçalho de página, cartões, filtros,
   KPIs, barras, tabelas, status, formulários, linha do tempo. Cores de status
   vêm de --c, definido pelas classes .pn-c-* (ou inline: style="--c: #hex").
   ══════════════════════════════════════════════════════════════════════════ */

.pn-c-red { --c: #D92D20; }
.pn-c-amber { --c: #D99A00; }
.pn-c-green { --c: #139A5B; }
.pn-c-blue { --c: #3B7BE0; }
.pn-c-violet { --c: #7C4DDB; }
.pn-c-slate { --c: #9A9794; }
.pn-c-slate-dark { --c: #605D5D; }
.pn-c-indigo { --c: #4F55D6; }
.pn-c-teal { --c: #0E9384; }
.pn-c-cyan { --c: #0B9AC2; }
.pn-c-orange { --c: #E8640C; }
.pn-c-brand { --c: var(--chart-1); }
.pn-c-accent { --c: var(--brand-accent); }

.pn-text-red { color: #D92D20; }
.pn-muted { color: var(--muted); }
.pn-num { font-variant-numeric: tabular-nums; }

/* ── Estrutura da página ─────────────────────────────────────────────────── */
.pn-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pn-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.pn-page-head > div:first-child {
    min-width: 0;
}

.pn-h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.015em;
}

.pn-sub {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--muted);
    max-width: 760px;
}

.pn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
}

.pn-back:hover {
    color: var(--color-text);
}

.pn-back + .pn-h1 {
    margin-top: 6px;
}

.pn-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
}

.pn-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    gap: 14px;
}

/* ── Botões: tamanhos usados nas telas ───────────────────────────────────── */
.pn-btn-lg {
    height: 40px;
    padding: 0 14px;
    white-space: nowrap;
}

/* Ação principal da página: rótulo à esquerda, ícone à direita. */
.pn-btn-cta {
    height: 40px;
    min-width: 230px;
    justify-content: space-between;
    padding: 0 14px;
    white-space: nowrap;
}

.pn-btn-md {
    height: 36px;
}

.pn-btn-sm {
    height: 32px;
    font-size: 13px;
    padding: 0 10px;
}

.pn-btn-xs {
    font-size: 12px;
    padding: 5px 10px;
    gap: 6px;
}

.pn-btn-icon.pn-btn-sm {
    width: 30px;
    height: 30px;
    padding: 0;
}

.pn-btn-danger {
    color: #D92D20;
}

.pn-btn-danger:hover {
    background: color-mix(in srgb, #D92D20 10%, transparent);
}

.pn-btn-danger-solid {
    background: #D92D20;
    color: #fff;
}

.pn-btn-danger-solid:hover {
    background: #b42318;
}

.pn-btn-success-solid {
    background: #139A5B;
    color: #fff;
}

.pn-btn-success-solid:hover {
    background: #0f7d4a;
}

.pn-link {
    color: var(--color-accent);
    text-decoration: none;
    cursor: pointer;
}

.pn-link:hover {
    color: var(--color-accent-600);
    text-decoration: underline;
}

.pn-link-plain {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.pn-link-plain:hover {
    text-decoration: underline;
}

/* ── Cartões ─────────────────────────────────────────────────────────────── */
.pn-card {
    background: var(--panel);
    border: 1px solid var(--hair);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    min-width: 0;
}

.pn-card-pad {
    padding: 2px 16px 14px;
}

.pn-card-pad-lg {
    padding: 14px 18px;
}

.pn-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 42px;
}

.pn-h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}

.pn-card-note {
    font-size: 12px;
    color: var(--muted);
}

.pn-card-table {
    overflow-x: auto;
    padding: 6px 14px;
}

/* ── Barra de filtros ────────────────────────────────────────────────────── */
.pn-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 10px 14px;
    background: var(--panel);
    border: 1px solid var(--hair);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
}

.pn-filters .pn-field {
    min-width: 0;
}

.pn-filters-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.pn-search {
    position: relative;
    display: flex;
    align-items: center;
}

.pn-search > .pn-search-ico {
    position: absolute;
    left: 12px;
    display: flex;
    color: var(--muted);
    pointer-events: none;
}

.pn-search input.pn-input {
    padding-left: 38px;
}

/* ── KPIs ────────────────────────────────────────────────────────────────── */
.pn-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.pn-kpi {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 92px;
    padding: 12px 14px;
    text-align: left;
    background: var(--panel);
    border: 1px solid var(--hair);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    color: inherit;
    font: inherit;
    text-decoration: none;
    transition: background .2s ease, box-shadow .2s ease;
}

a.pn-kpi,
button.pn-kpi {
    cursor: pointer;
}

a.pn-kpi:hover,
button.pn-kpi:hover {
    background: var(--color-accent-100);
}

.pn-kpi-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--muted);
}

.pn-kpi-label::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: 4px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--c, var(--chart-1));
}

.pn-kpi-value {
    margin-top: auto;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.pn-kpi-sub {
    font-size: 12px;
    color: var(--muted);
}

/* ── Barras horizontais ──────────────────────────────────────────────────── */
.pn-bars-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 4px;
}

.pn-bar-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 36px;
    gap: 12px;
    align-items: center;
    font-size: 13px;
}

.pn-bar-row.is-wide {
    grid-template-columns: 150px minmax(0, 1fr) 36px;
}

.pn-bar-row > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pn-bar-track {
    height: 12px;
    border-radius: 99px;
    overflow: hidden;
    background: var(--hair);
}

.pn-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: var(--c, var(--chart-1));
}

.pn-bar-value {
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pn-progress {
    height: 6px;
    border-radius: 99px;
    overflow: hidden;
    background: var(--hair);
}

.pn-progress > span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--c, var(--chart-1));
}

/* Barra empilhada + lista de status (bloco "Status Geral") */
.pn-stack {
    display: flex;
    gap: 2px;
    height: 8px;
    margin: 2px 0 8px;
    border-radius: 99px;
    overflow: hidden;
}

.pn-stack > span {
    height: 100%;
    background: var(--c);
}

.pn-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 6px;
    border: 0;
    border-bottom: 1px solid var(--hair);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    text-align: left;
    text-decoration: none;
}

a.pn-status-row,
button.pn-status-row {
    cursor: pointer;
}

a.pn-status-row:hover,
button.pn-status-row:hover {
    background: var(--color-accent-100);
}

.pn-status-row::before {
    content: "";
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--c);
}

.pn-status-row > .pn-status-label {
    flex: 1;
}

.pn-status-row > .pn-status-pct {
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.pn-status-row > .pn-status-val {
    width: 40px;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Tabelas ─────────────────────────────────────────────────────────────── */
.pn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.pn-table th {
    text-align: left;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    padding: 8px;
    border-bottom: 2px solid var(--color-divider);
    white-space: nowrap;
}

.pn-table td {
    padding: 8px;
    border-bottom: 1px solid var(--color-divider);
    vertical-align: middle;
}

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

.pn-table tbody tr:hover {
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
}

.pn-table .is-right {
    text-align: right;
}

.pn-table .is-center {
    text-align: center;
}

.pn-table .is-strong {
    font-weight: 600;
}

.pn-table .is-muted {
    color: var(--muted);
}

.pn-table .is-nowrap {
    white-space: nowrap;
}

.pn-table-actions {
    display: inline-flex;
    gap: 2px;
}

.pn-empty {
    margin: 0;
    padding: 32px 18px;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

.pn-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 16px 10px;
    border-top: 1px solid var(--hair);
    font-size: 13px;
}

.pn-pager-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Status, prioridade, chips ───────────────────────────────────────────── */
.pn-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
    background: color-mix(in srgb, var(--c, #9A9794) 16%, transparent);
    color: var(--color-text);
}

.pn-status::before {
    content: "";
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--c, #9A9794);
}

.pn-status.is-lg {
    padding: 4px 11px;
    font-weight: 600;
}

.pn-status.is-lg::before {
    width: 7px;
    height: 7px;
}

.pn-prio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    white-space: nowrap;
}

.pn-prio::before {
    content: "";
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--c, #9A9794);
}

/* Tipo (Recebida/Enviada etc.): selo pequeno e contornado */
.pn-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 1px solid var(--color-divider);
    color: var(--muted);
    white-space: nowrap;
}

.pn-chip-soft {
    display: inline-flex;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
    background: var(--color-neutral-100);
    color: var(--color-neutral-800);
}

.pn-badge-padrao {
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: color-mix(in srgb, #D99A00 22%, transparent);
}

/* ── Abas ────────────────────────────────────────────────────────────────── */
.pn-tabs {
    align-self: flex-start;
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--panel);
    border: 1px solid var(--hair);
}

.pn-tab {
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    cursor: pointer;
    background: transparent;
    color: inherit;
    text-decoration: none;
}

.pn-tab:hover {
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
}

.pn-tab.is-active {
    background: var(--color-accent);
    color: var(--color-bg);
}

.pn-seg {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
}

.pn-seg-opt {
    border: 0;
    font: inherit;
    font-size: 12px;
    padding: 5px 10px;
    cursor: pointer;
    background: transparent;
    color: inherit;
}

.pn-seg-opt + .pn-seg-opt {
    border-left: 1px solid var(--color-divider);
}

.pn-seg-opt.is-active {
    background: var(--color-accent);
    color: var(--color-bg);
}

/* ── Avisos ──────────────────────────────────────────────────────────────── */
.pn-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
    background: color-mix(in srgb, #D99A00 14%, transparent);
}

.pn-alert > .pn-alert-ico {
    display: flex;
    margin-top: 1px;
    color: #B07A00;
}

.pn-alert.is-info {
    background: var(--color-accent-100);
}

.pn-alert.is-info > .pn-alert-ico {
    color: var(--color-accent);
}

.pn-alert.is-success {
    background: color-mix(in srgb, #139A5B 12%, transparent);
}

.pn-alert.is-success > .pn-alert-ico {
    color: #139A5B;
}

.pn-alert.is-danger {
    background: color-mix(in srgb, #D92D20 10%, transparent);
}

.pn-alert.is-danger > .pn-alert-ico {
    color: #D92D20;
}

/* ── Listas de informação (dt/dd) ────────────────────────────────────────── */
.pn-dl {
    margin: 0;
}

.pn-dl > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px solid var(--hair);
    font-size: 13px;
}

.pn-dl > div:last-child {
    border-bottom: 0;
}

.pn-dl dt {
    color: var(--muted);
    flex-shrink: 0;
}

.pn-dl dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ── Pessoas e arquivos ──────────────────────────────────────────────────── */
.pn-avatar-sm {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--c, var(--chart-1));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}

.pn-person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pn-person-name {
    font-weight: 600;
}

.pn-person-sub {
    font-size: 12px;
    color: var(--muted);
}

.pn-file-ico {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--color-accent-100);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pn-swatch {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 50%;
}

/* ── Envio de arquivo ────────────────────────────────────────────────────── */
.pn-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 56px 24px;
    border: 2px dashed var(--color-divider);
    border-radius: 20px;
    background: var(--panel);
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.pn-dropzone:hover,
.pn-dropzone.is-over,
.pn-dropzone.is-filled {
    border-color: var(--color-accent);
}

.pn-dropzone:hover,
.pn-dropzone.is-over {
    background: var(--color-accent-100);
}

.pn-dropzone-ico {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--color-accent-100);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pn-dropzone-title {
    font-size: 15px;
}

.pn-dropzone-hint {
    font-size: 12px;
    color: var(--muted);
}

/* ── Formulários ─────────────────────────────────────────────────────────── */
.pn-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1080px;
}

.pn-form-section {
    background: var(--panel);
    border: 1px solid var(--hair);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    padding: 14px 16px 16px;
}

.pn-form-section > .pn-h2 {
    margin: 0 0 10px;
}

.pn-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 10px 14px;
}

.pn-form-grid > .is-full {
    grid-column: 1 / -1;
}

.pn-form-grid input.pn-input,
.pn-form-grid select.pn-input {
    min-height: 40px;
}

.pn-req {
    color: #D92D20;
}

.pn-help {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
}

/* Escolha múltipla em chips (checkbox escondido dentro do label) */
.pn-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pn-choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--color-divider);
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.pn-choice input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.pn-choice .pn-choice-check {
    display: none;
}

.pn-choice:has(input:checked) {
    background: var(--color-accent-100);
    border-color: var(--color-accent);
    color: var(--color-text);
}

.pn-choice:has(input:checked) .pn-choice-check {
    display: flex;
}

.pn-choice:has(input:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Interruptor (checkbox escondido dentro do label) */
.pn-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 14px;
    cursor: pointer;
}

.pn-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.pn-switch-track {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 99px;
    background: var(--color-divider);
    transition: background .2s ease;
}

.pn-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: left .2s ease;
}

.pn-switch input:checked + .pn-switch-track {
    background: var(--color-accent);
}

.pn-switch input:checked + .pn-switch-track::after {
    left: 21px;
}

.pn-switch input:focus-visible + .pn-switch-track {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Barra de ações do formulário, presa ao rodapé enquanto se rola */
.pn-form-actions {
    position: sticky;
    bottom: 12px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--panel);
    border: 1px solid var(--hair);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
}

.pn-form-actions > .pn-btn-danger {
    margin-right: auto;
}

/* ── Etapas (importação) ─────────────────────────────────────────────────── */
.pn-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pn-step {
    flex: 1 1 180px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid var(--hair);
    font-size: 13px;
    font-weight: 500;
}

.pn-step-dot {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    background: var(--hair);
    color: var(--muted);
}

.pn-step.is-active {
    background: var(--panel);
    border-color: var(--color-accent);
    font-weight: 800;
}

.pn-step.is-active .pn-step-dot,
.pn-step.is-done .pn-step-dot {
    background: var(--color-accent);
    color: var(--color-bg);
}

/* ── Linha do tempo ("Percurso") ─────────────────────────────────────────── */
.pn-track {
    position: relative;
    height: 12px;
    margin: 14px 0 6px;
    border-radius: 99px;
    background: var(--hair);
}

.pn-track > .pn-track-expected,
.pn-track > .pn-track-done {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 99px;
}

.pn-track > .pn-track-expected {
    background: color-mix(in srgb, var(--chart-1) 22%, transparent);
}

.pn-track > .pn-track-done {
    background: var(--chart-1);
    transition: width .4s ease;
}

.pn-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 11px;
    color: var(--muted);
}

.pn-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pn-legend > span::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c);
}

.pn-timeline {
    position: relative;
    height: 74px;
    margin-top: 18px;
}

.pn-timeline-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 20px;
    height: 2px;
    background: var(--color-divider);
}

.pn-timeline-mark {
    position: absolute;
    top: 20px;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c, var(--chart-1));
    box-shadow: 0 0 0 3px var(--panel);
}

.pn-timeline-mark.is-major {
    width: 14px;
    height: 14px;
}

.pn-timeline-today {
    position: absolute;
    top: 6px;
    bottom: 38px;
    width: 2px;
    background: #D92D20;
}

.pn-timeline-today-label {
    position: absolute;
    top: -8px;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    color: #D92D20;
}

.pn-timeline-ends {
    position: absolute;
    left: 0;
    right: 0;
    top: 36px;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--muted);
}

.pn-timeline-ends strong {
    color: var(--color-text);
}

/* ── Modal das telas (detalhe de KPI, formulários rápidos) ───────────────── */
.pn-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 240;
    background: rgba(12, 12, 22, .52);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    animation: pnFadeUp .15s ease both;
}

.pn-modal {
    width: min(480px, 100%);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    background: var(--panel);
    color: var(--color-text);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    padding: 20px;
    animation: pnPop .22s cubic-bezier(.2, .7, .2, 1) both;
}

.pn-modal.is-wide {
    width: min(1280px, 100%);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
}

.pn-modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 18px;
    border-bottom: 1px solid var(--hair);
}

.pn-modal-title {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}

.pn-modal-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--hair);
    background: var(--color-bg);
}

.pn-modal-body {
    flex: 1;
    overflow: auto;
}

.pn-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

@media (max-width: 640px) {
    .pn-btn-cta {
        min-width: 0;
    }

    .pn-bar-row,
    .pn-bar-row.is-wide {
        grid-template-columns: 96px minmax(0, 1fr) 32px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Dicas (tooltips)
   Qualquer elemento com `data-pn-tip="texto"` (e, opcional,
   `data-pn-tip-title="título"`) mostra a dica ao passar o mouse ou focar.
   O balão é um só, criado pelo JS do base.html e posicionado acima do alvo.
   ══════════════════════════════════════════════════════════════════════════ */
.pn-tip {
    position: fixed;
    z-index: 10003;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 11px;
    border-radius: 10px;
    background: #1d1c22;
    color: #f4f4f6;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
}

.pn-tip.is-visible {
    opacity: 1;
    transform: none;
}

.pn-tip strong {
    font-weight: 700;
}

.pn-tip .pn-tip-valor {
    font-variant-numeric: tabular-nums;
    opacity: .85;
}

html.dark .pn-tip {
    background: #f4f4f6;
    color: #1d1c22;
}

/* ══════════════════════════════════════════════════════════════════════════
   Centralização
   Telas de conteúdo estreito (formulários, importações) ficam centralizadas
   na área útil, em vez de presas à esquerda com um vazio do lado direito.
   ══════════════════════════════════════════════════════════════════════════ */
.pn-form {
    width: 100%;
    margin-inline: auto;
}

/* Página de formulário: a coluna inteira (voltar, título e formulário) fica com a
   largura do formulário e centralizada junto. Centralizar só o formulário deixava
   o cabeçalho preso à esquerda, desalinhado dos cartões. */
.pn-main-inner:has(.pn-form) {
    max-width: calc(1080px + 44px);
}

/* Tela de tarefa única e curta (importar planilha/cronograma): o bloco fica no
   centro da área útil também na vertical. 64px do cabeçalho + respiro do main. */
.pn-center-page {
    width: 100%;
    margin-inline: auto;
    min-height: calc(100vh - 64px - 58px);
    min-height: calc(100dvh - 64px - 58px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   Nora flutuante
   Mini chat em todas as telas do app (static/js/pn-nora.js): botão com o
   avatar, saudação na primeira entrada da sessão e um painel que responde ali
   mesmo, em tamanho compacto ou expandido.
   ══════════════════════════════════════════════════════════════════════════ */
.pn-nora {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

/* Telas com barra de ações fixa no rodapé: a Nora sobe para não cobrir o Salvar. */
body:has(.pn-form-actions) .pn-nora {
    bottom: 96px;
}

.pn-nora-fab {
    position: relative;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 3px solid var(--panel);
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--brand) 35%, rgba(0, 0, 0, .25));
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.pn-nora-fab:hover {
    transform: translateY(-2px) scale(1.04);
}

.pn-nora-fab:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.pn-nora-fab img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.pn-nora-online {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #139A5B;
    border: 2px solid var(--panel);
}

.pn-nora-online::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid #139A5B;
    animation: pnRing 2.4s ease-out infinite;
}

/* Resposta que chegou com o painel fechado */
.pn-nora-novo {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid var(--panel);
    animation: pnPop .3s cubic-bezier(.2, .7, .2, 1) both;
}

/* Saudação: balão curto ao lado do botão */
.pn-nora-teaser {
    position: relative;
    max-width: 260px;
    padding: 12px 34px 12px 14px;
    border-radius: 16px 16px 4px 16px;
    background: var(--panel);
    color: var(--color-text);
    border: 1px solid var(--hair);
    box-shadow: var(--shadow-lg);
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    animation: pnPop .35s cubic-bezier(.2, .7, .2, 1) both;
}

.pn-nora-teaser strong {
    display: block;
    margin-bottom: 2px;
}

.pn-nora-teaser-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.pn-nora-teaser-close:hover {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    color: var(--color-text);
}

/* Painel. A altura máxima desconta o botão da Nora (56px + 10px) e as margens. */
.pn-nora-panel {
    width: min(360px, calc(100vw - 32px));
    max-height: min(600px, calc(100vh - 106px));
    max-height: min(600px, calc(100dvh - 106px));
    display: flex;
    flex-direction: column;
    background: var(--panel);
    color: var(--color-text);
    border: 1px solid var(--hair);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: pnPop .22s cubic-bezier(.2, .7, .2, 1) both;
}

.pn-nora-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    background: var(--brand);
    color: #fff;
}

.pn-nora-head img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .5);
}

.pn-nora-head-name {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.pn-nora-head-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, .75);
}

.pn-nora-head-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3ddc84;
}

.pn-nora.is-expandida .pn-nora-panel {
    width: min(720px, calc(100vw - 32px));
    height: min(78vh, 760px);
    max-height: calc(100vh - 106px);
    max-height: calc(100dvh - 106px);
}

body:has(.pn-form-actions) .pn-nora-panel {
    max-height: min(600px, calc(100vh - 182px));
    max-height: min(600px, calc(100dvh - 182px));
}

body:has(.pn-form-actions) .pn-nora.is-expandida .pn-nora-panel {
    max-height: calc(100vh - 182px);
    max-height: calc(100dvh - 182px);
}

.pn-nora-head-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
}

.pn-nora-head button {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
}

.pn-nora-head button:hover:not(:disabled) {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.pn-nora-head button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

.pn-nora-head button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* position: relative faz do corpo a referência de offsetTop na rolagem (JS). */
.pn-nora-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--color-bg);
}

.pn-nora-item {
    display: flex;
    flex-direction: column;
}

.pn-nora-user {
    align-self: flex-end;
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 14px 14px 4px 14px;
    background: var(--color-accent);
    color: var(--color-bg);
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.pn-nora-msg {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.pn-nora-msg img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.pn-nora-msg > div {
    min-width: 0;
    padding: 9px 12px;
    border-radius: 4px 14px 14px 14px;
    background: var(--panel);
    border: 1px solid var(--hair);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Enquanto a resposta não chega: pontinhos + fase/busca vindas do stream */
.pn-nora-msg > .pn-nora-pensando {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--muted);
}

.pn-nora-pensando small {
    flex-basis: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px;
    font-style: italic;
    opacity: .8;
}

.pn-nora-dots {
    display: inline-flex;
    gap: 3px;
}

.pn-nora-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent);
    animation: pnType 1.2s ease-in-out infinite;
}

.pn-nora-dots i:nth-child(2) { animation-delay: .15s; }
.pn-nora-dots i:nth-child(3) { animation-delay: .3s; }

.pn-nora-msg > .pn-nora-aviso {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    border-color: color-mix(in srgb, #D92D20 30%, transparent);
    background: color-mix(in srgb, #D92D20 7%, var(--panel));
}

.pn-nora-aviso > .pn-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: #D92D20;
}

.pn-nora-msg > .pn-nora-resp {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Markdown da resposta (o preflight do Tailwind zera listas e títulos) */
.pn-nora-prose p {
    margin: 0 0 .6em;
}

.pn-nora-prose > :first-child {
    margin-top: 0;
}

.pn-nora-prose > :last-child {
    margin-bottom: 0;
}

.pn-nora-prose ul,
.pn-nora-prose ol {
    margin: 4px 0 .6em;
    padding-left: 18px;
}

.pn-nora-prose ul { list-style: disc; }
.pn-nora-prose ol { list-style: decimal; }

.pn-nora-prose li + li {
    margin-top: 2px;
}

.pn-nora-prose strong,
.pn-nora-prose b {
    font-weight: 700;
}

.pn-nora-prose h1,
.pn-nora-prose h2,
.pn-nora-prose h3,
.pn-nora-prose h4,
.pn-nora-prose h5,
.pn-nora-prose h6 {
    margin: .8em 0 .3em;
    font-size: 13px;
    font-weight: 800;
}

.pn-nora-prose a {
    color: var(--color-accent);
    text-decoration: underline;
}

.pn-nora-prose code {
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 12px;
    background: var(--color-bg);
}

.pn-nora-prose pre {
    margin: 0 0 .6em;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--color-bg);
    overflow-x: auto;
    white-space: pre-wrap;
}

.pn-nora-prose pre code {
    padding: 0;
    background: none;
}

.pn-nora-prose blockquote {
    margin: 0 0 .6em;
    padding-left: 10px;
    border-left: 3px solid var(--color-divider);
    color: var(--muted);
}

.pn-nora-prose hr {
    margin: .8em 0;
    border: 0;
    border-top: 1px solid var(--hair);
}

.pn-nora-prose table {
    display: block;
    max-width: 100%;
    margin: 0 0 .6em;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 12px;
}

.pn-nora-prose th,
.pn-nora-prose td {
    padding: 4px 8px;
    border: 1px solid var(--hair);
    text-align: left;
    vertical-align: top;
}

.pn-nora-evid summary {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    list-style: none;
}

.pn-nora-evid summary::-webkit-details-marker {
    display: none;
}

.pn-nora-evid summary .pn-icon:last-child {
    transition: transform .2s ease;
}

.pn-nora-evid[open] summary .pn-icon:last-child {
    transform: rotate(180deg);
}

.pn-nora-evid > .pn-nora-prose {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--color-bg);
    font-size: 12px;
}

.pn-nora-riscos {
    padding: 8px 10px;
    border-radius: 10px;
    background: color-mix(in srgb, #D92D20 7%, transparent);
    font-size: 12px;
}

.pn-nora-riscos-title {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #D92D20;
}

.pn-nora-riscos ul {
    padding-left: 16px;
    list-style: disc;
}

.pn-nora-fontes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.pn-nora-fontes-label {
    margin-right: 2px;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
}

.pn-nora-fonte {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--color-divider);
    background: var(--panel);
    color: var(--color-text);
    font-size: 11px;
    text-decoration: none;
}

.pn-nora-fonte span {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pn-nora-fonte > .pn-icon {
    flex-shrink: 0;
    color: var(--color-accent);
}

.pn-nora-fonte:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-100);
}

.pn-nora-resp-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    padding-top: 8px;
    border-top: 1px solid var(--hair);
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}

.pn-nora-resp-link:hover {
    text-decoration: underline;
}

.pn-nora-sugestoes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-left: 34px;
}

.pn-nora-sugestoes button {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-divider);
    background: var(--panel);
    color: var(--color-text);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    text-align: left;
}

.pn-nora-sugestoes button:hover:not(:disabled) {
    border-color: var(--color-accent);
    background: var(--color-accent-100);
}

.pn-nora-sugestoes button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Cota de perguntas esgotada: o campo fica desabilitado e o motivo aparece aqui */
.pn-nora-bloqueio {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 9px 12px;
    border-top: 1px solid var(--hair);
    background: color-mix(in srgb, #D97706 10%, var(--panel));
    font-size: 12px;
    line-height: 1.45;
}

.pn-nora-bloqueio > .pn-icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: #B45309;
}

html.dark .pn-nora-bloqueio > .pn-icon {
    color: #F59E0B;
}

.pn-nora-bloqueio strong {
    font-weight: 700;
}

.pn-nora-form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding: 10px 12px;
    border-top: 1px solid var(--hair);
}

.pn-nora-form textarea {
    flex: 1;
    min-height: 38px;
    max-height: 96px;
    resize: none;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--color-divider);
    background: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
}

.pn-nora-form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-100);
}

.pn-nora-form textarea:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.pn-nora-form .pn-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
    flex-shrink: 0;
}

.pn-nora-foot {
    padding: 0 12px 10px;
    font-size: 11px;
    color: var(--muted);
}

.pn-nora-foot a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
}

.pn-nora-foot a:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .pn-nora {
        right: 12px;
        bottom: 12px;
    }

    .pn-nora-fab {
        width: 50px;
        height: 50px;
    }

    /* No celular o painel ocupa quase a tela toda, nos dois tamanhos; o botão
       some enquanto ele está aberto (o X do cabeçalho fecha). */
    .pn-nora-panel,
    .pn-nora.is-expandida .pn-nora-panel,
    body:has(.pn-form-actions) .pn-nora-panel,
    body:has(.pn-form-actions) .pn-nora.is-expandida .pn-nora-panel {
        position: fixed;
        inset: 8px;
        width: auto;
        height: auto;
        max-height: none;
        border-radius: 16px;
    }

    .pn-nora.is-aberta .pn-nora-fab,
    .pn-nora-head .pn-nora-tamanho {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .pn-nora *,
    .pn-tip {
        animation: none !important;
        transition: none !important;
    }
}

/* ── Select customizado (pn-select.js) ───────────────────────────────────── */
/* O <select> continua sendo o campo fechado; só a lista aberta é nossa. */
select.is-pn-aberto {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-accent-100);
}

.pn-select-pop {
    position: fixed;
    z-index: 10002;  /* acima dos modais (10000/10001), abaixo da dica */
    display: flex;
    flex-direction: column;
    max-height: min(340px, var(--pn-sel-max, 340px));
    padding: 6px;
    font-size: 14px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: 12px;
    box-shadow: 0 14px 34px -10px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .08);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .12s ease, transform .12s ease;
}

.pn-select-pop.is-para-cima {
    transform: translateY(4px);
}

.pn-select-pop.is-visivel {
    opacity: 1;
    transform: none;
}

.pn-select-pop [hidden] {
    display: none !important;
}

.pn-select-busca {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    height: 36px;
    margin-bottom: 6px;
    padding: 0 10px;
    color: var(--muted);
    background: var(--color-bg);
    border: 1px solid var(--color-divider);
    border-radius: 8px;
    cursor: text;
}

.pn-select-busca:focus-within {
    border-color: var(--color-accent);
}

/* Qualificado (input + :focus): o plugin de forms do Tailwind põe borda,
   padding e anel de foco em todo [type='text']. */
.pn-select-busca input,
.pn-select-busca input:focus {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    font: inherit;
    font-size: 14px;
    color: var(--color-text);
    background: transparent;
    border: 0;
    outline: none;
    box-shadow: none;
}

.pn-select-lista {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pn-select-op {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 7px 10px;
    line-height: 1.3;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
}

.pn-select-op-txt {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.pn-select-op svg {
    flex-shrink: 0;
    color: var(--color-accent);
    visibility: hidden;
}

.pn-select-op.is-ativo {
    background: var(--color-accent-100);
}

.pn-select-op.is-neutra {
    color: var(--muted);
}

.pn-select-op[aria-selected="true"] {
    font-weight: 600;
    color: var(--color-text);
}

.pn-select-op[aria-selected="true"] svg {
    visibility: visible;
}

.pn-select-op[aria-disabled="true"] {
    opacity: .45;
    cursor: default;
}

.pn-select-grupo {
    padding: 10px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.pn-select-vazio {
    padding: 14px 10px;
    font-size: 13px;
    text-align: center;
    color: var(--muted);
}

/* Filtro em uso: o campo fica marcado para se ver o que está aplicado. */
.pn-filters select.pn-input:has(option:checked:not([value=""])),
.pn-filters input.pn-input:is([type="text"], [type="search"], :not([type]))[placeholder]:not(:placeholder-shown) {
    border-color: color-mix(in srgb, var(--color-accent) 70%, transparent);
    background-color: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface));
}

@media (prefers-reduced-motion: reduce) {
    .pn-select-pop {
        transition: none;
    }
}