/**
 * InspX Theme - Customizações do Tema Diamond (Inspeções Ágeis)
 * Cores: Teal #0f766e (primário), Verde #16a34a (sucesso), Laranja #ea580c (aviso), Vermelho #dc2626 (erro)
 */

:root {
    --primary-color: #0f766e;
    --primary-dark: #0b5550;
    --success-color: #16a34a;
    --warning-color: #ea580c;
    --danger-color: #dc2626;
    --sidebar-bg: #ffffff;
    --topbar-bg: #f8fafc;
    --border-color: #e5e7eb;
}

/* ========== SIDEBAR ========== */
.layout-sidebar {
    background: var(--sidebar-bg);
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.08);
}

.layout-sidebar .logo {
    padding: 20px 15px;
    border-bottom: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.3s ease;
}

/* O logo NÃO muda de cor no hover (Davi, 2026-09-08). O tema Diamond não
   define nada para `.logo:hover` — conferido, zero regras em
   layout-light.css — então o realce era só nosso: um overlay translúcido
   escuro que tinha substituído um hover claro (#f0f7ff) que apagava o logo
   nas variantes de sidebar escuro. Como o pedido é não ter realce nenhum, a
   regra saiu inteira em vez de ser ajustada.

   Se algum dia voltar a fazer sentido destacar o logo no hover: NÃO use cor
   clara fixa. São 13 variantes de sidebar, 12 escuras com `.app-name` branco,
   e qualquer claro fixo some com o logo. Escurecer o fundo com
   `rgba(0,0,0,.12)` funciona nas duas famílias sem uma regra por variante —
   era exatamente o que estava aqui. */

.layout-sidebar .logo .logo-image {
    height: 40px;
    width: 40px;
}

.layout-sidebar .logo .app-name {
    font-weight: 700;
    font-size: 1.1em;
    color: var(--primary-color);
}

/* Seletor de Município */
.sidebar-selector {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-selector label {
    display: block;
    margin-bottom: 8px;
    color: #666;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-selector .ui-selectonemenu {
    width: 100% !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
}

.sidebar-selector .ui-selectonemenu-label {
    padding: 8px 12px !important;
    color: #333 !important;
}

/* Info do Usuário */
.sidebar-user-info {
    padding: 15px;
    margin: 15px 0;
    border-radius: 8px;
    background: #f0f7ff;
    border-left: 3px solid var(--primary-color);
}

.sidebar-user-info .pi-user {
    color: var(--primary-color);
    font-size: 1.5em;
}

.sidebar-user-info strong {
    font-weight: 600;
    font-size: 0.9em;
    color: #333;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-info .user-perfil {
    font-size: 0.8em;
    color: #666;
    margin-top: 3px;
}

/* ========== TOPBAR ========== */
.layout-topbar {
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.layout-topbar .topbar-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.layout-topbar .menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--primary-color);
    transition: background 0.3s ease;
}

.layout-topbar .menu-button:hover {
    background: #f0f7ff;
}

.layout-topbar .topbar-separator {
    width: 1px;
    height: 24px;
    background: var(--border-color);
}

.layout-topbar .viewname {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #333;
}

.layout-topbar .viewname .pi {
    color: var(--primary-color);
    font-size: 1.2em;
}

/* Selo "atuando por" — estabelecimento ativo do portal, sempre visível no topo.
   (mesma ideia do selo do paciente no horusconnect) */
/* ===== Topbar não deixa texto passar por cima de texto =====
   O tema monta a barra como `display:flex; justify-content:space-between` com
   `height: 4rem` FIXA, e `.topbar-left` é um flex sem `min-width: 0`
   (diamond-layout/.../_topbar.scss). Item de flex não encolhe abaixo do
   min-content, e a chip tem `white-space: nowrap` — ou seja, o lado esquerdo
   simplesmente NÃO cabe quando o nome do município mais a chip passam do
   espaço, e o excedente é pintado por cima do `.topbar-right` em vez de
   encolher. O nome do município ainda quebrava em duas linhas dentro de uma
   barra de altura fixa (medido: 184x48px a 1024px), que é a sobreposição que
   o Davi via.

   As quatro regras abaixo fazem a barra encolher em vez de colidir, para
   qualquer combinação de nome de município, estabelecimento e usuário — não
   dependem de achar o dado exato que dispara. */
