/**
 * 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 (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
   a vigilância 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;
}

/* O <li> do menu do perfil é display:flex (layout do Diamond): sem isto o <a> —
   e o <h:form> que embrulha os p:commandLink de "Trocar senha" e "Sair" —
   encolhem até o texto, o destaque do hover pega só a palavra e clicar no resto
   da linha não faz nada ("Sair não funciona"). */
.layout-topbar .profile-menu li > a,
.layout-topbar .profile-menu li > form {
    flex: 1 1 auto;
    min-width: 0;
}

.layout-topbar .profile-menu li form a {
    width: 100%;
    box-sizing: border-box;
}

.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 responsável do produto 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 (requisito,
   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 (o responsável do produto 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 (requisito, 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, 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;
    }
}

/* =============================================================================
   Menu compacto (layout-slim) — o sidebar cai para 6rem e mostra só ícones.
   O tema Diamond já esconde o nome do app e o texto das raízes; o que ele não
   conhece são os nossos dois blocos próprios do topo do sidebar. Sem isto, o
   nome do usuário e o combo de município ficam espremidos e ilegíveis nos 6rem.
   Escopo igual ao do tema: só em desktop, que é onde o slim vale.
   ============================================================================= */
@media screen and (min-width: 992px) {
    /* mesmo critério da Caixa de Entrada: o nome/login já está no topbar
       (menu do perfil), repetir no sidebar só rouba os 6rem estreitos do slim */
    .layout-wrapper.layout-slim .layout-sidebar .inspx-usuario {
        display: none;
    }

    /* o seletor de município não cabe em 6rem; quem precisa trocar de município
       sai da tela compacta (ou usa o menu do perfil no topbar) */
    .layout-wrapper.layout-slim .layout-sidebar .sidebar-selector {
        display: none;
    }
}

/* ========== FORMULÁRIO COMO CARD DO DIAMOND (2026-09-18) ========== */
/* Sem estilo, o <fieldset> dos formulários ficava com a borda "groove" cinza do
   navegador. Mesmo visual do .card do Diamond (layout-*.css); --surface-card
   vem do tema PrimeFaces e acompanha os esquemas light/dim/dark. */
.fieldset_group_fields {
    margin: 0 0 2rem 0;
    padding: 1.25rem;
    border: 0 none;
    border-radius: 4px;
    background: var(--surface-card, #ffffff);
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}

.fieldset_group_fields:last-child {
    margin-bottom: 0;
}

/* Dentro de aba ou diálogo o painel já é a superfície branca (como no
   Diamond): card dentro dele viraria moldura dupla. */
.ui-tabs-panel .fieldset_group_fields,
.ui-dialog-content .fieldset_group_fields {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* ========== DATEPICKER COM ÍCONE EM COLUNA ESTREITA ========== */
/* Mesmo problema no p:datePicker showIcon com "w-full": o <input> fica com a
   largura default (~193px) e, em coluna estreita (ex.: md:col-2), o
   botão do calendário quebra para baixo e o campo invade a coluna vizinha. */
.ui-calendar.ui-trigger-calendar.w-full {
    display: flex;
}

.ui-calendar.ui-trigger-calendar.w-full > .ui-inputfield {
    flex: 1 1 0;
    min-width: 0;
}

/* ========== DIALOG: PRIMEFACES 16 × DIAMOND 15 ========== */
/* No PF 16 o .ui-dialog virou a camada de rolagem (tela inteira) e a caixa
   passou para o .ui-dialog-box. O Diamond 15 ainda estiliza o .ui-dialog como a
   caixa: sem isto a camada fica do tamanho da caixa e o JS posiciona a caixa em
   relação a ela, fora da tela. Estrutura copiada do tema saga do PF 16; a
   sombra/raio são os do Diamond. Remover quando vier o Diamond para o PF 16. */
body.ui-dialog-open {
    position: relative;
}

body .ui-dialog {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    /* a camada cobre a tela: em dialog não modal ela não pode engolir os cliques */
    pointer-events: none;
}

body .ui-dialog.ui-overflow-hidden,
body .ui-dialog.ui-dialog-absolute,
body .ui-dialog.ui-dialog-fitviewport {
    overflow-y: hidden;
}

body .ui-dialog .ui-dialog-box {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 0 none;
    border-radius: 4px;
    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
    pointer-events: auto;
}

body .ui-dialog.ui-dialog-absolute .ui-dialog-box {
    position: absolute;
}

/* O width do <p:dialog> vai para a caixa (o `style` vai para a camada de tela cheia:
   um diálogo com style="width:.." abria encostado na esquerda). Em tela estreita a
   caixa não passa da largura útil da camada. */
body .ui-dialog .ui-dialog-box {
    max-width: 100%;
}

/* ========== ROLAGEM DO MENU LATERAL ========== */
/* O scroll do menu não passa para a página quando chega no fim, e a barra fica
   fina e discreta (cinza neutro serve nos esquemas claro e escuro). A posição é
   guardada/restaurada pelo layout.js (sessionStorage) e por um script logo após o
   menu no sidebar.xhtml, para não aparecer no topo e "pular" a cada página. */
.layout-sidebar .layout-menu-container {
    overscroll-behavior: contain;
    scroll-behavior: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(127, 127, 127, 0.35) transparent;
}

/* Escondido só até o layout.js restaurar a posição (no máximo 1,5 s): sem isto o
   primeiro quadro pintado mostra o menu no topo e ele "pula" logo depois. */
html.menu-restaurando .layout-sidebar .layout-menu-container {
    visibility: hidden;
}

.layout-sidebar .layout-menu-container::-webkit-scrollbar {
    width: 6px;
}

.layout-sidebar .layout-menu-container::-webkit-scrollbar-track {
    background: transparent;
}

.layout-sidebar .layout-menu-container::-webkit-scrollbar-thumb {
    background: rgba(127, 127, 127, 0.35);
    border-radius: 3px;
}

.layout-sidebar .layout-menu-container::-webkit-scrollbar-thumb:hover {
    background: rgba(127, 127, 127, 0.6);
}

/* Diálogo longo (ex.: cadastro de veículo): o p:dialog do PrimeFaces 16 não tem
   mais o atributo contentStyle; a rolagem do conteúdo passa por esta classe. */
.dlg-rolavel .ui-dialog-content {
    max-height: 72vh;
    overflow: auto;
}

/* "Enviar documento pelo celular": diálogo do QR code (templates/captura-celular-dialog.xhtml) */
.captura-alvo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.6rem 0.8rem;
    background: rgba(15, 118, 110, 0.08);
    border-radius: 8px;
}

.captura-celular {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.captura-qr {
    flex: 0 0 220px;
    width: 220px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.captura-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.captura-instrucoes ol {
    margin: 0 0 0.75rem 1.1rem;
    padding: 0;
    line-height: 1.5;
}

.captura-instrucoes li {
    margin-bottom: 0.4rem;
}

.captura-dica {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0.4rem 0;
}

.captura-link {
    font-family: monospace;
    font-size: 0.75rem;
    word-break: break-all;
    user-select: all;
}

.captura-status {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.captura-status > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.captura-recebidas {
    font-weight: 600;
}

.captura-recebidas .pi {
    margin-right: 0.35rem;
}

.captura-ok {
    justify-content: flex-start !important;
    color: var(--success-color);
    font-weight: 600;
}

.captura-ok .pi {
    font-size: 1.2rem;
}

.captura-expirado {
    color: #6b7280;
}

@media (max-width: 640px) {
    .captura-celular {
        flex-direction: column;
        align-items: center;
    }
}

/* Passo "Veículos" da licença de transporte (templates/solicitacao-veiculos-corpo.xhtml) */
.vs-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .8rem;
}
@media (max-width: 640px) {
    .vs-cabecalho { flex-direction: column; }
}
.vs-tabela-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    font-weight: 500;
}
.vs-tabela .ui-datatable tr.vs-marcado > td {
    background: var(--primary-50, #f0fdfa);
}
.vs-vazio {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1.2rem;
    border: 1px dashed var(--surface-border, #d1d5db);
    border-radius: 6px;
    color: #4b5563;
}
.ui-tag.vs-tag-neutra {
    background: var(--surface-200, #e5e7eb);
    color: #374151;
}

/* Opção em checkbox com explicação (ex.: "um alvará por atividade"): checkbox
   à esquerda, rótulo e ajuda empilhados à direita, afastada do bloco acima.
   O .field-checkbox do tema é flex numa linha só e espalhava rótulo e ajuda. */
.inspx-opcao-check {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px dashed var(--surface-border, #e5e7eb);
}

/* dentro de .ui-fluid o componente do checkbox pega width:100% e espreme o texto */
.inspx-opcao-check > :first-child {
    flex: 0 0 auto;
    width: auto !important;
    margin-top: .1rem;
}

.inspx-opcao-check > :last-child {
    flex: 1 1 auto;
    min-width: 0;
}

.inspx-opcao-check label {
    display: block;
    font-weight: 600;
    margin: 0;
    cursor: pointer;
}

.inspx-opcao-check small {
    display: block;
    margin-top: .2rem;
    color: var(--text-color-secondary, #6b7280);
    line-height: 1.4;
}

/* Cartão de veículo (licença de transporte): solicitação (portal e vigilância) e
   aba "Veículos e Licenças" do Prontuário — 2026-09-30 */
/* cartões "Veículos da solicitação" (templates/solicitacao-veiculos-resumo.xhtml) */
.vc-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: .9rem; }
.vc-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: .9rem 1rem; background: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,.04); display: flex; flex-direction: column; gap: .7rem; }
.vc-topo { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.vc-placa { display: inline-flex; flex-direction: column; border: 2px solid #1f2937; border-radius: 6px;
	overflow: hidden; min-width: 7.2rem; text-align: center; background: #fff; }
.vc-placa-faixa { background: #1e40af; color: #fff; font-size: .55rem; letter-spacing: .15em; font-weight: 700; padding: 1px 0; }
.vc-placa-num { font-family: "Courier New", monospace; font-weight: 700; font-size: 1.15rem; letter-spacing: .08em;
	color: #111827; padding: .1rem .4rem; }
.vc-ident { flex: 1 1 8rem; min-width: 0; }
.vc-modelo { font-weight: 600; color: #111827; font-size: 1rem; }
.vc-tipo { color: #6b7280; font-size: .85rem; display: flex; align-items: center; gap: .3rem; }
.vc-licenca { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; margin-left: auto; }
.vc-licenca small, .vc-dados small { color: #6b7280; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.vc-dados { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .9rem; color: #374151; }
.vc-dados span { display: flex; flex-direction: column; }
.vc-secao { border-top: 1px dashed #e5e7eb; padding-top: .6rem; }
.vc-secao-titulo { font-weight: 600; font-size: .88rem; color: #374151; margin-bottom: .4rem; }
.vc-doc { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem .6rem; border-radius: 8px;
	background: #f9fafb; margin-bottom: .4rem; flex-wrap: wrap; }
.vc-doc-icone { font-size: 1.1rem; margin-top: .15rem; color: #9ca3af; }
.vc-doc-validado .vc-doc-icone, .vc-doc-reaproveitado .vc-doc-icone { color: #16a34a; }
.vc-doc-enviado .vc-doc-icone { color: #2563eb; }
.vc-doc-recusado { background: #fef2f2; }
.vc-doc-recusado .vc-doc-icone { color: #dc2626; }
.vc-doc-falta_enviar { background: #fffbeb; }
.vc-doc-falta_enviar .vc-doc-icone { color: #d97706; }
.vc-doc-corpo { flex: 1 1 12rem; min-width: 0; }
.vc-doc-nome { font-weight: 600; color: #111827; font-size: .92rem; }
.vc-obrig { margin-left: .4rem; font-size: .7rem; font-weight: 600; color: #92400e; background: #fef3c7;
	border-radius: 999px; padding: .05rem .45rem; }
.vc-doc-situacao { font-size: .82rem; color: #4b5563; }
.vc-doc-arquivo { color: #6b7280; word-break: break-all; }
.vc-doc-acoes { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.vc-inspecao { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: #374151; }
@media (max-width: 640px) { .vc-lista { grid-template-columns: 1fr; } .vc-licenca { align-items: flex-start; margin-left: 0; } }
.vd-doc-veiculo { font-size: .78rem; color: #4b5563; margin-top: .15rem; }
.vc-rodape { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; border-top: 1px solid #f3f4f6; padding-top: .6rem; }
.vc-inativo { opacity: .65; }

/* Inspeção por veículo (licença de transporte, 2026-09-30): trilha de veículos,
   painel do veículo em foco e checklist "amigável" (opções como botões grandes) */
.iv-intro { color: #6b7280; margin: 0 0 .8rem; }
.iv-trilha { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
a.iv-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-radius: 10px;
	border: 2px solid #e5e7eb; background: #fff; color: #374151; text-decoration: none; }
a.iv-chip:hover { border-color: #9ca3af; }
a.iv-chip.ativo { border-color: var(--primary-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent); }
.iv-chip-num { display: inline-flex; width: 1.5rem; height: 1.5rem; border-radius: 50%; align-items: center; justify-content: center;
	background: #e5e7eb; font-size: .8rem; font-weight: 700; }
a.iv-chip.ativo .iv-chip-num { background: var(--primary-color); color: #fff; }
.iv-chip-placa { font-family: "Courier New", monospace; font-weight: 700; letter-spacing: .06em; }
.iv-chip-sit { font-size: .78rem; color: #6b7280; display: inline-flex; align-items: center; gap: .25rem; }
.iv-chip-concluida .iv-chip-sit, .iv-chip-dispensada .iv-chip-sit { color: #15803d; }
.iv-chip-aguardando_configuracao .iv-chip-sit, .iv-chip-aguardando_resposta .iv-chip-sit { color: #b45309; }
.iv-painel { border: 2px solid color-mix(in srgb, var(--primary-color) 35%, white); border-radius: 12px; background: #fff; margin-bottom: 1rem; }
.iv-cabecalho { position: sticky; top: 4.5rem; z-index: 5; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
	padding: .8rem 1rem; background: color-mix(in srgb, var(--primary-color) 7%, white); border-bottom: 1px solid #e5e7eb;
	border-radius: 10px 10px 0 0; }
.iv-cabecalho-texto { flex: 1 1 10rem; min-width: 0; }
.iv-cabecalho-titulo { font-weight: 700; font-size: 1.05rem; color: #111827; }
.iv-cabecalho-sub { font-size: .85rem; color: #4b5563; }
.iv-progresso { margin-left: auto; }
.iv-secao { padding: 1rem; }
.iv-pergunta { font-weight: 700; font-size: 1rem; margin-bottom: .5rem; color: #111827; }
.iv-botoes { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.iv-dica { color: #1e40af; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: .55rem .8rem; margin-bottom: .6rem; font-size: .9rem; }
.iv-espera, .iv-pronto { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.iv-espera > .pi, .iv-pronto > .pi { font-size: 1.8rem; }
.iv-espera > .pi { color: #d97706; }
.iv-pronto > .pi { color: #16a34a; }
.iv-espera > div, .iv-pronto > div { flex: 1 1 12rem; }
.iv-concluido-todos { display: flex; align-items: center; gap: .8rem; padding: 1rem; border-radius: 12px; background: #f0fdf4;
	border: 1px solid #bbf7d0; color: #166534; margin-bottom: 1rem; }
.iv-concluido-todos .pi { font-size: 1.8rem; }
.ck-amigavel .ck-pergunta-texto { font-size: 1rem; }
.ck-amigavel .ck-pergunta-num { display: inline-block; min-width: 1.6rem; color: var(--primary-color); }
/* PF 16: div.ui-selectoneradio > div.ui-g > div.ui-g-12 (caixa + label) — cada opção vira um botão */
.ck-amigavel .ui-selectoneradio, .ck-amigavel .ui-selectmanycheckbox { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; margin-top: .45rem; }
.ck-amigavel .ui-selectoneradio > .ui-g, .ck-amigavel .ui-selectmanycheckbox > .ui-g { margin: 0; display: block; }
.ck-amigavel .ui-selectoneradio > .ui-g > div, .ck-amigavel .ui-selectmanycheckbox > .ui-g > div {
	display: flex; align-items: center; gap: .55rem; width: auto; padding: .55rem 1rem; min-height: 2.9rem;
	border: 2px solid #d1d5db; border-radius: 10px; background: #fff; }
.ck-amigavel .ui-selectoneradio > .ui-g > div:has(.ui-state-active),
.ck-amigavel .ui-selectmanycheckbox > .ui-g > div:has(.ui-state-active) {
	border-color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 12%, white); font-weight: 600; }
.ck-amigavel .ui-selectoneradio label, .ck-amigavel .ui-selectmanycheckbox label { cursor: pointer; margin: 0; }
.iv-opcoes > .ui-g > div { padding-top: .3rem; padding-bottom: .3rem; }
.iv-todos { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.iv-todos .ui-chkbox { max-width: 100%; }
.iv-todos .ui-chkbox-label { white-space: normal; line-height: 1.35; }
@media (max-width: 640px) {
	.iv-cabecalho { top: 3.5rem; }
	.ck-amigavel .ui-selectoneradio > .ui-g, .ck-amigavel .ui-selectmanycheckbox > .ui-g { flex: 1 1 100%; }
}

/* checkbox com o rótulo colado na caixinha, mesmo dentro de área ui-fluid
   (conferência da inspeção, 2026-09-30) */
.ck-check .ui-chkbox { display: inline-flex; align-items: center; width: auto; max-width: 100%; }
.ck-check .ui-chkbox-label { white-space: normal; line-height: 1.35; margin-left: .5rem; }
.ck-check .ck-check-forte .ui-chkbox-label { font-weight: 600; }

/* Inclusão de RT: quem já responde pelo estabelecimento, acima do card (2026-09-30) */
.inspx-rt-atuais {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .5rem;
    padding: .6rem .8rem;
    border-radius: 6px;
    background: var(--surface-ground, #f8f9fa);
    font-size: .9rem;
}
.inspx-rt-atuais-rotulo {
    font-weight: 600;
    margin-right: .2rem;
}
.inspx-rt-atual {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--surface-card, #fff);
    border: 1px solid var(--surface-border, #dee2e6);
}
.inspx-rt-atual small {
    color: var(--text-color-secondary, #6b7280);
}
.inspx-rt-atuais-nenhum {
    color: var(--text-color-secondary, #6b7280);
}

/* Aba Responsáveis Técnicos: mudanças que processos em andamento ainda vão fazer */
.inspx-rt-em-processo {
    margin-top: 1.2rem;
    padding: .8rem 1rem;
    border-left: 4px solid var(--primary-color, #0f766e);
    border-radius: 6px;
    background: var(--surface-ground, #f8f9fa);
}
.inspx-rt-em-processo h6 {
    margin: 0 0 .2rem;
}


/* Assinatura eletrônica nas páginas públicas de conferência (2026-09-30) */
.assinatura-eletronica { margin-top: 1rem; border: 1px solid #0f766e; background: #f0fdfa; padding: .6rem .8rem;
	font-size: .9rem; line-height: 1.45; border-radius: 4px; }
.assinatura-eletronica-selo { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; color: #0f766e; }
.assinatura-eletronica-hash { font-family: monospace; font-size: .72rem; color: #475569; word-break: break-all; margin-top: .25rem; }

.assinatura-govbr { margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed #0f766e; }