/*
 * PlusWeb - design system do Admin.
 * Direção visual: "blueprint / mesa de trabalho de esquemas".
 * Fundamentada na cor de marca do projeto (#013755) e no domínio do produto
 * (designer de metadados versionados em XML). Identificadores técnicos são
 * tratados em monoespaçada - o elemento de assinatura da interface.
 *
 * Carregado em todas as telas do Admin (substitui o <style> inline do layout).
 */

html { font-size: 87.5%; }

:root {
    color-scheme: light;

    /* Tipografia */
    --pw-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --pw-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Code', Consolas, monospace;

    /* Paleta blueprint (teal-cyan, derivada da marca #013755) */
    --pw-brand: #013755;
    --pw-ink: #04293d;          /* fundo da barra lateral */
    --pw-ink-raised: #073a54;   /* item elevado/hover na lateral */
    --pw-accent: #0a6f8a;       /* ação primária - texto branco ≥ 4.5:1 */
    --pw-accent-strong: #085a70;
    --pw-accent-bright: #2bc1de;/* realces sobre fundo escuro / item ativo */
    --pw-accent-soft: #e3f3f8;  /* tinta clara para chips de ícone */

    --pw-paper: #eef1f5;        /* fundo da página */
    --pw-surface: #ffffff;      /* cartões */
    --pw-text: #15212b;
    --pw-muted: #5d6b7a;
    --pw-line: #dde3ea;
    --pw-line-soft: #eef1f6;

    --pw-radius: 12px;
    --pw-radius-sm: 8px;
    --pw-shadow-sm: 0 1px 2px rgba(4, 41, 61, .06), 0 1px 3px rgba(4, 41, 61, .05);
    --pw-shadow-md: 0 4px 14px rgba(4, 41, 61, .08);
    --pw-sidebar: 264px;

    /* Alinha o azul nativo do Bootstrap ao acento da marca */
    --bs-primary: var(--pw-accent);
    --bs-primary-rgb: 10, 111, 138;
    --bs-link-color: var(--pw-accent);
    --bs-link-color-rgb: 10, 111, 138;
    --bs-link-hover-color: var(--pw-accent-strong);
}

* { -webkit-tap-highlight-color: transparent; }

body {
    font-family: var(--pw-font-sans);
    background: var(--pw-paper);
    color: var(--pw-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Identificadores técnicos = assinatura da interface */
code, kbd, samp, pre, .pw-mono {
    font-family: var(--pw-font-mono);
    font-feature-settings: 'tnum' 1;
}
:not(pre) > code {
    background: var(--pw-accent-soft);
    color: var(--pw-accent-strong);
    padding: .12em .42em;
    border-radius: 5px;
    font-size: .86em;
    font-weight: 500;
}

/* Foco visível e acessível em tudo que é interativo (WIG) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.pw-sidebar a:focus-visible {
    outline: 2px solid var(--pw-accent-bright);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Link "pular para o conteúdo" - fica oculto até receber foco */
.pw-skip {
    position: absolute;
    left: 12px;
    top: -48px;
    z-index: 2000;
    background: var(--pw-accent);
    color: #fff;
    padding: 8px 14px;
    border-radius: 0 0 var(--pw-radius-sm) var(--pw-radius-sm);
    transition: top .15s ease;
}
.pw-skip:focus { top: 0; }

/* ---------- Barra lateral ---------- */
.pw-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--pw-sidebar);
    background: var(--pw-ink);
    color: #c7d3dc;
    overflow-y: auto;
    z-index: 1030;
    border-right: 1px solid rgba(255, 255, 255, .04);
}
.pw-sidebar .pw-brand {
    padding: 20px 22px;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    /* textura sutil de papel-quadriculado, motivo blueprint */
    background-image:
        linear-gradient(rgba(43, 193, 222, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43, 193, 222, .07) 1px, transparent 1px);
    background-size: 22px 22px;
}
.pw-sidebar .pw-brand .bi { color: var(--pw-accent-bright); font-size: 1.25rem; }
.pw-sidebar .pw-brand small {
    display: block;
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #7e93a1;
}
.pw-sidebar a {
    color: #c7d3dc;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 22px;
    font-size: .92rem;
    border-left: 3px solid transparent;
    transition: background-color .12s ease, color .12s ease;
}
.pw-sidebar a .bi { font-size: 1rem; opacity: .85; width: 1.1em; text-align: center; }
.pw-sidebar a:hover { background: var(--pw-ink-raised); color: #fff; }
.pw-sidebar a:hover .bi { opacity: 1; }
.pw-sidebar a.active {
    background: linear-gradient(90deg, rgba(43, 193, 222, .16), rgba(43, 193, 222, .04));
    color: #fff;
    border-left-color: var(--pw-accent-bright);
    font-weight: 600;
}
.pw-sidebar a.active .bi { color: var(--pw-accent-bright); opacity: 1; }
.pw-sidebar a .pw-nova-aba { margin-left: auto; font-size: .72rem; opacity: .55; }
.pw-sidebar .pw-header {
    padding: 16px 22px 5px;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #6c7e8c;
    font-weight: 700;
}

/* ---------- Conteúdo ---------- */
.pw-content { margin-left: var(--pw-sidebar); min-height: 100vh; }
.pw-topbar {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--pw-line);
    padding: 13px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1020;
}
.pw-topbar h1 {
    font-size: 1.12rem;
    margin: 0;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--pw-text);
}
.pw-main { padding: 26px; width: 100%; }

/* Modo "tela cheia" (layout admin com a variavel `semChrome`): a tela abre em
   nova aba, sem barra lateral nem topbar, e usa a janela inteira - hoje o
   Designer de Interface. Mesmos assets do admin, so o chrome de navegacao sai.

   `--pw-ganho-vh` e o espaco vertical que a tela GANHOU por nao ter topbar
   (~51px) e por ter padding menor (~24px): os paineis altos somam essa
   variavel nos seus `calc(100vh - Npx)` e por heranca de CSS ela chega a todos
   sem disputa de especificidade. Fora do modo cheio ela vale 0 e nada muda. */
:root { --pw-ganho-vh: 0px; --pw-inspector-max: 62vh; }
.pw-content-full { margin-left: 0; }
.pw-main-full {
    padding: 14px 16px;
    --pw-ganho-vh: 74px;
    --pw-inspector-max: 72vh;
}

/* ---------- Cartões ---------- */
.pw-card {
    background: var(--pw-surface);
    border: 1px solid var(--pw-line);
    border-radius: var(--pw-radius);
    box-shadow: var(--pw-shadow-sm);
}
/* Cartão clicável (tiles do painel): leve elevação no hover */
.pw-card-link {
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
a:hover > .pw-card-link,
.pw-card-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--pw-shadow-md);
    border-color: #c5d4e0;
}
.pw-card-link:hover .pw-tile-icon {
    background: var(--pw-accent);
    color: #fff;
}

.pw-tile-icon {
    width: 46px;
    height: 46px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--pw-accent-soft);
    color: var(--pw-accent);
    font-size: 1.35rem;
    transition: background-color .14s ease, color .14s ease;
}
.pw-tile-num { font-size: 1.6rem; font-weight: 700; line-height: 1; font-family: var(--pw-font-mono); }

/* Cabeçalho de página padrão */
.pw-page-head h1,
.pw-page-head h2 { letter-spacing: -.01em; }
.pw-eyebrow {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pw-accent);
}

/* ---------- Hero do painel ---------- */
.pw-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--pw-radius);
    padding: 30px 32px;
    color: #eaf6fa;
    background: linear-gradient(135deg, var(--pw-brand), #02283c 70%);
}
.pw-hero::after {
    /* grade blueprint */
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(43, 193, 222, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43, 193, 222, .10) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(120deg, transparent 35%, #000);
    pointer-events: none;
}
.pw-hero > * { position: relative; z-index: 1; }
.pw-hero h2 { font-weight: 700; letter-spacing: -.015em; }
.pw-hero .pw-hero-path {
    font-family: var(--pw-font-mono);
    font-size: .82rem;
    color: var(--pw-accent-bright);
    background: rgba(43, 193, 222, .1);
    border: 1px solid rgba(43, 193, 222, .25);
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
}

/* ---------- Botões (acento da marca) ---------- */
.btn-primary {
    --bs-btn-bg: var(--pw-accent);
    --bs-btn-border-color: var(--pw-accent);
    --bs-btn-hover-bg: var(--pw-accent-strong);
    --bs-btn-hover-border-color: var(--pw-accent-strong);
    --bs-btn-active-bg: var(--pw-accent-strong);
    --bs-btn-active-border-color: var(--pw-accent-strong);
    --bs-btn-disabled-bg: var(--pw-accent);
    --bs-btn-disabled-border-color: var(--pw-accent);
}
.btn-outline-primary {
    --bs-btn-color: var(--pw-accent);
    --bs-btn-border-color: var(--pw-accent);
    --bs-btn-hover-bg: var(--pw-accent);
    --bs-btn-hover-border-color: var(--pw-accent);
    --bs-btn-active-bg: var(--pw-accent-strong);
    --bs-btn-active-border-color: var(--pw-accent-strong);
}
.btn { font-weight: 500; }
.text-primary { color: var(--pw-accent) !important; }
.badge.bg-primary { background-color: var(--pw-accent) !important; }
.badge.bg-success { background-color: #2b8a3e !important; }

/* ---------- Container do DevExtreme dentro do cartão ---------- */
.pw-card .dx-datagrid { border-radius: var(--pw-radius-sm); }
.pw-card .dx-datagrid-headers { font-weight: 600; }

/* Destaque de linha ao passar o mouse */
.dx-datagrid-rowsview .dx-data-row:hover > td {
    background-color: rgba(10, 111, 138, .09) !important;
    transition: background-color .12s ease;
}

/* ====================================================================
   Designer de Interface (árvore + inspetor)
   ==================================================================== */
.pw-designer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 16px;
    align-items: start;
}
.pw-designer-tree,
.pw-designer-inspector { padding: 0; overflow: hidden; }
.pw-designer-inspector { position: sticky; top: 12px; }
.pw-designer-panehead {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--pw-muted);
    border-bottom: 1px solid var(--pw-line);
    background: var(--pw-line-soft);
}

/* ---------- Árvore ---------- */
.pw-tree { padding: 10px; min-height: 320px; }
.pw-tree-children { display: flex; flex-direction: column; gap: 2px; }
/* recuo dos níveis aninhados, com guia vertical */
.pw-node > .pw-tree-children {
    margin-left: 14px;
    padding-left: 10px;
    border-left: 1.5px dashed var(--pw-line);
}
.pw-node > .pw-tree-children.is-empty {
    min-height: 38px;
    border-left-style: dotted;
}
.pw-node > .pw-tree-children.is-empty::before {
    content: 'Solte itens aqui para vincular ao container';
    display: block;
    margin: 2px 0;
    padding: 7px 10px;
    font-size: .75rem;
    color: var(--pw-muted);
    border: 1px dashed var(--pw-line);
    border-radius: 6px;
    opacity: .8;
}
/* container destacado como alvo durante o arraste */
.pw-node > .pw-tree-children.pw-drag-over {
    border-left-color: var(--pw-accent);
    background: var(--pw-accent-soft);
    border-radius: 0 6px 6px 0;
}
.pw-node > .pw-tree-children.is-empty.pw-drag-over::before {
    content: 'Soltar aqui ↳';
    border-color: var(--pw-accent);
    color: var(--pw-accent);
    opacity: 1;
}

.pw-node-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 2px 8px 2px 2px;
    border: 1px solid transparent;
    border-radius: var(--pw-radius-sm);
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}
.pw-node-row:hover { background: var(--pw-line-soft); }
.pw-node-row:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 1px; }
.pw-node-row.selected {
    background: var(--pw-accent-soft);
    border-color: var(--pw-accent-bright);
}

.pw-node-caret {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    color: var(--pw-muted); font-size: .7rem;
    border-radius: 5px;
}
.pw-node-caret:hover { background: rgba(4, 41, 61, .08); color: var(--pw-text); }
.pw-node-caret--leaf { width: 22px; pointer-events: none; }

.pw-node-grip {
    flex: 0 0 auto;
    color: #aab6c2; cursor: grab; font-size: .95rem;
    display: inline-flex; align-items: center;
    opacity: 0; transition: opacity .12s ease;
}
.pw-node-row:hover .pw-node-grip,
.pw-node-row.selected .pw-node-grip { opacity: 1; }

.pw-node-icon {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px; font-size: .9rem;
    background: var(--pw-line-soft); color: var(--pw-muted);
}
.pw-node-icon.is-container { background: var(--pw-accent-soft); color: var(--pw-accent); }

.pw-node-name { font-weight: 600; font-size: .9rem; color: var(--pw-text); min-width: 0; }
.pw-node.is-container > .pw-node-row .pw-node-name { font-weight: 700; }
.pw-node-sub { font-family: var(--pw-font-mono); font-size: .74rem; color: var(--pw-muted); min-width: 0; }
.pw-node-type {
    flex: 0 0 auto;
    font-size: .68rem; font-weight: 600; text-transform: lowercase;
    color: var(--pw-muted); background: var(--pw-line-soft);
    border: 1px solid var(--pw-line);
    padding: 1px 7px; border-radius: 999px;
    margin-left: auto;
}
.pw-node-count {
    flex: 0 0 auto;
    min-width: 20px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 700;
    color: var(--pw-accent); background: var(--pw-accent-soft);
    border-radius: 999px;
}