.layout-topbar .topbar-left {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

/* a direita (sino, busca, perfil) é a âncora: nunca é espremida */
.layout-topbar .topbar-right {
    flex-shrink: 0;
}

/* o que tem tamanho fixo não encolhe: só o texto cede espaço */
.layout-topbar .menu-button,
.layout-topbar .topbar-separator,
.layout-topbar .mobile-logo,
.layout-topbar .viewname .pi {
    flex-shrink: 0;
}

/* o nome do município corta com reticências em vez de quebrar linha */
.layout-topbar .viewname {
    min-width: 0;
}

.layout-topbar .viewname span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layout-topbar .topbar-estab-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 20rem;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    background: #0f766e;
    color: #fff;
    font-size: .82rem;
    line-height: 1;
    white-space: nowrap;
    min-width: 0;
}
.layout-topbar .topbar-estab-chip.is-terceiro {
    background: #ea580c; /* âmbar/laranja: contabilidade agindo por terceiro */
}
.layout-topbar .topbar-estab-chip .pi {
    font-size: 1rem;
    flex-shrink: 0;
    color: #fff;
}
.layout-topbar .topbar-estab-chip .rotulo {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .66rem;
    opacity: .82;
    flex-shrink: 0;
}
.layout-topbar .topbar-estab-chip .nome {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 960px) {
    .layout-topbar .topbar-estab-chip .rotulo { display: none; }
    .layout-topbar .topbar-estab-chip { max-width: 11rem; }
}

/* Topbar Menu (direita) */
.layout-topbar .topbar-right .topbar-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.layout-topbar .topbar-menu li {
    display: flex;
    align-items: center;
}

.layout-topbar .topbar-menu .search-item a,
.layout-topbar .topbar-menu .notifications-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #666;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.layout-topbar .topbar-menu .search-item a:hover,
.layout-topbar .topbar-menu .notifications-item a:hover {
    background: #f0f7ff;
    color: var(--primary-color);
}

.layout-topbar .topbar-badge {
    position: absolute;
    background: var(--danger-color);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    font-weight: 700;
    top: 5px;
    right: -5px;
}

/* Profile Menu */
.layout-topbar .topbar-menu .profile-item {
    position: relative;
}

.layout-topbar .profile-item > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    color: #333;
    cursor: pointer;
    transition: background 0.3s ease;
}

.layout-topbar .profile-item > a:hover {
    background: #f0f7ff;
    color: var(--primary-color);
}

.layout-topbar .profile-item .profile-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    min-width: 200px;
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.layout-topbar .profile-item:hover .profile-menu {
    display: block;
}

.layout-topbar .profile-menu li a,
.layout-topbar .profile-menu li form a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
}

.layout-topbar .profile-menu li a:hover,
.layout-topbar .profile-menu li form a:hover {
    background: #f0f7ff;
    color: var(--primary-color);
}

/* ========== MENU (Diamond) ========== */
.layout-menu-container .ui-menu {
    border: none;
    background: transparent;
}

.layout-menu-container .ui-menu .ui-menuitem {
    margin-bottom: 4px;
}

.layout-menu-container .ui-menu .ui-menuitem > a {
    padding: 10px 12px !important;
    border-radius: 6px !important;
    color: #666 !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    border: 2px solid transparent !important;
}

.layout-menu-container .ui-menu .ui-menuitem > a:hover {
    background: #f0f7ff !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.layout-menu-container .ui-menu .ui-menuitem.ui-menuitem-active > a {
    background: #f0f7ff !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    font-weight: 600 !important;
}

.layout-menu-container .ui-menu .ui-menuitem .ui-icon {
    margin-right: 8px !important;
}

/* Submenu */
.layout-menu-container .ui-menu .ui-menuitem-active .ui-submenu {
    background: #fafbfc;
    border-left: 2px solid var(--primary-color);
    padding-left: 8px;
    margin-left: 4px;
}

.layout-menu-container .ui-submenu .ui-menuitem > a {
    padding: 8px 10px !important;
    font-size: 0.9em !important;
}

/* ========== FOOTER ========== */
.layout-footer {
    background: var(--topbar-bg);
    border-top: 1px solid var(--border-color);
    padding: 20px;
    text-align: center;
    color: #666;
    font-size: 0.9em;
}

.layout-footer .copyright {
    font-weight: 600;
    color: #333;
}

/* ========== STATUS E MENSAGENS ========== */
.layout-ajax-loader-icon {
    color: var(--primary-color);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Messages */
.ui-message {
    border-radius: 6px;
    border-left: 4px solid;
    margin-bottom: 12px;
}

/* p:message por campo renderiza um <div class="ui-message"> vazio quando não
   há erro (placeholder pra reservar o espaço da validação) — sem severidade
   nenhuma, a borda esquerda de 4px acima ainda aparecia sozinha, uma "sujeira"
   escura do tamanho do padding em baixo de todo campo do formulário. Some só
   quando realmente vazio — :empty não casa com mensagem icon-only (tem <span>
   filho), então continua aparecendo quando há conteúdo de verdade. */
.ui-message:empty {
    display: none;
    border: none;
    margin: 0;
    padding: 0;
}

.ui-message-success {
    background: #dcfce7 !important;
    border-left-color: var(--success-color) !important;
    color: #15803d !important;
}

.ui-message-warning {
    background: #fef3c7 !important;
    border-left-color: var(--warning-color) !important;
    color: #92400e !important;
}

.ui-message-error {
    background: #fee2e2 !important;
    border-left-color: var(--danger-color) !important;
    color: #7f1d1d !important;
}

.ui-message-info {
    background: #dbeafe !important;
    border-left-color: var(--primary-color) !important;
    color: #1e40af !important;
}

/* ========== RESPONSIVE ========== */
@media screen and (max-width: 768px) {
    .layout-sidebar {
        position: fixed;
        left: -100%;
        width: 250px;
        height: 100vh;
        z-index: 999;
        transition: left 0.3s ease;
    }

    .layout-sidebar-visible .layout-sidebar {
        left: 0;
    }

    .layout-topbar .topbar-left {
        gap: 10px;
    }

    .layout-topbar .viewname {
        display: none;
    }

    .layout-topbar .mobile-logo {
        display: block !important;
    }
}

/* ========== BARRA DE BOTÕES (Novo / Salvar / Cancelar) ========== */

/* Só layout: os botões em si usam o visual nativo do tema Diamond
   (mesmo look do horusconnect). */
.inspx-button-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

/* Espaçamento entre os botões nativos do tema (o resto do visual vem do
   tema Diamond — nada de override próprio aqui). */
.inspx-button-bar .ui-button {
    margin: 0 !important;
}

/* Link de Cancelamento */
.inspx-btn-link {
    color: var(--primary-color) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}

.inspx-btn-link:hover {
    color: var(--primary-dark) !important;
    text-decoration: underline !important;
}

/* Separador " ou " entre os botões */
.inspx-button-separator {
    color: #d1d5db;
    font-weight: 400;
    font-size: 0.85em;
    margin: 0 4px;
}

/* ========== DASHBOARD: cartões de visão geral ========== */
/* as cores dos cartões saem das variantes de fábrica do tema Diamond
   (.widget-overview-box-1..4, em diamond-layout/css/layout-*.css) — aqui só
   entra o que o tema não tem: o cartão inteiro ser um link clicável. */
a.dashboard-overview-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.dashboard-overview-link .widget-overview-box {
    cursor: pointer;
    transition: box-shadow 0.2s;
}

/* mesma elevação de hover que o tema usa no .order-tab do dashboard demo */
.dashboard-overview-link:hover .widget-overview-box {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
}

/* Checklist de questionário (resposta de InspecaoAtividade, portal e
   vigilância): o p:dialog não limita a própria altura, então um
   questionário com muitas perguntas empurra os botões de Salvar/Cancelar
   para fora da viewport sem barra de rolagem nenhuma — achado ao vivo
   pelo Davi respondendo como estabelecimento (2026-08-17). */
.checklist-dialog .ui-dialog-content {
    max-height: 65vh;
    overflow-y: auto;
}

/* Todo dialog do componente inspx:cardModal (Configurar, Cancelar, Histórico...)
   — mesmo gotcha do checklist acima, mas resolvido uma vez só no componente
   genérico em vez de cada tela lembrar da própria classe (achado no modal de
   Histórico, que junta duas tabelas e pode ficar mais alto que a viewport). */
.vd-card-modal .ui-dialog-content {
    max-height: 70vh;
    overflow-y: auto;
}

/* Ícones do canto do card de cabeçalho (Histórico/Encerrar/Cancelar) — o
   tamanho de fábrica do Diamond pra botão-ícone redondo (rounded-button +
   ui-button-icon-only, 2.357rem) ainda ficava pequeno demais no cabeçalho,
   apertado perto do texto grande do Protocolo/Situação (pedido do Davi,
   2026-08-19: "ainda ficaram muito fininhos, deixe maiores"). !important:
   a regra do próprio tema pro combo rounded-button+ui-button-icon-only
   (`body .ui-button.rounded-button.ui-button-icon-only`) tem 3 classes de
   especificidade — bater isso só copiando o seletor arrisca perder de novo
   se a ordem de carregamento do CSS mudar; aqui fica garantido. */
.vd-header-icon-btn.ui-button-icon-only {
    width: 2.9rem !important;
    height: 2.9rem !important;
}
/* O truque de centralização do tema (position:absolute;top/left:50%) soma um
   margin negativo FIXO (-7px, calibrado pro glyph de fábrica ~14px) pra
   puxar o ícone de volta pro centro. Aumentar só o font-size (acima) sem
   reajustar essa margem deixa o ícone maior desalinhado ~2px pra
   baixo/direita do centro real do botão — achado medindo getBoundingClientRect
   do ícone vs. do botão (Davi notou visualmente, 2026-08-19). -0.5em
   acompanha o font-size desta mesma regra automaticamente. */
.vd-header-icon-btn .ui-icon {
    font-size: 1.3rem;
    margin-top: -0.5em !important;
    margin-left: -0.5em !important;
}

/* Acordeão nativo (<details>/<summary>) por questionário dentro do checklist
   — cada InspecaoAtividade pode ter mais de um questionário vinculado, e uma
   lista contínua sem separação nem contagem por questionário ficava
   apertada e confusa (pedido do Davi, 2026-08-18). <summary> vira a barra
   clicável de abrir/fechar; o marcador nativo (triângulo) é trocado por um
   ícone PrimeIcons alinhado à direita via ::marker/::-webkit-details-marker. */
.vd-checklist-grupo {
    margin-top: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.vd-checklist-grupo + .vd-checklist-grupo {
    margin-top: .8rem;
}
.vd-checklist-grupo-resumo {
    list-style: none;
    cursor: pointer;
    padding: .7rem .9rem;
    background: #f8f9fb;
    display: flex;
    align-items: center;
    user-select: none;
}
.vd-checklist-grupo-resumo::-webkit-details-marker {
    display: none;
}
.vd-checklist-grupo-resumo::before {
    content: "\e932"; /* pi-angle-right */
    font-family: primeicons;
    margin-right: .5rem;
    transition: transform .15s ease;
}
.vd-checklist-grupo[open] > .vd-checklist-grupo-resumo::before {
    transform: rotate(90deg);
}
.vd-checklist-grupo-corpo {
    padding: .8rem .9rem 1rem .9rem;
}

/* p:chronoline align="left": o PrimeFaces renderiza a coluna
   ui-chronoline-event-opposite mesmo em modo "left" (só fica vazia — é o
   mesmo grid de 3 colunas do modo "alternate"), então a linha/conteúdo
   continuavam empurrados pro meio do popup mesmo com align="left" (achado
   do Davi, 2026-08-19, testando o Histórico ao vivo: "continua da metade
   pra direita"). Escondendo a coluna vazia e reduzindo o grid pra 2 colunas
   (marcador + conteúdo) o timeline cola na borda esquerda de verdade. */
.vd-chronoline.ui-chronoline-left .ui-chronoline-event-opposite {
    display: none;
}
.vd-chronoline.ui-chronoline-left .ui-chronoline-event {
    grid-template-columns: auto 1fr !important;
}

/* Marcador redondo colorido do p:chronoline — markup literal do exemplo do
   tema Diamond (diamond-15.0.1/.../resources/demo/css/pages/_chronoline.scss).
   A cor de fundo vem inline do bean (ItemProntuario.getCor()). */
.custom-marker {
    display: flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border-radius: 50%;
    z-index: 1;
}

/* Linha do tempo do Prontuário do estabelecimento: um pouco de respiro entre
   os eventos (o padding padrão do chronoline vertical é bem justo). */
.vd-chronoline-prontuario .ui-chronoline-event-content {
    padding-bottom: 1.25rem;
}
.vd-chronoline-prontuario .ui-chronoline-event:last-child .ui-chronoline-event-content {
    padding-bottom: 0;
}

/* ========== PORTAL: faixa "atuando por" ========== */
.portal-faixa-contexto {
    border-left: 5px solid #0f766e;
    background: #f4f9ff;
}
.portal-faixa-contexto.is-terceiro {
    border-left-color: #ea580c;
    background: #fff7ed;
}
.portal-faixa-contexto .faixa-rotulo {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #0f766e;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: .15rem;
}
.portal-faixa-contexto.is-terceiro .faixa-rotulo {
    color: #ea580c;
}
.portal-faixa-contexto .faixa-rotulo .pi {
    font-size: .9rem;
}
.portal-faixa-contexto .faixa-nome {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1f2937;
}

/* ========== Motor de processos: pré-visualização "energizada" ========== */
.motor-preview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
}
@media (max-width: 900px) {
    .motor-preview-layout { grid-template-columns: 1fr; }
}
.motor-preview-side { display: flex; flex-direction: column; gap: 14px; }

/* o mapa é um painel escuro embutido (o brilho da "energia" só funciona no escuro) */
.motor-map-canvas {
    position: relative;
    height: 520px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.14);
    background:
        linear-gradient(rgba(148,163,184,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.05) 1px, transparent 1px),
        radial-gradient(circle at 18% 0%, rgba(15,118,110,.16), transparent 34%),
        #0f172a;
    background-size: 26px 26px, 26px 26px, auto, auto;
}
@media (max-width: 900px) { .motor-map-canvas { height: 640px; } }