.pw-node-actions { flex: 0 0 auto; display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s ease; }
.pw-node-row:hover .pw-node-actions,
.pw-node-row.selected .pw-node-actions { opacity: 1; }
.pw-node-act {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: var(--pw-muted);
    border-radius: 6px; font-size: .85rem;
}
.pw-node-act:hover { background: rgba(4, 41, 61, .08); color: var(--pw-text); }
.pw-node-act.text-danger:hover { background: rgba(220, 53, 69, .12); color: #dc3545; }

.pw-tree-empty {
    text-align: center; color: var(--pw-muted);
    padding: 40px 16px;
}
.pw-tree-empty .bi { font-size: 2rem; opacity: .5; display: block; margin-bottom: 8px; }

/* feedback de arraste */
.dx-sortable-dragging .pw-node-row { box-shadow: var(--pw-shadow-md); }
.dx-sortable-placeholder { background: var(--pw-accent-bright); height: 3px; border-radius: 3px; }
/* o clone que segue o cursor não deve capturar o hit-test (elementFromPoint),
   para que o container sob o ponteiro seja detectado e revelado */
.dx-sortable-dragging,
.dx-sortable-clone { pointer-events: none !important; }

/* tipos de nó - realce sutil por categoria */
.pw-node-icon.pw-type-tabpanel.is-container,
.pw-node-icon.pw-type-tab.is-container { background: #e6f0fb; color: #2f6fd0; }
.pw-node-icon.pw-type-card.is-container { background: #eaf7ef; color: #2e8b57; }
.pw-node-icon.pw-type-modal.is-container { background: #fdeef3; color: #b5366a; }
.pw-node-icon.pw-type-accordion.is-container { background: #f3eefb; color: #7a4fc0; }

/* ---------- Inspetor ---------- */
.pw-inspector { display: flex; flex-direction: column; min-height: 200px; }
.pw-inspector-empty {
    text-align: center; color: var(--pw-muted);
    padding: 40px 24px;
}
.pw-inspector-empty .bi { font-size: 1.8rem; opacity: .5; display: block; margin-bottom: 10px; }
.pw-inspector-head {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-bottom: 1px solid var(--pw-line);
}
.pw-inspector-titles { min-width: 0; }
.pw-inspector-form { padding: 10px 12px; overflow-y: auto; max-height: var(--pw-inspector-max); }

/* ── Abas Prop/Estilo compactas (paridade com Regras/Eventos) ─────────
   Tudo escopado em .pw-inspector-form: vence o dx.light.css só por
   especificidade (sem !important) e não afeta nenhum outro dxForm. */

/* Espaçamento vertical entre linhas de propriedade (tema: 10px) */
.pw-inspector-form .dx-layout-manager .dx-field-item:not(.dx-first-row) { padding-top: 6px; }
.pw-inspector-form .dx-layout-manager.dx-layout-manager-one-col .dx-box-item:not(:first-child) .dx-single-column-item-content > .dx-field-item {
    padding-top: 6px;
}

/* Rótulo da propriedade: menor, discreto e colado no editor */
.pw-inspector-form .dx-field-item-label-text {
    font-size: .74rem; font-weight: 500; color: var(--pw-muted);
}
.pw-inspector-form .dx-field-item-label-location-top { margin-bottom: 2px; }

/* Realce do rótulo quando o campo está em foco (padrão de inspetores) */
.pw-inspector-form .dx-field-item:focus-within .dx-field-item-label-text { color: var(--pw-accent); }

/* Hover sutil da linha - revela os botões pin/reset/ajuda */
.pw-inspector-form .dx-field-item:not(.dx-field-item-has-group):hover {
    background: var(--pw-line-soft); border-radius: 6px;
}

/* Editores compactos (tema: padding 7px 9px 8px + min-height 34px) */
.pw-inspector-form .dx-texteditor-input { padding: 4px 8px 5px; min-height: 0; }

/* Checkbox compacto: ícone menor e texto inline ao lado do editor.
   O tema usa o shorthand `font: 22px/1 DXIcons` no estado marcado - por
   isso a segunda regra é necessária para não voltar a 22px ao marcar. */
.pw-inspector-form .dx-checkbox-icon { font-size: 16px; }
.pw-inspector-form .dx-checkbox-checked .dx-checkbox-icon { font-size: 16px; }
.pw-inspector-form .dx-checkbox-text { font-size: 12px; padding-inline-start: 6px; }
.pw-inspector-form .dx-field-item-label-text,
.pw-inspector-form .dx-field-item-help-text {
    font-size: 12px !important;
}
.pw-inspector-form .pw-insp-item-bool .dx-field-item-content {
    display: flex; align-items: center; gap: 4px;
}
.pw-inspector-form .pw-insp-item-bool { padding-top: 5px; }
.pw-insp-nondefault .dx-checkbox-text { font-weight: 700; color: var(--pw-ink, #0f172a); }

/* Cabeçalhos de categoria do inspetor, espelhando .pw-regras-sec-tit */
.pw-inspector-form .dx-form-group-caption {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--pw-primary, #0d6efd);
}
.pw-inspector-form .pw-insp-group.dx-form-group-with-caption { margin-bottom: 8px; }
.pw-inspector-form .pw-insp-group > .dx-form-group-caption {
    display: block; padding: 0 0 4px; margin-bottom: 6px;
    border-bottom: 1px solid var(--pw-line);
}
/* O tema dá 19px/20px de padding ao conteúdo do grupo com legenda e
   repete a linha divisória que agora vem do próprio cabeçalho. */
.pw-inspector-form .dx-form-group-with-caption > .dx-form-group-content {
    padding-top: 4px; padding-bottom: 0; margin-top: 0; border-top: 0;
}

.pw-inspector-foot {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 12px 16px; border-top: 1px solid var(--pw-line);
    background: var(--pw-line-soft);
    position: sticky; bottom: 0;
}

@media (max-width: 991.98px) {
    .pw-designer { grid-template-columns: minmax(0, 1fr); }
    .pw-designer-inspector { position: static; }
}

/* ---------- Pré-visualização do formulário ---------- */
.pw-pv-host { height: 100%; overflow: auto; padding: 4px 2px; }
.pw-pv-form { max-width: 920px; margin: 0 auto; }
.pw-pv-simbar {
    max-width: 920px; margin: 0 auto 14px; display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; padding: 8px 12px; border: 1px dashed var(--pw-border, #ced4da);
    border-radius: var(--pw-radius, 8px); background: rgba(13, 110, 253, .04);
}
.pw-pv-simbar-label { font-size: .82rem; font-weight: 600; margin: 0; white-space: nowrap; }
.pw-pv-simbar-sel { width: auto; min-width: 160px; }
.pw-pv-simbar-hint { font-size: .76rem; color: var(--pw-muted, #6c757d); margin-left: auto; }
/* Popover "Simular parâmetros" (DP12): um controle por chave referenciada. */
.pw-pv-simparam { position: relative; }
.pw-pv-simparam-pop {
    position: absolute; z-index: 1060; top: calc(100% + 6px); left: 0; width: min(420px, 80vw);
    padding: 10px 12px; border: 1px solid var(--pw-border, #ced4da);
    border-radius: var(--pw-radius, 8px); background: var(--pw-surface, #fff);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.pw-pv-simparam-tit {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--pw-muted, #6c757d); margin-bottom: 6px;
}
.pw-pv-simparam-nota { font-size: .72rem; color: var(--pw-muted, #6c757d); margin: 8px 0 0; }
.pw-pv-req--dyn { animation: pwReqIn .15s ease; }
@keyframes pwReqIn { from { opacity: 0; } to { opacity: 1; } }
.pw-pv-label { font-size: .82rem; font-weight: 600; color: var(--pw-text); margin-bottom: 4px; }
.pw-pv-req { color: #dc3545; font-weight: 700; }
.pw-pv-editor { min-height: 34px; }
.pw-pv-spacer { height: 22px; }
.pw-pv-vazio { color: var(--pw-muted); font-size: .85rem; font-style: italic; padding: 6px 2px; }
.pw-pv-heavy {
    display: flex; align-items: center; gap: 6px;
    padding: 14px; border: 1px dashed var(--pw-line); border-radius: var(--pw-radius-sm);
    color: var(--pw-muted); background: var(--pw-line-soft); font-size: .85rem;
}
/* Grade de Dados com configuração inválida (fallback do dxDataGrid real) */
.pw-pv-heavy--erro { border-color: #dc3545; color: #b02a37; }

/* Modal da visão FILTRO_LISTAGEM (botão "Filtrar" do toolbar da grade) */
.pw-pv-filtro { padding: 2px 4px; }
.pw-pv-filtro .pw-pv-form { max-width: none; }
/* Seletor de operador ao lado do campo (filtroOperadores com 2+ opções) */
.pw-pv-filtro-op {
    width: auto; max-width: 100%; margin-bottom: 4px;
    font-size: .76rem; color: var(--pw-muted, #6c757d);
}

/* Painel "Grade de Dados" do inspetor (resumo + atalho para o editor) */
.pw-insp-grade { border: 1px solid var(--pw-line); border-radius: var(--pw-radius-sm); background: var(--pw-accent-soft); }

/* group-box / card */
.pw-pv-group {
    border: 1px solid var(--pw-line); border-radius: var(--pw-radius);
    background: var(--pw-surface); overflow: hidden;
}
.pw-pv-group-head {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; font-weight: 600; font-size: .9rem; color: var(--pw-text);
    background: var(--pw-accent-soft); border-bottom: 1px solid var(--pw-line);
}
.pw-pv-group-head .bi { color: var(--pw-accent); }
.pw-pv-group-body { padding: 14px; }
.pw-pv-group--card .pw-pv-group-head { background: var(--pw-surface); border-bottom: 2px solid var(--pw-accent); }

/* abas */
.pw-pv-tabs { border: 1px solid var(--pw-line); border-radius: var(--pw-radius); overflow: hidden; background: var(--pw-surface); }
.pw-pv-tabhead { display: flex; flex-wrap: wrap; background: var(--pw-line-soft); border-bottom: 1px solid var(--pw-line); }
.pw-pv-tab-btn {
    border: none; background: transparent; padding: 9px 16px;
    font-size: .85rem; font-weight: 600; color: var(--pw-muted);
    border-bottom: 2px solid transparent; cursor: pointer;
}
.pw-pv-tab-btn:hover { color: var(--pw-text); }
.pw-pv-tab-btn.active { color: var(--pw-accent); background: var(--pw-surface); border-bottom-color: var(--pw-accent); }
.pw-pv-pane { padding: 16px; }

/* accordion */
.pw-pv-accordion { border: 1px solid var(--pw-line); border-radius: var(--pw-radius); overflow: hidden; }
.pw-pv-acc-item + .pw-pv-acc-item { border-top: 1px solid var(--pw-line); }
.pw-pv-acc-head {
    width: 100%; text-align: left; border: none; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px; font-weight: 600; font-size: .88rem; color: var(--pw-text);
    background: var(--pw-line-soft);
}
.pw-pv-acc-caret { transition: transform .15s ease; color: var(--pw-muted); }
.pw-pv-acc-item.open .pw-pv-acc-caret { transform: rotate(90deg); }
.pw-pv-acc-body { padding: 14px; background: var(--pw-surface); }

.pw-pv-modal-btn { width: 100%; }

/* ====================================================================
   Formulário agrupado (popup de coluna) - cabeçalhos de categoria
   ==================================================================== */
.pw-form-group.dx-form-group-with-caption > .dx-form-group-caption {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--pw-accent-strong);
    background: var(--pw-line-soft); padding: 5px 10px; border-radius: 6px;
    display: block; margin-bottom: 8px;
}

/* ====================================================================
   Diagrama ER (canvas estilo Workbench)
   ==================================================================== */
.pw-erd-wrap { position: relative; padding: 0; overflow: hidden; }

/* ---------- Tela cheia (painel expandido) ---------- */
.pw-erd-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1080; /* acima da sidebar (1030) e do topbar */
    background: var(--pw-paper, #eef1f5);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}
.pw-erd-fullscreen .pw-erd-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.pw-erd-fullscreen .pw-erd-canvas {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}
body.pw-erd-body-lock { overflow: hidden; }

.pw-erd-canvas {
    position: relative;
    height: calc(100vh - 170px);
    min-height: 460px;
    overflow: auto;
    background-color: #f3f6fa;
    /* grade blueprint sutil */
    background-image:
        linear-gradient(rgba(4, 41, 61, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(4, 41, 61, .045) 1px, transparent 1px);
    background-size: 24px 24px;
    border-radius: var(--pw-radius);
}
.pw-erd-world { position: relative; width: 100%; height: 100%; }
.pw-erd-links { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 1; }
.pw-erd-hit { pointer-events: stroke; }

.pw-erd-link {
    stroke: var(--pw-accent); stroke-width: 1.4; fill: none; opacity: .5;
    transition: stroke .12s ease, opacity .12s ease, stroke-width .12s ease;
}
.pw-erd-link.is-temp { stroke: var(--pw-accent-bright); stroke-dasharray: 6 4; stroke-width: 2; opacity: 1; }
.pw-erd-marker {
    stroke: var(--pw-accent); stroke-width: 1.6; opacity: .5;
    transition: stroke .12s ease, opacity .12s ease;
}

/* Hover: a linha sob o cursor salta à frente */
.pw-erd-relg.is-hover .pw-erd-link { stroke-width: 2.4; opacity: 1; }
.pw-erd-relg.is-hover .pw-erd-marker { stroke-width: 2; opacity: 1; }

/* Linha selecionada (popover aberto) */
.pw-erd-relg.is-rel-selected .pw-erd-link { stroke: #d6336c !important; stroke-width: 2.6; opacity: 1; }
.pw-erd-relg.is-rel-selected .pw-erd-marker { stroke: #d6336c; stroke-width: 2.4; opacity: 1; }

/* Tabela selecionada: destaca as relações dela e esmaece as demais */
.pw-erd-links.has-selection .pw-erd-relg:not(.is-active) .pw-erd-link,
.pw-erd-links.has-selection .pw-erd-relg:not(.is-active) .pw-erd-marker { opacity: .07; }
.pw-erd-links.has-selection .pw-erd-relg.is-active .pw-erd-link { stroke-width: 2.2; opacity: 1; }
.pw-erd-links.has-selection .pw-erd-relg.is-active .pw-erd-marker { stroke-width: 2; opacity: 1; }

/* ---------- Card de tabela ---------- */
.pw-erd-table {
    --erd-accent: var(--pw-accent);
    position: absolute; width: 234px;
    background: var(--pw-surface);
    border: 1px solid var(--pw-line);
    border-radius: 10px;
    box-shadow: var(--pw-shadow-sm);
    user-select: none;
    overflow: hidden;
    z-index: 2;
}
.pw-erd-table.is-dragging { box-shadow: var(--pw-shadow-md); opacity: .96; z-index: 5; }
.pw-erd-table.is-focus { outline: 3px solid var(--pw-accent-bright); outline-offset: 2px; }
/* tabela atenuada quando há busca ativa e não casou */
.pw-erd-table.is-dim { opacity: .32; filter: grayscale(.4); }
/* resultado da busca: realce em destaque (âmbar) */
.pw-erd-table.is-match { outline: 2px solid #d9a400; outline-offset: 2px; opacity: 1; filter: none; z-index: 3; }
/* tabela selecionada / em foco: borda destacada persistente */
.pw-erd-table.is-selected { outline: 3px solid var(--pw-accent-bright); outline-offset: 2px; box-shadow: 0 0 0 4px var(--pw-accent-soft), var(--pw-shadow-md); opacity: 1; filter: none; z-index: 4; }
/* busca na toolbar */
.pw-erd-search .input-group-text { background: var(--pw-surface); color: var(--pw-muted); }
.pw-erd-search-count { font-size: .72rem; font-variant-numeric: tabular-nums; min-width: 38px; justify-content: center; }
.pw-erd-search-count.is-empty { color: #c0392b; }
.pw-erd-thead {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 8px 8px 11px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--erd-accent) 16%, #fff), color-mix(in srgb, var(--erd-accent) 8%, #fff));
    border-bottom: 2px solid var(--erd-accent);
    cursor: grab; font-weight: 700;
}
.pw-erd-thead:active { cursor: grabbing; }
.pw-erd-thead > .bi { color: var(--erd-accent); }
.pw-erd-tname { flex: 1 1 auto; min-width: 0; font-size: .9rem; font-family: var(--pw-font-mono); color: var(--pw-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-erd-tbadge { flex: none; font-size: .6rem; font-weight: 700; color: var(--erd-accent); background: rgba(255,255,255,.65); border: 1px solid color-mix(in srgb, var(--erd-accent) 35%, #fff); border-radius: 999px; padding: 0 6px; }
.pw-erd-act {
    flex: none; width: 24px; height: 24px; border: none; background: transparent;
    color: var(--pw-muted); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem;
}
.pw-erd-act:hover { background: rgba(4,41,61,.1); color: var(--pw-text); }

.pw-erd-tbody { max-height: 320px; overflow-y: auto; }
.pw-erd-table.is-collapsed .pw-erd-tbody { display: none; }
.pw-erd-col {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 9px; font-size: .8rem; min-height: 24px;
    border-top: 1px solid var(--pw-line-soft);
    cursor: default;
}
.pw-erd-col:first-child { border-top: none; }
.pw-erd-col-empty { color: var(--pw-muted); font-style: italic; justify-content: center; }
.pw-erd-cicon { flex: none; width: 14px; text-align: center; font-size: .78rem; color: var(--pw-muted); }
.pw-erd-pk { color: #d9a400 !important; }
.pw-erd-fk { color: var(--pw-accent) !important; }
.pw-erd-cname { flex: 1 1 auto; min-width: 0; font-family: var(--pw-font-mono); color: var(--pw-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-erd-cname.is-required { font-weight: 600; }
.pw-erd-col.is-pk .pw-erd-cname { font-weight: 700; }
.pw-erd-ctype { flex: none; font-size: .7rem; color: var(--pw-muted); font-family: var(--pw-font-mono); }

/* ---------- Grupo / camada (estilo Workbench) ---------- */
.pw-erd-group {
    --erd-accent: var(--pw-accent);
    position: absolute; z-index: 0;
    border: 1.5px dashed color-mix(in srgb, var(--erd-accent) 55%, #fff);
    border-radius: 12px;
    background: color-mix(in srgb, var(--erd-accent) 7%, transparent);
}
.pw-erd-group.is-dragging { background: color-mix(in srgb, var(--erd-accent) 12%, transparent); box-shadow: var(--pw-shadow-md); }
.pw-erd-ghead {
    display: inline-flex; align-items: center; gap: 6px;
    position: absolute; top: -14px; left: 14px;
    max-width: calc(100% - 28px);
    padding: 2px 6px 2px 10px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--erd-accent) 22%, #fff), color-mix(in srgb, var(--erd-accent) 12%, #fff));
    border: 1px solid color-mix(in srgb, var(--erd-accent) 40%, #fff);
    border-radius: 999px;
    cursor: grab; font-weight: 700; font-size: .78rem; color: var(--pw-text);
    box-shadow: var(--pw-shadow-sm); user-select: none;
}
.pw-erd-ghead:active { cursor: grabbing; }
.pw-erd-ghead > .bi { color: var(--erd-accent); }
.pw-erd-gtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-erd-gact { flex: none; width: 20px; height: 20px; border: none; background: transparent; color: var(--pw-muted); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; }
.pw-erd-gact:hover { background: rgba(4, 41, 61, .12); color: var(--pw-text); }
/* swatch de cor do grupo */
.pw-erd-gcolor { padding: 0; border: 1px solid color-mix(in srgb, var(--erd-accent) 45%, #fff); cursor: pointer; }
.pw-erd-gcolor:hover { background: transparent; box-shadow: 0 0 0 2px color-mix(in srgb, var(--erd-accent) 30%, #fff); }
.pw-erd-gcolor::-webkit-color-swatch-wrapper { padding: 2px; }
.pw-erd-gcolor::-webkit-color-swatch { border: none; border-radius: 3px; }
.pw-erd-gcolor::-moz-color-swatch { border: none; border-radius: 3px; }
.pw-erd-gresize {
    position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 45%, color-mix(in srgb, var(--erd-accent) 55%, #fff) 45%);
    border-bottom-right-radius: 11px;
}

/* modo relacionar: colunas viram alvos clicáveis */
.pw-erd-relmode .pw-erd-tbody .pw-erd-col { cursor: crosshair; }
.pw-erd-relmode .pw-erd-tbody .pw-erd-col:hover { background: var(--pw-accent-soft); box-shadow: inset 0 0 0 1px var(--pw-accent-bright); }
.pw-erd-relmode .pw-erd-thead { cursor: default; }

/* ---------- Banner de dica ---------- */
.pw-erd-hint {
    display: flex; align-items: center; gap: 8px;
    background: var(--pw-accent-soft); border: 1px solid var(--pw-accent-bright);
    color: var(--pw-accent-strong); border-radius: var(--pw-radius-sm);
    padding: 8px 12px; margin-bottom: 10px; font-size: .85rem;
}
.pw-erd-hint .btn-close { margin-left: auto; }

/* ---------- Legenda ---------- */
.pw-erd-legend {
    position: absolute; right: 12px; bottom: 10px;
    display: flex; gap: 14px;
    background: rgba(255,255,255,.9); border: 1px solid var(--pw-line);
    border-radius: 999px; padding: 4px 12px; font-size: .72rem; color: var(--pw-muted);
    box-shadow: var(--pw-shadow-sm); pointer-events: none;
}
.pw-erd-legend .bi { margin-right: 3px; }

/* ---------- Overlay de carregamento (carga sob demanda) ---------- */
.pw-erd-loading {
    position: absolute; inset: 0; z-index: 40; /* acima dos cards (2-5) e do popover (30) */
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--pw-paper) 82%, transparent);
    border-radius: var(--pw-radius);
}
.pw-erd-loading[hidden] { display: none; }
.pw-erd-loading-box {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    max-width: 320px; padding: 20px 26px; text-align: center;
    background: var(--pw-surface); border: 1px solid var(--pw-line);
    border-radius: var(--pw-radius); box-shadow: var(--pw-shadow-md);
    color: var(--pw-muted); font-size: .85rem;
}
.pw-erd-loading-box[hidden] { display: none; }
.pw-erd-loading-erro .bi { font-size: 1.6rem; color: #c0392b; }

/* ---------- Estado vazio ---------- */
.pw-erd-empty {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; color: var(--pw-muted); text-align: center;
}
.pw-erd-empty .bi { font-size: 2.4rem; opacity: .5; margin-bottom: 8px; }

/* ---------- Popover de relacionamento ---------- */
.pw-erd-popover {
    position: absolute; z-index: 30; width: 226px;
    background: var(--pw-surface); border: 1px solid var(--pw-line);
    border-radius: var(--pw-radius-sm); box-shadow: var(--pw-shadow-md);
    padding: 10px;
}
.pw-erd-pop-head { display: flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: var(--pw-text); margin-bottom: 8px; word-break: break-word; }
.pw-erd-pop-head .bi { color: var(--pw-accent); }
.pw-erd-pop-badge {
    margin-left: auto; font-size: .64rem; font-weight: 600; color: var(--pw-muted);
    border: 1px solid var(--pw-line); border-radius: 999px; padding: 1px 7px; white-space: nowrap;
}
.pw-erd-pop-end { display: flex; flex-direction: column; gap: 1px; font-size: .78rem; margin-bottom: 6px; }
.pw-erd-pop-lbl { font-size: .64rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pw-muted); }
.pw-erd-pop-ref { word-break: break-word; color: var(--pw-text); }
.pw-erd-pop-ref a { color: var(--pw-accent); font-weight: 600; text-decoration: none; }
.pw-erd-pop-ref a:hover { text-decoration: underline; }
.pw-erd-pop-sep { margin: 8px 0; border-color: var(--pw-line); opacity: .6; }
.pw-erd-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .76rem; color: var(--pw-muted); margin-bottom: 6px; }
.pw-erd-pop-row .form-select { width: 120px; }
.pw-erd-pop-foot { display: flex; justify-content: flex-end; margin-top: 4px; }

/* ---------- Seletor de visões (/admin/diagrama sem parâmetros) ---------- */
.pw-erd-visoes .pw-erd-vsec h3 .bi { margin-right: 4px; }
.pw-erd-vazio {
    display: flex; align-items: center; gap: 8px;
    color: var(--pw-muted); background: var(--pw-line-soft);
    border: 1px dashed var(--pw-line); border-radius: var(--pw-radius-sm);
    padding: 10px 12px; margin: 0;
}

.pw-erd-vlist { display: flex; flex-direction: column; gap: 6px; }
.pw-erd-vitem {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap;
    border: 1px solid var(--pw-line); border-radius: var(--pw-radius-sm);
    background: var(--pw-surface); padding: 9px 12px;
}
.pw-erd-vitem:hover { border-color: var(--pw-accent-bright); background: var(--pw-accent-soft); }
.pw-erd-vinfo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pw-erd-vnome { font-weight: 600; color: var(--pw-text); text-decoration: none; }
.pw-erd-vnome:hover { color: var(--pw-accent-strong); text-decoration: underline; }
.pw-erd-vnome .bi { color: var(--pw-accent); margin-right: 3px; }
.pw-erd-vmeta { font-size: .74rem; color: var(--pw-muted); }
.pw-erd-vdesc { font-size: .78rem; color: var(--pw-muted); }
.pw-erd-vacoes { flex: none; }

/* chips de ramo de atividade (cor vem do cadastro, via variáveis inline) */
.pw-erd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-erd-chip {
    --erd-chip-bg: var(--pw-accent);
    --erd-chip-fg: #fff;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px; border-radius: 999px;
    background: var(--erd-chip-bg); color: var(--erd-chip-fg);
    font-size: .82rem; font-weight: 600; text-decoration: none;
    border: 1px solid rgba(4, 41, 61, .12); box-shadow: var(--pw-shadow-sm);
}
.pw-erd-chip:hover { color: var(--erd-chip-fg); filter: brightness(1.08); }
.pw-erd-chip.is-vazio { opacity: .45; box-shadow: none; cursor: default; }
.pw-erd-chip-qtd {
    font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, .28); border-radius: 999px; padding: 0 7px;
}

/* ---------- Barra da visão ativa (modo canvas) ---------- */
.pw-erd-visao-badge {
    display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
    margin-left: 8px; padding: 2px 10px; border-radius: 999px;
    font-size: .74rem; font-weight: 600;
    color: var(--pw-accent-strong); background: var(--pw-accent-soft);
    border: 1px solid color-mix(in srgb, var(--pw-accent) 30%, #fff);
}
.pw-erd-visao-badge .bi { font-size: .78rem; }
.pw-erd-vmenu { max-height: 340px; overflow-y: auto; font-size: .85rem; }
.pw-erd-vmenu .bi { color: var(--pw-accent); margin-right: 5px; }

/* botão "x" do card: remove a tabela DA VISÃO, nunca do metadata */
.pw-erd-remove:hover { background: rgba(192, 57, 43, .12); color: #c0392b; }

/* ---------- Seletor de tabelas dos modais da visão manual ---------- */
.pw-erd-picker { display: flex; flex-direction: column; gap: 8px; }
.pw-erd-picker-lista {
    max-height: 46vh; min-height: 120px; overflow-y: auto;
    border: 1px solid var(--pw-line); border-radius: var(--pw-radius-sm);
    padding: 6px; background: var(--pw-surface);
}
.pw-erd-picker-item {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px; border-radius: 6px; cursor: pointer; font-size: .82rem;
}
.pw-erd-picker-item:hover { background: var(--pw-accent-soft); }
.pw-erd-picker-item input { flex: none; margin: 0; }
.pw-erd-picker-nome { font-family: var(--pw-font-mono); color: var(--pw-text); }
.pw-erd-picker-desc {
    flex: 1 1 auto; min-width: 0; text-align: right;
    font-size: .74rem; color: var(--pw-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Modos de exibição das colunas (toolbar) ----------
   As classes ficam no world; o JS remede os cards e reancora as arestas a cada
   troca, porque a altura de todo card muda. */
.pw-erd-mode-chaves .pw-erd-col:not(.is-pk):not(.is-fk):not(.pw-erd-col-empty) { display: none; }
.pw-erd-mode-nomes .pw-erd-tbody { display: none; }

/* Linhas de relacionamento ocultas (toggle da toolbar) */
.pw-erd-sem-linhas .pw-erd-links { display: none; }

/* ---------- Cor por tabela (swatch no cabeçalho do card) ---------- */
.pw-erd-tcolor {
    padding: 0; width: 20px; height: 20px; background: transparent;
    border: 1px solid color-mix(in srgb, var(--erd-accent) 45%, #fff);
    border-radius: 5px; cursor: pointer; visibility: hidden;
}
.pw-erd-table:hover .pw-erd-tcolor,
.pw-erd-table.is-selected .pw-erd-tcolor { visibility: visible; }
.pw-erd-tcolor:hover { background: transparent; box-shadow: 0 0 0 2px color-mix(in srgb, var(--erd-accent) 30%, #fff); }
.pw-erd-tcolor::-webkit-color-swatch-wrapper { padding: 2px; }
.pw-erd-tcolor::-webkit-color-swatch { border: none; border-radius: 3px; }
.pw-erd-tcolor::-moz-color-swatch { border: none; border-radius: 3px; }

/* ---------- Minimapa (bird's eye) ---------- */
.pw-erd-minimap {
    position: absolute; right: 12px; bottom: 46px; z-index: 25; /* abaixo do popover (30) */
    padding: 5px 6px 6px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--pw-line); border-radius: var(--pw-radius-sm);
    box-shadow: var(--pw-shadow-sm); user-select: none;
}
.pw-erd-minimap[hidden] { display: none; }
.pw-erd-minimap-head {
    display: flex; align-items: center; gap: 4px; padding: 0 1px 4px;
    font-size: .64rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--pw-muted);
}
.pw-erd-minimap-canvas {
    display: block; width: 200px; height: 140px; cursor: grab;
    border: 1px solid var(--pw-line-soft); border-radius: 4px;
}
.pw-erd-minimap.is-dragging .pw-erd-minimap-canvas { cursor: grabbing; }

/* ---------- Barra de rolagem discreta ---------- */
.pw-sidebar::-webkit-scrollbar { width: 8px; }
.pw-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 8px; }

/* ---------- Responsivo ---------- */
@media (max-width: 768px) {
    .pw-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
    .pw-sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
    .pw-content { margin-left: 0; }
    .pw-main { padding: 18px; }
}

/* Respeita preferência de movimento reduzido (WIG) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ====================================================================
   Modais de cadastro (inclusão/alteração) - templates HTML individuais
   ==================================================================== */
.pw-form-modal .modal-content {
    border: 1px solid var(--pw-border, #e4e9f0);
    border-radius: var(--pw-radius, 12px);
    box-shadow: 0 24px 60px rgba(4, 41, 61, .22);
}
.pw-form-modal .modal-header {
    background: var(--pw-surface-2, #f6f9fc);
    border-bottom: 1px solid var(--pw-border, #e4e9f0);
}
.pw-form-modal .modal-title { font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: .45rem; }
.pw-form-modal .modal-body { padding: 1.1rem 1.25rem; }

/* Rolagem interna quando o formulário excede a altura da tela.
   Como o <form> envolve cabeçalho/corpo/rodapé (em vez de serem filhos diretos
   de .modal-content), é ele que precisa virar a coluna flex que limita a altura;
   só assim o .modal-body rola e cabeçalho/rodapé ficam fixos. */
.pw-form-modal .modal-dialog { max-height: calc(100vh - 2rem); }
.pw-form-modal .modal-content { max-height: calc(100vh - 2rem); overflow: hidden; }
.pw-form-modal .pw-modal-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
}
.pw-form-modal .modal-header,
.pw-form-modal .modal-footer { flex: 0 0 auto; }
.pw-form-modal .modal-body { overflow-y: auto; min-height: 0; }

/* Estilos de campo compartilhados por modais (.pw-modal-form) e formulários
   inline (ex.: aba Propriedades da tabela) - ambos recebem a classe .pw-form. */
.pw-form .form-label { font-size: .82rem; font-weight: 500; margin-bottom: .25rem; color: #41566b; }
.pw-form .form-control,
.pw-form .form-select { font-size: .9rem; }
.pw-form .form-control-color { width: 100%; height: calc(1.5em + .75rem + 2px); }

/* Cabeçalho de seção dentro do formulário */
.pw-form-section {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pw-primary, #0a6f8a);
    margin: .35rem 0 -.15rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--pw-border, #e9eef4);
    display: flex; align-items: center; gap: .4rem;
}
.pw-form-section .bi { opacity: .8; }

/* Switches (campos booleanos) alinhados com os demais editores */
.pw-field-switch { padding-left: 2.6em; }
.pw-field-switch .form-check-input { width: 2.1em; height: 1.05em; margin-left: -2.6em; cursor: pointer; }
.pw-field-switch .form-check-label { font-size: .88rem; cursor: pointer; }

/* ====================================================================
   Visão Design - canvas WYSIWYG estilo Delphi (paleta | canvas | props)
   ==================================================================== */
.pw-designer-3col {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: start;
}
.pw-dsn-toolboxpane,
.pw-dsn-canvaspane { padding: 0; overflow: hidden; }
.pw-dsn-toolboxpane { position: sticky; top: 12px; }

.pw-dsn-status {
    text-transform: none;
    letter-spacing: 0;
    font-size: .78rem;
    color: var(--pw-accent);
    min-width: 0;
    text-align: right;
}
.pw-dsn-status kbd {
    font-size: .68rem; padding: 1px 5px;
    background: var(--pw-line-soft); color: var(--pw-text);
    border: 1px solid var(--pw-line); border-radius: 4px;
}

/* ---------- Paleta de componentes ---------- */
.pw-toolbox { padding: 10px; max-height: calc(100vh - 140px + var(--pw-ganho-vh)); overflow-y: auto; }
.pw-toolbox-cap {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--pw-muted);
    padding: 8px 4px 4px;
}
.pw-toolbox-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.pw-tool {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 6px 8px;
    border: 1px solid transparent; border-radius: var(--pw-radius-sm);
    background: transparent; text-align: left;
    font-size: .84rem; font-weight: 600; color: var(--pw-text);
    cursor: grab;
    transition: background-color .12s ease, border-color .12s ease;
}
.pw-tool .bi { flex: 0 0 auto; width: 22px; text-align: center; color: var(--pw-muted); font-size: .95rem; }
.pw-tool:hover { background: var(--pw-line-soft); }
.pw-tool.active {
    background: var(--pw-accent-soft);
    border-color: var(--pw-accent-bright);
    color: var(--pw-accent);
}
.pw-tool.active .bi { color: var(--pw-accent); }

/* ---------- Canvas ---------- */
.pw-dsn-canvas {
    min-height: calc(100vh - 190px + var(--pw-ganho-vh));
    padding: 18px;
    overflow: auto;
    outline: none;
    background-color: #f3f6fa;
    background-image:
        linear-gradient(rgba(4, 41, 61, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(4, 41, 61, .045) 1px, transparent 1px);
    background-size: 24px 24px;
}
.pw-dsn-canvas.pw-armed { cursor: crosshair; }
.pw-dsn-canvas.pw-armed .pw-dsn-shield,
.pw-dsn-canvas.pw-armed .pw-dsn-item { cursor: crosshair; }

.pw-dsn-paper {
    /* Containing block dos overlays absolutos (alças, guias, espaçamento),
       com ou sem transform de zoom - senão eles resolvem contra o canvas
       e desalinham quando o papel é centralizado (preview celular/tablet). */
    position: relative;
    max-width: 960px; margin: 0 auto;
    background: var(--pw-surface, #fff);
    border: 1px solid var(--pw-line);
    border-radius: var(--pw-radius);
    box-shadow: var(--pw-shadow-md, 0 .25rem .75rem rgba(0, 0, 0, .08));
    padding: 20px;
    min-height: 320px;
}

/* corpo (drop-zone) de cada container e da raiz */
.pw-dsn-body.is-empty {
    min-height: 64px;
    align-content: center;
}
.pw-dsn-body.is-empty::before {
    content: 'Arraste componentes da paleta ou clique com uma ferramenta armada';
    display: block;
    margin: 8px;
    padding: 12px;
    text-align: center;
    font-size: .78rem;
    color: var(--pw-muted);
    border: 1.5px dashed var(--pw-line);
    border-radius: var(--pw-radius-sm);
}
.pw-dsn-body.pw-drop-hint {
    background: var(--pw-accent-soft);
    box-shadow: inset 0 0 0 2px var(--pw-accent-bright);
    border-radius: var(--pw-radius-sm);
}
.pw-dsn-body.is-empty.pw-drop-hint::before {
    content: 'Soltar aqui ↳';
    border-color: var(--pw-accent);
    color: var(--pw-accent);
}

/* ---------- Itens (componentes no canvas) ---------- */
.pw-dsn-item { position: relative; cursor: pointer; }
.pw-dsn-item:hover { outline: 1.5px dashed var(--pw-accent-bright); outline-offset: 3px; border-radius: 2px; }
.pw-dsn-item.selected {
    outline: 2px solid var(--pw-accent);
    outline-offset: 3px;
    border-radius: 2px;
}
.pw-dsn-item.selected::before {
    content: attr(data-nome);
    position: absolute;
    top: -21px; left: -2px;
    z-index: 20;
    padding: 1px 8px;
    font-size: .68rem; font-weight: 700;
    color: #fff; background: var(--pw-accent);
    border-radius: 4px 4px 4px 0;
    white-space: nowrap;
    pointer-events: none;
}
.pw-dsn-item.pw-dsn-dragging { opacity: .4; }
.pw-dsn-item.pw-dsn-hidden { opacity: .45; }
.pw-dsn-item.pw-dsn-hidden::after {
    content: 'oculto';
    position: absolute; top: 2px; right: 2px; z-index: 6;
    font-size: .62rem; font-weight: 700; text-transform: uppercase;
    color: var(--pw-muted); background: var(--pw-line-soft);
    border: 1px solid var(--pw-line); border-radius: 999px;
    padding: 0 6px;
    pointer-events: none;
}

/* escudo transparente sobre o widget: clique seleciona, não interage */
.pw-dsn-editorwrap { position: relative; }
.pw-dsn-shield { position: absolute; inset: 0; z-index: 5; cursor: pointer; }

/* containers no canvas */
.pw-dsn-typetag {
    margin-left: auto;
    font-size: .66rem; font-weight: 600; text-transform: lowercase;
    color: var(--pw-muted); background: var(--pw-line-soft);
    border: 1px solid var(--pw-line);
    padding: 0 7px; border-radius: 999px;
}
.pw-dsn-group--modal { border-style: dashed; border-color: #b5366a; }
.pw-dsn-group--modal > .pw-dsn-group-head { background: #fdeef3; }
.pw-dsn-group--modal > .pw-dsn-group-head .bi { color: #b5366a; }

/* botão de aba / cabeçalho de accordion selecionados */
.pw-dsn-tab-btn.selected,
.pw-dsn-acc-head.selected { box-shadow: inset 0 0 0 2px var(--pw-accent); border-radius: 4px; }

@media (max-width: 1399.98px) {
    .pw-designer-3col { grid-template-columns: 200px minmax(0, 1fr) 320px; }
}
@media (max-width: 1199.98px) {
    .pw-designer-3col { grid-template-columns: 190px minmax(0, 1fr); }
    .pw-designer-3col .pw-designer-inspector { grid-column: 1 / -1; position: static; }
}
@media (max-width: 767.98px) {
    .pw-designer-3col { grid-template-columns: minmax(0, 1fr); }
    .pw-dsn-toolboxpane { position: static; }
    .pw-toolbox { max-height: 260px; }
    .pw-toolbox-group { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ── Pré-visualização de ícone (campo editor:icon e coluna com iconField) ── */
.dx-texteditor .pw-icon-preview { pointer-events: none; background: transparent; }
.dx-texteditor .pw-icon-preview .dx-icon { color: var(--bs-primary, #0d6efd); font-size: 17px; }
.dx-texteditor .pw-icon-preview.pw-icon-preview-empty .dx-icon { color: var(--pw-muted, #94a3b8); }
.pw-grid-icon { color: var(--bs-primary, #0d6efd); margin-right: .45rem; font-size: 1rem; vertical-align: -.09em; }

/* ── Chip de valor multi-selecao em celula de grade (ex.: Ramos de Atividade) ──
   Classe propria em vez das utilities bg-*-subtle/text-*-emphasis: elas so
   existem no Bootstrap 5.3 e o build local e 5.2.3 (o badge ficaria com texto
   branco sem fundo). Tokens --pw-* garantem contraste sobre linha normal e
   alternada da grade. */
.pw-grid-tag {
    display: inline-block;
    margin: 1px .3rem 1px 0;
    padding: .15rem .5rem;
    border: 1px solid var(--pw-line, #dde3ea);
    border-radius: 999px;
    background: var(--pw-accent-soft, #e3f3f8);
    color: var(--pw-accent-strong, #085a70);
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════
   Designer - Sistema de eventos (aba do inspetor, editor, visão geral)
   ════════════════════════════════════════════════════════════════════ */

/* badge ⚡ na árvore (objeto com handlers) */
.pw-node-evt {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: .68rem; font-weight: 700;
    color: #92600a; background: #fdf3d8;
    border: 1px solid #f2dda2;
    padding: 0 6px; border-radius: 999px;
    flex: 0 0 auto;
}
.pw-node-evt .bi { font-size: .72rem; }

/* ── Abas do inspetor (Props./Estilo/Regras/Ações/Eventos...) ───────────
   A barra vive num painel de 320-380px e chegava a 5 abas: com
   `flex-wrap` ela quebrava em duas linhas e roubava altura do inspetor,
   que é o recurso escasso ali. Agora é uma PISTA de linha única com
   rolagem horizontal, setas sobrepostas e menu "todas as abas" -
   comportamento em `PlusWeb.abasRolaveis()` (public/js/plusweb-admin.js).

   O estilo base abaixo continua valendo sozinho (sem o JS a barra apenas
   rola, sem setas nem menu); o wrapper `.pw-abas` só acrescenta. */
.pw-insp-tabs {
    display: flex; gap: 2px; flex-wrap: nowrap;
    min-width: 0;
    padding: 6px 10px 0;
    border-bottom: 1px solid var(--pw-line);
    background: var(--pw-line-soft);
    /* `overflow-y: hidden` é obrigatório: com `auto` no eixo X o CSS força o
       eixo Y a `auto` também e nasce uma barra vertical parasita de 1px. */
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-inline: contain;   /* não dispara "voltar página" */
    /* `pan-x pan-y`, nao so `pan-x`: em tela sensivel ao toque o `pan-x`
       sozinho impediria a rolagem VERTICAL do inspetor quando o gesto
       comeca em cima da barra. Os dois juntos ainda barram pinca/zoom. */
    touch-action: pan-x pan-y;
    /* Sem a barra de rolagem, quem sinaliza "há mais abas" é o esmaecido
       das pontas (`.pw-abas`) somado à aba cortada e às setas. */
    scrollbar-width: none; -ms-overflow-style: none;
}
.pw-insp-tabs::-webkit-scrollbar { display: none; }
.pw-insp-tab {
    appearance: none; border: 1px solid transparent; border-bottom: none;
    background: transparent; color: var(--pw-muted);
    font-size: .8rem; font-weight: 600;
    padding: 6px 10px; border-radius: 8px 8px 0 0;
    cursor: pointer; white-space: nowrap;
    /* `flex: 0 0 auto` é o que produz o transbordo: sem isso os botões
       encolhem para caber e a pista nunca rola. */
    flex: 0 0 auto;
    transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.pw-insp-tab:hover { color: var(--pw-ink, #0f172a); background: rgba(255, 255, 255, .55); }
.pw-insp-tab.active {
    background: #fff; color: var(--pw-accent, #0d6efd);
    border-color: var(--pw-line);
    /* Filete de destaque no topo (linguagem de aba moderna). Precisa ser
       `inset`: o `overflow` da pista recorta qualquer sombra EXTERNA - foi por
       isso que a antiga `0 1px 0 #fff` (que fundia a aba com o corpo abaixo)
       deixou de aparecer e saiu daqui em vez de ficar como codigo morto. */
    box-shadow: inset 0 2px 0 var(--pw-accent);
}
/* Outline externo seria cortado pelo `overflow` da pista - use inset. */
.pw-insp-tab:focus-visible {
    outline: 2px solid var(--pw-accent); outline-offset: -2px;
    color: var(--pw-ink, #0f172a);
}
.pw-insp-tab .bi { margin-right: 2px; }
.pw-insp-tab-count {
    display: inline-block; min-width: 17px; text-align: center;
    font-size: .68rem; font-weight: 700;
    color: #92600a; background: #fdf3d8;
    border-radius: 999px; padding: 0 4px; margin-left: 2px;
}

/* ── Wrapper de barra de abas rolável (PlusWeb.abasRolaveis) ──────────
   Genérico: serve a qualquer pista de abas (inspetor do designer, popup
   de Grade, popup de Mestre/Detalhe). O wrapper assume o fundo e a linha
   inferior para que as setas e o botão "todas" fiquem sobre a mesma
   superfície e a linha atravesse a barra inteira. */
.pw-abas {
    position: relative;
    display: flex; align-items: stretch;
    flex: 0 0 auto;
    min-width: 0;
    background: var(--pw-line-soft);
    border-bottom: 1px solid var(--pw-line);
    /* Largura reservada ao botão "todas as abas" (desloca a seta direita). */
    --pw-abas-todas-l: 32px;
    /* Largura do esmaecido de cada ponta; 0 quando não há o que revelar
       daquele lado (esmaecer sem transbordo apagaria rótulos à toa). */
    --pw-abas-fade-e: 0px;
    --pw-abas-fade-d: 0px;
}
/* A PISTA é identificada pela classe que o COMPONENTE aplica (`pw-abas-pista`),
   nunca pela classe estética de quem a usa - é isso que deixa o wrapper
   realmente genérico para a próxima barra de abas do admin. A mecânica de
   rolagem fica aqui; `.pw-insp-tabs` repete a sua parte para continuar
   funcionando sozinha, sem o JS. */
.pw-abas-pista {
    display: flex; flex-wrap: nowrap; min-width: 0;
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    scrollbar-width: none; -ms-overflow-style: none;
}
.pw-abas-pista::-webkit-scrollbar { display: none; }
/* Especificidade de 2 classes: vence `.pw-grd-tabs`/`.pw-md-tabs`
   (`flex: 0 0 auto`, uma classe), que continuam aplicadas à pista. */
.pw-abas > .pw-abas-pista {
    flex: 1 1 auto; min-width: 0;
    background: transparent; border-bottom: none;
    /* Máscara em vez de gradiente sólido nas pontas: dissolve o próprio
       conteúdo e continua correta se o fundo do painel mudar (white-label). */
    -webkit-mask-image: linear-gradient(to right, transparent 0,
        #000 var(--pw-abas-fade-e), #000 calc(100% - var(--pw-abas-fade-d)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0,
        #000 var(--pw-abas-fade-e), #000 calc(100% - var(--pw-abas-fade-d)), transparent 100%);
}
.pw-abas.tem-antes { --pw-abas-fade-e: 46px; }
.pw-abas.tem-depois { --pw-abas-fade-d: 46px; }
/* `grab` só quando há o que arrastar: convite explícito ao gesto. */
.pw-abas.is-rolavel > .pw-abas-pista { cursor: grab; }
.pw-abas.is-arrastando > .pw-abas-pista { cursor: grabbing; user-select: none; }

/* Setas SOBREPOSTAS: não ocupam largura no fluxo, então não realimentam o
   cálculo de transbordo (evita o laço do ResizeObserver). */
.pw-abas-nav {
    position: absolute; top: 5px; bottom: 5px; width: 24px; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    appearance: none; padding: 0;
    border: 1px solid var(--pw-line); border-radius: var(--pw-radius-sm);
    background: var(--pw-surface); color: var(--pw-muted);
    box-shadow: var(--pw-shadow-sm);
    cursor: pointer; opacity: 0; pointer-events: none;
    transition: opacity .12s ease, color .12s ease, background-color .12s ease;
}
.pw-abas-nav .bi { font-size: .8rem; line-height: 1; }
.pw-abas-nav:hover { color: var(--pw-accent); background: var(--pw-accent-soft); }
.pw-abas-nav:active { background: var(--pw-line-soft); }
.pw-abas-nav--esq { left: 4px; }
.pw-abas-nav--dir { right: 4px; }
.pw-abas.tem-todas .pw-abas-nav--dir { right: var(--pw-abas-todas-l); }
.pw-abas.tem-antes .pw-abas-nav--esq,
.pw-abas.tem-depois .pw-abas-nav--dir { opacity: 1; pointer-events: auto; }

/* Botão "todas as abas": no fluxo e com largura fixa - acesso determinístico
   ao inventário completo, que a rolagem sozinha não dá num painel estreito. */
.pw-abas-todas {
    flex: 0 0 auto; width: 26px; margin: 5px 4px 5px 2px;
    display: flex; align-items: center; justify-content: center;
    appearance: none; padding: 0;
    border: 1px solid var(--pw-line); border-radius: var(--pw-radius-sm);
    background: var(--pw-surface); color: var(--pw-muted);
    cursor: pointer;
    transition: color .12s ease, background-color .12s ease;
}
/* `display: flex` acima venceria o `[hidden] { display: none }` da folha do
   navegador; hoje so o `!important` do Bootstrap salva. Regra explicita para o
   botao sumir mesmo sem o Bootstrap carregado. */
.pw-abas-todas[hidden] { display: none; }
.pw-abas-todas .bi { font-size: .8rem; line-height: 1; }
.pw-abas-todas:hover { color: var(--pw-accent); background: var(--pw-accent-soft); }
.pw-abas-todas[aria-expanded="true"] { color: var(--pw-accent); background: var(--pw-accent-soft); }
.pw-abas-todas:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 1px; }

/* O menu fica FORA da pista: a máscara das pontas recortaria o popup. */
.pw-abas-menu {
    position: absolute; top: 100%; right: 4px; z-index: 30;
    min-width: 186px; max-width: 260px; padding: 4px;
    margin-top: 3px;
    background: var(--pw-surface);
    border: 1px solid var(--pw-line); border-radius: var(--pw-radius-sm);
    box-shadow: var(--pw-shadow-md);
}
.pw-abas-menu-item {
    display: flex; align-items: center; gap: 4px; width: 100%;
    appearance: none; border: none; background: transparent;
    padding: 6px 9px; border-radius: 6px;
    font-size: .8rem; font-weight: 600; color: var(--pw-muted);
    text-align: left; cursor: pointer; white-space: nowrap;
}
.pw-abas-menu-item:hover { background: var(--pw-line-soft); color: var(--pw-ink, #0f172a); }
.pw-abas-menu-item:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: -2px; }
.pw-abas-menu-item.is-ativa { color: var(--pw-accent); background: var(--pw-accent-soft); }
.pw-abas-menu-item .bi { margin-right: 2px; }

@media (prefers-reduced-motion: reduce) {
    .pw-insp-tab, .pw-abas-nav, .pw-abas-todas { transition: none; }
}

/* painel da aba Eventos */
.pw-evt-panel { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.pw-evt-busca { flex: 0 0 auto; }
.pw-evt-lista { overflow: auto; }
.pw-evt-cat {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--pw-muted);
    padding: 8px 2px 3px;
}
.pw-evt-row {
    display: flex; align-items: center; gap: 7px;
    padding: 5px 6px; border-radius: 7px;
    border: 1px solid transparent;
    cursor: pointer; user-select: none;
}
.pw-evt-row:hover { background: var(--pw-line-soft); }
.pw-evt-row:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 1px; }
.pw-evt-row .pw-evt-flash { color: #c8cfda; font-size: .85rem; flex: 0 0 auto; }
.pw-evt-row.has-code .pw-evt-flash { color: #eab308; }
.pw-evt-row.is-off .pw-evt-flash { color: #b8bfca; }
.pw-evt-row.is-off .pw-evt-nome { text-decoration: line-through; opacity: .7; }
.pw-evt-nome {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .76rem; font-weight: 600; color: var(--pw-ink, #0f172a);
    flex: 0 0 auto;
}
.pw-evt-row.has-code .pw-evt-nome { color: #92600a; }
.pw-evt-label { font-size: .74rem; color: var(--pw-muted); flex: 1 1 auto; min-width: 0; }
.pw-evt-acoes { display: none; gap: 2px; flex: 0 0 auto; }
.pw-evt-row:hover .pw-evt-acoes,
.pw-evt-row:focus-within .pw-evt-acoes { display: inline-flex; }
.pw-evt-btn {
    appearance: none; border: none; background: transparent;
    color: var(--pw-muted); padding: 2px 5px; border-radius: 5px;
    cursor: pointer; font-size: .8rem; line-height: 1;
}
.pw-evt-btn:hover { background: #fff; color: var(--pw-accent); box-shadow: 0 0 0 1px var(--pw-line); }
.pw-evt-limpar:hover { color: #dc3545; }
.pw-evt-vazio { color: var(--pw-muted); font-size: .8rem; padding: 12px 4px; text-align: center; }

/* editor de código do evento */
.pw-evted { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.pw-evted-doc {
    font-size: .8rem; color: var(--pw-muted);
    background: var(--pw-line-soft); border: 1px solid var(--pw-line);
    border-radius: 8px; padding: 7px 10px;
}
.pw-evted-doc code { font-size: .74rem; }
.pw-evted-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pw-evted-ativo { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; margin: 0; cursor: pointer; }
.pw-evted-snippets { width: auto; max-width: 280px; }
.pw-evted-assinatura, .pw-evted-fim {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .8rem; color: #7c3aed;
    background: #f6f3ff; border: 1px solid #e6defc;
    padding: 4px 10px; border-radius: 6px;
}
.pw-evted-editor {
    flex: 1 1 auto; min-height: 0;
    border: 1px solid var(--pw-line); border-radius: 6px; overflow: hidden;
}
.pw-evted-editor .CodeMirror { height: 100%; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; }
.pw-cm-erro { background: #fde8e8 !important; }
.pw-code-textarea { height: 100%; min-height: 240px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; resize: none; }
.pw-evted-erro {
    font-size: .8rem; color: #b02a37; background: #fdeaea;
    border: 1px solid #f5c2c7; border-radius: 6px; padding: 6px 10px;
}
.pw-evted-footer { display: flex; justify-content: flex-end; gap: 8px; }

/* visão geral de todos os eventos */
.pw-evtov { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.pw-evtov-lista { overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.pw-evtov-item {
    appearance: none; text-align: left; width: 100%;
    background: #fff; border: 1px solid var(--pw-line); border-radius: 9px;
    padding: 8px 12px; cursor: pointer;
}
.pw-evtov-item:hover { border-color: var(--pw-accent); box-shadow: 0 2px 8px rgba(13, 110, 253, .08); }
.pw-evtov-item.is-off { opacity: .65; }
.pw-evtov-head { display: flex; align-items: center; gap: 8px; font-size: .84rem; }
.pw-evtov-head .bi-lightning-charge-fill { color: #eab308; }
.pw-evtov-code {
    margin: 6px 0 0; padding: 6px 9px;
    font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .74rem;
    color: #334155; background: var(--pw-line-soft);
    border-radius: 6px; white-space: pre-wrap; word-break: break-word;
    max-height: 64px; overflow: hidden;
}

/* ── Aba "Regras" do designer (plusweb-designer-regras.js) ──────────── */
.pw-regras-panel { display: flex; flex-direction: column; min-height: 0; }
.pw-regras-corpo { display: flex; flex-direction: column; gap: 14px; padding: 10px; overflow: auto; }
.pw-regras-sec { display: flex; flex-direction: column; gap: 7px; }
.pw-regras-sec-tit {
    display: flex; align-items: center; gap: 6px; margin: 0;
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--pw-muted);
    border-bottom: 1px solid var(--pw-line); padding-bottom: 5px;
}
.pw-regras-sec-tit .btn { text-transform: none; letter-spacing: 0; font-size: .74rem; padding: 1px 8px; }
.pw-regras-sec-ajuda { margin: 0; font-size: .74rem; color: var(--pw-muted); line-height: 1.45; }
.pw-regras-sec-ajuda code, .pw-regras-check-ajuda code { font-size: .72rem; }

.pw-regras-unica { display: flex; flex-direction: column; gap: 3px; }
.pw-regras-unica-rot {
    display: flex; align-items: center; gap: 5px; margin: 0;
    font-size: .78rem; font-weight: 600; color: var(--pw-ink, #0f172a);
}
.pw-regras-unica-campo { display: flex; gap: 4px; }
.pw-regras-unica-campo .pw-regras-expr {
    font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .76rem;
}
.pw-regras-unica.is-erro .pw-regras-expr { border-color: #f1aeb5; background: #fff8f8; }
.pw-regras-unica.is-ok .pw-regras-expr { border-color: #a3cfbb; }
.pw-regras-unica-msg { margin-top: 0; font-size: .72rem; }
.pw-regras-unica-msg code { font-size: .7rem; }

.pw-regras-check {
    display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0;
    font-size: .78rem; cursor: pointer;
}
.pw-regras-check input { margin-top: 2px; flex: 0 0 auto; }
.pw-regras-check-ajuda { display: block; font-size: .72rem; color: var(--pw-muted); line-height: 1.4; }

.pw-regras-lista { display: flex; flex-direction: column; gap: 6px; }
.pw-regras-vazio {
    font-size: .78rem; color: var(--pw-muted); text-align: center;
    padding: 14px 6px; border: 1px dashed var(--pw-line); border-radius: 8px;
}
.pw-regra-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 7px 8px; border: 1px solid var(--pw-line); border-radius: 8px;
    background: #fff;
}
.pw-regra-item:hover { border-color: var(--pw-accent); }
.pw-regra-item.is-off { opacity: .6; }
.pw-regra-item.is-erro { border-color: #f1aeb5; background: #fff8f8; }
.pw-regra-sev {
    flex: 0 0 auto; font-size: .62rem; font-weight: 700; letter-spacing: .04em;
    padding: 2px 6px; border-radius: 999px; margin-top: 2px;
}
.pw-regra-sev--erro { color: #b02a37; background: #fdeaea; }
.pw-regra-sev--aviso { color: #92600a; background: #fdf3d8; }
/* Campo calculado (regra CALCULO, bloco B2) e passos do Value Processor. */
.pw-regra-sev--calculo { color: #0a58a2; background: #e5f0fb; }
.pw-regra-item.is-calculo { border-left: 3px solid #0a58a2; }
.pw-proc-item .pw-proc-args { flex-wrap: wrap; }
.pw-proc-previa { min-height: 2rem; display: flex; align-items: center; overflow-x: auto; }

.pw-regra-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pw-regra-expr {
    font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .73rem;
    color: #334155; word-break: break-word;
}
.pw-regra-msg { font-size: .75rem; color: var(--pw-muted); }
.pw-regra-alerta { font-size: .72rem; color: #b02a37; }
.pw-regra-acoes { display: flex; gap: 1px; flex: 0 0 auto; }
.pw-regra-btn {
    appearance: none; border: none; background: transparent;
    color: var(--pw-muted); padding: 2px 5px; border-radius: 5px;
    cursor: pointer; font-size: .8rem; line-height: 1;
}
.pw-regra-btn:hover:not(:disabled) { background: var(--pw-line-soft); color: var(--pw-accent); }
.pw-regra-btn:disabled { opacity: .3; cursor: default; }
.pw-regra-excluir:hover:not(:disabled) { color: #dc3545; }

.pw-regras-perm { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; }
.pw-regras-perm .form-label { margin: 0; }

.pw-regras-rodape {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-top: 1px solid var(--pw-line);
    background: var(--pw-line-soft);
}
.pw-regras-rodape .pw-regras-estado { flex: 1 1 auto; }
.pw-regras-rodape.is-sujo .pw-regras-estado { color: #92600a; font-weight: 600; }

/* seção Regras do modal da visão Grade (mesma superfície do inspetor) */
.pw-obj-regras {
    border: 1px solid var(--pw-line); border-radius: 10px; background: #fff;
}
.pw-obj-regras .pw-regras-corpo { padding: 12px; }

/* ── Editor rico da "Expressão de Regra" ─────────────────────────────── */
.pw-regexp { display: flex; flex-direction: column; gap: 6px; }
.pw-regexp-campo { position: relative; }
.pw-regexp-texto {
    font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .8rem;
    resize: vertical;
}
.pw-regexp-ac {
    position: absolute; z-index: 1600; left: 0; right: 0; top: 100%;
    max-height: 240px; overflow: auto; margin-top: 2px;
    background: #fff; border: 1px solid var(--pw-line); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(2, 8, 20, .14);
    display: flex; flex-direction: column;
}
.pw-regexp-acitem {
    appearance: none; border: none; background: transparent; text-align: left;
    display: flex; align-items: baseline; gap: 7px; width: 100%;
    padding: 5px 9px; cursor: pointer; font-size: .78rem;
}
.pw-regexp-acitem:hover, .pw-regexp-acitem.is-ativo { background: var(--pw-line-soft); }
.pw-regexp-acitem .bi { color: var(--pw-accent); font-size: .75rem; flex: 0 0 auto; }
.pw-regexp-acnome { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 600; flex: 0 0 auto; }
.pw-regexp-acdesc {
    color: var(--pw-muted); font-size: .72rem; flex: 1 1 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pw-regexp-status { margin-top: 0; font-size: .74rem; }
.pw-regexp-status code { font-size: .72rem; }
.pw-regexp-marca {
    margin: 0; padding: 4px 8px; border-radius: 6px;
    background: #fff5f5; border: 1px solid #f5c2c7; color: #b02a37;
    font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72rem;
    white-space: pre; overflow-x: auto;
}
.pw-regexp-barra { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pw-regexp-tit {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--pw-muted); flex: 0 0 auto;
}
.pw-regexp-chips { display: flex; flex-wrap: wrap; gap: 4px; max-height: 78px; overflow: auto; }
.pw-regexp-chip {
    appearance: none; border: 1px solid var(--pw-line); background: var(--pw-line-soft);
    color: #334155; border-radius: 999px; padding: 1px 9px; cursor: pointer;
    font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .7rem;
}
.pw-regexp-chip:hover { border-color: var(--pw-accent); color: var(--pw-accent); background: #fff; }
.pw-regexp-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pw-regexp-teste, .pw-regexp-ajuda {
    border: 1px solid var(--pw-line); border-radius: 8px;
    background: var(--pw-line-soft); padding: 8px 10px;
    display: flex; flex-direction: column; gap: 6px;
}
.pw-regexp-ajuda { max-height: 260px; overflow: auto; }
.pw-regexp-thead, .pw-regexp-ajuda-sec {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--pw-muted);
}
.pw-regexp-tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.pw-regexp-tval { display: flex; flex-direction: column; gap: 2px; font-size: .72rem; margin: 0; }
/* Simulação de parâmetro booleano: caixa do valor + companheira "(sem valor)". */
.pw-regexp-tbool { display: flex; align-items: center; gap: 6px; min-height: 31px; }
.pw-regexp-tbool .pw-regexp-tnulo { margin-left: 6px; }
.pw-regexp-tnulo-rot { color: var(--pw-muted, #6c757d); }
.pw-regexp-tres { display: flex; align-items: center; font-size: .78rem; }
.pw-regexp-badge {
    font-size: .68rem; font-weight: 700; letter-spacing: .04em;
    padding: 2px 8px; border-radius: 999px;
}
.pw-regexp-badge.is-sim { color: #146c43; background: #e7f6ec; }
.pw-regexp-badge.is-nao { color: #b02a37; background: #fdeaea; }
.pw-regexp-exemplo {
    appearance: none; border: none; background: transparent; text-align: left;
    display: flex; flex-direction: column; gap: 1px; padding: 4px 6px;
    border-radius: 6px; cursor: pointer; width: 100%;
}
.pw-regexp-exemplo:hover { background: #fff; }
.pw-regexp-exemplo code { font-size: .73rem; color: #7c3aed; }
.pw-regexp-exemplo span { font-size: .72rem; color: var(--pw-muted); }
.pw-regexp-ops { display: flex; flex-wrap: wrap; gap: 4px; }
.pw-regexp-ops code { font-size: .72rem; background: #fff; border: 1px solid var(--pw-line); border-radius: 5px; padding: 0 5px; }
.pw-regexp-dica {
    font-size: .78rem; color: var(--pw-muted);
    background: var(--pw-line-soft); border: 1px solid var(--pw-line);
    border-radius: 8px; padding: 7px 10px; margin-bottom: 8px;
}
.pw-regra-dlg { display: flex; flex-direction: column; }
.pw-regra-dlg-ativa { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; cursor: pointer; }

/* mensagem das regras de validação no PREVIEW */
.pw-pv-regra-msg {
    display: flex; align-items: baseline; gap: 5px;
    margin-top: 3px; font-size: .75rem; line-height: 1.35;
}
.pw-pv-regra-msg.is-erro { color: #b02a37; }
.pw-pv-regra-msg.is-aviso { color: #92600a; }
.pw-pv-invalido .pw-pv-editor .dx-texteditor { border-color: #dc3545; }
.pw-pv-alerta .pw-pv-editor .dx-texteditor { border-color: #ffc107; }

/* ── Console de depuração do preview (padrão Retool debug tools) ────── */
.pw-dbg {
    position: sticky; bottom: 0; z-index: 20;
    margin-top: 12px;
    border: 1px solid var(--pw-line); border-radius: 10px 10px 0 0;
    background: #101623; color: #dbe3ef;
    display: flex; flex-direction: column;
    box-shadow: 0 -4px 16px rgba(2, 8, 20, .18);
}
.pw-dbg-toggle {
    appearance: none; border: none; background: transparent; color: inherit;
    display: flex; align-items: center; gap: 8px;
    font-size: .8rem; font-weight: 600;
    padding: 7px 12px; cursor: pointer; width: 100%;
}
.pw-dbg-toggle .pw-dbg-caret { margin-left: auto; }
.pw-dbg-badge {
    display: inline-block; min-width: 18px; text-align: center;
    background: #dc3545; color: #fff; font-size: .68rem; font-weight: 700;
    border-radius: 999px; padding: 0 5px;
}
.pw-dbg-body { display: flex; flex-direction: column; border-top: 1px solid #223049; max-height: 240px; }
.pw-dbg-bar { display: flex; gap: 8px; padding: 7px 10px; align-items: center; }
.pw-dbg-filtro { max-width: 240px; background: #182236; color: #dbe3ef; border-color: #2b3b58; }
.pw-dbg-lista {
    overflow: auto; padding: 4px 10px 10px;
    font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .74rem;
}
.pw-dbg-item { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; border-bottom: 1px dotted #223049; }
.pw-dbg-hora { color: #64748b; flex: 0 0 auto; }
.pw-dbg-origem { color: #7dd3fc; flex: 0 0 auto; }
.pw-dbg-msg { white-space: pre-wrap; word-break: break-word; }
.pw-dbg-item .bi { flex: 0 0 auto; font-size: .72rem; }
.pw-dbg-evento .bi { color: #eab308; }
.pw-dbg-error { color: #fda4af; }
.pw-dbg-error .bi { color: #f43f5e; }
.pw-dbg-warn { color: #fde68a; }
.pw-dbg-warn .bi { color: #eab308; }
.pw-dbg-http .bi { color: #38bdf8; }
.pw-dbg-valor .bi { color: #4ade80; }
.pw-dbg-info .bi { color: #93c5fd; }

/* ════════════════════════════════════════════════════════════════════
   Designer - Canvas nível studio (Fase 4)
   ════════════════════════════════════════════════════════════════════ */

/* toolbar do canvas (no cabeçalho do painel) */
.pw-dsn-tools { display: flex; gap: 8px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.pw-dsn-tools .btn { padding: 2px 8px; font-size: .72rem; }
.pw-zoom-label { min-width: 52px; }
.pw-align-menu { font-size: .8rem; }

/* estados do designer: cadeado e olho */
.pw-dsn-locked { outline: 1px dashed #b45309; outline-offset: 1px; }
.pw-dsn-locked .pw-dsn-shield { cursor: not-allowed; }
.pw-dsn-ghost { display: none !important; }
.pw-node-state { font-size: .72rem; color: #b45309; margin-left: 2px; flex: 0 0 auto; }

/* linha indicadora do ponto de inserção (drop) */
.pw-dsn-dropline {
    width: 0; min-height: 34px; align-self: stretch;
    border-left: 3px solid var(--pw-accent, #0d6efd);
    border-radius: 2px; margin: 0 -1.5px;
    pointer-events: none;
    box-shadow: 0 0 6px rgba(13, 110, 253, .55);
}

/* marquee (retângulo de seleção) */
.pw-dsn-marquee {
    position: absolute; z-index: 40;
    border: 1px solid var(--pw-accent, #0d6efd);
    background: rgba(13, 110, 253, .08);
    pointer-events: none;
}
.pw-dsn-canvas { position: relative; }

/* alças de redimensionamento */
.pw-dsn-handles { position: absolute; z-index: 30; pointer-events: none; }
.pw-dsn-handle {
    position: absolute; width: 9px; height: 9px;
    background: #fff; border: 1.5px solid var(--pw-accent, #0d6efd);
    border-radius: 2px; pointer-events: auto;
}
.pw-h-nw { left: -5px; top: -5px; cursor: nwse-resize; }
.pw-h-n  { left: calc(50% - 4px); top: -5px; cursor: ns-resize; }
.pw-h-ne { right: -5px; top: -5px; cursor: nesw-resize; }
.pw-h-e  { right: -5px; top: calc(50% - 4px); cursor: ew-resize; }
.pw-h-se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.pw-h-s  { left: calc(50% - 4px); bottom: -5px; cursor: ns-resize; }
.pw-h-sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.pw-h-w  { left: -5px; top: calc(50% - 4px); cursor: ew-resize; }
.pw-dsn-handle-tag {
    position: absolute; top: -28px; left: 0;
    background: #0f172a; color: #fff;
    font-size: .7rem; font-weight: 600; white-space: nowrap;
    padding: 2px 8px; border-radius: 5px;
}
body.pw-resizing { user-select: none; }

/* guias das 12 colunas do container (durante resize/drag) */
.pw-dsn-colguides {
    position: absolute; z-index: 25; pointer-events: none;
    background-image: repeating-linear-gradient(
        to right,
        rgba(13, 110, 253, .07) 0, rgba(13, 110, 253, .07) calc(100%/12 - 1px),
        rgba(13, 110, 253, .35) calc(100%/12 - 1px), rgba(13, 110, 253, .35) calc(100%/12)
    );
    border: 1px solid rgba(13, 110, 253, .3);
}

/* grade de 12 colunas fixa (toggle) */
.pw-grid-on .pw-dsn-root {
    background-image: repeating-linear-gradient(
        to right,
        transparent 0, transparent calc(100%/12 - 1px),
        rgba(13, 110, 253, .18) calc(100%/12 - 1px), rgba(13, 110, 253, .18) calc(100%/12)
    );
}

/* réguas (fixadas via JS na posição de rolagem) */
.pw-rulers-on .pw-dsn-paper { padding-top: 26px; padding-left: 26px; }
.pw-ruler { position: absolute; z-index: 45; pointer-events: none; }
.pw-ruler-h { top: 0; left: 0; height: 22px; }
.pw-ruler-v { top: 0; left: 0; width: 22px; }
.pw-ruler-corner {
    position: absolute; top: 0; left: 0; width: 22px; height: 22px; z-index: 46;
    background: #e8ecf3; border-right: 1px solid #c8cfda; border-bottom: 1px solid #c8cfda;
    pointer-events: none;
}

/* pan com barra de espaço */
.pw-pan-armed { cursor: grab; }
.pw-panning { cursor: grabbing !important; }
.pw-pan-armed .pw-dsn-shield { cursor: grab; }

/* edição in-place de rótulo */
.pw-dsn-inline-edit {
    font-size: .8rem; font-weight: 600;
    border: 1px solid var(--pw-accent); border-radius: 4px;
    padding: 1px 6px; max-width: 100%;
}

/* overlay de ordem de tabulação */
.pw-taborder-on .pw-dsn-leaf { position: relative; cursor: crosshair; }
.pw-taborder-badge {
    position: absolute; top: -8px; left: -8px; z-index: 35;
    min-width: 24px; height: 24px; border-radius: 999px;
    background: #fff; color: #b45309;
    border: 2px solid #f59e0b;
    font-size: .74rem; font-weight: 800; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0 4px;
}
.pw-taborder-badge.is-set { background: #f59e0b; color: #fff; }

/* menu de contexto */
.pw-ctx-menu {
    position: fixed; z-index: 3000;
    min-width: 260px; padding: 5px;
    background: #fff; border: 1px solid var(--pw-line);
    border-radius: 10px; box-shadow: 0 10px 34px rgba(2, 8, 20, .18);
}
.pw-ctx-item {
    appearance: none; border: none; background: transparent;
    display: flex; align-items: center; gap: 9px;
    width: 100%; text-align: left;
    font-size: .8rem; padding: 6px 10px; border-radius: 7px;
    cursor: pointer; color: var(--pw-ink, #0f172a);
}
.pw-ctx-item:hover { background: var(--pw-line-soft); }
.pw-ctx-item .bi { width: 16px; color: var(--pw-muted); }
.pw-ctx-item.text-danger .bi { color: inherit; }
.pw-ctx-item.pw-menu-evt .bi { color: #eab308; }
.pw-ctx-item kbd {
    margin-left: auto; font-size: .64rem;
    background: var(--pw-line-soft); border: 1px solid var(--pw-line);
    border-radius: 4px; padding: 1px 5px; color: var(--pw-muted);
}
.pw-ctx-sep { border-top: 1px solid var(--pw-line); margin: 4px 8px; }

/* ── Painel Versões (Git) e histórico de sessão ─────────────────────── */
.pw-hist-menu { min-width: 300px; max-height: 380px; overflow: auto; font-size: .8rem; }
.pw-versoes { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.pw-versoes-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pw-versoes-lista { overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.pw-versoes-item { border: 1px solid var(--pw-line); border-radius: 9px; padding: 8px 12px; background: #fff; }
.pw-versoes-head { display: flex; align-items: center; gap: 12px; }
.pw-versoes-hash {
    background: var(--pw-line-soft); border: 1px solid var(--pw-line);
    border-radius: 6px; padding: 2px 8px; font-size: .74rem;
}
.pw-versoes-info { min-width: 0; }
.pw-versoes-subject { font-size: .84rem; font-weight: 600; }
.pw-versoes-acoes { margin-left: auto; display: flex; gap: 6px; flex: 0 0 auto; }
.pw-versoes-diff {
    margin: 8px 0 0; padding: 10px;
    background: #0f172a; color: #cbd5e1; border-radius: 8px;
    font-size: .72rem; max-height: 320px; overflow: auto; white-space: pre;
}
.pw-versoes-diff .pw-diff-add { color: #4ade80; }
.pw-versoes-diff .pw-diff-del { color: #f87171; }
.pw-versoes-diff .pw-diff-hunk { color: #38bdf8; }
.pw-versoes-diff .pw-diff-meta { color: #94a3b8; }
.pw-versoes-vazio, .pw-versoes-carregando { color: var(--pw-muted); text-align: center; padding: 30px 10px; }

/* ── Paleta (Fase 6): busca, categorias, favoritos, modelos ─────────── */
.pw-toolbox-busca { margin: 8px 8px 4px; width: calc(100% - 16px); }
.pw-toolbox-corpo { overflow: auto; }
.pw-toolbox-cap--btn {
    appearance: none; border: none; background: transparent;
    width: 100%; text-align: left; cursor: pointer;
    display: flex; align-items: center; gap: 5px;
}
.pw-toolbox-cap--btn:hover { color: var(--pw-accent); }
.pw-tool { position: relative; }
.pw-tool-fav {
    margin-left: auto; flex: 0 0 auto;
    color: #c8cfda; font-size: .72rem; padding: 0 2px;
    display: none;
}
.pw-tool:hover .pw-tool-fav { display: inline-block; }
.pw-tool-fav.is-fav { display: inline-block; color: #eab308; }
.pw-tool-fav:hover { color: #eab308; }
.pw-tool-modelo .pw-tool-fav:hover { color: #dc3545; }
.pw-tool-salvarmodelo { color: var(--pw-accent); border-style: dashed; }
.pw-toolbox-vazio { color: var(--pw-muted); font-size: .76rem; padding: 10px; text-align: center; }

/* ── Componentes estáticos e containers de layout (Fase 6) ──────────── */
.pw-est-label { font-size: .9rem; }
.pw-est-heading { margin: 0; border-bottom: 2px solid var(--pw-line); padding-bottom: 4px; }
.pw-est-hr { margin: 8px 0; }
.pw-est-caixa {
    border: 1.5px dashed var(--pw-line); border-radius: 8px;
    color: var(--pw-muted); font-size: .8rem;
    padding: 14px; text-align: center;
}
.pw-est-caixa .bi { font-size: 1.15rem; margin-right: 4px; }
.pw-est-avatar {
    display: inline-flex; width: 56px; height: 56px; border-radius: 999px;
    background: var(--pw-line-soft); border: 1px solid var(--pw-line);
    align-items: center; justify-content: center;
    font-size: 1.6rem; color: var(--pw-muted);
}
.pw-est-qr { width: 96px; }
.pw-est-qr .bi { font-size: 3rem; margin: 0; }
.pw-est-assinatura { border-bottom: 2px solid #64748b; border-radius: 8px 8px 0 0; }
.pw-est-iframe { width: 100%; min-height: 180px; border: 1px solid var(--pw-line); border-radius: 8px; }
.pw-est-kanban { display: flex; gap: 8px; }
.pw-est-kanban-col {
    flex: 1; background: var(--pw-line-soft); border: 1px solid var(--pw-line);
    border-radius: 8px; padding: 8px; font-size: .74rem;
}
.pw-est-kanban-card { background: #fff; border: 1px solid var(--pw-line); border-radius: 6px; height: 26px; margin-top: 6px; }

.pw-lay-toolbar > .row { align-items: center; }
.pw-lay-toolbar { background: var(--pw-line-soft); border-radius: 8px; padding: 6px 10px; }
.pw-lay-painel-flex > .row { display: flex; flex-wrap: wrap; gap: 10px; }
.pw-lay-painel-flex > .row > [class*="col-"] { flex: 1 1 0; width: auto; max-width: none; }
.pw-dsn-lay { position: relative; border: 1px dashed transparent; border-radius: 8px; }
.pw-dsn-lay:hover { border-color: var(--pw-line); }
.pw-dsn-lay-tag {
    position: absolute; top: -9px; left: 10px; z-index: 4;
    font-size: .62rem; font-weight: 700; color: var(--pw-muted);
    background: #fff; border: 1px solid var(--pw-line);
    padding: 0 7px; border-radius: 999px;
}
.pw-pv-wizard .pw-pv-tabhead .pw-pv-tab-btn { border-radius: 999px; counter-increment: pwstep; }
.pw-pv-wizard .pw-pv-tabhead { counter-reset: pwstep; }
.pw-pv-wizard .pw-pv-tab-btn::before {
    content: counter(pwstep);
    display: inline-flex; width: 18px; height: 18px; margin-right: 5px;
    border-radius: 999px; background: var(--pw-accent); color: #fff;
    font-size: .68rem; font-weight: 700;
    align-items: center; justify-content: center;
}

/* ── Inspetor avançado (Fase 7) ──────────────────────────────────────── */
.pw-insp-buscawrap { padding: 8px 10px 0; }
/* prefixado para vencer o realce de foco (:focus-within) do bloco compacto */
.pw-inspector-form .dx-field-item.pw-insp-nondefault .dx-field-item-label-text {
    font-weight: 700; color: var(--pw-ink, #0f172a);
}
.pw-insp-acoes { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: middle; }
.pw-insp-btn {
    appearance: none; border: none; background: transparent;
    color: #c8cfda; font-size: .74rem; line-height: 1;
    padding: 1px 3px; border-radius: 4px; cursor: pointer;
    display: none;
}
.dx-field-item:hover .pw-insp-btn { display: inline-block; }
.pw-insp-btn:hover { color: var(--pw-accent); background: var(--pw-line-soft); }
.pw-insp-pin.is-on { display: inline-block; color: var(--pw-accent); }
.pw-insp-help { color: #b6bfcc; font-size: .74rem; cursor: help; }
.pw-insp-help:hover { color: var(--pw-accent); }
/* B13: ponto de ajuda cujo grupo tem doc viva associada - além do tooltip no
   hover, o ícone vira link (abre a doc numa aba nova). Mesmo tamanho/posição
   do ícone comum, sem poluir a densidade do inspetor - só troca o cursor e
   remove o sublinhado padrão de link. */
.pw-insp-help--doc { cursor: pointer; text-decoration: none; }
.pw-insp-help--doc:hover { text-decoration: none; }
.pw-insp-group--pins > .dx-field-item-label .dx-field-item-label-text { color: var(--pw-accent); }

/* galeria de ícones */
.pw-galicones { display: flex; flex-direction: column; height: 100%; }
.pw-gal-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 6px; overflow: auto; flex: 1;
}
.pw-gal-item {
    appearance: none; background: #fff; border: 1px solid var(--pw-line);
    border-radius: 8px; padding: 8px 4px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-size: .62rem; color: var(--pw-muted);
}
.pw-gal-item .bi { font-size: 1.25rem; color: var(--pw-ink, #0f172a); }
.pw-gal-item:hover { border-color: var(--pw-accent); color: var(--pw-accent); }
.pw-gal-item.is-atual { border-color: var(--pw-accent); box-shadow: 0 0 0 2px rgba(13,110,253,.2); }
.pw-gal-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-gal-vazio { grid-column: 1 / -1; text-align: center; color: var(--pw-muted); padding: 20px; }

/* editor de expressão */
.pw-expred-texto { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .82rem; }
.pw-expred-campos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; max-height: 120px; overflow: auto; }
.pw-expred-chip {
    appearance: none; border: 1px solid var(--pw-line); background: var(--pw-line-soft);
    border-radius: 999px; padding: 2px 10px; cursor: pointer;
    font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72rem;
}
.pw-expred-chip:hover { border-color: var(--pw-accent); color: var(--pw-accent); }

/* ── Painel Dados (Fase 8): bindings tabela/coluna ───────────────────── */
.pw-toolpane-tabs { display: flex; gap: 2px; padding: 6px 8px 0; }
.pw-toolpane-tab {
    appearance: none; border: 1px solid transparent; border-bottom: none;
    background: transparent; color: var(--pw-muted);
    font-size: .78rem; font-weight: 700;
    padding: 6px 12px; border-radius: 8px 8px 0 0; cursor: pointer;
}
.pw-toolpane-tab.active { background: #fff; color: var(--pw-ink, #0f172a); border-color: var(--pw-line); }
.pw-dados { overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 10px; }
.pw-dados-vazio { color: var(--pw-muted); text-align: center; padding: 24px 8px; font-size: .8rem; }
.pw-dados-vazio .bi { font-size: 1.4rem; display: block; margin-bottom: 6px; }
.pw-dados-tabela { border: 1px solid var(--pw-line); border-radius: 9px; overflow: hidden; }
.pw-dados-cap {
    display: flex; align-items: center; gap: 6px;
    background: var(--pw-line-soft); border-bottom: 1px solid var(--pw-line);
    padding: 6px 8px; font-size: .76rem;
}
.pw-dados-cap .btn { padding: 1px 7px; font-size: .68rem; }
.pw-dados-cols { padding: 4px; }
.pw-dados-carregando { color: var(--pw-muted); font-size: .74rem; padding: 6px; }
.pw-dados-col {
    display: flex; align-items: center; gap: 6px;
    font-size: .74rem; padding: 4px 6px; border-radius: 6px;
    cursor: grab; user-select: none;
}
.pw-dados-col:hover { background: var(--pw-line-soft); }
.pw-dados-col .bi-grip-vertical { color: #c8cfda; }
.pw-dados-col.is-mapeada { cursor: pointer; }
.pw-dados-col.is-mapeada .bi-check-circle-fill { color: #198754; }
.pw-dados-colnome { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 600; }
.pw-dados-coltipo { margin-left: auto; color: var(--pw-muted); font-size: .68rem; }

/* chips de binding no canvas */
.pw-dsn-leaf { position: relative; }
.pw-bind-chip {
    position: absolute; right: 4px; top: -8px; z-index: 6;
    display: inline-flex; align-items: center; gap: 3px;
    font-size: .6rem; font-weight: 700;
    color: #146c43; background: #e7f6ec;
    border: 1px solid #b6dfc5;
    padding: 0 6px; border-radius: 999px;
    max-width: 90%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    pointer-events: none;
}
.pw-bind-chip.is-sem { color: #997404; background: #fdf3d8; border-color: #f2dda2; }
.pw-bind-chip.is-quebrado { color: #b02a37; background: #fdeaea; border-color: #f5c2c7; }

/* ── Fase 9: responsivo, tema escuro, produtividade ─────────────────── */

/* tema escuro do canvas/preview (simulação visual) */
.pw-theme-dark { background: #0f172a !important; }
.pw-theme-dark .pw-dsn-paper,
.pw-theme-dark .pw-pv-form { background: #1e293b; color: #e2e8f0; }
.pw-theme-dark .pw-pv-label { color: #cbd5e1; }
.pw-theme-dark .pw-pv-group,
.pw-theme-dark .pw-est-caixa { background: #24324a; border-color: #334155; color: #cbd5e1; }
.pw-theme-dark .pw-pv-group-head { background: #1c2940; color: #e2e8f0; border-color: #334155; }
.pw-theme-dark .pw-est-heading { color: #e2e8f0; border-color: #334155; }
.pw-theme-dark .pw-dsn-lay-tag { background: #1e293b; color: #94a3b8; border-color: #334155; }

/* breakpoint (B7): moldura de dispositivo no canvas/preview das faixas md/sm */
.pw-bp-md, .pw-bp-sm {
    border: 2px solid #94a3b8; border-radius: 14px;
    box-shadow: 0 8px 26px rgba(2, 8, 20, .14);
}

/* Inspetor editando uma faixa de breakpoint (B7): faixa de aviso no topo,
   borda tracejada azul no campo SOBRESCRITO (herdado fica sem borda) e campo
   fora da whitelist visivelmente travado. */
.pw-insp-bp-faixa {
    display: flex; align-items: center; gap: .4rem;
    margin: .5rem .5rem .25rem; padding: .35rem .55rem;
    font-size: .78rem; color: #1d4ed8;
    background: #eff6ff; border: 1px dashed #3b82f6; border-radius: .4rem;
}
.pw-insp-bp-faixa .btn { padding: .1rem .4rem; font-size: .72rem; }
.dx-field-item.pw-insp-bp-override {
    border: 1px dashed #3b82f6; border-radius: .35rem;
    background: rgba(59, 130, 246, .05);
}
.dx-field-item.pw-insp-bp-travado { opacity: .55; }
.pw-insp-bp-limpar { color: #3b82f6; }
.pw-theme-dark .pw-insp-bp-faixa { color: #bfdbfe; background: #172554; border-color: #3b82f6; }

/* overlay de espaçamento (margens laranja / padding verde) */
.pw-espacos { position: absolute; z-index: 28; pointer-events: none; }
.pw-esp-banda {
    position: absolute; pointer-events: auto;
    display: flex; align-items: center; justify-content: center;
    font-size: .62rem; font-weight: 700;
}
.pw-esp-margem { background: rgba(249, 115, 22, .25); color: #9a3412; }
.pw-esp-padding { background: rgba(34, 197, 94, .25); color: #14532d; }
.pw-esp-top { left: 0; right: 0; bottom: 100%; cursor: ns-resize; }
.pw-esp-bottom { left: 0; right: 0; top: 100%; cursor: ns-resize; }
.pw-esp-left { top: 0; bottom: 0; right: 100%; cursor: ew-resize; }
.pw-esp-right { top: 0; bottom: 0; left: 100%; cursor: ew-resize; }
.pw-esp-in-top { left: 0; right: 0; top: 0; cursor: ns-resize; }
.pw-esp-in-bottom { left: 0; right: 0; bottom: 0; cursor: ns-resize; }
.pw-esp-in-left { top: 0; bottom: 0; left: 0; cursor: ew-resize; }
.pw-esp-in-right { top: 0; bottom: 0; right: 0; cursor: ew-resize; }

/* breadcrumb do canvas */
.pw-bc {
    display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
    border-top: 1px solid var(--pw-line);
    padding: 4px 10px; font-size: .74rem; min-height: 30px;
    background: var(--pw-line-soft);
}
.pw-bc-item {
    appearance: none; border: none; background: transparent;
    color: var(--pw-muted); font-size: .74rem; font-weight: 600;
    padding: 2px 6px; border-radius: 5px; cursor: pointer;
}
.pw-bc-item:hover { color: var(--pw-accent); background: #fff; }
.pw-bc-item.is-atual { color: var(--pw-ink, #0f172a); }
.pw-bc-sep { color: #c8cfda; }

/* busca global */
.pw-busca { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.pw-busca-lista { overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.pw-busca-item {
    appearance: none; text-align: left; width: 100%;
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--pw-line); border-radius: 8px;
    padding: 7px 10px; cursor: pointer; font-size: .8rem;
}
.pw-busca-item:hover { border-color: var(--pw-accent); }
.pw-busca-item .bi { color: var(--pw-muted); }
.pw-busca-vazio { color: var(--pw-muted); text-align: center; padding: 18px; font-size: .8rem; }
.pw-hit { outline: 2px solid #eab308 !important; outline-offset: 1px; border-radius: 4px; }

/* painel de atalhos */
.pw-atalhos { max-height: 100%; overflow: auto; }
.pw-atalhos-kbd { white-space: nowrap; width: 220px; }
.pw-atalhos kbd {
    background: var(--pw-line-soft); border: 1px solid var(--pw-line);
    border-radius: 4px; padding: 1px 6px; font-size: .72rem; color: var(--pw-ink, #0f172a);
}

/* ── Painel de problemas (Fase 10) ───────────────────────────────────── */
.pw-prob { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.pw-prob-bar { display: flex; align-items: center; gap: 8px; }
.pw-prob-lista { overflow: auto; display: flex; flex-direction: column; gap: 5px; }
.pw-prob-item {
    appearance: none; text-align: left; width: 100%;
    display: flex; align-items: flex-start; gap: 9px;
    background: #fff; border: 1px solid var(--pw-line); border-radius: 8px;
    padding: 8px 12px; cursor: pointer; font-size: .8rem;
}
.pw-prob-item:hover { border-color: var(--pw-accent); }
.pw-prob-item.is-erro > .bi { color: #dc3545; }
.pw-prob-item.is-aviso > .bi { color: #f59e0b; }
.pw-prob-texto { display: flex; flex-direction: column; min-width: 0; }
.pw-prob-detalhe { color: var(--pw-muted); font-size: .74rem; }
.pw-prob-obj {
    margin-left: auto; flex: 0 0 auto;
    background: var(--pw-line-soft); border: 1px solid var(--pw-line);
    border-radius: 6px; padding: 1px 8px; font-size: .7rem;
}
.pw-prob-a11y { color: #0d6efd; flex: 0 0 auto; }
.pw-prob-vazio { color: var(--pw-muted); text-align: center; padding: 26px; font-size: .85rem; }

/* ── Fase 11: anotações, comparação visual e colaboração ────────────── */
.pw-anot { display: flex; flex-direction: column; gap: 10px; }
.pw-anot-lista { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow: auto; }
.pw-anot-item { border: 1px solid #f2dda2; background: #fdf8ea; border-radius: 8px; padding: 8px 10px; }
.pw-anot-item.is-resolvida { border-color: var(--pw-line); background: var(--pw-line-soft); opacity: .75; }
.pw-anot-meta { display: flex; align-items: center; gap: 8px; font-size: .76rem; }
.pw-anot-meta .btn { padding: 0 6px; font-size: .68rem; }
.pw-anot-texto { font-size: .82rem; margin-top: 4px; white-space: pre-wrap; }
.pw-anot-pin {
    position: absolute; left: -8px; top: -8px; z-index: 7;
    appearance: none; border: 2px solid #fff;
    display: inline-flex; align-items: center; gap: 3px;
    background: #f59e0b; color: #fff;
    font-size: .62rem; font-weight: 800;
    border-radius: 999px; padding: 1px 7px; cursor: pointer;
    box-shadow: 0 2px 6px rgba(2, 8, 20, .25);
}
.pw-anot-pin:hover { background: #d97706; }

/* comparação visual de versões */
.pw-versoes-comp { margin-top: 8px; }
.pw-vcomp { display: flex; flex-direction: column; gap: 6px; }
.pw-vcomp-item { border: 1px solid var(--pw-line); border-radius: 8px; padding: 6px 10px; font-size: .78rem; }
.pw-vcomp-head { display: flex; align-items: center; gap: 8px; }
.pw-vcomp-item.is-adicionado .bi { color: #198754; }
.pw-vcomp-item.is-removido .bi { color: #dc3545; }
.pw-vcomp-item.is-alterado .bi { color: #f59e0b; }
.pw-vcomp-badge { background: var(--pw-line-soft); color: var(--pw-muted); font-weight: 600; }
.pw-vcomp-props { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.pw-vcomp-prop {
    display: grid; grid-template-columns: 180px 1fr 20px 1fr;
    gap: 6px; align-items: start; font-size: .72rem;
}
.pw-vcomp-campo { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--pw-muted); }
.pw-vcomp-de { color: #b02a37; background: #fdeaea; border-radius: 4px; padding: 1px 6px; word-break: break-word; }
.pw-vcomp-para { color: #146c43; background: #e7f6ec; border-radius: 4px; padding: 1px 6px; word-break: break-word; }
.pw-vcomp-de.is-code, .pw-vcomp-para.is-code {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    white-space: pre-wrap; max-height: 120px; overflow: auto;
}
.pw-vcomp-seta { text-align: center; color: var(--pw-muted); }

/* documentação */
.pw-doc-code {
    background: #0f172a; color: #cbd5e1; border-radius: 8px;
    padding: 10px 14px; font-size: .78rem;
}
.pw-help-link { color: #c8cfda; font-size: .8rem; text-decoration: none; }
.pw-help-link:hover { color: var(--pw-accent); }

/* ── Fase 12: assistência de IA no editor de eventos ────────────────── */
.pw-evted-ia {
    display: flex; align-items: center; gap: 8px;
    background: #f6f3ff; border: 1px solid #e6defc;
    border-radius: 8px; padding: 6px 10px;
}
.pw-evted-ia .bi-stars { color: #7c3aed; }
.pw-evted-ia-prompt { flex: 1; }

/* ---- Assistente de IA do designer (plusweb-designer-ia.js) -------------- */
.pw-ia-wrap { display: flex; gap: 16px; align-items: flex-start; }
.pw-ia-main { flex: 1 1 auto; min-width: 0; }
.pw-ia-panel {
    position: sticky; top: 12px; width: 380px; flex: 0 0 auto;
    max-height: calc(100vh - 90px + var(--pw-ganho-vh)); display: flex; overflow: hidden;
}
.pw-ia-resizer {
    flex: 0 0 5px; cursor: col-resize; background: transparent;
    border-left: 1px solid var(--pw-line-soft, #e5e7eb);
}
.pw-ia-resizer:hover { background: var(--pw-accent-soft, #eef2ff); }
.pw-ia-inner { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pw-ia-head {
    display: flex; align-items: center; gap: 6px; padding: 8px 10px;
    border-bottom: 1px solid var(--pw-line-soft, #e5e7eb);
}
.pw-ia-title { font-weight: 600; margin-right: auto; white-space: nowrap; }
.pw-ia-title .bi-stars { color: #7c3aed; }
.pw-ia-modos .btn.active { background: var(--pw-accent, #4f46e5); color: #fff; border-color: var(--pw-accent, #4f46e5); }
.pw-ia-provedor { padding: 2px 10px; border-bottom: 1px solid var(--pw-line-soft, #e5e7eb); }
.pw-ia-histmenu {
    max-height: 200px; overflow-y: auto; border-bottom: 1px solid var(--pw-line-soft, #e5e7eb);
    background: var(--pw-surface, #fafafa);
}
.pw-ia-histitem {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer;
}
.pw-ia-histitem:hover { background: var(--pw-accent-soft, #eef2ff); }
.pw-ia-histtitulo { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-ia-histx { padding: 0 4px; line-height: 1; text-decoration: none; }
.pw-ia-msgs { flex: 1 1 auto; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.pw-ia-msg { border-radius: 10px; padding: 8px 10px; max-width: 95%; font-size: .875rem; overflow-wrap: anywhere; }
.pw-ia-msg-user { align-self: flex-end; background: var(--pw-accent-soft, #eef2ff); }
.pw-ia-msg-ia { align-self: flex-start; background: var(--pw-surface, #f5f5f5); }
.pw-ia-msg-sys { align-self: stretch; background: #fff8e6; border: 1px dashed #f0d488; font-size: .8rem; }
.pw-ia-pensando { color: var(--pw-muted, #6b7280); font-style: italic; }
.pw-ia-code {
    background: #1e293b; color: #e2e8f0; border-radius: 6px; padding: 8px;
    font-family: var(--pw-font-mono, monospace); font-size: .78rem; overflow-x: auto; margin: 6px 0;
}
.pw-ia-foot { border-top: 1px solid var(--pw-line-soft, #e5e7eb); padding: 8px 10px; }
.pw-ia-pilulas { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.pw-ia-pilula {
    display: inline-flex; align-items: center; gap: 2px; font-size: .75rem;
    background: var(--pw-accent-soft, #eef2ff); border: 1px solid var(--pw-line, #d1d5db);
    border-radius: 999px; padding: 1px 8px;
}
.pw-ia-pilula-x { border: 0; background: none; font-size: .9rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.pw-ia-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.pw-ia-chip {
    font-size: .75rem; background: var(--pw-surface, #f5f5f5);
    border: 1px solid var(--pw-line, #d1d5db); border-radius: 999px; padding: 2px 10px; cursor: pointer;
}
.pw-ia-chip:hover { background: var(--pw-accent-soft, #eef2ff); }
.pw-ia-inputrow { display: flex; gap: 6px; align-items: flex-end; }
.pw-ia-input {
    flex: 1; resize: none; border: 1px solid var(--pw-line, #d1d5db); border-radius: 8px;
    padding: 6px 8px; font-size: .875rem; max-height: 160px;
}
.pw-ia-input:focus { outline: 2px solid var(--pw-accent, #4f46e5); border-color: transparent; }
.pw-ia-btns { display: flex; flex-direction: column; gap: 4px; }
.pw-ia-plano { align-self: stretch; border: 1px solid var(--pw-line, #d1d5db); border-radius: 10px; padding: 8px 10px; background: #fff; }
.pw-ia-plano-head { font-weight: 600; font-size: .85rem; margin-bottom: 6px; }
.pw-ia-plano-acoes { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.pw-ia-acao { display: flex; gap: 6px; align-items: baseline; font-size: .82rem; margin: 0; }
.pw-ia-acao code { font-size: .78rem; }
.pw-ia-plano-btns { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pw-ia-plano-status { margin-top: 6px; }
.pw-ia-plano-done { opacity: .75; }
/* Badge global enquanto a prévia da IA está aplicada localmente */
body.pw-ia-em-previa #designCanvas { outline: 2px dashed #7c3aed; outline-offset: -2px; }
@media (max-width: 1199.98px) {
    .pw-ia-wrap { flex-direction: column; }
    .pw-ia-panel { position: static; width: 100% !important; max-height: 60vh; }
}

/* ==================================================================
 * Editor de Grade (plusweb-designer-grade.js) - prefixo pw-grd-
 * ================================================================== */
.pw-grd-studio { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.pw-grd-tabs { flex: 0 0 auto; }
.pw-grd-body { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--pw-paper); }
.pw-grd-foot {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-top: 1px solid var(--pw-line); background: var(--pw-surface);
}
.pw-grd-sujo { font-size: .8rem; color: var(--pw-muted); display: inline-flex; align-items: center; gap: 6px; }
.pw-grd-sujo.is-sujo { color: #92600a; font-weight: 600; }
.pw-grd-sujo .bi { font-size: .55rem; color: #d97706; }

/* ---- Aba Colunas & Bandas ---- */
.pw-grd-body--colunas { display: flex; overflow: hidden; }
.pw-grd-arvore-painel { flex: 0 0 40%; max-width: 460px; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--pw-line); background: var(--pw-surface); }
.pw-grd-arvore-tools { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--pw-line-soft); }
.pw-grd-btn { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .78rem; }
.pw-grd-arvore { flex: 1 1 auto; overflow: auto; padding: 6px 4px; outline: none; }
.pw-grd-arvore:focus-visible { box-shadow: inset 0 0 0 2px var(--pw-accent-soft); }
.pw-grd-arvore-vazia, .pw-grd-sum-vazio, .pw-grd-arvore-vazia p { text-align: center; color: var(--pw-muted); }
.pw-grd-arvore-vazia { padding: 40px 20px; }
.pw-grd-arvore-vazia .bi { font-size: 1.6rem; opacity: .5; display: block; margin-bottom: 8px; }
.pw-grd-sum-vazio { padding: 14px; font-size: .85rem; }
.pw-grd-nodo { position: relative; }
.pw-grd-row {
    display: flex; align-items: center; gap: 7px;
    padding: 5px 8px; margin: 1px 4px; border-radius: var(--pw-radius-sm);
    cursor: pointer; border: 1px solid transparent; font-size: .85rem; user-select: none;
}
.pw-grd-row:hover { background: var(--pw-line-soft); }
.pw-grd-row.is-sel { background: var(--pw-accent-soft); border-color: var(--pw-accent-bright); }
.pw-grd-row-ico { color: var(--pw-accent); flex: 0 0 auto; }
.pw-grd-row.tipo-banda .pw-grd-row-ico { color: #7c3aed; }
.pw-grd-row.tipo-comando .pw-grd-row-ico { color: #b45309; }
.pw-grd-row-nome { font-family: var(--pw-font-mono); font-size: .78rem; }
.pw-grd-row-rot { color: var(--pw-muted); font-size: .76rem; max-width: 40%; }
.pw-grd-badge { background: var(--pw-line); color: var(--pw-muted); font-size: .62rem; font-weight: 600; }
.pw-grd-rename { font-family: var(--pw-font-mono); font-size: .78rem; height: 24px; padding: 1px 6px; max-width: 180px; }
.pw-grd-filhos { border-left: 1px dashed var(--pw-line); margin-left: 14px; }
.pw-grd-drop-antes { box-shadow: inset 0 2px 0 var(--pw-accent); }
.pw-grd-drop-depois { box-shadow: inset 0 -2px 0 var(--pw-accent); }
.pw-grd-drop-dentro { background: var(--pw-accent-soft); box-shadow: inset 0 0 0 2px var(--pw-accent-bright); }

.pw-grd-insp { flex: 1 1 auto; min-width: 0; overflow: auto; background: var(--pw-surface); }
.pw-grd-insp-head, .pw-grd-sum-cap {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-bottom: 1px solid var(--pw-line);
    background: var(--pw-line-soft); position: sticky; top: 0; z-index: 2;
}
.pw-grd-insp-head .bi { color: var(--pw-accent); }
.pw-grd-insp-head strong { font-size: .85rem; }
/* O corpo do inspetor reusa .pw-inspector-form (densidade/tipografia do inspetor
   do designer); aqui só entram os ajustes específicos do modal: o scroll é do
   .pw-grd-insp (sem max-height interno) e a coluna de campos tem largura limitada. */
.pw-grd-insp-form { padding: 10px 12px; max-width: 640px; }
.pw-grd-insp-form.pw-inspector-form, .pw-grd-opc-form.pw-inspector-form { max-height: none; overflow-y: visible; }

/* Grupos recolhíveis do dxForm dentro do editor */
.pw-grd-group .dx-form-group-caption, .pw-grd-group-cap { cursor: pointer; user-select: none; }
.pw-grd-group-cap::before { content: '\25BE'; display: inline-block; margin-right: 6px; font-size: .7rem; color: var(--pw-muted); transition: transform .12s; }
.pw-grd-recolhido .pw-grd-group-cap::before { transform: rotate(-90deg); }
.pw-grd-recolhido .dx-form-group-content { display: none; }

/* Editor JSON inválido */
.dx-texteditor.pw-grd-json-erro { border-color: #dc3545; }

/* ---- Aba Sumários ---- */
.pw-grd-body--sumarios { padding: 0 0 20px; }
.pw-grd-sum-sec { margin-bottom: 6px; }
.pw-grd-sum-cap .bi { color: var(--pw-accent); }
.pw-grd-sum-lista { padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; }
.pw-grd-sum-item {
    display: grid; grid-template-columns: 1fr auto; gap: 8px 12px;
    padding: 10px 12px; border: 1px solid var(--pw-line); border-radius: var(--pw-radius-sm); background: var(--pw-surface);
}
.pw-grd-sum-grid { grid-column: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 10px; }
.pw-grd-fld { display: flex; flex-direction: column; gap: 2px; font-size: .72rem; color: var(--pw-muted); margin: 0; }
.pw-grd-fld > span { font-weight: 600; }
.pw-grd-sum-flags { grid-column: 1; display: flex; gap: 16px; font-size: .8rem; }
.pw-grd-sum-flags label { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.pw-grd-sum-side { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; justify-content: space-between; }
.pw-grd-sum-prev { text-align: right; font-size: .8rem; }
.pw-grd-sum-aviso { grid-column: 1 / -1; font-size: .76rem; color: #92600a; }
.pw-grd-sum-aviso.is-aviso { display: block; }
.pw-grd-sum-aviso code { font-size: .72rem; }

/* ---- Aba Opções ---- */
.pw-grd-body--opcoes { padding: 0; }
.pw-grd-opc-busca { position: sticky; top: 0; z-index: 2; padding: 10px 14px; background: var(--pw-surface); border-bottom: 1px solid var(--pw-line); }
.pw-grd-opc-form { padding: 10px 12px; max-width: 720px; }

/* ---- Aba Pré-visualização ---- */
.pw-grd-body--preview { padding: 12px 14px; }
.pw-grd-prev-tools { display: flex; align-items: center; margin-bottom: 8px; }
.pw-grd-prev-avisos:not(:empty), .pw-grd-prev-erro { margin-bottom: 8px; }
.pw-grd-prev-erro { color: #b02a37; background: #fdeef0; border: 1px solid #f5c2c7; border-radius: var(--pw-radius-sm); padding: 8px 10px; font-size: .82rem; }
.pw-grd-popup .dx-popup-content { padding: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ==================================================================
 * Editor de ação declarativa (plusweb-designer-acoes.js) - pw-acaed-
 * ==================================================================
 * O popup tem 88% da altura da janela, mas o conteúdo não se esticava:
 * o host `.pw-acaed` era um bloco de altura automática, então o
 * `flex: 1 1 auto` do corpo não tinha de que crescer - a árvore de nós
 * ficava do tamanho do texto e sobrava uma faixa vazia no pé do modal.
 * A corrente de alturas abaixo (`.dx-popup-content` -> `.pw-acaed` ->
 * `.pw-acaed-corpo` -> painéis) é a mesma dos popups de Grade e
 * Mestre/Detalhe; `min-height: 0` em cada elo é obrigatório, senão o
 * `min-height: auto` do flex impede o encolhimento e o scroll nasce no
 * lugar errado (no modal inteiro, em vez de dentro do painel). */
.pw-acaed-popup .dx-popup-content { display: flex; flex-direction: column; overflow: hidden; }
.pw-acaed { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.pw-acaed-topo { flex: 0 0 auto; }
.pw-acaed-corpo { flex: 1 1 auto; min-height: 0; }
/* Os dois painéis são colunas: a barra de ferramentas fica FIXA e só a
   lista de nós (ou o corpo de propriedades) rola - antes o painel
   inteiro rolava e o botão "Nó" saía de vista ao montar a árvore. */
.pw-acaed-arvore,
.pw-acaed-props { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.pw-acaed-arvore { flex: 1 1 55%; }
.pw-acaed-props { flex: 1 1 45%; }
.pw-acaed-toolbar { flex: 0 0 auto; }
.pw-acaed-nos,
.pw-acaed-props-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.pw-acaed-erros,
.pw-acaed-rodape { flex: 0 0 auto; }

/* ==================================================================
 * Vínculo Mestre/Detalhe (plusweb-designer-mestre-detalhe.js) - pw-md-
 * ================================================================== */
.pw-md-studio { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.pw-md-tabs { flex: 0 0 auto; }
.pw-md-body { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--pw-paper); padding: 14px 16px; }
.pw-md-foot {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-top: 1px solid var(--pw-line); background: var(--pw-surface);
}
.pw-md-sujo { font-size: .8rem; color: var(--pw-muted); display: inline-flex; align-items: center; gap: 6px; }
.pw-md-sujo.is-sujo { color: #92600a; font-weight: 600; }
.pw-md-sujo .bi { font-size: .55rem; color: #d97706; }
.pw-md-popup .dx-popup-content { padding: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ---- Aba Vínculo ---- */
.pw-md-sec { max-width: 560px; margin-bottom: 16px; }
.pw-md-pai-aviso:empty { display: none; }
.pw-md-pai-aviso { color: var(--pw-muted); }

/* ---- Aba Ligações (filtros) ---- */
.pw-md-lig-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.pw-md-lig-lista { display: flex; flex-direction: column; gap: 8px; }
.pw-md-lig-item {
    display: flex; align-items: flex-end; gap: 8px 10px; flex-wrap: wrap;
    padding: 10px 12px; border: 1px solid var(--pw-line); border-radius: var(--pw-radius-sm); background: var(--pw-surface);
}
.pw-md-fld { display: flex; flex-direction: column; gap: 2px; font-size: .72rem; color: var(--pw-muted); margin: 0; min-width: 140px; }
.pw-md-fld > span { font-weight: 600; }
.pw-md-fld.d-none { display: none !important; }
.pw-md-lig-seta { color: var(--pw-muted); padding-bottom: 6px; }
.pw-md-lig-obrig { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; padding-bottom: 6px; margin: 0; white-space: nowrap; }
.pw-md-lig-badge { font-size: .68rem; align-self: center; }
.pw-md-lig-vazio {
    padding: 18px; text-align: center; color: var(--pw-muted);
    border: 1px dashed var(--pw-line); border-radius: var(--pw-radius-sm);
}

/* ---- Aba Comportamento ---- */
.pw-md-comp-form { max-width: 880px; }

/* ---- Aba Pré-visualização ---- */
.pw-md-prev-frase { font-size: .95rem; margin-bottom: 12px; }
.pw-md-prev-tab { max-width: 720px; }
.pw-md-prev-alertas ul { margin: 6px 0 0; padding-left: 18px; font-size: .82rem; }
.pw-md-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.pw-md-chip {
    font-size: .72rem; border: 1px solid var(--pw-line); border-radius: 999px;
    padding: 2px 10px; background: var(--pw-surface); color: var(--pw-muted);
}
.pw-md-chip strong { color: var(--pw-ink, #0f172a); }

/* Painel da aba Mestre/Detalhe do inspetor (pseudo-objeto formulário) */
.pw-insp-md .pw-md-alerta ul { font-size: .76rem; }

/* Badge de gatilho de navegação no canvas (objetos com navFormularioDestino) */
.pw-dsn-navtag {
    position: absolute; top: 2px; right: 6px; z-index: 3;
    color: var(--pw-accent, #0d6efd); font-size: .7rem; line-height: 1.5;
    background: var(--pw-surface, #fff); border: 1px solid var(--pw-line);
    border-radius: 999px; padding: 0 5px; pointer-events: none;
}

/* Destaque no select navFormularioDestino: destino que declara este
   formulário como pai (mestre/detalhe "natural" do gatilho). */
.pw-nav-dest.is-detalhe-deste { color: var(--pw-accent, #0d6efd); font-weight: 600; }

/* ==================================================================
 * Mestre/Detalhe - preview do designer (formulário filho aberto de
 * verdade: faixa/chip do registro pai, breadcrumb de página) - pw-mdp-
 * ================================================================== */
.pw-mdp-faixa {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 12px; margin-bottom: 12px; font-size: .86rem;
    border: 1px solid var(--pw-line); border-left: 3px solid var(--pw-accent, #0d6efd);
    border-radius: var(--pw-radius-sm); background: var(--pw-surface);
}
.pw-mdp-faixa-txt { min-width: 0; }
.pw-mdp-faixa-desc { color: var(--pw-muted); }
.pw-mdp-voltar { flex: 0 0 auto; }
.pw-mdp-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 6px 2px 10px; border-radius: 999px;
    border: 1px solid var(--pw-line); background: var(--pw-paper);
}
.pw-mdp-chip-x {
    border: 0; background: none; padding: 0 4px; line-height: 1;
    font-size: 1rem; color: var(--pw-muted); cursor: pointer; border-radius: 999px;
}
.pw-mdp-chip-x:hover { color: #b02a37; }
.pw-mdp-bc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 10px; }
.pw-mdp-bc-trilha { font-size: .8rem; color: var(--pw-muted); }
.pw-mdp-page { padding-top: 4px; }
.pw-mdp-child { position: relative; }
.pw-mdp-popup .dx-popup-content { padding-top: 12px; }

/* ==================================================================
 * Busca avancada do lookup (preview do designer): lupa ao lado do
 * campo e faixa do sub-modal aberto em modo selecao simulado.
 * ================================================================== */
.pw-lkp-busca { display: flex; align-items: center; gap: 6px; }
.pw-lkp-busca > .pw-pv-editor { flex: 1 1 auto; min-width: 0; }
.pw-lkp-busca-btn { flex: 0 0 auto; line-height: 1; }
.pw-lkp-selbar { border-radius: 6px; }

/* ==================================================================
 * Alça de arraste - coluna "Ordem" do grid de formulários (handle do
 * rowDragging do dxDataGrid): ícone discreto que vira cursor de arrasto.
 * ================================================================== */
.pw-ordem-drag-handle {
    cursor: grab;
    color: var(--pw-muted);
    margin-right: .35rem;
    transition: color .12s ease;
}
.pw-ordem-drag-handle:hover { color: var(--pw-accent); }
.pw-ordem-drag-handle:active { cursor: grabbing; }

/* ── Estilos condicionais (B6) e construtor visual de condições (B3) ──────── */

.pw-insp-estilos .pw-est-linha:first-of-type {
    border-top: 0 !important;
}

.pw-est-preview {
    outline: 2px dashed var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

/* Rodape do dialogo de estilo condicional: fica visivel enquanto o corpo rola
   (o popup e `height: auto` com `maxHeight`, entao em tela baixa os botoes
   ficavam abaixo da dobra do proprio conteudo). */
.pw-est-dialogo .pw-est-acoes {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin-top: 1rem;
    padding: .6rem 0 .1rem;
    background: var(--pw-surface, var(--bs-body-bg));
    border-top: 1px solid var(--pw-line, var(--bs-border-color));
    /* O scrollport (.dx-popup-content) tem padding-bottom, e o `sticky` ancora
       no CONTENT box - sobrava uma faixa por onde o conteudo rolado aparecia
       abaixo dos botoes. A sombra solida pinta essa faixa (e e recortada pelo
       proprio popup, entao nao vaza para fora). */
    box-shadow: 0 12px 0 0 var(--pw-surface, var(--bs-body-bg));
}

.pw-grd-fmt-amostra {
    display: inline-block;
    padding: 0 4px;
    border: 1px solid var(--bs-border-color);
    border-radius: 3px;
    font-size: .75rem;
    line-height: 1.2;
}

.pw-grd-formatos {
    border-top: 1px solid var(--bs-border-color);
}

/* ── Lista de formatos condicionais no inspetor da coluna (B6) ───────────── */

.pw-grd-fmt-cab {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.pw-grd-fmt-vazio {
    border: 1px dashed var(--pw-line);
    border-radius: var(--pw-radius-sm, .375rem);
    padding: 10px 12px;
    color: var(--pw-muted);
    font-size: .78rem;
    line-height: 1.35;
}

.pw-grd-fmt-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 2px;
    border-top: 1px solid var(--pw-line-soft, var(--bs-border-color));
}

.pw-grd-fmt-item.is-inativo {
    opacity: .55;
}

.pw-grd-fmt-item .pw-grd-fmt-sw {
    margin: 2px 0 0;
    min-height: 0;
}

.pw-grd-fmt-pos {
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 9px;
    background: var(--pw-line);
    color: var(--pw-muted);
    font-size: .66rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.pw-grd-fmt-nome {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .8rem;
    font-weight: 600;
    min-width: 0;
}

.pw-grd-fmt-nome .badge {
    font-size: .6rem;
    font-weight: 600;
}

.pw-grd-fmt-quando {
    font-family: var(--pw-font-mono);
    font-size: .72rem;
    color: var(--pw-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pw-grd-fmt-acoes {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    flex: 0 0 auto;
}

.pw-grd-fmt-mover .btn {
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: .3rem;
    --bs-btn-font-size: .62rem;
    line-height: 1.1;
}

/* ── Modal de formato condicional (B6) ───────────────────────────────────── */

.pw-fmtd-popup .dx-popup-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pw-fmtd {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.pw-fmtd-corpo {
    display: flex;
    align-items: stretch;
    min-height: 0;
    flex: 1 1 auto;
}

.pw-fmtd-form {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pw-fmtd-prev {
    flex: 0 0 340px;
    max-width: 340px;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 14px 18px;
    border-left: 1px solid var(--pw-line);
    background: var(--pw-paper, var(--bs-tertiary-bg));
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Cabeçalho com a coluna alvo */
.pw-fmtd-alvo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--pw-line);
    border-left: 3px solid var(--pw-accent, var(--bs-primary));
    border-radius: var(--pw-radius-sm, .375rem);
    background: var(--pw-surface, var(--bs-body-bg));
}

.pw-fmtd-alvo > .bi {
    color: var(--pw-accent, var(--bs-primary));
    font-size: 1.05rem;
}

.pw-fmtd-alvo-tit {
    font-size: .88rem;
    font-weight: 600;
}

.pw-fmtd-alvo-sub {
    font-size: .74rem;
    color: var(--pw-muted);
}

.pw-fmtd-alvo-sub code {
    font-size: .72rem;
}

.pw-fmtd-ativo-wrap {
    flex: 0 0 auto;
    padding-left: .5rem;
}

/* Seções numeradas */
.pw-fmtd-sec-cab {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 7px;
}

.pw-fmtd-sec-num {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: var(--pw-accent-soft, #e7f1ff);
    color: var(--pw-accent, var(--bs-primary));
    font-size: .7rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.pw-fmtd-sec-tit {
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.2;
}

.pw-fmtd-sec-dica {
    font-size: .74rem;
    color: var(--pw-muted);
    line-height: 1.3;
}

.pw-fmtd-sec-corpo {
    padding-left: 28px;
}

/* Presets de semáforo */
.pw-fmtd-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.pw-fmtd-preset {
    border: 1px solid rgba(0, 0, 0, .09);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

.pw-fmtd-preset:hover {
    transform: translateY(-1px);
    box-shadow: var(--pw-shadow-sm, 0 1px 3px rgba(0, 0, 0, .18));
}

.pw-fmtd-preset-limpar {
    background: transparent;
    color: var(--pw-muted);
    border-style: dashed;
}

/* Cores */
.pw-fmtd-cores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

/* Segmentado de negrito/itálico */
.pw-fmtd-seg {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.pw-fmtd-seg-rot {
    flex: 0 0 66px;
    font-size: .78rem;
    color: var(--pw-muted);
}

.pw-fmtd-seg .btn {
    --bs-btn-padding-y: .12rem;
    --bs-btn-padding-x: .55rem;
    --bs-btn-font-size: .74rem;
}

.pw-fmtd-icone-linha {
    margin-top: 10px;
}

/* Alcance: cartões de rádio */
.pw-fmtd-alcance {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pw-fmtd-radio {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--pw-line);
    border-radius: var(--pw-radius-sm, .375rem);
    cursor: pointer;
    background: var(--pw-surface, var(--bs-body-bg));
    transition: border-color .12s ease, background .12s ease;
}

.pw-fmtd-radio:hover {
    border-color: var(--pw-accent-bright, var(--bs-primary));
}

.pw-fmtd-radio.is-sel {
    border-color: var(--pw-accent-bright, var(--bs-primary));
    background: var(--pw-accent-soft, #e7f1ff);
}

.pw-fmtd-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pw-fmtd-radio-ico {
    color: var(--pw-accent, var(--bs-primary));
    line-height: 1;
    margin-top: 2px;
}

.pw-fmtd-radio-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pw-fmtd-radio-txt strong {
    font-size: .78rem;
}

.pw-fmtd-radio-txt small {
    font-size: .7rem;
    color: var(--pw-muted);
    line-height: 1.25;
}

.pw-fmtd-ordem {
    max-width: 140px;
}

/* Painel de pré-visualização */
.pw-fmtd-prev-cab {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pw-fmtd-prev-cab .bi {
    color: var(--pw-accent, var(--bs-primary));
}

.pw-fmtd-prev-rot {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--pw-muted);
    margin-top: 4px;
}

.pw-fmtd-amostra-grade {
    border: 1px solid var(--pw-line);
    border-radius: var(--pw-radius-sm, .375rem);
    overflow: hidden;
    background: var(--pw-surface, var(--bs-body-bg));
}

.pw-fmtd-amostra-cab {
    padding: 4px 8px;
    font-size: .7rem;
    font-weight: 600;
    color: var(--pw-muted);
    background: var(--pw-line-soft, var(--bs-tertiary-bg));
    border-bottom: 1px solid var(--pw-line);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pw-fmtd-amostra-cel {
    padding: 6px 8px;
    font-size: .8rem;
    border-bottom: 1px solid var(--pw-line-soft, var(--bs-border-color));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pw-fmtd-amostra-neutra {
    color: var(--pw-muted);
    border-bottom: 0;
}

.pw-fmtd-prev-vazio,
.pw-fmtd-prev-carregando {
    border: 1px dashed var(--pw-line);
    border-radius: var(--pw-radius-sm, .375rem);
    padding: 10px;
    font-size: .75rem;
    color: var(--pw-muted);
    line-height: 1.35;
}

.pw-fmtd-prev-tabela {
    overflow-x: auto;
}

.pw-fmtd-prev-tab {
    width: 100%;
    border-collapse: collapse;
    font-size: .74rem;
    table-layout: fixed;
    background: var(--pw-surface, var(--bs-body-bg));
    border: 1px solid var(--pw-line);
    border-radius: var(--pw-radius-sm, .375rem);
}

.pw-fmtd-prev-tab th,
.pw-fmtd-prev-tab td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--pw-line-soft, var(--bs-border-color));
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pw-fmtd-prev-tab th {
    font-size: .68rem;
    font-weight: 600;
    color: var(--pw-muted);
    text-transform: uppercase;
    letter-spacing: .02em;
    background: var(--pw-line-soft, var(--bs-tertiary-bg));
}

.pw-fmtd-prev-flag {
    width: 26px;
    max-width: 26px;
    text-align: center;
}

.pw-fmtd-prev-linha {
    cursor: pointer;
}

.pw-fmtd-prev-linha:hover {
    outline: 1px solid var(--pw-accent-bright, var(--bs-primary));
    outline-offset: -1px;
}

.pw-fmtd-prev-linha.is-teste {
    outline: 2px solid var(--pw-accent-bright, var(--bs-primary));
    outline-offset: -2px;
}

.pw-fmtd-prev-nota {
    font-size: .72rem;
    color: var(--pw-muted);
    line-height: 1.35;
}

/* Rodapé */
.pw-fmtd-rodape {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--pw-line);
    background: var(--pw-surface, var(--bs-body-bg));
}

.pw-fmtd-msg {
    font-size: .78rem;
    min-width: 0;
    flex: 1 1 auto;
}

.pw-fmtd-msg.is-erro {
    color: var(--bs-danger, #b42318);
    font-weight: 600;
}

.pw-fmtd-rodape-acoes {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
}

@media (max-width: 900px) {
    .pw-fmtd-corpo { flex-direction: column; }
    .pw-fmtd-prev { flex: 0 0 auto; max-width: none; border-left: 0; border-top: 1px solid var(--pw-line); }
    .pw-fmtd-cores, .pw-fmtd-alcance { grid-template-columns: 1fr; }
}

.pw-regexp-visual {
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    padding: .5rem;
    max-height: 320px;
    overflow: auto;
}

.pw-regexp-modo {
    margin-right: .25rem;
}

.pw-cnd-linha .pw-cnd-campo {
    max-width: 40%;
}

.pw-cnd-linha .pw-cnd-op {
    max-width: 28%;
}

/* ==== Novos tipos de objeto (B5 APP-FARM) ==== */
.pw-b5-container {
    border: 1px dashed #b6bec9;
    border-radius: 8px;
    padding: 8px;
    position: relative;
}

.pw-b5-container--popover {
    border-color: #8f6fd9;
    background: rgba(143, 111, 217, 0.05);
}

.pw-b5-container-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: #5a6673;
    margin-bottom: 4px;
}

.pw-b5-repetidor-eco {
    margin-top: 6px;
    font-size: 0.72rem;
    color: #8a94a0;
    border-top: 1px dashed #d5dbe2;
    padding-top: 4px;
    text-align: center;
}

.pw-b5-rep { display: flex; flex-direction: column; gap: 8px; }
.pw-b5-rep--horizontal { flex-direction: row; overflow-x: auto; }
.pw-b5-rep--grade { display: grid; grid-template-columns: repeat(var(--pw-rep-colunas, 3), minmax(0, 1fr)); }
.pw-b5-rep-item { border: 1px solid #e3e7ec; border-radius: 8px; padding: 8px; background: #fff; }
.pw-b5-rep-item--eco { opacity: 0.75; pointer-events: none; }

.pw-b5-lista { border: 1px solid #e3e7ec; border-radius: 8px; overflow: hidden; background: #fff; }
.pw-b5-lista-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; }
.pw-b5-lista--densa .pw-b5-lista-item { padding: 4px 10px; }
.pw-b5-lista-item--divisor + .pw-b5-lista-item--divisor { border-top: 1px solid #eef1f4; }
.pw-b5-lista-item:hover { background: #f5f7fa; }
.pw-b5-lista-textos { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pw-b5-lista-pri { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-b5-lista-sec { font-size: 0.78rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-b5-lista-meta { font-size: 0.75rem; color: #6b7280; flex: none; }
.pw-b5-lista-acao { border: 0; background: transparent; padding: 4px 6px; border-radius: 50%; color: #6b7280; cursor: pointer; }
.pw-b5-lista-acao:hover { background: rgba(47, 111, 237, 0.12); color: #2f6fed; }
.pw-b5-icone { width: 30px; height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: #eef1f5; color: #6b7280; flex: none; }

.pw-b5-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 600; color: #fff; background: #2f6fed; flex: none; }
.pw-b5-avatares { display: inline-flex; align-items: center; }
.pw-b5-avatares .pw-b5-avatar { border: 2px solid #fff; margin-left: -8px; }
.pw-b5-avatares .pw-b5-avatar:first-child { margin-left: 0; }
.pw-b5-avatar--mais { background: #6b7280; }

.pw-b5-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pw-b5-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 500; background: #eef1f5; color: #1f2937; }
.pw-b5-chip-x { border: 0; background: transparent; color: inherit; padding: 0 0 0 2px; cursor: pointer; opacity: 0.7; }
.pw-b5-chip-x:hover { opacity: 1; }

.pw-b5-fab-area { display: flex; justify-content: flex-end; align-items: flex-end; gap: 8px; }
.pw-b5-fab-area--esq { justify-content: flex-start; }
.pw-b5-fab { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #2f6fed; color: #fff; font-size: 1.1rem; cursor: pointer; box-shadow: 0 4px 10px rgba(31, 41, 55, 0.25); }
.pw-b5-speeddial { flex-direction: column; align-items: flex-end; display: flex; }
.pw-b5-speeddial-itens { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.pw-b5-speeddial-item { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dfe3e8; border-radius: 999px; background: #fff; padding: 3px 10px; font-size: 0.78rem; cursor: pointer; }
.pw-b5-speeddial-vazio { font-size: 0.75rem; color: #8a94a0; }

.pw-b5-navinf { display: flex; justify-content: space-around; gap: 4px; border-top: 1px solid #dfe3e8; background: #fff; padding: 4px 6px; border-radius: 0 0 8px 8px; }
.pw-b5-navinf-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: transparent; padding: 6px 4px; border-radius: 8px; font-size: 0.7rem; color: #6b7280; cursor: pointer; }
.pw-b5-navinf-item--ativo { color: #2f6fed; background: rgba(47, 111, 237, 0.1); }

.pw-b5-pdf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid #e3e7ec; border-radius: 8px; background: #f6f7f9; color: #6b7280; text-align: center; padding: 12px; }
.pw-b5-pdf i { font-size: 1.6rem; color: #b42318; }
.pw-b5-pdf-titulo { font-weight: 600; color: #374151; }
.pw-b5-pdf-origem { font-size: 0.75rem; }
.pw-b5-leitor { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px dashed #b8c0cc; border-radius: 8px; background: #f6f7f9; color: #6b7280; text-align: center; padding: 12px; }
.pw-b5-leitor i { font-size: 1.6rem; color: #2f6fed; }
.pw-b5-leitor-titulo { font-weight: 600; color: #374151; }
.pw-b5-leitor-info { font-size: 0.75rem; }

.pw-b5-gv { display: block; }
.pw-b5-popover-conteudo { min-width: 220px; }

.pw-theme-dark .pw-b5-lista,
.pw-theme-dark .pw-b5-rep-item,
.pw-theme-dark .pw-b5-navinf,
.pw-theme-dark .pw-b5-speeddial-item {
    background: #23262d;
    border-color: #3a3f47;
}

.pw-theme-dark .pw-b5-pdf { background: #1e2126; border-color: #3a3f47; }
.pw-theme-dark .pw-b5-leitor { background: #1e2126; border-color: #3a3f47; }

/* ==== Componentes compartilhaveis (B9 APP-FARM, DA7) ==== */
/* Instancia no canvas: moldura ROXA com badge do modelo (referencia viva). */
.pw-cmp-container {
    border: 1.5px solid #8f6fd9;
    border-radius: 8px;
    padding: 8px;
    position: relative;
    background: rgba(143, 111, 217, 0.04);
}

.pw-cmp-container-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6f42c1;
    background: rgba(143, 111, 217, 0.12);
    border-radius: 999px;
    padding: 1px 8px;
    margin-bottom: 4px;
    cursor: default;
}

/* Conteudo expandido (somente leitura): contorno roxo discreto + cadeado. */
.pw-dsn-cmp-item {
    outline: 1px dashed rgba(143, 111, 217, 0.55);
    outline-offset: -1px;
    border-radius: 6px;
}

.pw-node-componente > .pw-node-row { background: rgba(143, 111, 217, 0.08); }
.pw-node-cmp-expandido > .pw-node-row { opacity: 0.85; }
.pw-node-cmp-expandido > .pw-node-row .pw-node-grip { visibility: hidden; }

.pw-node-cmp-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #6f42c1;
    background: rgba(143, 111, 217, 0.14);
    border-radius: 999px;
    padding: 0 6px;
    margin-left: 4px;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pw-node-cmp-lock { color: #6f42c1; }

/* Paleta: modelo VINCULADO destacado. */
.pw-tool-componente { border-left: 3px solid #8f6fd9; }

.pw-theme-dark .pw-cmp-container { background: rgba(143, 111, 217, 0.1); }
.pw-theme-dark .pw-cmp-container-tag { background: rgba(143, 111, 217, 0.22); color: #c4b0ef; }
.pw-theme-dark .pw-node-cmp-badge { background: rgba(143, 111, 217, 0.25); color: #c4b0ef; }

/* ── Paleta de comandos global (Ctrl+K, B10.3) ─────────────────────────── */
.pw-paleta .modal-header { border-bottom: 1px solid var(--pw-line); }
.pw-paleta .pw-busca-input { font-size: .95rem; }
.pw-paleta-lista { max-height: 58vh; }
.pw-paleta-grupo {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--pw-muted);
    padding: 8px 4px 2px; display: flex; align-items: center; gap: 6px;
}
.pw-paleta-item.ativo { border-color: var(--pw-accent); background: var(--pw-accent-soft); }
.pw-paleta-sub { margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-paleta-rodape { border-top: 1px solid var(--pw-line); gap: 8px; }
.pw-paleta-rodape kbd {
    background: var(--pw-line-soft); border: 1px solid var(--pw-line);
    border-radius: 4px; padding: 0 4px; font-size: .68rem; color: var(--pw-ink, #0f172a);
}

/* ── Painel "Onde é usado" (B10.2) ─────────────────────────────────────── */
.pw-ondeusado { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.pw-ondeusado-cabec {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding-bottom: 6px; border-bottom: 1px solid var(--pw-line);
}
.pw-ondeusado-lista { overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.pw-ondeusado-item { text-decoration: none; color: inherit; }
.pw-ondeusado-item:hover { border-color: var(--pw-accent); }

/* ── Tela de Saúde da Solução (B10.4) ──────────────────────────────────── */
.pw-saude-cards { display: flex; gap: 12px; flex-wrap: wrap; }
.pw-saude-card { flex: 1 1 150px; }
.pw-saude-num { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.pw-saude-lista { display: flex; flex-direction: column; gap: 6px; }
.pw-saude-item {
    display: flex; align-items: flex-start; gap: 10px;
    border: 1px solid var(--pw-line); border-left-width: 4px;
    border-radius: 8px; padding: 8px 10px; background: #fff; font-size: .82rem;
}
.pw-saude-item.is-erro { border-left-color: #dc3545; }
.pw-saude-item.is-aviso { border-left-color: #eab308; }
.pw-saude-item .pw-saude-corpo { flex: 1 1 auto; min-width: 0; }
.pw-saude-cod {
    font-family: 'JetBrains Mono', monospace; font-size: .68rem;
    color: var(--pw-muted); text-transform: none;
}

/* ======================================================================
   Barra lateral v2 (estrutura de 3 partes) + marca ANI Sistemas
   ----------------------------------------------------------------------
   Bloco ACRESCENTADO no fim do arquivo de proposito: as regras originais
   de `.pw-sidebar` (topo do arquivo) continuam valendo como base, e este
   trecho sobrescreve so o que muda. Como a especificidade e igual em
   quase tudo, a unica posicao segura para vencer a cascata e o fim
   absoluto - nao existe outro bloco de regras da lateral depois daqui.

   Referencia: PLANEJAMENTO-SIDEBAR-MARCA.md, secoes 2 e 3.
   ====================================================================== */

/* ---------- A) Estrutura: coluna flex de 3 partes ---------- */

/* A lateral inteira deixa de rolar; quem rola e so o miolo
   (`.pw-sidebar-nav`). Assim a marca do produto e a assinatura ANI ficam
   sempre visiveis, a mascara de fade e a barra fina se aplicam so ao
   miolo, e os cabecalhos de grupo `sticky` grudam no lugar certo. */
.pw-sidebar {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Cabecalho e rodape nao encolhem nem esticam. */
.pw-sidebar .pw-brand,
.pw-sidebar .pw-sidebar-foot {
    flex: 0 0 auto;
}

.pw-sidebar .pw-sidebar-nav {
    flex: 1 1 auto;
    /* OBRIGATORIO: o valor inicial de `min-height` num item flex e `auto`,
       que impede o item de ficar MENOR que o proprio conteudo. Sem este
       zero o miolo cresce alem da lateral e o scroll nunca aparece. */
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* nao deixa a rolagem "vazar" para a pagina ao chegar no fim da lista */
    overscroll-behavior: contain;
    /* reserva o espaco da barra desde sempre - evita o layout shift de
       quando ela surge */
    scrollbar-gutter: stable;
    /* o scroll anchoring do navegador brigaria com a posicao restaurada
       pelo plusweb-sidebar.js na carga da pagina */
    overflow-anchor: none;
    padding-bottom: 14px;
}

/* ---------- B) Scroll: fade nas bordas + barra fina ---------- */

/* A mascara desvanece o proprio conteudo (superior a um overlay: nao
   interfere em selecao de texto nem em pointer events) sinalizando que ha
   mais itens acima/abaixo.
   Duas decisoes deliberadas:
   1) Faixa do topo curta (12px) e menor que a do rodape (18px): os
      cabecalhos de grupo sao `sticky` no topo e o texto deles comeca a
      15px da borda - com 12px o rotulo fica 100% opaco. O fundo do
      cabecalho e a mesma tinta de `.pw-sidebar`, entao o que a mascara
      revela nas bordas e exatamente a mesma cor: a emenda nao aparece.
   2) `mask-image` recorta TUDO que e pintado dentro do elemento, o
      `outline` de foco inclusive. A protecao e o `scroll-margin-block`
      abaixo: o navegador rola o link focado para fora das duas faixas
      antes de pinta-lo, e o anel de foco reforcado (outline +
      box-shadow) garante contraste mesmo se sobrar um fio no degrade. */
.pw-sidebar .pw-sidebar-nav {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
    /* barra fina no Firefox (o WebKit vem nos pseudo-elementos abaixo) */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

/* O scroller mudou de elemento: a barra discreta que existia em
   `.pw-sidebar` agora precisa valer em `.pw-sidebar-nav`. */
.pw-sidebar .pw-sidebar-nav::-webkit-scrollbar { width: 8px; }
.pw-sidebar .pw-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.pw-sidebar .pw-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .14);
    border-radius: 8px;
}
.pw-sidebar .pw-sidebar-nav:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .24); }

/* Folga usada pelo navegador ao rolar ate um link (foco por Tab, ancora).
   Topo maior porque ali fica o cabecalho de grupo grudado; base maior que
   os 18px da faixa de fade, para o item nunca parar dentro dela. */
.pw-sidebar .pw-sidebar-nav a { scroll-margin-block: 46px 24px; }

/* ---------- C) Cabecalhos de grupo grudados no topo ---------- */

/* Fundo TOTALMENTE opaco, na mesma tinta da lateral: o link que passa por
   baixo do cabecalho grudado precisa sumir de vez.

   Correcao de um defeito achado em verificacao visual: aqui havia
   `rgba(4, 41, 61, .93)`. Ele PARECIA suficiente porque varios `.pw-header`
   sao irmaos com `top: 0` e se empilham no mesmo ponto - com quatro camadas
   de 93% o vazamento cai para 1/255 e some. Mas quando so UM cabecalho esta
   grudado (o primeiro grupo, logo no comeco da rolagem, que e o caso mais
   comum) o texto do link atravessava o rotulo com cerca de 35% do contraste
   original. Como `--pw-ink` e exatamente o fundo do miolo, opaco nao muda
   nada visualmente e elimina o vazamento.

   Sem transparencia o `backdrop-filter` nao teria efeito nenhum, entao ele
   foi removido em vez de ficar custando composicao a toa. */
.pw-sidebar .pw-sidebar-nav .pw-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 15px 20px 6px;
    background: var(--pw-ink);
}
/* O primeiro cabecalho encosta na borda do miolo; um respiro a menos. */
.pw-sidebar .pw-sidebar-nav .pw-header:first-child { padding-top: 12px; }

/* ---------- D) Item de menu: pilula com guia luminosa ---------- */

.pw-sidebar .pw-sidebar-nav a {
    position: relative;
    margin: 1px 10px;
    padding: 9px 12px 9px 14px;
    border-radius: 10px;
    /* a barra esquerda chapada de 3px deu lugar a guia `::before` do ativo */
    border-left: 0;
    transition: background-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.pw-sidebar .pw-sidebar-nav a .bi { transition: transform .14s ease, opacity .14s ease, color .14s ease; }

.pw-sidebar .pw-sidebar-nav a:hover {
    background: var(--pw-ink-raised);
    color: #fff;
}
/* micro-interacao contida: o icone avanca 1px no hover */
.pw-sidebar .pw-sidebar-nav a:hover .bi { transform: translateX(1px); opacity: 1; }

/* Estado ativo: FORMA alem de cor (WCAG 1.4.1) - pilula + guia vertical
   luminosa + peso da fonte, nao apenas um fundo diferente. */
.pw-sidebar .pw-sidebar-nav a.active {
    background:
        linear-gradient(90deg, rgba(43, 193, 222, .22), rgba(43, 193, 222, .05) 70%),
        var(--pw-ink-raised);
    color: #fff;
    font-weight: 600;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 0 0 1px rgba(43, 193, 222, .20),
        0 2px 12px rgba(43, 193, 222, .12);
}
.pw-sidebar .pw-sidebar-nav a.active::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: var(--pw-accent-bright);
    /* brilho discreto - o alvo e "futurista elegante", nao neon */
    box-shadow: 0 0 8px rgba(43, 193, 222, .65);
}
.pw-sidebar .pw-sidebar-nav a.active .bi { color: var(--pw-accent-bright); opacity: 1; }
.pw-sidebar .pw-sidebar-nav a.active:hover { color: #fff; }

/* Foco reforcado: alem do `outline` global, um anel em `box-shadow` que
   contrasta com o fundo escuro mesmo na borda do miolo mascarado. */
.pw-sidebar .pw-sidebar-nav a:focus-visible {
    outline: 2px solid var(--pw-accent-bright);
    outline-offset: 2px;
    border-radius: 10px;
    box-shadow: 0 0 0 4px rgba(43, 193, 222, .22);
}

/* ---------- E) Cabecalho: marca do produto ---------- */

.pw-sidebar .pw-brand .pw-brand-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(140deg, rgba(43, 193, 222, .20), rgba(43, 193, 222, .04));
    border: 1px solid rgba(43, 193, 222, .28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.pw-sidebar .pw-brand .pw-brand-txt {
    min-width: 0;
    line-height: 1.15;
}

/* ---------- F) Rodape da lateral: assinatura ANI Sistemas ---------- */

/* Altura total ~80px: e espaco permanentemente subtraido do menu rolavel,
   entao fica compacto de proposito. */
.pw-sidebar .pw-sidebar-foot {
    padding: 10px 16px 12px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .18));
}

/* Anula o formato de item de menu herdado de `.pw-sidebar a`. */
.pw-sidebar .pw-ani {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    border-left: 0;
    border-radius: var(--pw-radius-sm);
    text-decoration: none;
    background: none;
}
.pw-sidebar .pw-ani:hover { background: none; }

.pw-ani-selo {
    font-size: .56rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #7e93a1;
    transition: color .14s ease;
}
.pw-sidebar .pw-ani:hover .pw-ani-selo { color: #a9bcc8; }

/* ---------- G) Marca ANI: placa clara (compartilhada) ---------- */

/* A logomarca e AZUL-ESCURA sobre fundo transparente (#202040 / #4080C0 /
   #002060). Sobre a lateral `--pw-ink` ela sumiria. A solucao e uma placa
   clara que PRESERVA as cores reais da marca - `filter: invert()` ou
   `brightness(0)` recoloririam a logomarca e a descaracterizariam, o que
   nao se faz com marca de terceiro. */
.pw-ani-plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, #f2f7fa);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .26);
    transition: transform .14s ease, box-shadow .14s ease;
}
.pw-ani:hover .pw-ani-plate {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .32);
}

.pw-ani-plate-transparent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0px !important;
    border-radius: 0px !important;
    background: transparent !important;
    border: none;
    box-shadow: none;
    transition: transform .14s ease;
}
.pw-ani:hover .pw-ani-plate-transparent {
    transform: translateY(-1px);
}

/* A imagem e 248; a ALTURA governa e a largura acompanha a proporcao. */
.pw-ani-logo {
    display: block;
    height: 32px;
    width: auto;
    max-width: 100%;
}

.pw-ani-plate-lg {
    padding: 9px 16px;
    border-radius: 12px;
}
.pw-ani-plate-lg .pw-ani-logo { height: 36px; }

/* ---------- H) Painel inicial: assinatura no hero ---------- */

/* `.pw-hero` e `position: relative; overflow: hidden` e seus filhos
   diretos recebem `position: relative; z-index: 1` - por isso a regra
   abaixo vem depois, para trocar o posicionamento pelo absoluto sem
   perder a camada acima da grade blueprint do `::after`. O texto do hero
   tem `max-width: 46ch`, entao no desktop sobra faixa livre a direita. */
.pw-hero .pw-hero-assinatura {
    position: absolute;
    right: 26px;
    bottom: 24px;
    z-index: 2;
    display: flex;
    align-items: center;
    /* a faixa nao rouba clique do conteudo do hero; so a placa e clicavel */
    pointer-events: none;
}
.pw-hero .pw-hero-assinatura .pw-ani-plate { pointer-events: auto; }

/* ---------- I) Painel inicial: rodape de credito ---------- */

/* Aqui o fundo e CLARO (`--pw-paper`), entao a logomarca vai direta, sem
   placa. */
.pw-rodape-ani {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--pw-line);
}
.pw-rodape-ani-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border-radius: var(--pw-radius-sm);
    opacity: .88;
    transition: opacity .14s ease;
}
.pw-rodape-ani-link:hover { opacity: 1; }
.pw-rodape-ani-logo {
    display: block;
    height: 26px;
    width: auto;
    max-width: 100%;
}
.pw-rodape-ani-txt {
    font-size: .78rem;
    color: var(--pw-muted);
}
.pw-rodape-ani-txt strong { color: var(--pw-text); font-weight: 600; }

/* ---------- J) Responsivo ---------- */

@media (max-width: 768px) {
    /* A lateral continua deslizando por `transform` (regra anterior); a
       coluna flex de 3 partes convive com isso porque o `<nav>` ja ocupa
       a altura toda da viewport (`inset: 0 auto 0 0`). */
    .pw-sidebar .pw-sidebar-foot { padding: 8px 14px 10px; }
    .pw-sidebar .pw-ani-plate { padding: 6px 10px; }
    .pw-sidebar .pw-ani-logo { height: 22px; }

    /* No celular a assinatura volta ao fluxo, senao cobriria o texto do
       hero (que passa a ocupar a largura inteira). */
    .pw-hero .pw-hero-assinatura {
        position: static;
        margin-top: 18px;
        justify-content: flex-start;
    }
    .pw-ani-plate-lg { padding: 7px 12px; }
    .pw-ani-plate-lg .pw-ani-logo { height: 28px; }

    .pw-rodape-ani { margin-top: 22px; gap: 10px; }
    .pw-rodape-ani-txt { font-size: .74rem; }
}

/* Nenhuma animacao continua (`@keyframes`) foi introduzida neste bloco -
   so transicoes curtas de hover/foco, que o bloco global de
   `prefers-reduced-motion: reduce` ja neutraliza. Se um dia entrar aqui
   uma animacao infinita, ela precisa nascer dentro de
   `@media (prefers-reduced-motion: no-preference)`: zerar
   `animation-duration` com `!important` nao remove de forma confiavel uma
   animacao de repeticao infinita em todos os motores. */