.motor-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.motor-path-base   { fill: none; stroke: #334155; stroke-width: 6; stroke-linecap: round; }
.motor-path-done   { fill: none; stroke: #22c55e; stroke-width: 6; stroke-linecap: round; opacity: .95; }
.motor-path-active {
    fill: none; stroke: #38bdf8; stroke-width: 6; stroke-linecap: round;
    stroke-dasharray: 10 14;
    filter: drop-shadow(0 0 6px rgba(56,189,248,.8));
    animation: motorFlow 1s linear infinite;
}
@keyframes motorFlow { to { stroke-dashoffset: -24; } }
.motor-energy-dot { fill: #e0f2fe; filter: drop-shadow(0 0 9px rgba(56,189,248,1)); }

.motor-map-nodes .ui-datalist-data,
.motor-map-nodes .ui-datalist-content,
.motor-map-nodes .ui-datalist-item { display: contents; }

.motor-map-canvas .node {
    position: absolute;
    width: 158px;
    transform: translate(-50%, -50%);
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,.18);
    background: linear-gradient(180deg, #17213a, #111827);
    color: #f8fafc;
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
    transition: transform .2s ease, border-color .2s ease;
}
.motor-map-canvas .node[data-state="visitado"] { border-color: rgba(34,197,94,.55); }
.motor-map-canvas .node[data-state="atual"] {
    border-color: rgba(56,189,248,.9);
    animation: motorNodePulse 1.8s ease-in-out infinite;
}
.motor-map-canvas .node[data-state="futuro"] { opacity: .5; }
@keyframes motorNodePulse {
    0%,100% { box-shadow: 0 0 0 1px rgba(56,189,248,.18), 0 0 22px rgba(56,189,248,.12), 0 10px 24px rgba(0,0,0,.25); }
    50%     { box-shadow: 0 0 0 1px rgba(56,189,248,.30), 0 0 38px rgba(56,189,248,.30), 0 10px 24px rgba(0,0,0,.25); }
}
.motor-map-canvas .node-top { display: flex; align-items: center; gap: 9px; }
.motor-map-canvas .node-icon {
    width: 30px; height: 30px; flex: none;
    display: grid; place-items: center;
    border-radius: 9px; background: #1e293b; font-size: 16px;
}
.motor-map-canvas .node[data-state="visitado"] .node-icon { background: rgba(34,197,94,.16); }
.motor-map-canvas .node[data-state="atual"] .node-icon { background: rgba(56,189,248,.16); }
.motor-map-canvas .node-title { font-weight: 800; font-size: 12px; line-height: 1.2; }
.motor-map-canvas .node-status {
    margin-top: 7px; font-size: 9px; font-weight: 900;
    text-transform: uppercase; letter-spacing: .08em; color: #64748b;
}
.motor-map-canvas .node[data-state="visitado"] .node-status { color: #86efac; }
.motor-map-canvas .node[data-state="atual"] .node-status { color: #7dd3fc; }

/* área clicável do nó no modo edição — foca o passo para editar */
.motor-map-canvas .node-edit-hit {
    position: absolute; inset: 0; z-index: 3;
    border-radius: 14px;
    font-size: 0; color: transparent;
    cursor: pointer;
}
.motor-map-canvas .node-edit-hit:hover { background: rgba(56,189,248,.12); }
.motor-map-canvas .node:has(.node-edit-hit) { cursor: pointer; }

.motor-preview-meter {
    margin-top: 12px; height: 8px; border-radius: 999px;
    background: var(--surface-200); overflow: hidden;
}
.motor-preview-meter > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, #22c55e, #38bdf8);
    border-radius: 999px; transition: width .4s ease;
}

/* ===== paleta de blocos ("lego") ===== */
.motor-bloco-grid .ui-datalist,
.motor-bloco-grid .ui-datalist-data,
.motor-bloco-grid .ui-datalist-content,
.motor-bloco-grid .ui-datalist-item { display: contents; }
.motor-bloco-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .6rem;
}
.motor-bloco-card {
    display: flex; flex-direction: column; gap: .3rem;
    padding: .8rem .85rem;
    border: 1px solid var(--surface-300);
    border-radius: 10px;
    background: var(--surface-0, #fff);
    color: var(--text-color);
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.motor-bloco-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    transform: translateY(-1px);
    text-decoration: none;
}
.motor-bloco-ic {
    width: 34px; height: 34px; flex: none;
    display: grid; place-items: center;
    border-radius: 9px;
    background: var(--primary-color); color: #fff; font-size: 17px;
}
.motor-bloco-nome { font-weight: 700; font-size: .95rem; line-height: 1.2; }
.motor-bloco-faz { font-size: .78rem; color: #6b7280; line-height: 1.25; }
.motor-bloco-tags {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
    margin-top: .15rem; font-size: .72rem;
}
.motor-bloco-op { color: #374151; }
.motor-bloco-escopo {
    padding: .05rem .4rem; border-radius: 999px;
    background: var(--surface-200); color: #6b7280;
}

/* ========== AJUDA CONTEXTUAL ========== */
/* Ícone "?" de campo (composite inspx:ajuda). Era style inline no componente;
   virou classe pra poder dar estado de foco visível — o ícone é focável por
   Tab/toque de propósito, e sem outline o usuário de teclado não enxerga onde
   está. */
.hint-ajuda {
    color: #9ca3af;
    font-size: .9rem;
    margin-left: 5px;
    cursor: help;
    vertical-align: middle;
    border-radius: 50%;
}

.hint-ajuda:hover {
    color: var(--primary-color);
}

.hint-ajuda:focus,
.hint-ajuda:focus-visible {
    color: var(--primary-color);
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.hint-ajuda-balao .ui-tooltip-text {
    max-width: 340px;
    line-height: 1.45;
}

/* Botão "Ajuda" ao lado do <h2> da tela (composite inspx:ajudaPagina).
   font-size/weight próprios porque ele mora dentro do <h2> e herdaria o
   tamanho do título. */
.ajuda-pagina-gatilho {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .6rem;
    padding: .15rem .55rem;
    border: 1px solid var(--surface-300);
    border-radius: 999px;
    background: var(--surface-0);
    color: #6b7280;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.6;
    cursor: pointer;
    vertical-align: middle;
    user-select: none;
}

.ajuda-pagina-gatilho:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.ajuda-pagina-gatilho:focus,
.ajuda-pagina-gatilho:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* A largura tem que ser fixada no CONTEÚDO, não no painel: o widget
   OverlayPanel escreve `max-width` inline (viewport menos margem, ex.: 1372px)
   ao posicionar, e estilo inline ganha da classe — um `max-width` aqui é
   simplesmente ignorado e o painel abre com ~750px, estourando a borda da
   tela. Limitando o conteúdo, o painel encolhe junto e o reposicionamento
   automático do PrimeFaces passa a caber. */
.ajuda-pagina-painel .ui-overlaypanel-content {
    width: min(480px, 88vw);
    max-height: 65vh;
    overflow-y: auto;
    padding: 1rem 1.15rem;
}

.ajuda-pagina-titulo {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary-color);
    margin-bottom: .6rem;
    padding-right: 1.2rem; /* não passar por baixo do X de fechar */
}

.ajuda-pagina-texto {
    font-size: .86rem;
    line-height: 1.55;
    color: #374151;
}

.ajuda-pagina-texto p {
    margin: 0 0 .6rem;
}

.ajuda-pagina-texto p:last-child {
    margin-bottom: 0;
}

.ajuda-pagina-texto ol,
.ajuda-pagina-texto ul {
    margin: 0 0 .6rem;
    padding-left: 1.2rem;
}

.ajuda-pagina-texto li {
    margin-bottom: .28rem;
}

/* O tema Diamond pendura o X de fechar META DE FORA do painel
   (right/top: -14px = metade do ícone) — ver
   diamond-layout/.../components/overlay/_overlaypanel.scss. No desktop isso é
   invisível, porque o painel nunca encosta na borda. No celular o
   collision="flipfit" do <inspx:ajudaPagina> gruda o painel na lateral da tela
   para não cortar o texto, e aí é o X que fica metade fora da viewport,
   cortado ao meio (medido: 14px para fora a 390px de largura). Abaixo de 600px
   o ícone vem para dentro; o título ganha folga para não passar por baixo.
   O seletor precisa do `body` e das duas classes do painel: a regra do tema é
   `body .ui-overlaypanel .ui-overlaypanel-close` (0,2,1) e ganha de um
   `.ajuda-pagina-painel .ui-overlaypanel-close` (0,2,0) — conferido no
   browser, a primeira tentativa não pegou. */
@media (max-width: 600px) {
    body .ajuda-pagina-painel.ui-overlaypanel .ui-overlaypanel-close {
        right: .25rem;
        top: .25rem;
    }

    body .ajuda-pagina-painel.ui-overlaypanel .ajuda-pagina-titulo {
        padding-right: 2.2rem;
    }
}

/* Célula de tabela não fica "selecionada" ao clicar com o mouse.
   O PrimeFaces põe tabindex="0" em cada <td> das listagens (navegação por
   teclado no grid) e o components.css dele desenha um anel de foco:

     .ui-datatable-data td[role="gridcell"]:focus,
     .ui-datatable-data td[role="grid"] [tabindex="0"]:focus
         { outline: 2px solid var(--primary-color); outline-offset: -2px; border: 0 }

   Como clicar também dá foco, toda célula clicada ficava com a moldura azul
   presa até o próximo clique — parecia seleção e não é.

   Aqui o anel é removido só quando o foco NÃO veio do teclado: o
   :focus-visible do Chrome não casa num <td tabindex="0"> clicado com o
   mouse, mas casa quando ele é alcançado por Tab/setas. Quem navega por
   teclado continua enxergando onde está — tirar o outline a seco deixaria a
   listagem impossível de percorrer sem mouse.

   Especificidade: a regra do PF é (0,3,1); o :focus-visible dentro do :not()
   conta, então esta fica (0,4,1) e ganha. */
.ui-datatable-data td[role="gridcell"]:focus:not(:focus-visible),
.ui-datatable-data td[role="grid"] [tabindex="0"]:focus:not(:focus-visible) {
    outline: none;
}

/* Logo do sidebar não fica "aceso" depois do clique — mesma causa da célula
   de tabela acima. O tema desenha um anel de foco no logo, repetido nas 13
   variantes de cor do sidebar:

     .layout-sidebar-<cor> .layout-sidebar .logo:focus
         { box-shadow: 0 0 0 0.2rem rgba(255,255,255,.1) }

   Como clicar num link também dá foco, o halo ficava preso depois do clique
   (o clique navega, mas quando o destino é a própria página o foco volta para
   o logo e o halo aparece parado).

   Suprimido só quando o foco NÃO veio do teclado, igual à grid — quem navega
   por Tab continua vendo o logo destacado. O `:hover` translúcido continua
   valendo: ele é intencional, é o que substituiu o logo branco ilegível.

   Especificidade: a regra do tema tem 4 classes (0,4,0) e mora no
   layout-light.css, que é carregado DEPOIS deste arquivo — empate perde. O
   `body` na frente leva esta para (0,4,1) e resolve sem precisar repetir as
   13 variantes. */
body .layout-sidebar .logo:focus:not(:focus-visible) {
    box-shadow: none;
}

/* E o contrário: quem chega por Tab PRECISA ver onde está. O halo do tema é
   branco a 10% de opacidade e, medido no browser, chegava zerado
   (`rgba(0,0,0,0) 0 0 0 0`) — invisível de qualquer forma. Aqui o foco de
   teclado ganha um anel próprio, com contraste suficiente nas 13 variantes de
   cor do sidebar (branco sólido a 70% sobre fundo escuro, e o mesmo anel
   funciona na variante clara por causa da sombra externa).

   O `:focus` extra no seletor não é enfeite: a regra do tema tem 4 classes
   (0,4,0) e um `body .layout-sidebar .logo:focus-visible` fica em (0,3,1) —
   classe pesa mais que elemento, então o tema ganhava e este anel não
   aparecia (medido no browser). Com `:focus:focus-visible` são 4 classes mais
   o body, (0,4,1), que é o mesmo peso da regra do mouse logo acima. */
body .layout-sidebar .logo:focus:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, .7), 0 0 0 0.32rem rgba(0, 0, 0, .35);
    border-radius: 6px;
}

/* ===== Usuário logado no sidebar =====
   No espírito do Diamond: o tema não põe caixa nenhuma em volta da identidade
   (no demo dele o usuário mora no topbar, como avatar + nome, sem moldura).
   Aqui o bloco é o mesmo desenho, adaptado para o sidebar.

   As cores NÃO são cravadas: o tema pinta o texto do sidebar por variante, e o
   bloco antigo tinha #f0f7ff/#333 fixos — um cartão branco no darkgray, que é
   a variante padrão. Como o tema define a cor só nas folhas (o
   .layout-menu-container não carrega nada para herdar, conferido no browser),
   a saída é espelhar a organização dele: um padrão para os sidebars escuros —
   12 das 13 variantes — e a exceção para o claro. */
.layout-sidebar .inspx-usuario {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem .25rem;
    margin: .5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .9);
}

.layout-sidebar .inspx-usuario-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
}

.layout-sidebar .inspx-usuario-avatar .pi {
    font-size: 1rem;
    color: inherit;
}

/* min-width:0 é o que permite o ellipsis funcionar dentro do flex */
.layout-sidebar .inspx-usuario-textos {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.layout-sidebar .inspx-usuario-nome,
.layout-sidebar .inspx-usuario-login {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layout-sidebar .inspx-usuario-nome {
    font-weight: 600;
    font-size: .85rem;
}

.layout-sidebar .inspx-usuario-login {
    font-size: .74rem;
    opacity: .6;
}

/* a única variante de sidebar claro entre as 13 */
.layout-sidebar-white .layout-sidebar .inspx-usuario {
    border-bottom-color: rgba(0, 0, 0, .1);
    color: rgba(0, 0, 0, .8);
}

.layout-sidebar-white .layout-sidebar .inspx-usuario-avatar {
    background: rgba(0, 0, 0, .08);
}

/* Formulário público de página inteira (entre em contato, denúncia...).
   O `.login-panel` do tema é a COLUNA ESTREITA do login, ao lado da arte:
   `width: 30%` + `height: 100%` + `align-items: center`. Numa tela que só tem
   o painel, isso espreme o formulário num terço da janela e um `max-width`
   inline não adianta nada — quem manda é o `width: 30%` (visto na tela).
   Este modificador devolve a largura e alinha ao topo, sem tocar no login. */
.login-body .login-wrapper .login-panel.painel-formulario {
    width: 100%;
    max-width: 52rem;
    height: auto;
    margin: 0 auto;
    align-items: stretch;
    text-align: left;
}

.login-body .login-wrapper .login-panel.painel-formulario > * {
    width: 100%;
}

/* ========== IMPRESSÃO ========== */
@media print {
    .layout-sidebar,
    .layout-topbar,
    .layout-footer,
    .hint-ajuda,
    .ajuda-pagina-gatilho {
        display: none;
    }

    .layout-content-wrapper {
        margin: 0;
    }
}