/* Design components - overrides PrimeFaces 12 alinhados ao design system Visto.
   Referencia: docs/design.md
   Pre-requisito: design-tokens.css carregado antes deste. */

/* ============== Tipografia base ============== */

/* !important pra vencer o .ui-widget{font-family:Roboto !important} legado
   de estrutura.css -- sem isso, QUALQUER componente PrimeFaces (input,
   select, botao, dataTable, dialog...) carrega Roboto em vez do Rubik do
   design system, ja que praticamente todo widget do PF12 tem a classe
   .ui-widget e o legado usa !important (que so perde pra outro !important
   de especificidade igual ou maior, nunca pra uma regra sem !important). */
body,
.ui-widget,
.ui-widget-content,
.ui-widget-header,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: var(--font-sans) !important;
}

/* CRITICO: garante que TODOS os <i.fa>, .fa-*, .ui-menuitem-icon
   com classe FA continuam usando FontAwesome em qualquer lugar da
   app -- regras .ui-widget acima sobrescrevem por ordem de cascata
   sem !important. Aplica globalmente, fora do contexto de tabela. */
i.fa,
.fa,
i[class*="fa-"],
[class*="fa-"]:not(button):not(input):not(div):not(form):not(td):not(th):not(span.menu-separator):not(li.menu-separator),
.ui-menuitem-icon.fa,
.ui-menuitem-icon[class*="fa-"],
.iconeTable,
.iconeTela,
.ia-menu-icon {
  font-family: "FontAwesome" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100%;
  /* garante que nao sobre nenhum pixel com a cor default do navegador
     (branco) ou com o body{background:#e2ecf2 !important} legado de
     estrutura.css durante o "assentamento" do position:sticky do
     topbar ao rolar a pagina. */
  background-color: var(--muted);
}

body {
  color: var(--foreground);
  /* font-family ja vem !important do bloco .ui-widget/body acima */
  font-size: var(--text-base);
  line-height: 1.5;
  /* !important pra vencer o body{background-color:#e2ecf2 !important}
     legado de estrutura.css -- sem isso, esse azul-acinzentado antigo
     aparece como uma faixa visivel acima do topbar sticky ao rolar a
     pagina (o body e o container flex por tras do #layout-topbar, e
     a cor errada fica exposta na borda entre eles). */
  background-color: var(--muted) !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh;
  /* 100vh no mobile conta a area atras da barra de enderece do navegador,
     entao um filho com flex:1 + overflow:auto (ex: .login-page) calcula
     espaco disponivel demais e corta conteudo sem sobrar scroll pra
     compensar. 100dvh (dynamic viewport height) reflete a altura visivel
     de verdade e e ignorado em navegadores que nao suportam, mantendo o
     100vh como fallback. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Forms utilitarios do JSF (ex: id="j_idt8", com links de notificacao/
   avatar ocultos) sao renderizados como filhos diretos do body, antes
   do #layout-topbar. O <form> tem margin-bottom:14px por padrao no
   UA stylesheet do navegador -- mesmo vazio/invisivel, esse margin
   conta como espaco de flex-item e empurra o topbar pra baixo,
   expondo uma faixa cinza (background do body) acima dele. */
body > form {
  margin: 0 !important;
}

/* Rodape "grudado" no fim da tela mesmo em paginas com pouco conteudo -
   #layout-portlets-cover envolve o form principal + o footer, entao ele
   cresce pra ocupar o espaco livre (flex:1) e o footer fica no fim dele. */
#layout-portlets-cover {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#layout-portlets-cover > form#formPrincipal {
  flex: 1;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--foreground);
  font-family: var(--font-sans);
  font-weight: 600;
}

a {
  color: var(--primary);
}

a:hover {
  color: #2a4d7c;
}

/* <label> generico. estruturaLaudo.css (e, ate hoje, estrutura.css)
   forcam label{font-weight:bold !important; line-height:34px;
   font-size:12px} -- isso pegava o texto de checkbox/radio
   (.ui-chkbox-label), o <label> que varias telas poem no headerText da
   coluna e qualquer p:outputLabel. Mesma especificidade (0,0,1) + mesmo
   !important, carregado depois = vence. */
label {
  font-weight: 500 !important;
  line-height: 1.4;
  font-family: var(--font-sans);
}

/* Rotulo de checkbox / radio / switch: texto de body (14px/400), nao
   label de campo. Vence .ui-chkbox-label{font-weight:bold !important;
   font-size:12px !important} do legado. */
.ui-chkbox-label,
.ui-selectoneradio label,
.ui-selectmanycheckbox label,
.ui-selectbooleancheckbox label {
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  color: var(--foreground) !important;
  line-height: 1.4 !important;
  vertical-align: middle;
}

/* .Fs10..Fs130 (core-layout.css, !important, redefinidos em 3
   breakpoints) sao legitimos em icones e titulos, mas 49 telas tambem
   aplicam em botao/input/celula -- ai quebram a caixa unica do design
   system. Neutraliza SO quando a classe esta no proprio botao/campo/
   celula (descendentes, como <i class="fa Fs20"> dentro do td, seguem
   valendo). Especificidade (0,2,1)+ > (0,1,0) do .FsNN. */
html body .ui-button[class*="Fs"],
html body .ui-button[class*="Fs"] .ui-button-text,
html body .ui-inputfield[class*="Fs"],
html body .ui-selectonemenu[class*="Fs"],
html body .ui-selectonemenu[class*="Fs"] .ui-selectonemenu-label,
html body .ui-datatable .ui-datatable-data > tr > td[class*="Fs"] {
  font-size: var(--text-sm) !important;
}

html body .ui-datatable thead > tr > th[class*="Fs"] .ui-column-title {
  font-size: var(--text-2xs) !important;
}

/* ============== TOPBAR (azul-marinho, 72px - tudo em UMA linha) ==============
   Era 64px; usuario relatou que ficou "estreito demais" -- aumentado pra dar
   mais folga (referencia: header do app.powercrm.com.br mede ~58px, mas o
   Visto tem mais itens/icones no topbar, entao 72px fica mais confortavel
   sem parecer desproporcional). Logo/itens acompanham via height:100%. */

#layout-topbar {
  height: 72px !important;
  width: 100% !important;
  margin: 0 !important;
  /* --topbar-bg/--topbar-fg (design-tokens.css) = --primary/branco por
     padrao; o contratante com "Cor do Header" cadastrada sobrescreve os
     dois via layout/brandContratante.xhtml (Trello yO6XEL8T). Os brancos
     translucidos do topo abaixo derivam de --topbar-fg com color-mix
     (linha anterior e o fallback pra navegador sem color-mix). */
  background-color: var(--topbar-bg) !important;
  color: var(--topbar-fg) !important;
  box-shadow: var(--shadow-sm) !important;
  position: sticky !important;
  top: 0 !important;
  /* var(--z-sticky) = 900: ABAIXO dos overlays inline do PF12 (>= 1001).
     Era 9000 e cobria a titlebar/X de qualquer dialog alto. O topbar cria
     contexto de empilhamento proprio, entao ul.submenu (9999 la dentro,
     mesmo position:fixed) e a gaveta mobile ficam acima da pagina mas
     abaixo dos dialogs automaticamente. */
  z-index: var(--z-sticky, 900) !important;
  overflow: visible !important;
  border: none !important;
  flex-shrink: 0 !important;
}

#layout-topbar-menu,
#layout-topbar-indent,
#layout-topbar-menu > li {
  overflow: visible !important;
}

#layout-topbar-indent {
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex !important;
  align-items: center;
  padding-right: 16px;
  position: relative;
  gap: 0;
}

/* Logo a esquerda em "ilha" branca */
#layout-topbar-indent > a:first-of-type {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: white;
  padding: 0 20px;
  min-width: 150px;
  flex-shrink: 0;
}

/* topbar.xhtml tem um <p:spacer width="35"/> ao lado da logo, que o PF renderiza
   como <img width="35" height="1">. Num container centralizado, o conjunto
   "logo + spacer" e que fica no centro -- a logo sozinha cai ~17px a esquerda
   (medido: -17 no desktop, -18 no mobile). Some com o espacador: quem centraliza
   e o flex. */
#layout-topbar-indent > a:first-of-type img:not(.logoSavCliente) {
  display: none !important;
}

/* Trello 3f1PbHLT (retorno): com as duas logos na ilha, a do cliente ficava colada na
   do Visto. O <p:spacer> que separava as duas esta escondido logo acima (era ele que
   descentralizava a logo sozinha), e a ilha e flex sem gap. Espacamento passa a vir
   do proprio flex, e a segunda logo ganha o separador vertical que o layout antigo
   tinha (.separatorLogo). O seletor "~" so casa quando ha DUAS logos: com "Ocultar a
   Logo do Visto" marcada, a do cliente fica sozinha e sem separador, que e o certo. */
#layout-topbar-indent > a:first-of-type {
  gap: 14px;
}

#layout-topbar-indent .logoSavCliente ~ .logoSavCliente {
  padding-left: 14px !important;
  border-left: 1px solid var(--border);
}

#layout-topbar-indent .logoSavCliente {
  height: 32px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  /* estrutura.css tem .logoSavCliente com margin-top:15px e
     margin-left:-10px (regra legada, pre-design-system) -- isso
     empurra a logo pra baixo/esquerda dentro do container flex
     centralizado, tirando ela do centro. Zera pra deixar o
     align-items/justify-content do container centralizar de verdade. */
  margin: 0 !important;
  padding: 0 !important;
}

/* Menu da topbar (lado direito) */
#layout-topbar-menu {
  list-style: none;
  display: flex !important;
  align-items: center;
  height: 100%;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  gap: 4px;
  float: none !important;
  max-width: none !important;
  flex-shrink: 0;
}

#layout-topbar-menu > li {
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
}

#layout-topbar-menu > li > a,
#layout-topbar-menu > li > h\:form > a,
#layout-topbar-menu > li > form > a {
  display: flex !important;
  align-items: center !important;
  gap: 6px;
  padding: 8px 12px;
  color: var(--topbar-fg) !important;
  color: color-mix(in srgb, var(--topbar-fg) 85%, transparent) !important;
  text-decoration: none !important;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

#layout-topbar-menu > li > a:hover,
#layout-topbar-menu > li form a:hover {
  background-color: color-mix(in srgb, var(--topbar-fg) 10%, transparent) !important;
  color: var(--topbar-fg) !important;
}

/* Icones FontAwesome dentro dos items */
#layout-topbar-menu > li i.fa {
  color: var(--topbar-fg) !important;
  color: color-mix(in srgb, var(--topbar-fg) 85%, transparent) !important;
  font-size: 16px;
}

#layout-topbar-menu > li i.fa.red,
#layout-topbar-menu > li i.fa.green,
#layout-topbar-menu > li i.fa.blue,
#layout-topbar-menu > li i.fa.orange {
  color: var(--topbar-fg) !important;
}

/* Separadores verticais entre items */
#layout-topbar-menu .menu-separator {
  color: var(--topbar-fg) !important;
  color: color-mix(in srgb, var(--topbar-fg) 25%, transparent) !important;
  font-size: 14px !important;
  display: flex;
  align-items: center;
  padding: 0 4px;
  pointer-events: none;
}

/* Texto "Olá, fulano" e similares */
#layout-topbar-menu .topbarItem {
  color: inherit !important;
  font-size: var(--text-sm) !important;
  font-weight: 500;
}

/* Submenus (hover dropdowns) */
#layout-topbar-menu ul.submenu {
  list-style: none;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  min-width: 200px;
  background-color: var(--card) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  margin: 4px 0 0 0 !important;
  padding: 4px 0 !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
  z-index: 9999 !important;
  pointer-events: none;
  display: block !important;
}

#layout-topbar-menu ul.submenu.openSubMenu,
#layout-topbar-menu > li:hover > ul.submenu,
#layout-topbar-menu > li:focus-within > ul.submenu {
  pointer-events: auto;
}

#layout-topbar-menu ul.submenu.openSubMenu,
#layout-topbar-menu > li:hover > ul.submenu,
#layout-topbar-menu > li:focus-within > ul.submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Buffer invisivel entre item e submenu para hover nao perder o foco no gap */
#layout-topbar-menu > li:hover::after,
#layout-menu > li:hover::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
}

#layout-topbar-menu ul.submenu li {
  list-style: none;
}

#layout-topbar-menu ul.submenu li a {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 16px !important;
  color: var(--foreground) !important;
  font-size: var(--text-sm) !important;
  text-decoration: none !important;
  width: 100%;
  background: none !important;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

#layout-topbar-menu ul.submenu li a:hover {
  background-color: var(--accent) !important;
}

#layout-topbar-menu ul.submenu li i.fa {
  color: var(--muted-foreground) !important;
  font-size: 14px;
}

/* Notification bubble (badge vermelho) */
#layout-topbar-menu .notification-bubble {
  position: absolute;
  top: 6px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background-color: var(--destructive) !important;
  color: white !important;
  font-size: 10px !important;
  font-weight: 600;
  border-radius: 9999px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Botao mobile menu -- um so, abre uma gaveta (#mobile-drawer) que
   empilha as duas listas (navegacao + conta/notificacoes). Existia um
   segundo botao/gaveta ("Opcoes", #mobile-menu-button-gray) so pra
   #layout-topbar-menu -- na pratica ficava dificil de notar/alcancar
   no celular e duplicava toda a logica de toggle, entao foi unificado
   num botao so; o elemento continua no XHTML por compatibilidade mas
   fica sempre oculto. */
#mobile-menu-button {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  color: var(--topbar-fg);
  background: color-mix(in srgb, var(--topbar-fg) 10%, transparent);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  flex-shrink: 0;
  margin-left: auto;
}

#mobile-menu-button-gray {
  display: none !important;
}

/* #mobile-drawer envolve as duas listas (ver topbar.xhtml). No
   desktop e "invisivel" pro layout (display:contents), entao
   #layout-menu/#layout-topbar-menu continuam filhos diretos de
   #layout-topbar-indent exatamente como antes -- zero mudanca visual
   fora do modo mobile. */
#mobile-drawer {
  display: contents;
}

#menu-mask {
  display: none;
}

@media (max-width: 1024px) {
  #mobile-menu-button {
    display: inline-flex !important;
  }

  /* Logo mais compacta no mobile pra sobrar espaco confortavel pro
     botao de menu ao lado -- antes o botao ficava espremido contra a
     "ilha" branca da logo (min-width:150px fixo, pensado pro desktop). */
  #layout-topbar-indent > a:first-of-type {
    min-width: 0 !important;
    padding: 0 12px !important;
  }
  /* estrutura.css tem VARIOS ".logoSavCliente{display:none}" espalhados
     em breakpoints antigos (540/780/960px, framework fluido legado) --
     tem que forcar display de volta aqui, especificidade sozinha nao
     basta porque essas regras nunca disputam largura/altura comigo,
     so o display, que eu nao tocava. */
  #layout-topbar-indent .logoSavCliente {
    display: inline-block !important;
    height: 22px !important;
    max-width: 96px !important;
  }

  /* "html body #x" (especificidade 1 id + 2 tipos) em vez de so "#x"
     (1 id) e de proposito: existe uma regra INCONDICIONAL mais abaixo
     no arquivo (#layout-menu{display:flex!important}, fora de
     qualquer media query) que, tendo a MESMA especificidade de um
     "#layout-menu" solto e vindo DEPOIS no arquivo, venceria essa
     regra de esconder aqui independente do tamanho de tela (ordem no
     cascade desempata quando a especificidade e igual). Os tipos
     extra elevam a especificidade o suficiente pra ganhar sempre,
     sem depender de onde cada regra fica no arquivo. */
  html body #layout-menu,
  html body #layout-topbar-menu {
    display: none !important;
  }

  /* .mobile-menu-open fica no <body> (nao em cada lista), setada por
     VistoMenu.bindMobileToggle em layout.js. Um unico estado
     compartilhado, com especificidade maior que a regra plana acima
     -- ganha o empate mesmo os dois usando !important -- e assim as
     duas listas abrem/fecham juntas, empilhadas dentro do mesmo
     #mobile-drawer, com um so botao. */
  body.mobile-menu-open #mobile-drawer {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: var(--topbar-height, 72px);
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    background: var(--background) !important;
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-lg);
  }

  body.mobile-menu-open #layout-menu,
  body.mobile-menu-open #layout-topbar-menu {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    position: static !important;
    width: 100%;
    overflow: visible;
    white-space: normal;
  }

  /* Separador visual entre as duas secoes empilhadas (nav e conta) */
  body.mobile-menu-open #layout-topbar-menu {
    border-top: 1px solid var(--border);
    padding-top: 4px;
    margin-top: 4px;
  }

  body.mobile-menu-open #menu-mask {
    display: block;
    position: fixed;
    top: var(--topbar-height, 72px);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: calc(var(--z-dropdown) - 1);
  }

  /* Dentro da gaveta empilhada, os icones/texto de #layout-topbar-menu
     precisam ficar escuros (fundo agora e --background claro, nao mais
     a barra azul) -- as regras do desktop pintam tudo de branco. */
  body.mobile-menu-open #layout-topbar-menu > li > a,
  body.mobile-menu-open #layout-topbar-menu > li form a {
    color: var(--foreground) !important;
    padding: 12px 20px !important;
    /* Desktop usa width:36-40px + justify-content:center (botao so
       de icone) -- com o texto de volta (ver .topbarItem/span acima),
       um conteudo bem mais largo que 40px fica centralizado NESSA
       caixa estreita e vaza pros dois lados, cortando o começo do
       texto ("Configurações" virava "onfigurações"). Precisa virar
       um item de lista normal, com o icone-e-texto alinhados a
       esquerda dentro da largura toda da gaveta. */
    width: 100% !important;
    height: auto !important;
    justify-content: flex-start !important;
    white-space: normal !important;
  }
  body.mobile-menu-open #layout-topbar-menu > li > a > i.fa,
  body.mobile-menu-open #layout-topbar-menu > li form a > i.fa {
    color: var(--muted-foreground) !important;
  }
  body.mobile-menu-open #layout-topbar-menu .menu-separator,
  body.mobile-menu-open #layout-topbar-menu li[class*="ellipsis-v"] {
    display: none !important;
  }

  /* No desktop o #layout-topbar-menu mostra so icones (ver comentario
     "PowerCRM mostra apenas sino e avatar" mais abaixo neste arquivo) --
     .topbarItem, a seta do dropdown do usuario e os spans de "Ola, X"/
     "Creditos" ficam display:none!important de proposito. Dentro da
     gaveta mobile precisam voltar a aparecer, senao vira so um icone
     sem nenhum texto (ex: "Ola, Bruno" some, sobra so o avatar+seta). */
  body.mobile-menu-open #layout-topbar-menu .topbarItem,
  body.mobile-menu-open #layout-topbar-menu a > span[style*="font-size: 18px"],
  body.mobile-menu-open #layout-topbar-menu a > span[style*="font-size:18px"],
  body.mobile-menu-open #layout-topbar-menu a > span[style*="font-size: 15px"],
  body.mobile-menu-open #layout-topbar-menu a > span[style*="font-size:15px"] {
    display: inline !important;
    color: var(--foreground) !important;
  }
  body.mobile-menu-open #layout-topbar-menu a .fa-chevron-down,
  body.mobile-menu-open #layout-topbar-menu a .fa-caret-down {
    display: inline-block !important;
    color: var(--muted-foreground) !important;
  }

  /* #layout-menu > li/a sao pensados pro topbar azul horizontal
     (texto branco, border-bottom de destaque, height:100% da barra) --
     dentro da gaveta empilhada isso fica ilegivel (texto branco em
     fundo claro) e sem altura definida. */
  body.mobile-menu-open #layout-menu > li {
    height: auto;
    width: 100%;
    display: block;
  }
  body.mobile-menu-open #layout-menu > li > a {
    height: auto !important;
    width: 100%;
    color: var(--foreground) !important;
    padding: 14px 20px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }
  body.mobile-menu-open #layout-menu > li > a:hover {
    background: var(--accent) !important;
    border-bottom-color: var(--border) !important;
  }

  /* Mesmo problema, mesmo fix, agora pro #layout-topbar-menu (a
     "Configuracoes" ficava sobrepondo o item anterior porque o
     height:100% do desktop -- pensado pra caber na barra de 72px --
     nao faz sentido dentro do fluxo vertical da gaveta). */
  body.mobile-menu-open #layout-topbar-menu > li {
    height: auto;
    width: 100%;
    display: block;
    position: static;
  }
}

/* ============== LAYOUTMENU (inline no topbar, expandindo) ============== */

#layout-menu {
  list-style: none;
  display: flex !important;
  align-items: center;
  height: 100%;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 8px !important;
  /* overflow-x:auto (scroll horizontal sem barra visivel) em vez de
     overflow:visible -- com muitos items o menu nao cabe e passa a
     SOBREPOR os icones da direita (#layout-topbar-menu) em vez de so
     "vazar" pra fora. O scroll horizontal era a forma de "expandir"
     o menu quando ele nao cabe (ver historico: commit 74f27e8a7 trocou
     isso por overflow:visible so pra resolver o corte do submenu, e
     ja documentava esse trade-off). Os submenus (ul.submenu) agora
     usam position:fixed calculado via JS (VistoMenu.positionSubmenu)
     pra escapar desse clip sem precisar de overflow:visible aqui. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  white-space: nowrap;
  background-color: transparent !important;
}

#layout-menu::-webkit-scrollbar {
  height: 0;
  display: none;
}

#layout-menu > li {
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
  flex-shrink: 0;
}

/* Item de menu no padrao PowerCRM:
   apenas texto, border-bottom branco no ativo/hover, sem fundo. */
#layout-menu > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 4px;
  height: 100%;
  padding: 0 4px !important;
  color: var(--topbar-fg) !important;
  text-decoration: none !important;
  font-size: var(--text-sm) !important;
  font-weight: 500;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: border-color var(--transition-fast);
  white-space: nowrap;
  cursor: pointer;
  margin: 0 12px;
}

#layout-menu > li > a:hover {
  background: transparent !important;
  border-bottom-color: var(--topbar-fg) !important;
  color: var(--topbar-fg) !important;
}

#layout-menu > li > a.active,
#layout-menu > li.active > a {
  background: transparent !important;
  border-bottom-color: var(--topbar-fg) !important;
  color: var(--topbar-fg) !important;
}

/* PowerCRM nao tem icones nos items principais do menu - escondemos
   TODOS os icones FontAwesome dentro dos links do menu central. */
#layout-menu i.fa,
#layout-menu a i[class*="fa-"] {
  display: none !important;
}

/* No #layout-topbar-menu (lado direito) o PowerCRM mostra apenas sino
   e avatar. Escondemos os textos (Sair / Configuracoes / Mensagens /
   Agenda / Olá Fulano) e a seta chevron-down do dropdown do usuario,
   mantendo apenas os icones como botoes compactos. */
#layout-topbar-menu .topbarItem {
  display: none !important;
}

#layout-topbar-menu a .fa-chevron-down,
#layout-topbar-menu a .fa-caret-down {
  display: none !important;
}

/* Texto "Olá, X" inserido via <h:outputText> com style font-size:18px */
#layout-topbar-menu a > span[style*="font-size: 18px"],
#layout-topbar-menu a > span[style*="font-size:18px"] {
  display: none !important;
}

/* Texto "Creditos" e valor monetario tambem somem */
#layout-topbar-menu a > span[style*="font-size: 15px"],
#layout-topbar-menu a > span[style*="font-size:15px"] {
  display: none !important;
}

/* PowerCRM mostra so SINO e AVATAR a direita, mas o Visto precisa manter
   o menu Configuracoes (engrenagem) que da acesso a Configuracao Vistoria,
   Usuario Admin e Alterar Senha -- nao tem equivalente no dropdown do
   avatar atualmente. Agenda e acesso secundario, por isso some daqui.
   O item "Sair" standalone foi removido diretamente no topbar.xhtml
   (nao mais escondido por CSS) -- esse ":has(a > i.fa-sign-out)" chegou
   a existir aqui, mas o dropdown do avatar TAMBEM tem um link "Sair"
   com o mesmo icone no proprio submenu, entao o seletor escondia o
   <li> do avatar inteiro (nome, "Minha Conta", Sair, tudo) por engano. */
#layout-topbar-menu > li:has(a > i.fa-calendar),
#layout-topbar-menu > li:has(form a > i.fa-calendar) {
  display: none !important;
}

/* Items do topbar-menu viram botoes quadrados 36x36 com so icone */
#layout-topbar-menu > li > a,
#layout-topbar-menu > li form a {
  width: 36px !important;
  min-width: 36px;
  height: 36px !important;
  padding: 0 !important;
  justify-content: center !important;
  border-radius: var(--radius-md) !important;
}

/* Trello Mgtn3kHV + 6eeuA9Vm: gap uniforme entre os botoes da direita e o
   item do usuario (icone + nome) com largura automatica, mesma altura dos
   demais; nome 13px/500 truncado (title do <a> tem o nome completo). */
#layout-topbar-menu {
  gap: 8px;
}

#layout-topbar-menu > li > a.topbar-user-link {
  width: auto !important;
  min-width: 36px;
  height: 36px !important;
  padding: 0 10px !important;
  gap: 8px;
  justify-content: flex-start !important;
}

/* chevron do usuario herdava os 18px dos icones-botao; 12px no mesmo eixo. */
#layout-topbar-menu > li > a.topbar-user-link > i.fa-chevron-down {
  font-size: 12px !important;
  opacity: 0.85;
}

#layout-topbar-menu .topbar-user-name {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: white;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
}

@media (max-width: 1024px) {
  body.mobile-menu-open #layout-topbar-menu .topbar-user-name {
    color: var(--foreground);
    max-width: none;
  }
}

#layout-topbar-menu > li > a:hover,
#layout-topbar-menu > li form a:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Icones dos botoes da direita (sino, engrenagem, etc.) - branco */
#layout-topbar-menu > li > a > i.fa,
#layout-topbar-menu > li form a > i.fa {
  color: white !important;
  font-size: 18px !important;
  display: inline-block !important;
}

/* Notification bubble (badge vermelho) reposicionado para o botao 36x36 */
#layout-topbar-menu .notification-bubble {
  top: 4px !important;
  right: -2px !important;
}

/* PowerCRM nao tem separadores entre items do menu (centro nem direita). */
#layout-menu .menu-separator,
#layout-topbar-menu .menu-separator,
#layout-topbar-menu li.menu-separator,
#layout-topbar-menu li[class*="ellipsis-v"] {
  display: none !important;
}

/* Submenus do layout-menu (mesmo padrao do topbar).
   position/top/left NAO sao !important de proposito: o JS
   (VistoMenu.positionSubmenu) sobrescreve com position:fixed e
   top/left calculados via getBoundingClientRect() do link pai, pra
   o submenu escapar do overflow-x:auto do #layout-menu (ver comentario
   la em cima). Os valores abaixo sao só o fallback antes do JS rodar. */
#layout-menu ul.submenu {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: auto !important;
  min-width: 220px;
  background-color: var(--card) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  margin: 4px 0 0 0 !important;
  padding: 4px 0 !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
  z-index: 9999 !important;
  pointer-events: none;
  display: block !important;
}

#layout-menu ul.submenu.openSubMenu,
#layout-menu > li:hover > ul.submenu,
#layout-menu > li:focus-within > ul.submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

#layout-menu ul.submenu li a {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 16px !important;
  color: var(--foreground) !important;
  font-size: var(--text-sm) !important;
  text-decoration: none !important;
  width: 100%;
  background: none !important;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

#layout-menu ul.submenu li a:hover {
  background-color: var(--accent) !important;
}

/* No mobile o submenu abre "in-place" (accordion, empurra o conteudo
   abaixo) em vez de flutuar via position:fixed calculado por JS -- esse
   calculo (VistoMenu.positionSubmenu) so roda no desktop agora (ver
   layout.js), entao aqui a gente sobrescreve o fallback posicionado
   pra virar fluxo normal dentro da gaveta vertical. */
@media (max-width: 1024px) {
  #layout-menu ul.submenu,
  #layout-topbar-menu ul.submenu {
    position: static !important;
    right: auto !important;
    left: auto !important;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: var(--muted) !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: 0;
    width: 100% !important;
    min-width: 0 !important;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: hidden;
    transition: max-height var(--transition-normal);
    pointer-events: auto;
  }

  #layout-menu ul.submenu.openSubMenu,
  #layout-topbar-menu ul.submenu.openSubMenu {
    max-height: 600px;
  }

  #layout-menu ul.submenu li a,
  #layout-topbar-menu ul.submenu li a {
    padding: 10px 20px 10px 40px !important;
    color: var(--foreground) !important;
  }
}

/* ============== Botoes - tamanho/forma uniformes ==============
   Padrao shadcn: default h-10 px-4 py-2 text-sm font-medium rounded-md.
   Aplicamos no .ui-button (PF) generico para todos os botoes ficarem
   do mesmo tamanho mesmo sem styleClass de variante. */

.ui-button,
button.ui-button,
a.ui-button,
.ui-commandbutton,
.ui-button-text-only,
.ui-button-text-icon-left,
.ui-button-text-icon-right {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 38px !important;              /* Power (medido 23/09): h38, padding 7.5/15, peso 500 em Inter */
  min-height: 38px !important;
  padding: 0 15px !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;          /* Rubik 500 pesa como negrito; 400 equivale ao 500 do Power */
  line-height: 1 !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  box-shadow: none !important;
  text-shadow: none !important;
  text-decoration: none !important;
}

/* texto interno do PF (.ui-button-text) nao deve forcar weight extra */
.ui-button .ui-button-text {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* botoes com so um icone (lupa, lapis, lixeira) ficam quadrados */
.ui-button.ui-button-icon-only,
.ui-button.btn-icon {
  width: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
}

.ui-button.ui-button-icon-only .ui-button-text,
.ui-button.btn-icon .ui-button-text {
  display: none !important;
}

/* Tamanho pequeno opcional (sm) */
.ui-button.btn-sm,
.ui-button.ui-button-sm {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  font-size: var(--text-sm) !important;
}

.ui-button.btn-sm.ui-button-icon-only,
.ui-button.btn-sm.btn-icon {
  width: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
}

/* ===== Variantes (so cor; tamanho ja aplicado acima) ===== */

.ui-button.btn-primary,
.ui-commandlink.btn-primary,
.ui-button.ui-button-primary,
.ui-button[class*="BlueButton"] {
  /* --btn-primary-* = --primary por padrao; "Cor do Botao"/"Cor Texto
     Botao" do contratante sobrescrevem (layout/brandContratante.xhtml). */
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-fg) !important;
  border-color: var(--btn-primary-bg) !important;
}

.ui-button.btn-primary:hover,
.ui-button.ui-button-primary:hover {
  background: var(--btn-primary-hover-bg, #2563EB) !important;
  border-color: var(--btn-primary-hover-bg, #2563EB) !important;
}

.ui-button.btn-success,
.ui-button.greenButton,
.ui-button.GreenButton {
  background: var(--visto-success) !important;
  color: white !important;
  border-color: var(--visto-success) !important;
}

.ui-button.btn-success:hover,
.ui-button.greenButton:hover,
.ui-button.GreenButton:hover {
  background: #16a34a !important;
  border-color: #16a34a !important;
}

.ui-button.btn-destructive,
.ui-button.RedButton,
.ui-button.redButton {
  background: var(--destructive) !important;
  color: white !important;
  border-color: var(--destructive) !important;
}

.ui-button.btn-destructive:hover,
.ui-button.RedButton:hover,
.ui-button.redButton:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

.ui-button.btn-warning,
.ui-button.OrangeButton,
.ui-button.orangeButton {
  background: var(--warning-icon) !important;
  color: white !important;
  border-color: var(--warning-icon) !important;
}

.ui-button.btn-warning:hover,
.ui-button.OrangeButton:hover,
.ui-button.orangeButton:hover {
  background: #b45309 !important;
  border-color: #b45309 !important;
}

.ui-button.btn-outline,
.ui-button.btn-secondary {
  background: var(--background) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
}

.ui-button.btn-outline:hover,
.ui-button.btn-secondary:hover {
  background: var(--muted) !important;
}

.ui-button.btn-ghost {
  background: transparent !important;
  color: var(--foreground) !important;
  border-color: transparent !important;
}

.ui-button.btn-ghost:hover {
  background: var(--muted) !important;
}

/* Botao default do PF (sem styleClass) ganha estilo "outline" para
   nao ficar sem cor/borda. :where() zera especificidade dos :not(),
   senao a cadeia de 5 :not() vira 0,0,6,0 e ganha das variantes
   coloridas (incluindo .ui-menubutton.GreenButton > button = 0,0,3,1).
   Inclui button.ui-button/a.ui-button para empatar com o regra-base
   da linha 522 (que casa "button.ui-button" = 0,0,1,1) e ganhar por
   ordem -- senao a borda transparente da regra-base prevalece. */
.ui-button:where(:not([class*="btn-"]):not([class*="redButton"]):not([class*="RedButton"]):not([class*="greenButton"]):not([class*="GreenButton"])),
button.ui-button:where(:not([class*="btn-"]):not([class*="redButton"]):not([class*="RedButton"]):not([class*="greenButton"]):not([class*="GreenButton"])),
a.ui-button:where(:not([class*="btn-"]):not([class*="redButton"]):not([class*="RedButton"]):not([class*="greenButton"]):not([class*="GreenButton"])) {
  background: var(--background) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
}

.ui-button:where(:not([class*="btn-"]):not([class*="redButton"]):not([class*="RedButton"]):not([class*="greenButton"]):not([class*="GreenButton"])):hover,
button.ui-button:where(:not([class*="btn-"]):not([class*="redButton"]):not([class*="RedButton"]):not([class*="greenButton"]):not([class*="GreenButton"])):hover,
a.ui-button:where(:not([class*="btn-"]):not([class*="redButton"]):not([class*="RedButton"]):not([class*="greenButton"]):not([class*="GreenButton"])):hover {
  background: var(--muted) !important;
  border-color: var(--muted-foreground) !important;
}

.ui-button.ui-state-disabled,
.ui-button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* Botoes do p:spinner (1 tela) vivem DENTRO da caixa do campo, empilhados
   a direita (nova-light: position:absolute; height:50%). A regra-base
   de .ui-button acima (40px, padding 0 16px) os estourava. */
.ui-spinner {
  display: inline-flex !important;
  position: relative !important;
  height: 40px;
  vertical-align: middle;
}

.ui-spinner .ui-spinner-button.ui-button {
  position: absolute !important;
  right: 0 !important;
  width: 28px !important;
  min-width: 0 !important;
  height: 50% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-left: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted-foreground) !important;
}

.ui-spinner .ui-spinner-button.ui-spinner-up { top: 0 !important; border-radius: 0 var(--radius-md) 0 0 !important; }
.ui-spinner .ui-spinner-button.ui-spinner-down { bottom: 0 !important; border-radius: 0 0 var(--radius-md) 0 !important; }

/* ===== Grupo de botoes de formulario (Salvar/Cancelar, Pesquisar/Novo/
   Limpar) =====
   Utilitaria .acoes-form + os dois markups legados que ja existem em
   ~150 telas: <div align="center"> com botoes e <div class="row"> so com
   botoes (sem .leftt). Ficam em flex centralizado com gap 8, sem
   depender de espaco em branco entre as tags. */
/* REVIEW-R0 R6: "html body .acoes-form"/".grid_12.acoes-form" porque
   html body .grid_12{display:flow-root !important} (0,1,2) vencia
   .acoes-form (0,1,0). R2: 17 telas usam <div class="grid_12"
   style="text-align:center"> + botoes, sem align -- entra no grupo. */
html body .acoes-form,
html body .grid_12.acoes-form,
html body div[align="center"]:has(> .ui-button),
html body div[align="center"]:has(> .ui-menubutton),
html body .grid_12:has(> .ui-button):not(:has(> .row)):not(:has(> .grid_6)):not(:has(> .ui-datatable)):not(.acoes-esquerda):not(.acoes-form-left),
html body .grid_12:has(> .ui-menubutton):not(:has(> .row)):not(:has(> .grid_6)):not(:has(> .ui-datatable)):not(.acoes-esquerda):not(.acoes-form-left),
html body .row:has(> .ui-button):not(:has(> .leftt)),
html body .row:has(> .ui-menubutton):not(:has(> .leftt)) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  height: auto !important;
  margin: 24px 0 0 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  text-align: center;
}

html body .acoes-form.acoes-form-right,
html body .grid_12.acoes-form-right,
html body div[align="right"]:has(> .ui-button) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 24px 0 0 0 !important;
}

html body .acoes-form.acoes-form-left,
html body .grid_12.acoes-form-left {
  justify-content: flex-start !important;
}

/* .acoes-form zera margin-bottom com !important e especificidade (0,1,2);
   estas variantes permitem respiro abaixo quando o proximo bloco e um card
   (Trello ztvbF7rS: Pesquisar/Adicionar colados na tabela de Configuracoes). */
/* Barra de acoes seguida de outro bloco (tabela, card, campos): respiro de 16px
   por padrao. As barras finais (rodape de modal, fim de formulario) nao tem irmao
   seguinte e continuam sem margem. Opt-out: .mb-0. (Trello: Pesquisar Usuarios
   com Pesquisar/Limpar colados na tabela; mesmo caso em ~110 telas.) */
html body .acoes-form:not(.mb-0):not(.mb-2):not(.mb-3):not(.mb-4):not(.mb-6):has(+ *),
html body div[align="center"]:has(> .ui-button):has(+ *),
html body div[align="right"]:has(> .ui-button):has(+ *),
html body .row:has(> .ui-button):not(:has(> .leftt)):has(+ *) {
  margin-bottom: 16px !important;
}
html body .acoes-form.mb-0 { margin-bottom: 0 !important; }
html body .acoes-form.mb-2 { margin-bottom: 8px !important; }
html body .acoes-form.mb-3 { margin-bottom: 12px !important; }
html body .acoes-form.mb-4 { margin-bottom: 16px !important; }
html body .acoes-form.mb-6 { margin-bottom: 24px !important; }

/* R2 fallback: qualquer container NAO-flex com 2+ botoes seguidos ganha
   8px entre eles (nos grupos flex acima o reset margin:0 !important dos
   filhos prevalece e o gap faz o espaco). */
#formPrincipal .ui-button + .ui-button,
#formPrincipal .ui-button + .ui-menubutton,
#formPrincipal .ui-menubutton + .ui-button,
.ui-dialog-content .ui-button + .ui-button,
.ui-dialog-content .ui-button + .ui-menubutton {
  margin-left: 8px;
}

/* se o mesmo <div align=center> tambem envolve uma tabela/painel
   (acontece em telas de pesquisa), esse filho ocupa a linha inteira. */
html body div[align="center"]:has(> .ui-button) > .ui-datatable,
html body div[align="center"]:has(> .ui-button) > .ui-panel,
html body div[align="center"]:has(> .ui-button) > .ui-fieldset,
html body div[align="center"]:has(> .ui-button) > fieldset,
html body div[align="center"]:has(> .ui-button) > table,
html body div[align="center"]:has(> .ui-button) > .ui-tabs,
html body div[align="center"]:has(> .ui-button) > .ui-accordion,
html body div[align="center"]:has(> .ui-button) > br {
  flex: 1 1 100% !important;
  width: 100% !important;
  text-align: left;
}

html body div[align="center"]:has(> .ui-button) > br {
  display: none;
}

/* margens legadas em botoes (estruturaLaudo: #formPrincipal .ui-button
   {clear:both; margin:10px 3px}) -- o gap do container ja espaça. */
html body .acoes-form > .ui-button,
html body .acoes-form > .ui-menubutton,
html body div[align="center"]:has(> .ui-button) > .ui-button,
html body div[align="center"]:has(> .ui-button) > .ui-menubutton,
html body .grid_12:has(> .ui-button):not(:has(> .row)):not(:has(> .grid_6)) > .ui-button,
html body .grid_12:has(> .ui-button):not(:has(> .row)):not(:has(> .grid_6)) > .ui-menubutton,
html body .row:has(> .ui-button):not(:has(> .leftt)) > .ui-button {
  margin: 0 !important;
  clear: none !important;
  float: none !important;
}

/* ===== MenuButton (PF) =====
   Estrutura: <span class="ui-menubutton GreenButton">
                <button class="ui-button ui-button-text-icon-left">
                  <span class="ui-button-icon-left ui-icon ui-icon-triangle-1-s">
                  <span class="ui-button-text">Nova Vistoria</span>
   A classe variante (GreenButton/RedButton) fica no <span> wrapper,
   nao no <button> -- entao precisa repassar pro filho. */

.ui-menubutton {
  display: inline-flex !important;
  align-items: center;
  vertical-align: middle;
  margin: 0 4px;
}

.ui-menubutton > button.ui-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  height: 38px !important;
  padding: 0 15px !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
  cursor: pointer;
  text-shadow: none !important;
  box-shadow: none !important;
  background: var(--background) !important;
  color: var(--foreground) !important;
}

/* Variantes de cor herdadas do <span> wrapper. Cobre tambem
   ui-state-active e :hover para nao perder cor no estado ativo. */
.ui-menubutton.GreenButton > button.ui-button,
.ui-menubutton.greenButton > button.ui-button,
.ui-menubutton.GreenButton > button.ui-button.ui-state-active,
.ui-menubutton.greenButton > button.ui-button.ui-state-active,
.ui-menubutton.GreenButton > button.ui-button.ui-state-hover,
.ui-menubutton.GreenButton > button.ui-button.ui-state-focus {
  background: var(--visto-success) !important;
  color: white !important;
  border-color: var(--visto-success) !important;
}

.ui-menubutton.GreenButton > button.ui-button:hover,
.ui-menubutton.greenButton > button.ui-button:hover {
  background: #16a34a !important;
  border-color: #16a34a !important;
}

.ui-menubutton.RedButton > button.ui-button,
.ui-menubutton.redButton > button.ui-button,
.ui-menubutton.RedButton > button.ui-button.ui-state-active {
  background: var(--destructive) !important;
  color: white !important;
  border-color: var(--destructive) !important;
}

.ui-menubutton.BlueButton > button.ui-button,
.ui-menubutton.BlueButton > button.ui-button.ui-state-active {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-fg) !important;
  border-color: var(--btn-primary-bg) !important;
}

/* Variantes do DS no p:menuButton (styleClass cai no <span> wrapper, nao
   no <button>): repassa caixa/cor pro filho. O wrapper em si fica sem
   borda/fundo (sem borda dupla). Caret herda a cor via currentColor. */
html body .ui-menubutton.btn-outline,
html body .ui-menubutton.btn-primary,
html body .ui-menubutton.btn-secondary,
html body .ui-menubutton.btn-destructive {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html body .ui-menubutton.btn-outline > button.ui-button,
html body .ui-menubutton.btn-secondary > button.ui-button,
html body .ui-menubutton.btn-outline > button.ui-button.ui-state-active,
html body .ui-menubutton.btn-outline > button.ui-button.ui-state-focus {
  background: var(--background) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
}

html body .ui-menubutton.btn-outline > button.ui-button:hover,
html body .ui-menubutton.btn-secondary > button.ui-button:hover,
html body .ui-menubutton.btn-outline > button.ui-button.ui-state-hover {
  background: var(--muted) !important;
  border-color: var(--muted-foreground) !important;
}

html body .ui-menubutton.btn-primary > button.ui-button,
html body .ui-menubutton.btn-primary > button.ui-button.ui-state-active,
html body .ui-menubutton.btn-primary > button.ui-button.ui-state-focus {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-fg) !important;
  border: 1px solid var(--btn-primary-bg) !important;
}

html body .ui-menubutton.btn-primary > button.ui-button:hover,
html body .ui-menubutton.btn-primary > button.ui-button.ui-state-hover {
  background: var(--btn-primary-hover-bg, #2563EB) !important;
  border-color: var(--btn-primary-hover-bg, #2563EB) !important;
}

html body .ui-menubutton.btn-destructive > button.ui-button,
html body .ui-menubutton.btn-destructive > button.ui-button.ui-state-active {
  background: var(--destructive) !important;
  color: #ffffff !important;
  border: 1px solid var(--destructive) !important;
}

html body .ui-menubutton.btn-destructive > button.ui-button:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

/* caret e icone do menubutton herdam a cor do botao */
html body .ui-menubutton[class*="btn-"] > button.ui-button > .ui-icon,
html body .ui-menubutton[class*="btn-"] > button.ui-button > .ui-button-text {
  color: inherit !important;
}

/* Seta CSS pra ui-icon-triangle-1-s em qualquer menubutton (nao so em td) */
.ui-menubutton > button .ui-icon.ui-icon-triangle-1-s {
  position: relative;
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  background: none !important;
  text-indent: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
}

.ui-menubutton > button .ui-icon.ui-icon-triangle-1-s::before {
  content: "" !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

/* Texto interno do menubutton (Nova Vistoria, etc.) */
.ui-menubutton > button .ui-button-text {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: inline-block !important;
}

/* ===== Icone dentro de botao = flex item =====
   nova-light poe o .ui-icon em position:absolute (left:.5rem) e
   compensa com padding-left 2rem no .ui-button-text; a regra-base do DS
   zera esse padding, e o resultado era o icone em cima da 1a letra
   ("⚙erenciar" no botao Gerenciar de Suporte > Contratantes; tambem
   quando a tela usa a classe PF5 "ui-button-text-icon-left" no
   styleClass). Em vez de recalcular paddings caso a caso, o icone vira
   um flex item normal do botao (que ja e inline-flex com gap): ordem do
   DOM = icone esquerdo antes do texto, direito depois. Vale pra botao
   comum, menubutton (caret vai pra direita via order) e icon-only
   (centralizado pelo justify-content). Os menubuttons de #tabelaResultado
   ja tinham position:static por regra propria mais abaixo. */
.ui-button > .ui-icon,
.ui-button > .ui-button-icon-left,
.ui-button > .ui-button-icon-right,
.ui-menubutton > button.ui-button > .ui-icon {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 1em;
  text-indent: 0 !important;
  background: none !important;
  flex: 0 0 auto !important;
  font-size: 14px;
  line-height: 1 !important;
}

/* excecao: o caret do menubutton (.ui-icon-triangle-1-s) e desenhado
   por um ::before absoluto dentro de uma caixa 12x12 position:relative
   (regras na secao MenuButton) -- nao pode virar static/auto. */
.ui-button > .ui-icon.ui-icon-triangle-1-s,
.ui-menubutton > button.ui-button > .ui-icon.ui-icon-triangle-1-s {
  position: relative !important;
  width: 12px !important;
  height: 12px !important;
}

.ui-button > .ui-button-icon-right,
.ui-menubutton > button.ui-button > .ui-button-icon-left {
  order: 2;
}

.ui-button > .ui-button-text {
  order: 1;
}

.ui-button.ui-button-text-icon-left,
.ui-button.ui-button-text-icon-right {
  gap: 8px !important;
}

/* o texto nao precisa mais de padding compensatorio em nenhum contexto */
.ui-button.ui-button-text-icon-left > .ui-button-text,
.ui-button.ui-button-text-icon-right > .ui-button-text,
.ui-menubutton > button > .ui-button-text {
  padding: 0 !important;
}

/* ===== Botoes/Acoes dentro de <td> =====
   Apenas o .btn-acao-lupa (commandLink explicitamente marcado como
   botao primario azul) ganha forma de botao quadrado. commandLinks
   regulares com icones FA coloridos (red/orange/green) - padrao da
   tabela de usuarios suporte e outras - ficam como ICONES inline,
   sem fundo nem borda, preservando as cores originais. */
.ui-datatable .ui-datatable-data > tr > td a.btn-acao-lupa,
.ui-datatable .ui-datatable-data > tr > td a[class*="btn-acao-"],
.ui-datatable .ui-datatable-data > tr > td .ui-menubutton > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--text-sm) !important;
  line-height: 1 !important;
  border: 1px solid var(--border) !important;
  background: var(--background) !important;
  color: var(--foreground) !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  box-shadow: none !important;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.ui-datatable .ui-datatable-data > tr > td a.btn-acao-lupa:hover,
.ui-datatable .ui-datatable-data > tr > td .ui-menubutton > button:hover {
  background: var(--muted) !important;
  border-color: var(--muted-foreground) !important;
}

/* Variante .btn-acao-lupa em destaque azul */
.ui-datatable .ui-datatable-data > tr > td a.btn-acao-lupa {
  background: var(--primary) !important;
  color: white !important;
  border-color: var(--primary) !important;
}

/* Coluna Acoes: lupa + menubutton + whatsapp na mesma linha. O
   <a> do whatsapp e um filho do <div> flex, ja entra no fluxo
   inline-flex; estas regras so reforcam o tamanho/cor. */

/* td que contem botoes de acao = nowrap, alinhado central */
.ui-datatable .ui-datatable-data > tr > td:has(a.btn-acao-lupa),
.ui-datatable .ui-datatable-data > tr > td:has(a[href*="wa.me"]),
.ui-datatable .ui-datatable-data > tr > td:has(a[title="WhatsApp"]),
.ui-datatable .ui-datatable-data > tr > td:has(.ui-menubutton) {
  white-space: nowrap !important;
  text-align: center !important;
}

/* <div> wrapper que envolve lupa+menubutton+whatsapp fica inline */
.ui-datatable .ui-datatable-data > tr > td > div[style*="inline-flex"],
.ui-datatable .ui-datatable-data > tr > td > div[style*="display:inline"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  vertical-align: middle !important;
}

/* WhatsApp: 32x32 verde, igual ao botao da lupa */
.ui-datatable .ui-datatable-data > tr > td a[href*="wa.me"],
.ui-datatable .ui-datatable-data > tr > td a[title="WhatsApp"],
.ui-datatable .ui-datatable-data > tr > td a:has(img[src*="whatsapp"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  background-color: #25D366 !important;
  border: 1px solid #1ebe57 !important;
  border-radius: var(--radius-md) !important;
  margin: 0 !important;
  vertical-align: middle !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

.ui-datatable .ui-datatable-data > tr > td a[href*="wa.me"]:hover,
.ui-datatable .ui-datatable-data > tr > td a[title="WhatsApp"]:hover {
  background-color: #1ebe57 !important;
  border-color: #19a14a !important;
}

.ui-datatable .ui-datatable-data > tr > td a[href*="wa.me"] img,
.ui-datatable .ui-datatable-data > tr > td a[title="WhatsApp"] img,
.ui-datatable .ui-datatable-data > tr > td a img[src*="whatsapp"] {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
  filter: brightness(0) invert(1) !important;
}

.ui-datatable .ui-datatable-data > tr > td a.btn-acao-lupa:hover {
  background: var(--primary-hover, #2563EB) !important;
  border-color: var(--primary-hover, #2563EB) !important;
}

.ui-datatable .ui-datatable-data > tr > td a.btn-acao-lupa i.fa,
.ui-datatable .ui-datatable-data > tr > td a.btn-acao-lupa i {
  color: white !important;
  font-size: 14px !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  font-family: "FontAwesome" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
}

/* Icone/texto do menubutton DENTRO DA TABELA.
   PF 5.3 renderiza o button com classes duplicadas e contraditorias
   (ui-button-text-icon-left + ui-button-icon-only no mesmo elemento) e o
   .ui-button-text com o literal "ui-button" mesmo quando value="" / " ".
   Resultado: a regra de width:32px ate ganha em especificidade, mas
   o conteudo do .ui-button-text vaza e empurra a seta pro canto, e
   alguma regra do PF/tema mantem position:absolute no icone.

   Solucao: prefixar com "body" pra subir especificidade pra 0,0,5,4
   (suficiente pra vencer regras inline e do tema sem mexer em outras
   secoes). Forca 32x32 quadrado no button, esconde o texto, e
   centraliza a seta como flex-item. */

/* Especificidade baseada em ID da tabela. PF 12 (nova-light) tem regras
   internas que vencem ate seletor com 4 classes; #tabelaResultado da
   1,0,X,Y e bate qualquer regra do tema. */
#tabelaResultado .ui-menubutton > button,
#tabelaResultado .ui-menubutton button.ui-button {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#tabelaResultado .ui-menubutton > button > .ui-button-text,
#tabelaResultado .ui-menubutton button.ui-button > .ui-button-text {
  display: none !important;
  visibility: hidden !important;
  padding: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

#tabelaResultado .ui-menubutton > button > .ui-icon,
#tabelaResultado .ui-menubutton button.ui-button > .ui-icon {
  font-size: 14px !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  position: static !important;
  background: none !important;
  text-indent: 0 !important;
  display: inline-block !important;
  color: inherit !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  flex-shrink: 0 !important;
}

/* commandLinks regulares (Trocar Usuario / Alterar Senha / Editar /
   PUSH) na coluna Acoes - mantem icones FA com cor inline original. */
/* Botao de acao em tabela (icone): 36x36, sem fundo, sem borda; hover
   suave. Cobre o p:commandLink e o <a> comum com icone. */
/* :not(.ui-expanded-row-content): o conteudo do p:rowExpansion tambem e <tr><td>,
   e links de TEXTO la dentro viravam caixas 32x32 (Trello AqRmW7k3). */
.ui-datatable .ui-datatable-data > tr:not(.ui-expanded-row-content) > td a.ui-commandlink:not(.btn-acao-lupa):not([class*="btn-acao-"]),
.ui-datatable .ui-datatable-data > tr > td a.btn-acao-icone {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* REVIEW-R0 R3: 32px (36 dava linha de 69; Power tr = 64) */
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 1px !important;
  border: none !important;
  background: transparent !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  border-radius: var(--radius-md) !important;
  line-height: 1 !important;
  transition: background var(--transition-fast);
}

.ui-datatable .ui-datatable-data > tr:not(.ui-expanded-row-content) > td a.ui-commandlink:not(.btn-acao-lupa):not([class*="btn-acao-"]):hover,
.ui-datatable .ui-datatable-data > tr > td a.btn-acao-icone:hover {
  background: var(--muted) !important;
}

/* Icone dentro do botao de acao: 18px (PowerCRM usa 16-18). Vence
   .iconeTable{font-size:22px !important} de iconesMov.css e os
   .FsNN de core-layout.css -- a cor inline/por classe (red/orange/
   green, .excluir, .edit_business_user) e preservada. */
.ui-datatable .ui-datatable-data > tr:not(.ui-expanded-row-content) > td a.ui-commandlink:not(.btn-acao-lupa) > i,
.ui-datatable .ui-datatable-data > tr:not(.ui-expanded-row-content) > td a.ui-commandlink:not(.btn-acao-lupa) > .iconeTable,
.ui-datatable .ui-datatable-data > tr > td a.btn-acao-icone > i {
  font-size: 18px !important;
  line-height: 1 !important;
  display: inline-block !important;
  margin: 0 !important;
}

/* myButton (15 telas): <span class="myButton">Codigo:123</span>,
   <h:outputText styleClass="myButton" style="background-color:#E00808
   !important"> (Ativo/Bloqueado), input.myButton. Media 217x21px com
   font-size inline. Vira a MESMA caixa do .btn-primary (40px, radius 6,
   14/500, padding 0 16) sem largura forcada; dentro de td, 36px como os
   demais botoes de celula. Cor de fundo inline (verde/vermelho) e
   preservada; sem inline, usa o primario. */
.myButton,
input.myButton,
.ui-datatable .ui-datatable-data > tr > td .myButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  min-height: 40px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100%;
  padding: 0 16px !important;
  margin: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  background-color: var(--primary);
  border: 1px solid transparent !important;
  border-radius: var(--radius-md) !important;
  white-space: nowrap;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  cursor: default;
}

input.myButton,
a.myButton {
  cursor: pointer;
}

/* Dentro de td o .myButton e um PILL de status (texto pode ser longo:
   "Vistoriador Ativo, Clique para Desativar") -- quebra em 2 linhas
   dentro de 180px em vez de estourar a coluna; cor inline do EL fica. */
.ui-datatable .ui-datatable-data > tr > td .myButton {
  height: auto !important;
  min-height: 0 !important;
  max-width: 100% !important;
  padding: 4px 10px !important;
  font-size: var(--text-xs) !important;
  line-height: 1.3 !important;
  border-radius: 9999px !important;
  white-space: normal !important;
  text-align: center !important;
  /* quebra so ENTRE palavras (REVIEW-R1-B: "Bloque/ado" em col-fit, onde
     o min-content com overflow-wrap:anywhere virava 1 letra) */
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

.ui-datatable .ui-datatable-data > tr > td .badge,
.ui-treetable .ui-treetable-data > tr > td .badge {
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

/* ===== Botoes dentro de celula de tabela =====
   p:commandButton dentro do td (com texto ou so icone): 36px de altura,
   13px; icon-only = 36x36. */
.ui-datatable .ui-datatable-data > tr > td .ui-button:not(.ui-spinner-button):not(.myButton) {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  font-size: var(--text-sm) !important;
  margin: 0 2px !important;
}

.ui-datatable .ui-datatable-data > tr > td .ui-button.ui-button-icon-only,
.ui-datatable .ui-datatable-data > tr > td .ui-button.btn-icon {
  width: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
}

/* InputSwitch ANTIGO do PF (com .ui-inputswitch-off + .ui-inputswitch-on
   + .ui-inputswitch-handle) tem largura calculada pelo JS de forma
   imprevisivel em PF12 (width:0 nas labels, handle com left negativo).
   Ignoramos o que o JS calculou e fazemos um pill switch CSS puro. */
.ui-inputswitch:has(.ui-inputswitch-off):has(.ui-inputswitch-handle),
.ui-inputswitch:has(.ui-inputswitch-on):has(.ui-inputswitch-handle) {
  position: relative !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 26px !important;
  border-radius: 9999px !important;
  background: var(--muted) !important;
  border: 1px solid var(--border) !important;
  cursor: pointer;
  vertical-align: middle;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  overflow: hidden;
  box-shadow: none !important;
}

/* checked = verde (cobre os dois markups de label que o PF12 pode gerar) */
.ui-inputswitch.ui-inputswitch-checked:has(.ui-inputswitch-off),
.ui-inputswitch.ui-inputswitch-checked:has(.ui-inputswitch-on) {
  background: var(--visto-success) !important;
  border-color: var(--visto-success) !important;
}

/* labels Sim/Nao escondidas */
.ui-inputswitch:has(.ui-inputswitch-off) .ui-inputswitch-off,
.ui-inputswitch:has(.ui-inputswitch-on) .ui-inputswitch-on {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden;
  visibility: hidden;
}

/* handle (a bolinha branca que desliza) -- box-sizing:border-box e
   folga extra (48px de container pra 20px de bolinha) garantem que
   ela nunca fique parcialmente cortada pelo overflow:hidden do
   container, mesmo com variacoes de box-model entre navegadores. */
.ui-inputswitch:has(.ui-inputswitch-off) .ui-inputswitch-handle,
.ui-inputswitch:has(.ui-inputswitch-on) .ui-inputswitch-handle {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 0 !important;
  max-width: none !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 9999px !important;
  box-shadow: var(--shadow-xs);
  transition: left var(--transition-fast);
  margin: 0 !important;
}

/* checked = handle a direita (cobre os dois markups de label) */
.ui-inputswitch.ui-inputswitch-checked:has(.ui-inputswitch-off) .ui-inputswitch-handle,
.ui-inputswitch.ui-inputswitch-checked:has(.ui-inputswitch-on) .ui-inputswitch-handle {
  left: 24px !important;
}

/* Texto "ui-button" literal escondido APENAS em botoes icon-only.
   Em menubuttons com texto (Nova Vistoria etc.) o .ui-button-text
   precisa aparecer normalmente. */
.ui-button.ui-button-icon-only > .ui-button-text,
.ui-menubutton > button.ui-button-icon-only > .ui-button-text {
  display: none !important;
  visibility: hidden;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Seta CSS pra ui-icon-triangle-1-s (substituido sprite/font legado) */
.ui-menubutton > button > .ui-icon.ui-icon-triangle-1-s {
  position: relative;
}

.ui-menubutton > button > .ui-icon.ui-icon-triangle-1-s::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

/* Painel do menubutton (dropdown que abre quando clica) */
.ui-menu.ui-menubutton-list,
.ui-menu.ui-menu-overlay {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 4px 0 !important;
  font-family: var(--font-sans) !important;
  z-index: 9999 !important;
}

.ui-menu .ui-menuitem,
.ui-menu .ui-menuitem-link {
  padding: 8px 12px !important;
  font-size: var(--text-sm) !important;
  color: var(--foreground) !important;
  background: transparent !important;
  border: none !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  transition: background var(--transition-fast);
}

.ui-menu .ui-menuitem-link:hover,
.ui-menu .ui-menuitem:hover > .ui-menuitem-link {
  background: var(--muted) !important;
  color: var(--foreground) !important;
}

.ui-menu .ui-menuitem-icon {
  font-size: 14px !important;
  color: var(--muted-foreground) !important;
  background: none !important;
  text-indent: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* ============== Inputs ============== */

/* CAIXA UNICA DE CAMPO (docs/design.md 3.5): 40px, radius 6, borda
   --border, padding 8/12, 14px, foco = anel primario.
   A classe comum a TODOS os campos de texto do PF12 e .ui-inputfield
   (confirmado nas constantes do jar 12.0.0): p:inputText, p:password,
   p:inputMask, p:datePicker/p:calendar (input), p:autoComplete (input),
   p:spinner (input), p:inputTextarea, filtro de coluna. So p:inputText
   carrega .ui-inputtext -- por isso a regra antiga (.ui-inputtext) deixava
   datePicker/inputMask/autoComplete/spinner na caixa default do tema
   nova-light (~34px, borda #a6a6a6, radius 3): campos de altura
   diferente na mesma linha era exatamente o sintoma "desproporcional".
   :where() zera a especificidade dos :not() (fica 0,1,0) pra esta regra
   nao vencer, por acidente, as regras contextuais de largura. As
   exclusoes sao pecas internas de outros widgets com caixa propria. */
.ui-inputfield:where(:not(.ui-selectonemenu-label):not(.ui-autocomplete-multiple-container):not(.ui-selectcheckboxmenu-multiple-container):not(.ui-column-filter):not(.ui-selectonemenu-filter):not(.ui-paginator-jtp-input)),
.ui-inputtext,
.ui-password.ui-inputfield,
input.hasDatepicker,
.ui-calendar > input,
.ui-autocomplete-input,
input.ui-inputmask,
.ui-spinner > input,
.ui-inputnumber > input,
textarea.ui-inputtextarea {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--input-background) !important;
  color: var(--foreground) !important;
  font-size: var(--text-sm) !important;
  font-family: var(--font-sans) !important;
  padding: 8px 12px !important;
  height: 40px !important;
  line-height: 22px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ui-inputfield:where(:not(.ui-selectonemenu-label):not(.ui-autocomplete-multiple-container):not(.ui-selectcheckboxmenu-multiple-container)):focus,
.ui-inputfield.ui-state-focus,
.ui-inputtext:focus,
.ui-password.ui-inputfield:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 1px var(--primary) !important;
  outline: none !important;
}

.ui-inputfield.ui-state-error,
.ui-inputfield.ui-state-error:focus {
  border-color: var(--destructive) !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25) !important;
}

.ui-inputfield:disabled,
.ui-inputfield.ui-state-disabled,
.ui-inputfield[readonly] {
  background: var(--muted) !important;
  color: var(--muted-foreground) !important;
  opacity: 1 !important;
}

/* ---- p:datePicker / p:calendar: <span class="ui-calendar"><input
   class="ui-inputfield"> [<button class="ui-datepicker-trigger">] ----
   O span e inline por padrao; vira inline-flex pra o input poder
   ocupar 100% do wrapper (que por sua vez ocupa 100% do .rightt). */
.ui-calendar {
  display: inline-flex !important;
  align-items: stretch !important;
  vertical-align: middle;
  max-width: 100%;
  box-sizing: border-box;
}

.ui-calendar > input.ui-inputfield {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

.ui-calendar > button.ui-datepicker-trigger,
.ui-calendar > .ui-datepicker-trigger.ui-button {
  height: 40px !important;
  min-height: 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  border: 1px solid var(--border) !important;
  border-left: none !important;
  background: var(--background) !important;
  color: var(--muted-foreground) !important;
}

.ui-calendar:has(> .ui-datepicker-trigger) > input.ui-inputfield {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* ---- p:autoComplete: <span class="ui-autocomplete"><input
   class="ui-autocomplete-input ui-inputfield"> [<button
   class="ui-autocomplete-dropdown ui-button">] ----
   estrutura.css poe .ui-autocomplete{display:block; width:auto}. */
.ui-autocomplete:not(.ui-autocomplete-multiple) {
  display: inline-flex !important;
  align-items: stretch !important;
  vertical-align: middle;
  max-width: 100%;
  box-sizing: border-box;
}

.ui-autocomplete > input.ui-autocomplete-input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

.ui-autocomplete > .ui-autocomplete-dropdown.ui-button {
  height: 40px !important;
  min-height: 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  border: 1px solid var(--border) !important;
  border-left: none !important;
  background: var(--background) !important;
  color: var(--muted-foreground) !important;
}

.ui-autocomplete.ui-autocomplete-dd > input.ui-autocomplete-input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* modo multiplo: o <ul> container e a "caixa" */
.ui-autocomplete-multiple-container.ui-inputfield {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 40px !important;
  padding: 4px 8px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--input-background) !important;
  box-sizing: border-box !important;
}

/* ---- p:inputMask e p:spinner: so .ui-inputfield (sem .ui-inputtext);
   a caixa vem da regra unica acima. Spinner reserva espaco pros botoes. */
.ui-spinner > input.ui-spinner-input {
  padding-right: 36px !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* ---- p:selectCheckboxMenu (caixa igual ao select) ---- */
.ui-selectcheckboxmenu {
  display: inline-flex !important;
  align-items: center;
  height: 40px !important;
  min-width: 0;
  max-width: 100% !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--input-background) !important;
  font-size: var(--text-sm) !important;
  box-sizing: border-box !important;
}

.ui-selectcheckboxmenu .ui-selectcheckboxmenu-label-container {
  flex: 1;
  min-width: 0;
}

.ui-selectcheckboxmenu .ui-selectcheckboxmenu-label {
  padding: 8px 12px !important;
  font-size: var(--text-sm) !important;
  color: var(--foreground) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-selectcheckboxmenu .ui-selectcheckboxmenu-trigger {
  width: 32px;
  border: none !important;
  border-left: 1px solid var(--border) !important;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground) !important;
}

.ui-inputtext::placeholder,
.ui-inputtext::-webkit-input-placeholder,
.ui-inputtext::-moz-placeholder,
.ui-watermark {
  color: var(--muted-foreground) !important;
  opacity: 1 !important;
  font-weight: 400 !important;
  font-size: var(--text-sm) !important;
}

.ui-inputtext.ui-state-error,
.ui-state-error .ui-inputtext {
  border-color: var(--destructive) !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25) !important;
}

.ui-inputtext:disabled,
.ui-inputtext.ui-state-disabled {
  background: var(--muted) !important;
  color: var(--muted-foreground) !important;
  cursor: not-allowed !important;
}

/* Textarea: mesma caixa, altura livre. "html body" pra garantir que
   vence a regra unica acima (que lista textarea.ui-inputtextarea com
   height:40px) independente da ordem; font-family cobre o
   textarea{font-family:sans-serif !important} do legado. */
html body textarea.ui-inputtextarea,
html body textarea.ui-inputtext,
html body textarea.ui-inputfield,
html body #formPrincipal textarea,
html body .ui-dialog-content textarea {
  height: auto !important;
  min-height: 80px !important;
  padding: 10px 12px !important;
  line-height: 1.5 !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  color: var(--foreground) !important;
  background: var(--input-background) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  min-width: 0 !important;
  resize: vertical;
}

/* ============== SelectOneMenu (combobox) ============== */

/* estruturaLaudo.css ainda tem .ui-selectonemenu{width:255px !important}
   e .ui-dialog-content .ui-selectonemenu{width:270px !important} (em
   estrutura.css as duas foram removidas). Nao forcamos width aqui de
   proposito -- dentro do .rightt a largura vem da secao Formulario; fora
   dele vale o tamanho natural/inline. max-width garante que nunca
   estoura a coluna. */
.ui-selectonemenu {
  display: inline-flex !important;
  align-items: center;
  height: 40px !important;
  /* sem min-width fixo: um min-width:180px aqui vencia o width inline
     de 80px de combos Sim/Nao dentro de td de 138px (Roteiro da Config.
     Vistoria) e a seta sumia clipada. Dentro do .rightt a largura vem
     do formulario; fora, o autoWidth do PF12 dimensiona pelo item mais
     longo. */
  min-width: 0;
  max-width: 100% !important;
  box-sizing: border-box !important;
  vertical-align: middle;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--input-background) !important;
  color: var(--foreground) !important;
  font-family: var(--font-sans);
  font-size: var(--text-sm) !important;
  padding: 0 !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
}

.ui-selectonemenu:hover {
  border-color: var(--muted-foreground) !important;
}

.ui-selectonemenu.ui-state-focus,
.ui-selectonemenu:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 1px var(--primary) !important;
  outline: none !important;
}

.ui-selectonemenu.ui-state-error {
  border-color: var(--destructive) !important;
}

.ui-selectonemenu .ui-selectonemenu-label,
.ui-selectonemenu-label.ui-inputfield {
  flex: 1;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  border: none !important;
  background: transparent !important;
  padding: 8px 12px !important;
  font-size: var(--text-sm) !important;
  color: var(--foreground) !important;
  height: 38px !important;
  line-height: 22px !important;
  box-shadow: none !important;
  font-family: var(--font-sans);
}

/* .w-full num p:selectOneMenu: ocupa a coluna e ignora o min-width inline que o
   PF calcula pela opcao mais larga (Comparar Vistorias: 3 selects com nomes
   longos de vistoria se sobrepunham, Trello SkEkMNEa). */
.ui-selectonemenu.w-full {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.ui-selectonemenu .ui-selectonemenu-label.ui-state-default {
  background: transparent !important;
}

/* o .ui-selectonemenu-label e um <label>: sem isso pega o
   label{font-weight:500 !important} global e o texto do select fica
   mais pesado que o input ao lado (REVIEW-R0 §5). */
.ui-selectonemenu .ui-selectonemenu-label,
.ui-selectonemenu-label.ui-inputfield {
  font-weight: 400 !important;
}

.ui-selectonemenu .ui-selectonemenu-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  /* O tema PF deixa o trigger position:absolute; right:0 -- o label (flex:1)
     passava por baixo da seta e as reticencias ficavam escondidas atras dela
     (Trello cxux1bpb). No fluxo flex a largura da seta entra na conta. */
  position: static !important;
  flex: 0 0 32px;
  width: 32px;
  height: 100%;
  border: none !important;
  border-left: 1px solid var(--border) !important;
  background: transparent !important;
  color: var(--muted-foreground) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

.ui-selectonemenu .ui-selectonemenu-trigger .ui-icon-triangle-1-s,
.ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
  background: none !important;
  text-indent: 0 !important;
  width: auto !important;
  height: auto !important;
}

.ui-selectonemenu .ui-selectonemenu-trigger .ui-icon::before {
  content: "" !important;
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

/* Painel (dropdown aberto) */
/* Calendario (p:datePicker/p:calendar) - sem isso o popup usa o
   z-index/posicionamento default do tema PF, que fica atras de cards
   com stacking context proprio (sombra + border-radius) em algumas
   telas, cobrindo campos vizinhos em vez de aparecer por cima. */
.ui-datepicker {
  z-index: 9999 !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: var(--font-sans);
}

.ui-datepicker-group {
  background: transparent !important;
}

.ui-selectonemenu-panel {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 4px 0 !important;
  margin-top: 4px;
  font-family: var(--font-sans);
  z-index: 9999 !important;
}

/* .ui-selectonemenu-items-wrapper (nativo do PF) ja tem overflow:auto e
   ganha um height calculado via JS -- se a .ui-selectonemenu-list interna
   tambem tiver max-height/overflow, aparecem DUAS scrollbars sobrepostas.
   Scroll fica so no wrapper; a lista interna acompanha o conteudo. */
.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper {
  max-height: 280px !important;
  overflow-y: auto !important;
}

.ui-selectonemenu-panel .ui-selectonemenu-list {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  max-height: none !important;
  overflow: visible !important;
}

.ui-selectonemenu-panel .ui-selectonemenu-item,
.ui-selectonemenu-list .ui-selectonemenu-list-item {
  padding: 8px 12px !important;
  font-size: var(--text-sm) !important;
  color: var(--foreground) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  margin: 0 !important;
  border-radius: 0 !important;
  transition: background var(--transition-fast);
}

.ui-selectonemenu-panel .ui-selectonemenu-item:hover,
.ui-selectonemenu-list .ui-selectonemenu-list-item:hover {
  background: var(--muted) !important;
}

.ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-highlight,
.ui-selectonemenu-list .ui-selectonemenu-list-item.ui-state-highlight {
  background: rgba(30, 58, 95, 0.08) !important;
  color: var(--foreground) !important;
}

/* Filtro dentro do panel */
.ui-selectonemenu-filter-container {
  padding: 8px !important;
  border-bottom: 1px solid var(--border) !important;
}

.ui-selectonemenu-filter {
  width: 100% !important;
  height: 36px !important;
  padding: 6px 32px 6px 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--text-sm) !important;
}

.ui-selectonemenu-filter:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 1px var(--primary) !important;
  outline: none !important;
}

.ui-selectonemenu-filter-icon,
.ui-selectonemenu-filter-container .ui-icon {
  left: auto !important;
  right: 14px !important;
  color: var(--muted-foreground) !important;
}

/* ============== AutoComplete (14 telas) ==============
   O input em si ja herda .ui-inputtext; falta o painel de sugestoes
   (mesmo padrao do .ui-selectonemenu-panel) e o token do modo multiplo,
   que sem isso usa o azul generico do tema PF (#007ad9), nao o da marca. */
.ui-autocomplete-panel {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 4px 0 !important;
  font-family: var(--font-sans);
  z-index: 9999 !important;
}

.ui-autocomplete-panel .ui-autocomplete-items-wrapper {
  max-height: 280px !important;
  overflow-y: auto !important;
}

.ui-autocomplete-panel .ui-autocomplete-list {
  padding: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.ui-autocomplete-item,
.ui-autocomplete-list-item {
  padding: 8px 12px !important;
  font-size: var(--text-sm) !important;
  color: var(--foreground) !important;
  border-radius: 0 !important;
  transition: background var(--transition-fast);
}

.ui-autocomplete-item:hover,
.ui-autocomplete-list-item:hover,
.ui-autocomplete-item.ui-state-highlight,
.ui-autocomplete-list-item.ui-state-highlight {
  background: var(--muted) !important;
  color: var(--foreground) !important;
}

.ui-autocomplete-query {
  color: var(--primary) !important;
}

.ui-autocomplete-multiple-container {
  border: 1px solid var(--input) !important;
  border-radius: var(--radius-md) !important;
  padding: 4px 8px !important;
}

.ui-autocomplete-token {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-radius: var(--radius-sm) !important;
}

/* ============== FileUpload (17 telas) ==============
   Sem isso o widget usa cinza puro do tema PF (#f4f4f4/#c8c8c8), sem
   nenhuma relacao com o design system -- unico componente de upload
   usado no app inteiro (logo, template de laudo, fotos, videos etc). */
.ui-fileupload-buttonbar {
  background: var(--muted) !important;
  border: 1px solid var(--border) !important;
  border-bottom: none !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  padding: 12px !important;
}

.ui-fileupload-content {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  padding: 12px !important;
  color: var(--foreground) !important;
}

.ui-fileupload-content.ui-fileupload-highlight {
  background: rgba(59, 130, 246, 0.05) !important;
  border-color: var(--primary) !important;
}

.ui-fileupload-row {
  border-top: 1px solid var(--border) !important;
}

/* Sem arquivo selecionado o PF renderiza a area de conteudo vazia (caixa branca
   de 50px abaixo do botao). Escondemos essa area enquanto nao ha linha nem
   mensagem, e a barra do botao vira um "dropzone" fechado (borda tracejada,
   botao centralizado) -- Frota/Importar, Template Laudo, Documentos etc. */
.ui-fileupload:has(.ui-fileupload-files > div:empty):has(.ui-messages.ui-helper-hidden) > .ui-fileupload-content {
  display: none !important;
}
.ui-fileupload:has(.ui-fileupload-files > div:empty):has(.ui-messages.ui-helper-hidden) > .ui-fileupload-buttonbar {
  border: 1px dashed var(--ring) !important;
  border-radius: var(--radius-md) !important;
  padding: 20px 12px !important;
  text-align: center !important;
}

.ui-fileupload-row .ui-fileupload-progress {
  background: var(--muted) !important;
  border-radius: 9999px !important;
}

/* p:fileUpload mode="simple" (sem skinSimple) e um <input type="file"> cru:
   284x21px com o botao nativo do SO no meio de um formulario de campos de
   40px (Frota "Documentos", Importar, Vistoriadores, Backup). O botao interno
   e estilizavel via ::file-selector-button (Chrome 89+/Safari 14.1+/FF 82+). */
input[type="file"].ui-fileupload-simple,
.ui-fileupload-simple > input[type="file"],
.ui-fileupload-simple input[type="file"] {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  color: var(--muted-foreground) !important;
  line-height: 36px;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  max-width: 100%;
}

input[type="file"]::file-selector-button {
  height: 36px;
  padding: 0 14px;
  margin-right: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast);
}

input[type="file"]::file-selector-button:hover {
  background: var(--accent);
}

/* ============== SelectManyMenu / MultiSelectListbox (2 telas) ============== */

.ui-selectmanymenu,
.ui-multiselectlistbox-listcontainer {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--card) !important;
  font-family: var(--font-sans);
}

.ui-multiselectlistbox-header {
  background: var(--muted) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--foreground) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
}

.ui-selectmanymenu .ui-selectlistbox-item,
.ui-multiselectlistbox-item {
  padding: 6px 8px !important;
  font-size: var(--text-sm) !important;
  color: var(--foreground) !important;
  border-radius: var(--radius-sm) !important;
  transition: background var(--transition-fast);
}

.ui-multiselectlistbox-item.ui-state-hover {
  background: var(--muted) !important;
  color: var(--foreground) !important;
}

.ui-multiselectlistbox-item.ui-state-highlight {
  background: rgba(59, 130, 246, 0.1) !important;
  color: var(--primary) !important;
}

/* SelectOneMenu desabilitado */
.ui-selectonemenu.ui-state-disabled {
  background: var(--muted) !important;
  color: var(--muted-foreground) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* ============== DataTable ============== */

/* Wrapper (.ui-datatable = DataTable.CONTAINER_CLASS = "ui-datatable
   ui-widget") vira um card: borda + raio + sombra sutil, igual aos
   outros containers do design system (--radius-xl / --shadow-sm).
   overflow:hidden clipa os cantos quadrados do header-facet/thead/
   paginator sem afetar os paineis de filtro/dropdown, que sao
   anexados a <body> (appendTo padrao do PF12), nao a este wrapper. */
.ui-datatable {
  font-family: var(--font-sans);
  background: var(--card) !important;
  border: 1px solid var(--table-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
}

/* "A pesquisa retornou X registro(s)." e similares (facet header do
   <p:dataTable>, DataTable.HEADER_CLASS = "ui-datatable-header ..."). */
.ui-datatable .ui-datatable-header,
.ui-datatable .ui-datatable-header * {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--foreground) !important;
  text-shadow: none !important;
}

.ui-datatable .ui-datatable-header {
  background: var(--card) !important;
  padding: 16px 24px !important;
  border-bottom: 1px solid var(--table-border) !important;
}

/* Div real gerada pelo PF em volta da <table> (DataTable.TABLE_WRAPPER_CLASS
   = "ui-datatable-tablewrapper", confirmado em DataTableRenderer.
   encodeRegularTable). E aqui, e nao no .ui-datatable inteiro, que o
   scroll horizontal deve ficar: assim o header-facet acima e o
   paginator abaixo permanecem fixos em telas estreitas, so as colunas
   rolam (docs/design.md 3.7: "Wrapper: relative w-full overflow-x-auto"). */
.ui-datatable .ui-datatable-tablewrapper {
  overflow-x: auto;
  overflow-y: hidden;
}

/* Cabecalho de coluna. IMPORTANTE: o <thead> do PF12 nao tem NENHUMA
   classe propria (confirmado em DataTableRenderer.encodeThead -- so
   escreve "id"; nao existe constante "*_THEAD_CLASS" em DataTable.java).
   ".ui-datatable-thead" nunca existiu no DOM real, entao toda regra que
   dependia dele (inclusive nas versoes anteriores deste arquivo) era
   CSS morto. ".ui-datatable-tablewrapper" e real e sempre envolve a
   <table>, entao serve de ancestral confiavel para o <th>. */
.ui-datatable .ui-datatable-tablewrapper thead > tr > th {
  background: var(--table-header-bg) !important;
  padding: 12px 24px !important;
  text-align: left !important;
  vertical-align: middle !important;
  white-space: nowrap;
  border: none !important;
  border-bottom: 1px solid var(--table-border) !important;
  /* o proprio <th> (nao so o .ui-column-title) herdava 16px/700 do
     .ui-widget-header do tema -- isso dimensionava icone de sort,
     facet de filtro e deixava th com filtro em 76-84px de altura. */
  font-family: var(--font-sans) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: var(--table-head-text) !important;
  text-shadow: none !important;
}

.ui-datatable .ui-datatable-tablewrapper thead > tr > th .ui-sortable-column-icon,
.ui-treetable thead > tr > th .ui-sortable-column-icon {
  display: inline-block !important;
  float: none !important;
  position: static !important;
  font-size: 12px !important;
  margin: 0 0 0 4px !important;
  vertical-align: middle !important;
  color: var(--table-head-text) !important;
}

/* Coluna efetivamente ordenada fica azul: sem isso o usuario nao distingue
   "posso ordenar" de "esta ordenado por aqui". O PF12 marca o th com
   .ui-state-active e troca o icone neutro (carat-2-n-s) por triangle-1-n/-s. */
.ui-datatable .ui-datatable-tablewrapper thead > tr > th.ui-state-active .ui-sortable-column-icon,
.ui-datatable .ui-datatable-tablewrapper thead > tr > th .ui-sortable-column-icon.ui-icon-triangle-1-n,
.ui-datatable .ui-datatable-tablewrapper thead > tr > th .ui-sortable-column-icon.ui-icon-triangle-1-s,
.ui-treetable thead > tr > th.ui-state-active .ui-sortable-column-icon,
.ui-treetable thead > tr > th .ui-sortable-column-icon.ui-icon-triangle-1-n,
.ui-treetable thead > tr > th .ui-sortable-column-icon.ui-icon-triangle-1-s {
  color: var(--primary) !important;
}

/* th ordenavel: titulo inline pra o icone de sort ficar na MESMA linha
   (com .ui-column-title block ele caia pra 2a linha, th de 52px). */
.ui-datatable .ui-datatable-tablewrapper thead > tr > th.ui-sortable-column .ui-column-title,
.ui-treetable thead > tr > th.ui-sortable-column .ui-column-title {
  display: inline !important;
  vertical-align: middle;
}

/* table-layout:auto + 100% e o padrao (so .table-fixed muda); o
   wrapper ja tem overflow-x:auto. Quando a tabela tem 8+ colunas o
   padding horizontal de 24px (Power) ja soma ~400px so de respiro e
   empurra a coluna de acoes pra fora da viewport (Vistoriadores: 1957px
   em 1381) -- cai automaticamente pra 12px nessas tabelas. */
.ui-datatable .ui-datatable-tablewrapper > table:not(.table-fixed) {
  table-layout: auto !important;
  width: 100% !important;
}

.ui-datatable:has(> .ui-datatable-tablewrapper > table > thead > tr > th:nth-child(n+8)) .ui-datatable-tablewrapper thead > tr > th,
.ui-datatable:has(> .ui-datatable-tablewrapper > table > thead > tr > th:nth-child(n+8)) .ui-datatable-data > tr > td {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* ===== Utilitarias de coluna (usar em styleClass da p:column; o PF
   aplica a classe no <th> E no <td>) =====
   IMPORTANTE: th/td do nova-light sao box-sizing:content-box, entao a
   largura declarada e a do CONTEUDO -- o padding de 24px de cada lado
   e somado por fora (.col-w-xs = 56 + 48 = 104px de coluna). Com
   table-layout:auto (padrao), width e um MINIMO: a coluna pode crescer
   se o conteudo nao couber; pra travar de verdade use .table-fixed no
   tableStyleClass e de largura a TODAS as colunas (no Chrome, com
   table-layout:fixed, coluna sem width vira 0). */
/* Medido no PowerCRM (24/09, tela de Contatos): table-layout auto, largura 100%,
   nenhuma largura travada. Ao estreitar a area de 1381 para 900px as colunas
   encolheram proporcionalmente (320->280, 200->112) e so depois disso apareceu
   rolagem. Aqui o width e a largura desejada e o min-width e o piso de leitura:
   com min-width igual ao width a tabela nunca encolhia e ia direto para a
   rolagem horizontal (Vistoriadores, Frota, Consultar). */
.ui-datatable .col-w-xs { width: 56px; min-width: 48px; }
.ui-datatable .col-w-sm { width: 90px; min-width: 68px; }
.ui-datatable .col-w-md { width: 130px; min-width: 92px; }
.ui-datatable .col-w-lg { width: 200px; min-width: 128px; }
/* Telefone formatado "(31) 92837-2987" cabe em 115px; quebra so se o dado for maior
   (Trello MSUFuIv1: 130px + nowrap empurrava a tabela para a rolagem horizontal). */
.ui-datatable .col-w-tel { width: 115px; min-width: 115px; word-break: break-word; }
.ui-datatable .col-w-xl { width: 300px; min-width: 180px; }

/* coluna que deve encolher ao conteudo (Sim/Nao, ID, icone unico) */
.ui-datatable .col-fit { width: 1% !important; white-space: nowrap !important; }

/* Cabecalho que precisa ser explicito e nao cabe numa linha. O <th> e o
   .ui-column-title sao nowrap por padrao, entao um rotulo de 2 palavras
   alargava a coluna pela FRASE inteira. Com .th-wrap o titulo quebra entre
   palavras e, junto com .col-fit (width:1%), a coluna passa a medir a maior
   PALAVRA: "BLOQUEAR/VISTORIA" ocupa MENOS que o antigo "BLOQUEADO" numa
   linha so. So no <thead>: o <td> continua nowrap pela .col-fit.
   (Trello MSUFuIv1 -- a tabela de Vistoriadores tinha 13px de folga.) */
.ui-datatable .ui-datatable-tablewrapper thead > tr > th.th-wrap,
.ui-datatable .ui-datatable-tablewrapper thead > tr > th.th-wrap .ui-column-title {
  white-space: normal !important;
  line-height: 1.25 !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

/* coluna de botoes de acao: encolhe ao conteudo, centralizada, padding
   horizontal menor pra caber 2-3 botoes de 36px. Tambem cobre as classes
   ColunaAcoes/ColunaEditar/ColunaExcluir que legacyUiHelpers.js injeta
   no <th> pelo texto do cabecalho (o legado dava 100px/40px fixos). */
.ui-datatable .col-acoes,
.ui-datatable th.ColunaAcoes,
.ui-datatable th.ColunaEditar,
.ui-datatable th.ColunaExcluir,
.ui-datatable td.ColunaAcoes,
.ui-datatable td.ColunaEditar,
.ui-datatable td.ColunaExcluir {
  width: 1% !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.ui-datatable .ui-datatable-data > tr > td.col-acoes,
.ui-datatable .ui-datatable-tablewrapper thead > tr > th.col-acoes {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Coluna de acoes ancorada a direita quando a tabela e mais larga que o card.
   Sem isso, em telas menores (ex.: 1152 CSS px, notebook ou zoom 125%) as
   colunas finais -- justamente Editar/Excluir -- somem para fora do wrapper
   e so aparecem com scroll horizontal, sem nenhuma indicacao (Frota,
   Consultar Vistoria, Vistoriadores). Sticky nao tem efeito nenhum quando a
   tabela cabe, entao vale sempre. So na ULTIMA coluna: coluna de acao no meio
   da tabela nao deve grudar. */
.ui-datatable .ui-datatable-data > tr > td.col-acoes:last-child,
.ui-datatable .ui-datatable-tablewrapper thead > tr > th.col-acoes:last-child {
  position: sticky !important;
  right: 0;
  box-shadow: -6px 0 8px -8px rgba(0, 0, 0, 0.18);
}

.ui-datatable .ui-datatable-data > tr > td.col-acoes:last-child {
  background: var(--card);
  z-index: 1;
}

.ui-datatable .ui-datatable-data > tr:hover > td.col-acoes:last-child {
  background: var(--table-row-hover);
}

.ui-datatable .ui-datatable-tablewrapper thead > tr > th.col-acoes:last-child {
  background: var(--table-header-bg) !important;
  z-index: 2;
}

.ui-datatable .ui-datatable-tablewrapper thead > tr > th.col-acoes .ui-column-title,
.ui-datatable .ui-datatable-tablewrapper thead > tr > th.td-center .ui-column-title {
  text-align: center;
}

.ui-datatable .ui-datatable-tablewrapper thead > tr > th.td-right .ui-column-title {
  text-align: right;
}

.ui-datatable .td-nowrap { white-space: nowrap !important; }
.ui-datatable .td-wrap { white-space: normal !important; }
.ui-datatable .td-center { text-align: center !important; }
.ui-datatable .td-right { text-align: right !important; }
.ui-datatable .td-left { text-align: left !important; }
.ui-datatable .td-muted { color: var(--muted-foreground) !important; font-weight: 400 !important; }
/* So em <td>: no <th> o mesmo seletor cortava o titulo da coluna SEM reticencias
   (o texto do header vive num span de largura propria) -- "Telefone fornecido
   pela Empresa" virava "TELEFONE FORNEC" invadindo a coluna vizinha. */
/* Texto longo em coluna estreita: o Power quebra a linha e nunca corta com
   reticencias (medido em Contatos: white-space normal, text-overflow clip).
   Mantemos o nome da classe (usada em dezenas de telas), mas o comportamento
   passa a ser o mesmo: a celula quebra dentro da largura da coluna em vez de
   esconder o final do texto. Para cortar de verdade use .td-ellipsis. */
.ui-datatable td.td-truncate {
  max-width: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ui-datatable td.td-ellipsis {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

.ui-datatable .ui-datatable-tablewrapper thead > tr > th.td-truncate,
.ui-datatable .ui-datatable-tablewrapper thead > tr > th.td-truncate .ui-column-title {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

/* tableStyleClass="table-fixed": larguras respeitadas a risca (ver nota
   acima -- TODAS as colunas precisam de .col-w-* ou .col-acoes). */
.ui-datatable table.table-fixed {
  table-layout: fixed !important;
  width: 100% !important;
}

.ui-datatable table.table-fixed td {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* tabela compacta opcional (styleClass no p:dataTable) */
.ui-datatable.table-compact .ui-datatable-data > tr > td {
  padding: 10px 16px !important;
}

.ui-datatable.table-compact .ui-datatable-tablewrapper thead > tr > th {
  padding: 8px 16px !important;
}

/* Titulo da coluna (span real, DataTable.COLUMN_TITLE_CLASS =
   "ui-column-title", confirmado em encodeColumnHeaderContent). Estilo
   fica so aqui (nao no <th> inteiro) pra nao vazar por heranca pro
   filtro embutido, que tem tipografia propria mais abaixo. */
.ui-datatable .ui-datatable-tablewrapper thead > tr > th .ui-column-title {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 500 !important;
  color: var(--table-head-text) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-shadow: none !important;
  line-height: 1 !important;
  white-space: nowrap;
}

/* Filtro embutido no cabecalho. Nas telas reais deste app (ex.: colunas
   "Tipo"/"Status" em solicitacaoVistoriaPesquisarNovo.xhtml e
   administracaoSolicitacaoVistoriaPesquisar.xhtml) o filtro e um facet
   customizado -- <f:facet name="filter"><p:selectOneMenu>... -- que o
   PF envolve num <div class="ui-column-customfilter"> (DataTable.
   COLUMN_CUSTOM_FILTER_CLASS, confirmado em encodeFilter). Isso empilha
   com respiro claro embaixo do titulo em vez de ficar "colado". */
.ui-datatable .ui-datatable-tablewrapper thead > tr > th .ui-column-customfilter {
  display: block;
  margin-top: 8px;
}

/* Caminho alternativo (real, mas nao usado nas duas telas auditadas):
   quando a coluna NAO tem facet de filtro customizado, o PF gera o
   proprio input/select com DataTable.COLUMN_FILTER_CLASS =
   "ui-column-filter ..." (encodeFilterInputSelect/Text). Mantido por
   consistencia caso outra tela do app use esse caminho. */
.ui-datatable .ui-datatable-tablewrapper thead > tr > th .ui-column-filter {
  display: block;
  margin-top: 8px;
  min-width: 120px !important;
  width: 100% !important;
  height: 32px !important;
  padding: 5px 10px !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--input-background) !important;
  box-sizing: border-box !important;
  max-width: none !important;
}

/* <label> dentro do titulo da coluna (8 telas usam headerText="&lt;label&gt;
   X&lt;/label&gt;"): herda a tipografia do .ui-column-title em vez da
   regra generica de label. */
.ui-datatable .ui-datatable-tablewrapper thead > tr > th .ui-column-title label {
  font: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  text-transform: inherit !important;
  letter-spacing: inherit !important;
  margin: 0 !important;
}

/* Compacta o combobox de filtro SO dentro do cabecalho -- fora daqui
   ele continua no tamanho padrao (.ui-selectonemenu, 40px, definido
   mais acima neste arquivo). min-width:150px garante que "Selecione a
   opcao" cabe sem cortar (a coluna cresce, table-layout auto); com
   .table-fixed o min-width e ignorado e vale a largura da coluna. */
.ui-datatable .ui-datatable-tablewrapper thead > tr > th .ui-selectonemenu {
  height: 32px !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ===== Campos DENTRO de celula (tabelas editaveis: Roteiro da Config.
   Vistoria etc.) =====
   O campo ocupa 100% da celula, nunca mais que ela (min-width:0 vence o
   min-width inline/autoWidth do PF), celula com padding menor e altura
   de campo 36px. A largura da coluna vem de .col-w-* / do width da
   p:column -- e o texto do select faz ellipsis dentro da caixa. */
.ui-datatable .ui-datatable-data > tr > td > .ui-selectonemenu,
.ui-datatable .ui-datatable-data > tr > td > .ui-inputfield,
.ui-datatable .ui-datatable-data > tr > td > .ui-calendar,
.ui-datatable .ui-datatable-data > tr > td > .ui-autocomplete,
.ui-datatable .ui-datatable-data > tr > td > .ui-selectcheckboxmenu,
.ui-datatable .ui-datatable-data > tr > td > .ui-spinner,
.ui-datatable .ui-datatable-data > tr > td > .ui-cell-editor .ui-inputfield,
.ui-datatable .ui-datatable-data > tr > td > .ui-cell-editor .ui-selectonemenu {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.ui-datatable .ui-datatable-data > tr > td > .ui-selectonemenu,
.ui-datatable .ui-datatable-data > tr > td > .ui-inputfield:not(textarea),
.ui-datatable .ui-datatable-data > tr > td > .ui-calendar > input,
.ui-datatable .ui-datatable-data > tr > td > .ui-autocomplete > input {
  height: 36px !important;
}

.ui-datatable .ui-datatable-data > tr > td > .ui-selectonemenu .ui-selectonemenu-label {
  height: 34px !important;
  line-height: 18px !important;
  padding: 8px 10px !important;
}

.ui-datatable .ui-datatable-data > tr > td > .ui-selectonemenu .ui-selectonemenu-trigger {
  width: 26px;
}

.ui-datatable .ui-datatable-data > tr > td:has(> .ui-selectonemenu),
.ui-datatable .ui-datatable-data > tr > td:has(> .ui-inputfield),
.ui-datatable .ui-datatable-data > tr > td:has(> .ui-calendar),
.ui-datatable .ui-datatable-data > tr > td:has(> .ui-autocomplete),
.ui-datatable .ui-datatable-data > tr > td:has(> .ui-chkbox),
.ui-datatable .ui-datatable-data > tr > td:has(> .ui-inputswitch) {
  padding: 8px 12px !important;
  overflow: visible !important;
}

.ui-datatable .ui-datatable-tablewrapper thead > tr > th .ui-selectonemenu .ui-selectonemenu-label {
  height: 30px !important;
  line-height: 16px !important;
  padding: 6px 10px !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.ui-datatable .ui-datatable-tablewrapper thead > tr > th .ui-selectonemenu .ui-selectonemenu-trigger {
  width: 26px;
}

/* Body alinhado ao PowerCRM (Tailwind: py-4 px-6 text-sm font-medium
   text-gray-900). */
.ui-datatable .ui-datatable-data > tr > td {
  /* 14px vertical: linha de 1 registro fecha em ~60-64px mesmo com 2
     linhas curtas ou um botao de acao de 32px (Power tr = 64). */
  padding: 14px 24px !important;
  border: none !important;
  border-bottom: 1px solid var(--table-border) !important;
  vertical-align: middle !important;
}

.ui-datatable .ui-datatable-data > tr > td,
.ui-datatable table tbody td {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  color: var(--table-cell-text) !important;
  line-height: 1.5 !important;
}

/* <strong>/<b> em celula = 500 (Power usa 500 para o nome, nunca 700) */
.ui-datatable .ui-datatable-data > tr > td strong,
.ui-datatable .ui-datatable-data > tr > td b,
.ui-treetable .ui-treetable-data > tr > td strong,
.ui-treetable .ui-treetable-data > tr > td b {
  font-weight: 500 !important;
}

.ui-datatable .ui-datatable-data > tr > td *,
.ui-datatable table tbody td * {
  font-family: var(--font-sans) !important;
}

/* CRITICO: o seletor "td *" acima forca Inter em qualquer descendente.
   Quando font-family de FontAwesome (ou outros icon-fonts custom da
   app, ex: .iconeTable.edit_business_user) e sobrescrita por Inter,
   os caracteres unicode privados viram glifos placeholder ("tofu"). */
.ui-datatable .ui-datatable-data > tr > td i.fa,
.ui-datatable .ui-datatable-data > tr > td i[class*="fa-"],
.ui-datatable .ui-datatable-data > tr > td .fa,
.ui-datatable .ui-datatable-data > tr > td [class*="fa-"],
.ui-datatable .ui-datatable-data > tr > td .iconeTable,
.ui-datatable .ui-datatable-data > tr > td .iconeTela,
.ui-datatable .ui-datatable-data > tr > td .ia-menu-icon,
.ui-datatable table tbody td i.fa,
.ui-datatable table tbody td i[class*="fa-"],
.ui-datatable table tbody td .iconeTable {
  font-family: "FontAwesome" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
}

/* Utility classes de cor reintroduzidas (estavam num CSS legado ja
   apagado). Usadas inline em <i class="fa fa-X red">, etc. */
.red { color: #e53935 !important; }
.orange { color: #f9a825 !important; }
.green { color: #2e7d32 !important; }
.blue { color: #1e88e5 !important; }
.yellow { color: #f9a825 !important; }
.purple { color: #8e24aa !important; }
.pink { color: #ec407a !important; }
.gray, .grey { color: #757575 !important; }
.white { color: #ffffff !important; }
.black { color: #000000 !important; }

/* Variantes "infinite swing" (animadas) e Fs10..Fs40 (font sizes) */
.Fs10 { font-size: 10px !important; }
.Fs11 { font-size: 11px !important; }
.Fs12 { font-size: 12px !important; }
.Fs13 { font-size: 13px !important; }
.Fs14 { font-size: 14px !important; }
.Fs15 { font-size: 15px !important; }
.Fs16 { font-size: 16px !important; }
.Fs17 { font-size: 17px !important; }
.Fs18 { font-size: 18px !important; }
.Fs20 { font-size: 20px !important; }
.Fs22 { font-size: 22px !important; }
.Fs24 { font-size: 24px !important; }
.Fs28 { font-size: 28px !important; }
.Fs30 { font-size: 30px !important; }
.Fs40 { font-size: 40px !important; }

/* Links dentro da tabela: cor primary mas peso normal */
.ui-datatable .ui-datatable-data > tr > td a,
.ui-datatable .ui-datatable-data > tr > td .ui-commandlink {
  color: var(--primary) !important;
  font-weight: 500 !important;
  text-decoration: none;
}

.ui-datatable .ui-datatable-data > tr > td a:hover {
  text-decoration: underline;
}

.ui-datatable .ui-datatable-data > tr {
  background: var(--background) !important;
  transition: background var(--transition-fast);
}

/* Neutraliza o zebra solto (.ui-datatable-odd{background:#EFEFF5}) que
   existe fora do design system em estrutura.css/estruturaLaudo.css.
   DataTable.EVEN_ROW_CLASS/ODD_ROW_CLASS sao aplicados incondicionalmente
   em TODA linha pelo DataTableRenderer, entao aquela regra solta pega
   qualquer <p:dataTable> do app. O estado perceptivel fica so por conta
   do hover abaixo, como no docs/design.md 3.7 (sem listras por padrao). */
.ui-datatable .ui-datatable-data > tr.ui-datatable-odd,
.ui-datatable .ui-datatable-data > tr.ui-datatable-even {
  background: var(--background) !important;
}

.ui-datatable .ui-datatable-data > tr:hover {
  background: var(--table-row-hover) !important;
}

.ui-datatable .ui-datatable-data > tr.ui-state-highlight {
  background: rgba(30, 58, 95, 0.08) !important;
  color: var(--foreground) !important;
}

/* Paginador no layout PowerCRM/design.md 3.15: resumo ("Exibindo 1-10
   de 245") + select de itens por pagina a ESQUERDA, paginas a DIREITA.
   54 telas usam paginatorTemplate="{CurrentPageReport} {FirstPageLink}
   {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}
   {RowsPerPageDropdown}" -- a ordem visual vem do "order" do flex, sem
   mexer no template. */
.ui-paginator {
  background: var(--background) !important;
  border: none !important;
  border-top: 1px solid var(--table-border) !important;
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap;
  gap: 4px;
  /* Visto media 72px/16px; Power 30px/12.25px. */
  font-size: var(--text-sm) !important;
  line-height: 1 !important;
  color: var(--muted-foreground) !important;
}

/* paginador do topo (paginatorPosition="both"/"top"): estrutura.css o
   escondia com visibility:hidden + height:1px -- com o padding do DS
   isso virava uma faixa vazia de ~25px. Some de vez. */
.ui-datatable .ui-paginator.ui-paginator-top {
  display: none !important;
}

/* Ordem visual igual ao Power (medido em app.powercrm.com.br/web/contacts,
   22/09): "1 de N paginas" | "Itens por pagina [20]" ......... < [1] 2 ... N >
   Sem botoes Primeira/Ultima (o Power nao tem); pageLinks="5" nas tabelas. */
.ui-paginator .ui-paginator-current { order: 0; }
.ui-paginator .ui-paginator-rpp-label { order: 1; }
.ui-paginator .ui-paginator-rpp-options { order: 2; margin-right: auto !important; }
.ui-paginator .ui-paginator-prev { order: 3; }
.ui-paginator .ui-paginator-pages { order: 4; display: inline-flex; gap: 4px; }
.ui-paginator .ui-paginator-next { order: 5; }
.ui-paginator .ui-paginator-jtp-select,
.ui-paginator .ui-paginator-jtp-input { order: 7; }

.ui-paginator .ui-paginator-first,
.ui-paginator .ui-paginator-last {
  display: none !important;
}

/* label "Itens por pagina" (rowsPerPageLabel do p:dataTable) */
.ui-paginator .ui-paginator-rpp-label {
  display: inline-flex !important;
  align-items: center !important;
  height: 30px !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  font-size: var(--text-xs) !important;
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  color: var(--muted-foreground) !important;
  white-space: nowrap;
}

/* sem select de itens por pagina, o resumo e quem empurra as paginas */
.ui-paginator:not(:has(.ui-paginator-rpp-options)) .ui-paginator-current {
  margin-right: auto !important;
}

/* separador vertical entre resumo e select (design.md 3.15) */
.ui-paginator:has(.ui-paginator-rpp-options) .ui-paginator-current {
  padding-right: 12px !important;
  margin-right: 12px !important;
  border-right: 1px solid var(--table-border);
}

/* Power: numero de pagina 30x30 r6 12.25px/500 cor do texto; setas 38x38
   com icone 15px cinza; ativo = texto primario + fundo primario 10% +
   borda primaria (contornado, nao preenchido). */
.ui-paginator .ui-paginator-page,
.ui-paginator .ui-paginator-next,
.ui-paginator .ui-paginator-prev {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-md) !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 6px !important;
  margin: 0 !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  font-family: var(--font-sans) !important;
  color: var(--foreground) !important;
  vertical-align: middle;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ui-paginator .ui-paginator-next,
.ui-paginator .ui-paginator-prev {
  min-width: 38px !important;
  height: 38px !important;
  color: var(--muted-foreground) !important;
}

.ui-paginator .ui-paginator-page:hover,
.ui-paginator .ui-paginator-next:hover,
.ui-paginator .ui-paginator-prev:hover {
  background: var(--muted) !important;
  color: var(--foreground) !important;
}

.ui-paginator .ui-paginator-next.ui-state-disabled,
.ui-paginator .ui-paginator-prev.ui-state-disabled {
  opacity: 0.4 !important;
  background: transparent !important;
}

.ui-paginator .ui-paginator-prev .ui-icon,
.ui-paginator .ui-paginator-next .ui-icon {
  font-size: 15px !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  text-indent: 0 !important;
  margin: 0 !important;
}

.ui-paginator .ui-paginator-current {
  display: inline-flex !important;
  align-items: center !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: var(--text-xs) !important;
  font-family: var(--font-sans) !important;
  color: var(--muted-foreground) !important;
  white-space: nowrap;
}

/* <select> nativo. Vence: nova-light body .ui-paginator
   .ui-paginator-rpp-options{margin:.5rem} e o legado #formPrincipal
   .ui-paginator-rpp-options{width:70px} (ja removido de estrutura.css,
   ainda em estruturaLaudo.css -- (1,1,0) sem !important perde pra
   (0,2,0) com !important). */
.ui-paginator .ui-paginator-rpp-options {
  display: inline-block !important;
  height: 30px !important;
  line-height: 28px !important;
  width: auto !important;
  min-width: 60px !important;
  margin: 0 auto 0 0 !important; /* empurra as paginas para a direita */
  padding: 0 24px 0 10px !important;
  font-size: var(--text-xs) !important;
  font-family: var(--font-sans) !important;
  color: var(--foreground) !important;
  background: var(--background) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-sizing: border-box !important;
  cursor: pointer;
}

.ui-paginator .ui-paginator-page.ui-state-active {
  background: rgba(51, 116, 255, 0.1) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* ============== Panel / Card ============== */

.ui-panel,
.ui-panel.card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--card) !important;
  color: var(--card-foreground) !important;
  box-shadow: none !important;
}

.ui-panel .ui-panel-titlebar {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--foreground) !important;
  font-weight: 600 !important;
  font-size: var(--text-lg) !important;
  padding: 16px 24px !important;
}

.ui-panel .ui-panel-content {
  padding: 24px !important;
  background: transparent !important;
  border: none !important;
}

/* ============== Pagina: shell, titulo, secoes ==============
   docs/design.md 2.6/3.3 + PowerCRM medido: conteudo em card branco,
   radius 12, borda --border, padding 24; titulo 24px/600 #111827;
   subtitulo 14px muted. */

/* #formPrincipal e o <h:form> que envolve TODO o conteudo de pagina
   (template.xhtml/templateSimples/templateLaudo). Vira o card da pagina.
   Vence estruturaLaudo.css #formPrincipal{background:#FBFCFD; width:98%;
   padding:10px 1% 2px 1% !important; display:inline-block} (removido de
   estrutura.css). inicio.xhtml (dashboard) usa templateSemForm, sem
   #formPrincipal -- nao e afetado. */
html body form#formPrincipal {
  display: block !important;
  /* width explicita + margin auto: #layout-portlets-cover e flex column
     e "margin:auto" desligaria o stretch (o form encolheria ao
     conteudo); com width calc() ele centraliza e respeita o max. */
  width: calc(100% - 48px) !important;
  max-width: 1920px !important;
  margin: 24px auto !important;
  padding: 0 !important;
  /* REVIEW-R0 R5 (decisao): o form NAO e card -- titulo fica fora e o
     card e dos filhos (.ui-panel, .ui-datatable, fieldset), como no
     Power. Antes: borda+radius 12+sombra aqui = moldura dupla/tripla. */
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  color: var(--foreground);
}

@media (max-width: 767px) {
  html body form#formPrincipal {
    width: calc(100% - 24px) !important;
    margin: 12px auto !important;
    padding: 0 !important;
  }
}

/* Titulo de pagina. As telas marcam com <h1> (17, listagens) ou <h2>
   (36, cadastros) direto no #formPrincipal -- nenhuma tela tem os dois,
   entao os dois sao "titulo de pagina". Vence #formPrincipal h1/h2
   {font-size:24/22px; color:#5A5D61; border-bottom; overflow:hidden;
   font-weight:bold} de estruturaLaudo.css (removido de estrutura.css)
   e h1..h6{margin:0 !important} de core-layout.css. */
html body #formPrincipal h1,
html body #formPrincipal h2,
html body .page-title {
  display: block !important;
  width: auto !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  overflow: visible !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-2xl) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #111827 !important;
  letter-spacing: -0.01em;
}

/* h1/h2 dentro de dialog, painel, aba, card de dashboard ou <fieldset>
   nao sao titulo de pagina: voltam a titulo de secao. */
html body #formPrincipal .ui-dialog h1,
html body #formPrincipal .ui-dialog h2,
html body #formPrincipal .ui-panel h1,
html body #formPrincipal .ui-panel h2,
html body #formPrincipal .ui-tabs-panel h2,
html body #formPrincipal fieldset h2,
html body #formPrincipal .ui-fieldset h2 {
  font-size: var(--text-xl) !important;
  margin: 0 0 12px 0 !important;
}

/* Titulos de secao dentro da pagina. ":not(.rightt) >" deixa de fora o
   h3 das linhas de secao do formulario (.row > .rightt > h3), que tem
   regra propria na secao Formulario -- sem isso o id (#formPrincipal)
   venceria e poria margin-bottom dentro do flex da linha. */
html body #formPrincipal :not(.rightt) > h3,
html body .ui-dialog-content :not(.rightt) > h3,
html body .section-title {
  font-family: var(--font-sans) !important;
  font-size: var(--text-lg) !important;
  font-weight: 600 !important;
  color: #111827 !important;
  line-height: 1.3 !important;
  margin: 0 0 12px 0 !important;
}

html body #formPrincipal h4,
html body .ui-dialog-content h4 {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  color: #111827 !important;
  margin: 0 0 8px 0 !important;
}

/* <fieldset> puro (17 telas) = secao da pagina. Vence #formPrincipal
   fieldset{float:left; width:96%; margin:10px/27px; overflow:hidden;
   background:#F6FAFC; border:none; color:#778D9B} de estruturaLaudo.css
   (removido de estrutura.css). flow-root contem os .grid_6 flutuantes
   sem clipar (era o papel do overflow:hidden). */
html body #formPrincipal fieldset,
html body .ui-dialog-content fieldset {
  display: flow-root !important;
  float: none !important;
  clear: both !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 0 24px 0 !important;
  padding: 20px 24px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--card) !important;
  color: var(--foreground) !important;
  box-shadow: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html body #formPrincipal fieldset > legend,
html body .ui-dialog-content fieldset > legend {
  padding: 0 8px !important;
  margin-left: -8px;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  color: var(--muted-foreground) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* p:fieldset (PF) com o mesmo visual */
.ui-fieldset {
  margin: 0 0 24px 0 !important;
}

/* Cabecalho de pagina com titulo + acoes a direita (busca + "Filtros"
   no PowerCRM): <div class="page-header"><h1>..</h1><div class="page-
   actions">..</div></div>. */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-bottom: 20px;
}

html body .page-header > h1,
html body .page-header > h2,
html body .page-header > .page-title {
  margin: 0 !important;
}

.page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* <hr> legado (#formPrincipal hr{border:1px #DDD solid}) vira
   separador fino do DS */
html body #formPrincipal hr {
  border: none !important;
  border-top: 1px solid var(--border) !important;
  margin: 16px 0 !important;
  clear: both;
}

/* helpers de espacamento (4px base) */
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: 8px !important; }
.mt-4 { margin-top: 16px !important; }
.mt-6 { margin-top: 24px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mb-6 { margin-bottom: 24px !important; }
.text-muted { color: var(--muted-foreground) !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.flex-row-8 { display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Dentro de celula o wrap quebra o grupo de acoes em 2 linhas e dobra a altura
   da linha inteira (Consultar Vistoria: tr 93px por causa de 3 icones numa
   coluna de 68px). Na celula o grupo nunca quebra -- a coluna e que cresce. */
.ui-datatable td .flex-row-8,
.ui-treetable td .flex-row-8 { flex-wrap: nowrap !important; justify-content: center; }

/* Links de acao que NAO sao .ui-button (p:commandLink/h:outputLink inline)
   ficavam colados, lidos como um texto so: "Rotacionar EsquerdaRotacionar
   Direita", "Ver Foto OriginalDownload" (laudo antigo, cards de foto). A regra
   de grupo de botoes so alcanca .ui-button, entao o espacamento vai aqui. */
.ui-datatable td a.ui-commandlink + a.ui-commandlink,
.ui-datatable td a.ui-commandlink + a.ui-link,
.ui-treetable td a.ui-commandlink + a.ui-commandlink,
.ui-panelgrid td > a.ui-commandlink + a.ui-commandlink,
.ui-panel-content a.ui-commandlink + a.ui-commandlink,
.ui-accordion-content a.ui-commandlink + a.ui-commandlink { margin-left: 12px !important; }
.flex-between { display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* ============== Badges (pill) ============== */

.ui-badge,
.badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 12px !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  line-height: 1.2;
  border-radius: 9999px !important;
  border: 1px solid transparent;
  white-space: nowrap;
  font-family: var(--font-sans);
}

.badge-default,
.ui-badge.ui-badge-default,
.badge.badge-active,
.badge.status-active {
  background: #0a0a0a !important;
  color: #ffffff !important;
}

.badge-secondary,
.ui-badge.ui-badge-secondary,
.badge.badge-inactive,
.badge.status-inactive {
  background: #f5f5f5 !important;
  color: #525252 !important;
}

.badge-success,
.ui-badge.ui-badge-success {
  background: #ecfdf5 !important;
  color: #065f46 !important;
}

.badge-warning,
.ui-badge.ui-badge-warning {
  background: #fffbeb !important;
  color: #78350f !important;
}

/* Suave como as demais variantes (design.md 3.10: destructive/10 de fundo, texto
   forte). O solido vermelho-cheio destoava em tabelas com 3-4 badges por linha
   (Analises IA, Sucesso do Cliente, Leads, Frota). Botao continua em .btn-destructive. */
.badge-destructive,
.ui-badge.ui-badge-danger {
  background: #FEE2E2 !important;
  color: #B91C1C !important;
}

.badge-outline {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--foreground) !important;
}

/* ============== Mensagens ============== */

.ui-messages,
.ui-message {
  border-radius: var(--radius-lg) !important;
  font-size: var(--text-sm) !important;
  padding: 12px 16px !important;
}

.ui-messages-error,
.ui-message-error {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  color: var(--destructive) !important;
}

.ui-messages-info,
.ui-message-info {
  background: var(--info-bg) !important;
  border: 1px solid #BAE6FD !important;
  color: var(--info-text) !important;
}

.ui-messages-warn,
.ui-message-warn {
  background: var(--warning-bg) !important;
  border: 1px solid #FDE68A !important;
  color: var(--warning-text) !important;
}

/* ---- Alinhamento do icone com o texto (p:messages)
   Trello oYsYAws8 ("Usuario ou senha incorretos") e reNu0Ji8 ("Captcha
   invalido"): e a mesma caixa do login.xhtml. O tema PF monta a caixa com
   float:left no icone de severidade (24x24 com margin-top:-4px) e margin:0 25px
   no <ul>; como o login envolve o p:messages num .TexAlCenter, o texto fica
   centralizado dentro do <ul> enquanto o icone fica preso na borda esquerda --
   os dois nunca se encontram, nem na horizontal nem na vertical.
   Aqui a caixa de severidade vira uma linha flex (icone + lista lado a lado,
   centrados na vertical), mesmo padrao ja adotado no growl mais abaixo.
   Sem !important: os seletores abaixo ja sao mais especificos que os do tema. ---- */
html body .ui-messages > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

html body .ui-messages > div > span[class$="-icon"] {
  float: none;
  flex: 0 0 auto;
  margin: 0 !important;
  /* Segundo retorno do oYsYAws8 (28/09, aba anonima): a caixa do icone ja
     estava centrada, mas o GLIFO nao. O tema poe o primeicon com font-size
     24px (1.5rem) numa caixa de 24x24 e o line-height herdado e 1.5, entao o
     glifo e desenhado numa linha de 36px e desce 6px em relacao ao texto.
     line-height igual a altura da caixa centraliza o glifo. */
  width: 24px;
  height: 24px;
  line-height: 24px !important;
  font-size: 24px !important;
  text-align: center;
}
html body .ui-messages > div > span[class$="-icon"]::before {
  line-height: inherit;
  vertical-align: top;
}

html body .ui-messages > div > ul {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  text-align: left;   /* anula o text-align:center herdado do .TexAlCenter do login */
}

/* Trello uOrL9klE: o p:messages SEM mensagem ainda e renderizado como um
   <div class="ui-messages"> vazio, e o padding 12px 16px acima virava uma faixa
   invisivel de 24px -- no modal "Esqueci minha senha" o texto ficava 49px abaixo
   do titulo. Vazio de verdade (0 nos filhos) nao ocupa espaco. Quando o PF
   atualiza o componente com mensagem, o elemento e substituido e volta a aparecer. */
html body .ui-messages:empty,
html body .ui-message:empty {
  display: none !important;
}

/* O PF renderiza o link de fechar ANTES do icone; no float ele ia para a
   direita, no flex precisa de order + margin auto para continuar la. */
html body .ui-messages > div > .ui-messages-close {
  order: 1;
  float: none;
  flex: 0 0 auto;
  margin-left: auto;
}

/* ============== ConfirmDialog (p:confirmDialog) ==============
   PF renderiza a mensagem alinhada a esquerda (icone + texto) e os
   botoes alinhados a direita -- time pediu os dois centralizados
   em relacao ao modal (ex: "Fazer uma copia da Configuracao?"). */
.ui-confirm-dialog .ui-dialog-content {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  border: none !important;          /* tema desenhava uma caixa em volta da mensagem */
}

/* O span do icone de severidade (vazio no DS) ocupava largura e empurrava o
   texto para a direita do centro (Trello VL8Lze3b). */
.ui-confirm-dialog .ui-confirm-dialog-severity {
  display: none !important;
}

.ui-confirm-dialog .ui-confirm-dialog-message {
  margin: 0 !important;
  width: 100% !important;
  text-align: center !important;
}

.ui-confirm-dialog .ui-dialog-buttonpane {
  display: flex !important;
  justify-content: center !important;
  gap: 8px;
}

/* ============== Growl / barNotification ============== */

/* Forca .ui-helper-hidden a esconder no growl mesmo com display:block inline
   injetado por JS legado (legacyUiHelpers.js etc.). Sem isso, o growl #barNotification
   vazio aparecia como faixa azul colada no rodape em varias telas apos navegar
   pelo menu.
   ATENCAO: NAO aplicar global. Em PF12, panels de selectOneMenu/autocomplete/
   datepicker comecam com .ui-helper-hidden e o JS toggle apenas o display
   inline -- regra global travava esses overlays fechados. */
#barNotification .ui-helper-hidden {
  display: none !important;
}
/* ---- Growl (toast) no padrao do DS: caixa 380px, radius 8, sombra, icone
   20px centralizado com o titulo, titulo 13/600 + detalhe 13/400, cores
   suaves por severidade (Trello YoJ7t6Ko: era 500px, texto 16px e icone
   desalinhado do tema PF). Vence estrutura.css (.ui-growl 500px !important). ---- */
html body .ui-growl {
  top: 16px !important;                 /* no topo, por cima do topbar (z-index maior) -- Trello mZTlBzjr */
  right: 20px !important;
  width: 380px !important;
  min-width: 0 !important;
  max-width: calc(100vw - 40px) !important;
  z-index: 9999999 !important;
}

html body .ui-growl .ui-growl-item-container {
  margin: 0 0 10px 0 !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  color: var(--foreground) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
  opacity: 1 !important;
  filter: none !important;
}

html body .ui-growl .ui-growl-item {
  display: flex !important;
  min-height: 0 !important;
  height: auto !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 40px 12px 14px !important;
  position: relative;
  font-family: var(--font-sans) !important;
}

html body .ui-growl .ui-growl-image {
  flex: 0 0 22px;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  background: none !important;
  font-size: 20px !important;
  line-height: 22px !important;
  text-indent: 0 !important;
  float: none !important;
}

html body .ui-growl .ui-growl-message {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
}

html body .ui-growl .ui-growl-title {
  display: block;
  padding: 0 !important;                /* tema: padding-bottom 7px */
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  line-height: 22px !important;        /* mesma altura do icone -> centro alinhado */
  color: var(--foreground) !important;
  margin: 0 !important;
}

html body .ui-growl .ui-growl-message p:empty { display: none !important; }  /* PF sempre renderiza o <p> do detail */
html body .ui-growl .ui-growl-message p {
  margin: 2px 0 0 0 !important;
  font-size: var(--text-sm) !important;
  line-height: 1.45 !important;
  color: var(--muted-foreground) !important;
  word-break: break-word;
}

/* seletor (0,5,2) + display forcado: uma regra generica de .ui-icon-closethick
   deixava o X do toast com display:none (Trello 1h6WiOSs). */
html body .ui-growl .ui-growl-item-container .ui-growl-item .ui-growl-icon-close,
html body .ui-growl .ui-growl-icon-close {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  background: none !important;
  text-indent: 0 !important;
  color: var(--muted-foreground) !important;
  cursor: pointer;
  float: none !important;
}
html body .ui-growl .ui-growl-item-container .ui-growl-item .ui-growl-icon-close::before,
html body .ui-growl .ui-growl-icon-close::before {
  content: "\00d7";
  font-size: 18px;
  line-height: 20px;
  display: block;
  text-align: center;
}

/* Icone via Font Awesome 4.2 (o tema usa sprite/PrimeIcon; padroniza). */
html body .ui-growl .ui-growl-image::before {
  font-family: FontAwesome !important;
  font-size: 20px;
  line-height: 22px;
  display: block;
  text-align: center;
}
/* O tema nova-light poe um glifo PrimeIcons no mesmo ::before com seletor
   (0,4,2); precisa vencer com (0,4,3) + !important, senao o codigo do
   PrimeIcons renderiza como caixa na fonte FontAwesome. */
html body .ui-growl .ui-growl-item-container .ui-growl-image-info::before  { content: "\f05a" !important; }   /* info-circle */
html body .ui-growl .ui-growl-item-container .ui-growl-image-warn::before  { content: "\f071" !important; }   /* exclamation-triangle */
html body .ui-growl .ui-growl-item-container .ui-growl-image-error::before,
html body .ui-growl .ui-growl-item-container .ui-growl-image-fatal::before { content: "\f057" !important; }   /* times-circle */

/* Severidades: borda esquerda + icone coloridos, fundo suave. */
html body .ui-growl .ui-growl-info  { border-left: 4px solid var(--info-icon, #0284C7) !important; background: var(--info-bg, #F0F9FF) !important; }
html body .ui-growl .ui-growl-warn  { border-left: 4px solid #D97706 !important; background: var(--warning-bg, #FFFBEB) !important; }
html body .ui-growl .ui-growl-error,
html body .ui-growl .ui-growl-fatal { border-left: 4px solid var(--destructive) !important; background: #FEF2F2 !important; }
html body .ui-growl .ui-growl-info  .ui-growl-image { color: var(--info-icon, #0284C7) !important; }
html body .ui-growl .ui-growl-warn  .ui-growl-image { color: #D97706 !important; }
html body .ui-growl .ui-growl-error .ui-growl-image,
html body .ui-growl .ui-growl-fatal .ui-growl-image { color: var(--destructive) !important; }

/* NUNCA estender a regra acima para ".ui-growl .ui-helper-hidden": o Growl do
   PF 12 cria cada mensagem com .ui-helper-hidden e a exibe com fadeIn() (display
   inline) -- o !important engolia TODAS as mensagens de growl apos ajax
   (Trello wBP2Anzp, mlDvYrwQ, KwX2peXm "nao aparece a mensagem"). */

/* ============== Checkbox ============== */

.ui-chkbox {
  display: inline-flex !important;
  align-items: center;
  vertical-align: middle;
}

.ui-chkbox .ui-chkbox-box {
  position: relative !important;
  box-sizing: border-box !important;
  width: 16px !important;
  height: 16px !important;
  border: 1.5px solid var(--control-border) !important;   /* Trello jKzSCtOv: era 1px --input (#e5e5e5), invisivel em monitor Dell */
  border-radius: 4px !important;
  background: var(--background) !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  box-shadow: none !important;
}

.ui-chkbox .ui-chkbox-box:hover {
  border-color: var(--foreground) !important;
}

/* So o MARCADO preenche. Antes .ui-state-focus tambem preenchia: ao desmarcar,
   a caixa continuava com foco e ficava azul como se ainda estivesse marcada
   (Trello NIM5lpYp). Foco = anel, nunca fundo. */
.ui-chkbox .ui-chkbox-box.ui-state-active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}

.ui-chkbox .ui-chkbox-box.ui-state-focus:not(.ui-state-active) {
  background: var(--input-background) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(51, 116, 255, 0.25) !important;
}

.ui-chkbox .ui-chkbox-box.ui-state-focus:not(.ui-state-active) .ui-chkbox-icon {
  color: transparent !important;
  background: transparent !important;
}

.ui-chkbox .ui-chkbox-box .ui-chkbox-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: none !important;
  text-indent: 0 !important;
  margin: 0 !important;
}

.ui-chkbox .ui-chkbox-box.ui-state-active .ui-chkbox-icon::before {
  content: "" !important;
  display: block;
  width: 4px;
  height: 8px;
  border: solid var(--primary-foreground);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* ============== Helper: input nativo "visualmente escondido" ==============
   RadioButton/SelectOneRadio/Checkbox/SelectBooleanCheckbox do PF12 mantem
   o <input> nativo de verdade no DOM (por acessibilidade/teclado), escondido
   via classe ui-helper-hidden-accessible -- padrao classico do jQuery UI.
   Esse projeto nao carrega NENHUM tema do PrimeFaces/jQuery UI (so os
   overrides proprios em design-components.css), entao essa classe nunca
   tinha definicao nenhuma: o <input type="radio"/checkbox"> nativo
   renderizava visivel, no tamanho/posicao padrao do navegador, por cima
   ou do lado do nosso circulo/quadrado customizado -- exatamente a
   "bolinha"/"check" fora do lugar reportado em radio buttons e checkboxes
   em varias telas. Regra padrao do jQuery UI (clip 1x1px, fora do fluxo). */
.ui-helper-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  width: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
}

/* ============== Radio Button ============== */

.ui-radiobutton {
  display: inline-flex !important;
  align-items: center;
  vertical-align: middle;
}

.ui-radiobutton .ui-radiobutton-box {
  position: relative !important;
  box-sizing: border-box !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  border: 1.5px solid var(--control-border) !important;   /* Trello jKzSCtOv */
  border-radius: 50% !important;
  background: var(--background) !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast);
  box-shadow: none !important;
}

.ui-radiobutton .ui-radiobutton-box:hover {
  border-color: var(--foreground) !important;
}

.ui-radiobutton .ui-radiobutton-box.ui-state-active {
  border-width: 1.5px !important;
  border-color: var(--primary) !important;
}

/* Span do icone do PF: sem tema base carregado, ele pode chegar sem
   tamanho definido (so o :before customizado abaixo desenha o ponto);
   forcamos ele a ocupar a caixa toda e centralizar o ponto, senao o
   ponto pode nascer desalinhado/cortado dependendo do navegador. */
.ui-radiobutton .ui-radiobutton-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: none !important;
  text-indent: 0 !important;
  margin: 0 !important;
}

.ui-radiobutton .ui-radiobutton-box.ui-state-active .ui-radiobutton-icon::before {
  content: "" !important;
  display: block;
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
}

/* ============== Tabs ============== */

.ui-tabs {
  background: transparent !important;
  border: none !important;
  font-family: var(--font-sans);
}

.ui-tabs-nav,
.ui-tabs .ui-tabs-nav {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: flex;
  gap: 24px;
}

.ui-tabs-nav > li,
.ui-tabs .ui-tabs-nav > li {
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
}

.ui-tabs-nav > li > a,
.ui-tabs .ui-tabs-nav > li > a {
  display: inline-block;
  padding: 12px 8px !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--muted-foreground) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  transition: color var(--transition-fast);
}

.ui-tabs-nav > li > a:hover,
.ui-tabs .ui-tabs-nav > li > a:hover {
  color: var(--primary) !important;
}

.ui-tabs-nav > li.ui-state-active > a,
.ui-tabs .ui-tabs-nav > li.ui-state-active > a {
  color: var(--primary) !important;
  background: transparent !important;
}

.ui-tabs-nav > li.ui-state-active::after,
.ui-tabs .ui-tabs-nav > li.ui-state-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--primary);
}

.ui-tabs .ui-tabs-panel,
.ui-tabs-panels {
  background: transparent !important;
  border: none !important;
  padding: 16px 0 !important;
  font-family: var(--font-sans);
}

/* ============== Accordion ==============
   Antes era 100% "flat" (fundo/borda transparentes, so uma linha
   embaixo do titulo) -- sem nenhum container proprio, ficava sem
   contraste nenhum com o fundo da pagina ("falta definicao"). Agora
   segue o mesmo padrao de Card do design system (border+radius-xl+
   shadow-sm, docs/design.md 3.8), com cada painel se destacando do
   vizinho por um separador e o painel ativo com fundo levemente
   diferenciado. */
.ui-accordion {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
  font-family: var(--font-sans);
}

.ui-accordion .ui-accordion-header {
  background: var(--card) !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  transition: background var(--transition-fast);
  /* PF 12: o icone (span.ui-icon) e IRMAO do <a> do titulo, nao filho -- sem
     flex no header ele caia numa linha propria acima do texto (Trello dQAY9iZ7). */
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}

.ui-accordion .ui-accordion-header > a {
  flex: 1 1 auto;
  min-width: 0;
}

.ui-accordion .ui-accordion-header:hover {
  background: var(--accent) !important;
}

.ui-accordion .ui-accordion-header > a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0 !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--foreground) !important;
  background: transparent !important;
  text-decoration: none !important;
}

/* O tema do PF pinta o header ATIVO com texto branco (era fundo azul).
   Como aqui o fundo passou a ser claro, sem forcar a cor o titulo do painel
   aberto fica branco sobre cinza -- invisivel (Laudo antigo, Suporte, Backup).
   O texto real fica num <a> dentro do header, entao a cor vai nos dois. */
.ui-accordion .ui-accordion-header.ui-state-active {
  background: var(--muted) !important;
  border-bottom-color: var(--border) !important;
}

.ui-accordion .ui-accordion-header,
.ui-accordion .ui-accordion-header.ui-state-active,
.ui-accordion .ui-accordion-header > a,
.ui-accordion .ui-accordion-header.ui-state-active > a,
.ui-accordion .ui-accordion-header.ui-state-hover > a {
  color: var(--foreground) !important;
  font-size: var(--text-md) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Mesma armadilha nas abas (p:tabView): ativo com texto branco sobre claro. */
.ui-tabs .ui-tabs-nav .ui-tabs-header.ui-state-active > a,
.ui-tabs .ui-tabs-nav .ui-state-active a {
  color: var(--foreground) !important;
}

/* O tema nova-light (carregado DEPOIS do DS pelo h:head) declara position:absolute
   com a mesma especificidade -- por isso a seta ia parar no canto do painel em
   DEV mesmo com o header em flex (Trello dQAY9iZ7, 2a rodada). Tudo !important e
   seletor com (0,4,0) para vencer independente da ordem dos CSS. */
html body .ui-accordion .ui-accordion-header .ui-icon,
html body .ui-accordion .ui-accordion-header > .ui-icon {
  background: none !important;
  text-indent: 0 !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  float: none !important;
  display: inline-block !important;
  transition: transform var(--transition-normal);
}
html body .ui-accordion .ui-accordion-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative;
}
html body .ui-accordion .ui-accordion-header > a {
  flex: 1 1 auto !important;
  min-width: 0;
  padding: 0 !important;
  position: static !important;
}
.ui-accordion .ui-accordion-header .ui-icon::before {
  position: relative !important;
  top: 0;
  left: 0;
  display: block;
  margin: 5px auto 0 auto;
}

.ui-accordion .ui-accordion-header .ui-icon::before {
  content: "" !important;
  position: absolute;
  top: 5px;
  left: 4px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--muted-foreground);
}

.ui-accordion .ui-accordion-header.ui-state-active .ui-icon {
  transform: rotate(180deg);
}

.ui-accordion .ui-accordion-content {
  background: var(--card) !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 20px !important;
  font-size: var(--text-sm) !important;
  color: var(--muted-foreground) !important;
  line-height: 1.625;
}

.ui-accordion .ui-accordion-content:last-child,
.ui-accordion .ui-accordion-tab:last-child .ui-accordion-content {
  border-bottom: none !important;
}

/* ============== Breadcrumb ============== */

.ui-breadcrumb {
  background: transparent !important;
  border: none !important;
  padding: 8px 0 !important;
  font-family: var(--font-sans);
}

.ui-breadcrumb-items {
  gap: 4px;
}

.ui-breadcrumb .ui-menuitem-link {
  padding: 2px 4px !important;
  font-size: var(--text-sm) !important;
  color: var(--muted-foreground) !important;
  text-decoration: none !important;
  border-radius: var(--radius-sm) !important;
  transition: color var(--transition-fast);
}

.ui-breadcrumb .ui-menuitem-link:hover {
  color: var(--primary) !important;
  text-decoration: underline !important;
}

.ui-breadcrumb li:last-child .ui-menuitem-link {
  color: var(--foreground) !important;
  font-weight: 500 !important;
}

.ui-breadcrumb .ui-breadcrumb-chevron {
  color: var(--muted-foreground) !important;
  margin: 0 4px !important;
}

/* ============== Tree ============== */

.ui-tree {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 8px !important;
  font-family: var(--font-sans);
}

.ui-tree .ui-treenode-content {
  border-radius: var(--radius-sm) !important;
  padding: 2px 4px !important;
  transition: background var(--transition-fast);
}

.ui-tree .ui-treenode-content:hover {
  background: var(--muted) !important;
}

.ui-tree .ui-treenode-content.ui-treenode-selected {
  background: rgba(59, 130, 246, 0.1) !important;
  color: var(--primary) !important;
}

.ui-tree .ui-treenode-label {
  font-size: var(--text-sm) !important;
  color: var(--foreground) !important;
}

.ui-tree .ui-treenode-selected .ui-treenode-label {
  color: var(--primary) !important;
}

/* ============== PickList ============== */

.ui-picklist {
  font-family: var(--font-sans);
}

.ui-picklist-list {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--card) !important;
  padding: 4px !important;
}

.ui-picklist-caption {
  background: var(--muted) !important;
  border: 1px solid var(--border) !important;
  border-bottom: none !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  color: var(--foreground) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
}

.ui-picklist-list + .ui-picklist-caption,
.ui-picklist-caption + .ui-picklist-list {
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}

.ui-picklist-item {
  border-radius: var(--radius-sm) !important;
  padding: 6px 8px !important;
  font-size: var(--text-sm) !important;
  color: var(--foreground) !important;
  transition: background var(--transition-fast);
}

.ui-picklist-item:hover {
  background: var(--muted) !important;
}

.ui-picklist-item.ui-state-highlight {
  background: rgba(59, 130, 246, 0.1) !important;
  color: var(--primary) !important;
}

.ui-picklist-buttons .ui-button {
  margin: 4px 0 !important;
}

/* ============== Slider ============== */

.ui-slider {
  background: var(--muted) !important;
  border: none !important;
  border-radius: 9999px !important;
}

.ui-slider-horizontal {
  height: 6px !important;
}

.ui-slider-range {
  background: var(--primary) !important;
  border-radius: 9999px !important;
}

.ui-slider-handle {
  width: 16px !important;
  height: 16px !important;
  background: var(--card) !important;
  border: 2px solid var(--primary) !important;
  border-radius: 50% !important;
  box-shadow: var(--shadow-xs) !important;
  top: -5px !important;
  cursor: pointer;
}

/* ============== Toolbar ============== */

.ui-toolbar {
  background: var(--muted) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 12px !important;
  gap: 8px;
}

/* ============== Fieldset ============== */

.ui-fieldset {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 16px !important;
  font-family: var(--font-sans);
}

.ui-fieldset-legend {
  background: var(--card) !important;
  border: none !important;
  color: var(--foreground) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  padding: 0 6px !important;
}

/* ============== DataList / DataGrid (4 telas) ============== */

.ui-datalist-header,
.ui-datagrid-header {
  background: var(--muted) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  padding: 10px 16px !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
}

.ui-datalist-footer,
.ui-datagrid-footer {
  background: var(--muted) !important;
  border: 1px solid var(--border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  color: var(--muted-foreground) !important;
  font-size: var(--text-sm) !important;
}

/* ============== ColorPicker ============== */

.ui-colorpicker_hue,
.ui-colorpicker-preview {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
}

/* ============== Tooltip ============== */

.ui-tooltip {
  font-family: var(--font-sans);
}

.ui-tooltip .ui-tooltip-text {
  padding: 6px 12px !important;
  font-size: var(--text-xs) !important;
  color: var(--foreground) !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ============== Dialog / Modal ============== */

.ui-dialog {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: var(--font-sans);
  padding: 0 !important;
}

/* Largura maxima responsiva. O width="600"/style inline do p:dialog
   continua valendo ate o teto; em celular nunca passa de 95vw. As
   classes .ui-dialog-modified-* (estrutura.css: width/max-width em %
   !important, 12 usos) ficam de fora -- sao dialogs "tela cheia" de
   proposito. :where() mantem a especificidade em (0,1,0).
   NOTA: o top:50% + translateY(-50%) legado foi REMOVIDO de
   estrutura.css (o PF12 centraliza via JS, position:fixed); em
   estruturaLaudo.css ele fica, porque ali os dois juntos ainda
   centralizam corretamente e tirar so um quebraria. */
.ui-dialog:where(:not([class*="ui-dialog-modified-full"])) {
  max-width: min(960px, 95vw) !important;
  box-sizing: border-box;
}

/* Rodape de dialog (f:facet footer) com .acoes-form: a margem superior de 24px
   da utilitaria (feita para separar botoes de um formulario) deixava o footer
   com ~97px; no footer o padding do proprio footer ja separa. */
.ui-dialog .ui-dialog-footer > .acoes-form,
.ui-dialog .ui-dialog-buttonpane > .acoes-form {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* variantes de largura pra usar no styleClass do p:dialog */
.ui-dialog.dialog-sm { width: min(480px, 95vw) !important; }
.ui-dialog.dialog-md { width: min(720px, 95vw) !important; }
.ui-dialog.dialog-lg { width: min(960px, 95vw) !important; }
.ui-dialog.dialog-xl { width: min(1200px, 95vw) !important; max-width: 95vw !important; }

/* Sem isso, dialogs sem height/width explicito no p:dialog crescem sem
   limite com o conteudo - em telas de conteudo longo o modal fica maior
   que a viewport, sem scroll interno, e o titlebar (com o X de fechar)
   acaba empurrado pra fora da tela. Cap relativo a viewport + scroll
   interno so no content, mantendo titlebar/footer sempre visiveis.
   IMPORTANTE: nao declarar display na regra .ui-dialog base -- o widget
   do PF esconde o dialog via CSS (.ui-dialog{display:none} no tema) e so
   troca pra "display:block" inline (via jQuery show()) quando aberto; um
   "display:flex !important" incondicional aqui vencia o display:none e
   deixava TODO dialog do sistema sempre visivel, mesmo fechado (bug
   descoberto via o modal de "Esqueci Minha Senha" abrindo sozinho no
   login). Por isso o flex-column so entra quando o proprio PF ja marcou
   o dialog como aberto (style="display: block" inline). */
/* Cap de altura = calc(100vh - 160px) (REVIEW-R1-B tela 1): o PF12
   centraliza verticalmente com top inline, entao um dialog de 90vh
   comecava em ~5vh, DEBAIXO do topbar sticky de 72px. Com 160px de folga
   o dialog centrado fica 80px abaixo do topo e 80px acima do rodape em
   qualquer viewport (nao da pra corrigir o top via CSS: e inline). O
   content herda o cap menos titlebar (~58) e footer (~74). */
.ui-dialog[style*="display: block"],
.ui-dialog[style*="display:block"],
.ui-dialog[style*="display: flex"] {
  max-height: calc(100vh - 160px) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* max-height vale SEMPRE (nao depende de detectar o display inline):
   max-height nao interfere num dialog fechado (display:none). Dialogs
   "tela cheia" (.ui-dialog-modified-*) mantem os proprios limites. */
/* REVIEW-R0 R1: vale para TODOS os dialogs, inclusive
   .ui-dialog-modified-mid/-metade (5 dialogs em 6 telas); so os
   -modified-full* ficam de fora. */
.ui-dialog:where(:not([class*="ui-dialog-modified-full"])) {
  max-height: calc(100vh - 160px) !important;
}

/* Fallback quando o flex-column acima nao entrar (ex.: PF setando o
   display de outro jeito): o content rola sozinho dentro de 90vh menos
   titlebar (~58px) e footer (~74px). */
html body .ui-dialog:not([class*="ui-dialog-modified-full"]) .ui-dialog-content {
  max-height: calc(100vh - 218px) !important;
  overflow-y: auto !important;
  box-sizing: border-box;
}

html body .ui-dialog:not([class*="ui-dialog-modified-full"]):has(.ui-dialog-footer, .ui-dialog-buttonpane) .ui-dialog-content {
  max-height: calc(100vh - 292px) !important;
}

/* Botoes Salvar/Cancelar que as telas poem DENTRO do content (nao no
   footer do p:dialog, ex.: modal Veiculo da Frota, 1152px, botoes em
   y=701 num viewport de 667): a barra vira "rodape" sticky no fim do
   content rolavel -- sempre visivel, sem mexer no XHTML. */
.ui-dialog .ui-dialog-content > .acoes-form,
.ui-dialog .ui-dialog-content > div[align="center"]:has(> .ui-button),
.ui-dialog .ui-dialog-content > .row:has(> .ui-button):not(:has(> .leftt)),
.ui-dialog .ui-dialog-content > .grid_12:has(> .ui-button):not(:has(> .row)):not(:has(> .grid_6)),
.ui-dialog .ui-dialog-content > form > .acoes-form,
.ui-dialog .ui-dialog-content > form > div[align="center"]:has(> .ui-button),
/* REVIEW-R0 R1: com ancestral intermediario (span#panelDialogVeiculo >
   div.grid_12 > botoes) -- sticky funciona porque o span vai ate o fim
   do content. */
/* So a ULTIMA barra do bloco vira rodape: uma .acoes-form seguida de tabela
   (toolbar "+ Nova Frota" do Gerenciar Frotas) grudava no fim do content e
   cobria o cabecalho da tabela (Trello GRUvAGwd). */
.ui-dialog .ui-dialog-content :is(span, div, form) > .acoes-form:last-child,
.ui-dialog .ui-dialog-content :is(span, div, form) > .grid_12:last-child:has(> .ui-button):not(:has(> .row)):not(:has(> .grid_6)),
.ui-dialog .ui-dialog-content :is(span, div, form) > div[align="center"]:last-child:has(> .ui-button):not(:has(> .row)):not(:has(> .grid_6)) {
  position: sticky !important;
  bottom: -24px !important;            /* compensa o padding 24px do content */
  margin: 16px -24px -24px -24px !important;
  padding: 12px 24px !important;
  width: auto !important;
  background: var(--card) !important;
  border-top: 1px solid var(--border) !important;
  justify-content: flex-end !important;
  z-index: 2;
}

.ui-dialog .ui-dialog-titlebar {
  /* fundo solido + sticky: no modo flex-column a titlebar ja nao rola;
     no fallback (content rolando dentro do dialog) ela gruda no topo e
     o X continua visivel/clicavel. */
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  background: var(--card) !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding: 16px 24px !important;
  color: var(--foreground) !important;
  font-size: var(--text-lg) !important;
  font-weight: 600 !important;
}

.ui-dialog .ui-dialog-titlebar-icon {
  position: relative !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  color: var(--muted-foreground) !important;
  border-radius: var(--radius-md) !important;
  padding: 0 !important;
  cursor: pointer;
}

.ui-dialog .ui-dialog-titlebar-icon .ui-icon {
  position: static !important;
  margin: 0 !important;
  background: none !important;
  text-indent: 0 !important;
  width: auto !important;
  height: auto !important;
}

.ui-dialog .ui-dialog-titlebar-icon:hover {
  background: var(--muted) !important;
  color: var(--foreground) !important;
}

.ui-dialog .ui-dialog-content {
  background: transparent !important;
  padding: 24px !important;
  font-size: var(--text-sm) !important;
  color: var(--foreground) !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
}

.ui-dialog .ui-dialog-titlebar {
  flex: 0 0 auto !important;
}

.ui-dialog .ui-dialog-buttonpane,
.ui-dialog .ui-dialog-footer {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--border) !important;
  padding: 16px 24px !important;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex: 0 0 auto !important;
}

.ui-widget-overlay,
.ui-overlay-mask,
.ui-dialog-mask {
  background: rgba(0, 0, 0, 0.5) !important;
}

/* ============== Loading Spinner (layout/status.xhtml) ==============
   Substitui o GIF antigo (/imagens/status.gif) por um spinner CSS puro,
   no padrao "Loader2 animate-spin" documentado em docs/design.md 3.14
   (Estados - Loading). */
@keyframes spin-status {
  to { transform: rotate(360deg); }
}

.status-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--muted);
  border-top-color: var(--primary);
  animation: spin-status 0.7s linear infinite;
  margin: 0 auto;
}

.status-dialog-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 32px;
  min-width: 220px;
  box-sizing: border-box;
}

.status-dialog-content .status-icon-error {
  font-size: 24px;
  color: var(--destructive);
}

.status-dialog-content span {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted-foreground);
  text-align: center;
}

/* ============== ProgressBar ============== */

.ui-progressbar {
  height: 8px !important;
  background: var(--muted) !important;
  border: none !important;
  border-radius: 9999px !important;
  overflow: hidden;
}

.ui-progressbar .ui-progressbar-value {
  /* --progress-bg = --primary por padrao; "Cor da Barra Progresso" do
     contratante sobrescreve (layout/brandContratante.xhtml). */
  background: var(--progress-bg) !important;
  border: none !important;
  border-radius: 9999px !important;
  transition: width 300ms ease;
}

.ui-progressbar.ui-progressbar-indeterminate .ui-progressbar-value {
  background: linear-gradient(90deg, var(--muted) 0%, var(--progress-bg) 50%, var(--muted) 100%);
  background-size: 200% 100%;
  animation: progressbar-indeterminate 1.5s ease-in-out infinite;
}

@keyframes progressbar-indeterminate {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ui-progressbar .ui-progressbar-label {
  font-size: 12px !important;
  font-weight: 500;
  color: var(--muted-foreground);
  display: none;
}

/* ============== Skeleton (loading placeholder) ============== */

.skeleton {
  background: linear-gradient(90deg, var(--muted) 25%, #fafafa 50%, var(--muted) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============== Avatar (utilidade) ============== */

.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--muted);
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--primary);
}

.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-md { width: 40px; height: 40px; font-size: 14px; }
.avatar-lg { width: 48px; height: 48px; font-size: 16px; }
.avatar-xl { width: 64px; height: 64px; font-size: 20px; }

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Iniciais em tabela: avatar circular + nome, cor determinada por hash do
   nome (ver js/designSystemEnhancements.js) para variar visualmente entre
   pessoas diferentes sem precisar de foto. */
.avatar-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.avatar-hue-0 { background: #DBEAFE !important; color: #1D4ED8 !important; }
.avatar-hue-1 { background: #DCFCE7 !important; color: #15803D !important; }
.avatar-hue-2 { background: #FEF3C7 !important; color: #B45309 !important; }
.avatar-hue-3 { background: #FCE7F3 !important; color: #BE185D !important; }
.avatar-hue-4 { background: #EDE9FE !important; color: #6D28D9 !important; }
.avatar-hue-5 { background: #FFEDD5 !important; color: #C2410C !important; }
.avatar-hue-6 { background: #CCFBF1 !important; color: #0F766E !important; }
.avatar-hue-7 { background: #E0E7FF !important; color: #4338CA !important; }

/* ============== Separator ============== */

.separator,
.ui-separator {
  background: var(--border);
}

.separator-horizontal {
  height: 1px;
  width: 100%;
  margin: 16px 0;
}

.separator-vertical {
  width: 1px;
  height: 100%;
  margin: 0 16px;
}

/* ============== Labels ============== */

/* docs/design.md 3.6: label 12px / 500 / gray-700, MENOR que o input
   (14px) de proposito. Vence o label{font-weight:bold !important;
   line-height:34px; font-size:12px} que ainda vive em estruturaLaudo.css
   (em estrutura.css a regra foi removida). */
.ui-outputlabel,
label.form-label,
.ui-outputlabel.ui-widget {
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  color: #374151 !important;
  font-family: var(--font-sans);
  line-height: 1.5;
}

.page-subtitle {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  margin: -8px 0 16px 0;
}

/* Indicador de campo obrigatorio. estrutura/estruturaLaudo tinham
   .campoObrigatorio{vertical-align:top; margin:0 5px} -- o asterisco
   "flutuava" acima do campo. Agora fica alinhado ao centro, colado no
   fim do campo (como flex item dentro do .rightt) sem quebrar linha. */
.ui-outputlabel-rfi,
.campoObrigatorio {
  color: var(--destructive) !important;
  font-weight: 600;
  margin: 0 0 0 2px !important;
  vertical-align: middle !important;
  line-height: 1;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ============== Grid de pagina (960.css) ==============
   960.css define .grid_1..12 como display:inline; float:left; margin
   0.5% e larguras percentuais aninhadas (.grid_12 .grid_6{width:48%});
   estrutura/estruturaLaudo somam #formPrincipal .grid_12{width:96.2%;
   padding:1% 1.9%; overflow:hidden} e .grid_6{width:47%}. Nada disso e
   em pixel fixo -- o "campo desproporcional" em tela larga vinha dos
   campos com largura em % do .rightt (ver secao Formulario). Aqui o
   grid vira: .grid_12 = bloco 100% sem padding; .grid_6 = coluna de
   formulario, 2 por linha com gap de 24px; 1 por linha ate 767px.
   flow-root contem os floats internos sem clipar (o overflow:hidden
   legado clipava sombras/aneis de foco). */
html body .grid_12 {
  display: flow-root !important;
  float: none !important;
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

html body .grid_6 {
  display: flow-root !important;
  float: left !important;
  position: static !important;
  width: calc(50% - 12px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* 2a coluna da mesma linha: o gap de 24px. (Se houver 3 .grid_6
   seguidos sem <div class="clear"/> entre eles, o 3o cai na linha de
   baixo com 24px de recuo -- caso raro; o padrao do app e 2 + clear.) */
html body .grid_6 + .grid_6 {
  margin-left: 24px !important;
}

/* .grid_2/4/5/10 (8 usos): so tira o display:inline invalido do 960.css
   e mantem a largura percentual do 960.css. */
html body .grid_2,
html body .grid_4,
html body .grid_5,
html body .grid_10 {
  display: block !important;
  box-sizing: border-box;
  overflow: visible !important;
}

@media (max-width: 767px) {
  html body .grid_6,
  html body .grid_6 + .grid_6 {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

/* ============== Formulario: .row > .leftt + .rightt (+ .clearr) ==============
   Padrao de 79 telas (913 linhas). PowerCRM/design.md: label ACIMA do
   campo, campo com 100% da coluna. Vence estrutura/estruturaLaudo:
     #formPrincipal .row{float:left; margin:2px; height:40px; display:inline-table}
     #formPrincipal .leftt, .ui-dialog-content .leftt{width:30%; float:left;
       text-align:right; max-width:140px; margin-top:8px; font-size:14px}
     #formPrincipal .rightt, .ui-dialog-content .rightt{width:67%; float:left}
     #formPrincipal .rightt input{width:75%} / .ui-selectonemenu{width:73%!important}
   (a ultima dupla era a causa real dos campos "desproporcionais":
   75% de 67% de uma coluna de 50% da tela em 1920px = campo de ~480px
   pra um CEP, e em 1366px = ~340px -- nada guardava proporcao.)

   Restringe a rows que TEM .leftt (":has(> .leftt)") -- 58 rows do app
   sao so um "<div class=row>" com botoes dentro (ver secao Botoes) e
   nao podem virar coluna. O legado usa #formPrincipal (1 id) e nao usa
   !important nessas regras; por isso TODAS as declaracoes abaixo sao
   !important (o "html body" sozinho nao venceria um id). */
html body .row:has(> .leftt) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  font-family: var(--font-sans);
}

/* dentro de .grid_6 a distancia entre linhas ja vem do margin-bottom
   de cada .row; a ultima nao precisa empurrar o fim da coluna. */
html body .grid_6 > .row:has(> .leftt):last-child,
html body .grid_12 > .row:has(> .leftt):last-child {
  margin-bottom: 0 !important;
}

html body .row > .leftt {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-family: var(--font-sans);
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  color: #374151 !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}

/* p:outputLabel/h:outputText usados como texto do label dentro do .leftt
   herdam a tipografia do .leftt em vez da regra generica de label. */
html body .row > .leftt .ui-outputlabel,
html body .row > .leftt label,
html body .row > .leftt span:not(.campoObrigatorio) {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}

/* Asterisco de obrigatorio movido pelos agentes de tela para dentro do
   .leftt (logo apos o texto do label, padrao Power "Nome *"): continua
   vermelho e nao herda a tipografia do label. */
html body .row > .leftt .campoObrigatorio {
  color: var(--destructive) !important;
  font-weight: 600 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0 0 0 2px !important;
  vertical-align: baseline !important;
}

/* .righttt (6 usos) e typo historico de .rightt -- tratado igual. */
html body .row > .rightt,
html body .row > .righttt {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  box-sizing: border-box !important;
  font-size: var(--text-sm);
  color: var(--foreground);
}

/* .clearr existia so pra fechar os floats; num flex column e um item
   vazio que nao serve pra nada -- some pra nao criar gap fantasma. */
html body .row:has(> .leftt) > .clearr {
  display: none !important;
}

/* Campos dentro do .rightt ocupam a largura toda. flex-basis 200px +
   grow faz: 1 campo = 100%; 2 campos na mesma linha (32 casos no app,
   ex: CEP + botao) dividem o espaco; o asterisco (.campoObrigatorio) e
   icones/links ficam colados no fim sem quebrar linha. width:auto
   !important anula o Wid70/style="width:230px" inline que os agentes
   de tela ainda nao removeram e os width:75%/73% do legado. */
html body .row > .rightt > .ui-inputfield,
html body .row > .rightt > .ui-inputtext,
html body .row > .rightt > .ui-password,
html body .row > .rightt > .ui-inputmask,
html body .row > .rightt > .ui-inputtextarea,
html body .row > .rightt > .ui-selectonemenu,
html body .row > .rightt > .ui-selectcheckboxmenu,
html body .row > .rightt > .ui-selectmanymenu,
html body .row > .rightt > .ui-calendar,
html body .row > .rightt > .ui-autocomplete,
html body .row > .rightt > .ui-spinner,
html body .row > .rightt > .ui-inputnumber,
html body .row > .rightt > .periodoContainer,
html body .row > .righttt > .ui-inputfield,
html body .row > .righttt > .ui-inputtext,
html body .row > .righttt > .ui-selectonemenu {
  flex: 1 1 200px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* textarea: linha propria, 100% */
html body .row > .rightt > .ui-inputtextarea {
  flex-basis: 100% !important;
}

/* .periodoContainer tem 2 datepickers + o texto "a" no meio -- cada
   data divide o espaco igualmente entre si. */
html body .row > .rightt > .periodoContainer {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body .row > .rightt > .periodoContainer > .ui-calendar {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
}

/* Valor somente-leitura (198 casos): <div class="rightt"><p:outputLabel
   value="#{...}"/></div>. Dentro do .rightt o p:outputLabel e VALOR, nao
   label -- tipografia de body (14px/400), nao a de label (12px/500). */
html body .row > .rightt > .ui-outputlabel,
html body .row > .rightt > span:not(.campoObrigatorio):not([class*="ui-"]),
html body .row > .rightt > label:not(.ui-outputlabel) {
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  color: var(--foreground) !important;
  line-height: 1.5;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

/* Linha de SECAO (81 casos): <div class="leftt"><i class="fa fa-user Fs30
   blue"/></div><div class="rightt"><h3>Dados do Contratante</h3></div>.
   Nao e label+campo -- e um titulo de secao com icone. Volta a ser
   horizontal (icone + titulo na mesma linha) com separador embaixo. */
html body .row:has(> .leftt > i):has(> .rightt > h3) {
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 24px 0 16px 0 !important;
  padding: 0 0 8px 0 !important;
  border-bottom: 1px solid var(--border);
}

html body .row:has(> .leftt > i):has(> .rightt > h3):first-child {
  margin-top: 0 !important;
}

html body .row:has(> .leftt > i):has(> .rightt > h3) > .leftt {
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 28px;
}

/* .Fs30 (core-layout.css, !important) deixava o icone de secao com
   30px -- PowerCRM usa icones de 16-20px. */
html body .row:has(> .leftt > i):has(> .rightt > h3) > .leftt > i {
  font-size: 20px !important;
  line-height: 1 !important;
}

html body .row:has(> .leftt > i):has(> .rightt > h3) > .rightt {
  width: auto !important;
  flex: 1 1 auto !important;
}

html body .row:has(> .leftt > i):has(> .rightt > h3) > .rightt > h3 {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  line-height: 1.3 !important;
}

/* h3 solto dentro de .rightt (sem icone no .leftt): mesmo estilo de
   secao, sem a linha. Vence #formPrincipal .rightt h3{margin-top:10px
   !important; border-bottom} de estruturaLaudo.css. */
html body .row > .rightt > h3 {
  margin: 0 !important;
  border: none !important;
  font-size: var(--text-lg) !important;
  font-weight: 600 !important;
  color: #111827 !important;
  width: 100%;
}

/* Linha de checkbox: <div class="leftt"><p:selectBooleanCheckbox/></div>
   <div class="rightt">texto</div> (5 casos) -- checkbox e texto lado a
   lado, nao um em cima do outro. */
html body .row:has(> .leftt > .ui-chkbox):not(:has(> .rightt > .ui-inputfield)) {
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

html body .row:has(> .leftt > .ui-chkbox) > .leftt {
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

html body .row:has(> .leftt > .ui-chkbox) > .rightt {
  width: auto !important;
  flex: 1 1 auto !important;
}

/* Formularios em h:panelGrid (tabela de layout, ex: filaEnvioVistoria):
   p:outputLabel com for= acima do campo quando estiver em celula
   propria e sem .leftt. Sem !important: e so um default. */
.ui-panelgrid td > .ui-outputlabel[for] {
  display: block;
  margin-bottom: 6px;
}

/* Utilitario explicito de layout de campo (para telas novas / fora do
   padrao .row): <div class="form-field"><label class="form-label">..
   </label><p:inputText/></div>. */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  min-width: 0;
}

.form-field > .ui-inputfield,
.form-field > .ui-inputtext,
.form-field > .ui-selectonemenu,
.form-field > .ui-calendar,
.form-field > .ui-autocomplete {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}

@media (max-width: 767px) {
  .form-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.w-full {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ============== Utilitarias pedidas pelos agentes de tela ==============
   (G1/G3, 22/09) -- larguras semanticas de campo, pares de campo,
   margens, alerta inline, titulo/subtitulo de celula. */

/* ---- .field-w-xs/sm/md/lg: largura MAXIMA de campo semanticamente
   curto (placa, CEP, UF, ano, hora, digito, data). Dentro do .rightt
   vencem o flex:1 1 200px da regra base (mesma especificidade 0,3,2,
   vem depois no arquivo + !important). Cobre a classe no proprio
   campo E no wrapper do PF (":has(> .field-w-*)" quando o styleClass
   cai no input e o flex item e o span .ui-calendar/.ui-autocomplete). */
.field-w-xs { width: 90px; max-width: 90px; }
.field-w-sm { width: 130px; max-width: 130px; }
.field-w-md { width: 200px; max-width: 200px; }
.field-w-lg { width: 300px; max-width: 300px; }

html body .row > .rightt > .field-w-xs,
html body .row > .rightt > :has(> .field-w-xs),
html body .row > .rightt > .field-pair > .field-w-xs,
html body .row > .rightt > .field-pair > :has(> .field-w-xs),
.form-field > .field-w-xs,
.form-field > :has(> .field-w-xs) {
  flex: 0 0 90px !important;
  width: 90px !important;
  max-width: 90px !important;
  min-width: 0 !important;
}

html body .row > .rightt > .field-w-sm,
html body .row > .rightt > :has(> .field-w-sm),
html body .row > .rightt > .field-pair > .field-w-sm,
html body .row > .rightt > .field-pair > :has(> .field-w-sm),
.form-field > .field-w-sm,
.form-field > :has(> .field-w-sm) {
  flex: 0 0 130px !important;
  width: 130px !important;
  max-width: 130px !important;
  min-width: 0 !important;
}

html body .row > .rightt > .field-w-md,
html body .row > .rightt > :has(> .field-w-md),
html body .row > .rightt > .field-pair > .field-w-md,
html body .row > .rightt > .field-pair > :has(> .field-w-md),
.form-field > .field-w-md,
.form-field > :has(> .field-w-md) {
  flex: 0 0 200px !important;
  width: 200px !important;
  max-width: 200px !important;
  min-width: 0 !important;
}

html body .row > .rightt > .field-w-lg,
html body .row > .rightt > :has(> .field-w-lg),
html body .row > .rightt > .field-pair > .field-w-lg,
html body .row > .rightt > .field-pair > :has(> .field-w-lg),
.form-field > .field-w-lg,
.form-field > :has(> .field-w-lg) {
  flex: 0 0 300px !important;
  width: 300px !important;
  max-width: 300px !important;
  min-width: 0 !important;
}

/* o input dentro do wrapper que levou a classe continua 100% do wrapper */
html body .row > .rightt > :is(.ui-calendar, .ui-autocomplete, .ui-spinner, .ui-inputnumber) > input[class*="field-w-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
}

/* em celular a largura semantica cede: campo volta a 100% */
@media (max-width: 480px) {
  html body .row > .rightt > [class*="field-w-"],
  html body .row > .rightt > :has(> [class*="field-w-"]) {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ---- .field-pair: 2-3 campos lado a lado no MESMO .rightt (De/ate,
   hora inicio/fim, data inicial/final). Cada campo divide o espaco
   igualmente (flex:1 1 0) ou usa .field-w-*; separador de texto ("a",
   "ate") fica centralizado e muted. Mesmo comportamento do
   .periodoContainer legado, que passa a ser sinonimo. */
html body .row > .rightt > .field-pair,
html body .row > .rightt > .periodoContainer,
.form-field > .field-pair {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body .row > .rightt > .field-pair > .ui-inputfield,
html body .row > .rightt > .field-pair > .ui-selectonemenu,
html body .row > .rightt > .field-pair > .ui-calendar,
html body .row > .rightt > .field-pair > .ui-autocomplete,
html body .row > .rightt > .field-pair > .ui-spinner,
html body .row > .rightt > .field-pair > .ui-inputnumber,
html body .row > .rightt > .field-pair > .ui-selectcheckboxmenu,
.form-field > .field-pair > .ui-inputfield,
.form-field > .field-pair > .ui-selectonemenu,
.form-field > .field-pair > .ui-calendar,
.form-field > .field-pair > .ui-autocomplete {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body .row > .rightt > .field-pair > span:not([class*="ui-"]):not(.campoObrigatorio),
html body .row > .rightt > .field-pair > .field-sep,
html body .row > .rightt > .periodoContainer > span:not([class*="ui-"]):not(.campoObrigatorio),
.field-pair > .field-sep {
  align-self: center !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  line-height: 1 !important;
  color: var(--muted-foreground) !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
}

/* ---- margens horizontais / gap (base 4px) ---- */
.ml-1 { margin-left: 4px !important; }
.ml-2 { margin-left: 8px !important; }
.ml-4 { margin-left: 16px !important; }
.mr-1 { margin-right: 4px !important; }
.mr-2 { margin-right: 8px !important; }
.mr-4 { margin-right: 16px !important; }
.gap-2 { gap: 8px !important; }

/* ---- .alert-inline (design.md 3.10): aviso em linha -- rounded-lg,
   px-4 py-3, text-sm, fundo suave + borda + texto forte. Funciona em
   <div>, <p> e no <span> do h:outputText (vira bloco). ---- */
.alert-inline {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  margin: 8px 0 16px 0;
  padding: 12px 16px !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) !important;
  background: var(--card);
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: left;
}

.alert-inline > i,
.alert-inline > .fa {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 16px !important;
}

.alert-inline strong { font-weight: 600; }

/* Callout com titulo + subtitulo + acoes (banner "Descubra a Analise com IA",
   Trello RebhDUd7): sem as margens de secao do h3/p e tudo centralizado na
   vertical, senao o bloco passa de 180px. */
.alert-inline .section-title,
.alert-inline .page-subtitle,
html body #formPrincipal .alert-inline h3.section-title,
html body #formPrincipal .alert-inline p.page-subtitle {
  margin: 0 !important;
  padding: 0 !important;
}
.alert-inline.flex-between,
.alert-inline .flex-row-8 {
  align-items: center !important;
}
/* No callout, o grupo de acoes (Saiba mais / Nao exibir / fechar) fica colado
   a direita: so o bloco de texto cresce (Trello RebhDUd7, 2a rodada). */
.alert-inline.alert-callout > div:first-child { flex: 1 1 auto; min-width: 0; }
.alert-inline.alert-callout > div:last-child  { flex: 0 0 auto; margin-left: auto; justify-content: flex-end; }
/* .alert-inline usa white-space:pre-wrap (mensagens multilinha, "Ultimo Erro");
   no callout com filhos em bloco isso transforma a indentacao do XHTML em
   linhas vazias -- so o modificador .alert-callout volta ao normal. */
.alert-inline.alert-callout,
.alert-inline.alert-callout div {
  white-space: normal !important;
}
.alert-inline .flex-row-8 > i {
  font-size: 20px !important;
  margin: 0 4px 0 0;
}

.alert-inline.alert-info {
  background: var(--info-bg) !important;
  border-color: #BAE6FD !important;
  color: var(--info-text) !important;
}
.alert-inline.alert-info > i { color: var(--info-icon) !important; }

.alert-inline.alert-success {
  background: var(--success-bg) !important;
  border-color: #A7F3D0 !important;
  color: var(--success-text) !important;
}
.alert-inline.alert-success > i { color: var(--success-icon) !important; }

.alert-inline.alert-warning {
  background: var(--warning-bg) !important;
  border-color: #FDE68A !important;
  color: var(--warning-text) !important;
}
.alert-inline.alert-warning > i { color: var(--warning-icon) !important; }

.alert-inline.alert-destructive {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
  color: #991B1B !important;
}
.alert-inline.alert-destructive > i { color: var(--destructive) !important; }

/* dentro do .rightt o alerta ocupa a linha toda */
html body .row > .rightt > .alert-inline {
  flex: 1 1 100% !important;
  min-height: 0 !important;
}

/* ---- .td-title / .td-sub: par titulo+subtitulo numa celula (padrao
   Power: nome + e-mail). O "td *" do DS so forca font-family, entao
   estes tamanhos valem; !important vence .FsNN/.text-muted. ---- */
.ui-datatable .td-title,
.td-title {
  display: block;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--table-cell-text) !important;
  line-height: 1.4 !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-datatable .td-sub,
.td-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs) !important;
  font-weight: 400 !important;
  color: var(--muted-foreground) !important;
  line-height: 1.4 !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-datatable .td-sub.td-wrap,
.td-sub.td-wrap {
  white-space: normal;
}

/* links dentro do par mantem a tipografia do par */
.ui-datatable .ui-datatable-data > tr > td a.td-title,
.ui-treetable .ui-treetable-data > tr > td a.td-title {
  color: var(--table-cell-text) !important;
}

/* ============== Lote 2 (G4) ============== */

/* ---- p:treeTable (.ui-treetable): mesma tipografia/padding do
   dataTable. PF12 nao gera tablewrapper aqui: e .ui-treetable > table >
   thead > tr > th e tbody.ui-treetable-data > tr > td (constantes do
   jar). Card, header, th, td, hover, toggler. ---- */
.ui-treetable {
  font-family: var(--font-sans);
  background: var(--card) !important;
  border: 1px solid var(--table-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow-x: auto;
}

.ui-treetable > table,
.ui-treetable .ui-treetable-scrollable-body > table,
.ui-treetable .ui-treetable-scrollable-header-box > table {
  table-layout: auto;
  width: 100% !important;
  border-collapse: collapse !important;
}

.ui-treetable .ui-treetable-header {
  background: var(--card) !important;
  padding: 16px 24px !important;
  border: none !important;
  border-bottom: 1px solid var(--table-border) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--foreground) !important;
  text-shadow: none !important;
}

.ui-treetable thead > tr > th {
  background: var(--table-header-bg) !important;
  padding: 12px 24px !important;
  text-align: left !important;
  vertical-align: middle !important;
  white-space: nowrap;
  border: none !important;
  border-bottom: 1px solid var(--table-border) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: var(--table-head-text) !important;
  text-shadow: none !important;
}

.ui-treetable thead > tr > th .ui-column-title {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 500 !important;
  color: var(--table-head-text) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.ui-treetable .ui-treetable-data > tr > td {
  padding: 14px 24px !important;
  border: none !important;
  border-bottom: 1px solid var(--table-border) !important;
  vertical-align: middle !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  color: var(--table-cell-text) !important;
  line-height: 1.5 !important;
  background: transparent !important;
}

.ui-treetable .ui-treetable-data > tr > td * {
  font-family: var(--font-sans) !important;
}

.ui-treetable .ui-treetable-data > tr > td i.fa,
.ui-treetable .ui-treetable-data > tr > td [class*="fa-"],
.ui-treetable .ui-treetable-data > tr > td .iconeTable,
.ui-treetable .ui-treetable-toggler {
  font-family: "FontAwesome" !important;
  font-style: normal !important;
  font-weight: normal !important;
}

.ui-treetable .ui-treetable-data > tr {
  background: var(--background) !important;
  transition: background var(--transition-fast);
}

.ui-treetable .ui-treetable-data > tr:hover {
  background: var(--table-row-hover) !important;
}

.ui-treetable .ui-treetable-data > tr.ui-state-highlight {
  background: rgba(30, 58, 95, 0.08) !important;
  color: var(--foreground) !important;
}

.ui-treetable .ui-treetable-toggler {
  color: var(--muted-foreground) !important;
  margin-right: 8px !important;
  vertical-align: middle;
  cursor: pointer;
}

.ui-treetable .ui-treetable-empty-message > td {
  color: var(--muted-foreground) !important;
  font-weight: 400 !important;
  text-align: center;
}

/* utilitarias de coluna/celula do dataTable valendo no treeTable */
.ui-treetable .col-w-xs { width: 56px; min-width: 56px; }
.ui-treetable .col-w-sm { width: 90px; min-width: 90px; }
.ui-treetable .col-w-md { width: 130px; min-width: 130px; }
.ui-treetable .col-w-lg { width: 200px; min-width: 200px; }
.ui-treetable .col-w-xl { width: 300px; min-width: 300px; }
.ui-treetable .col-fit { width: 1% !important; white-space: nowrap !important; }

.ui-treetable .col-acoes {
  width: 1% !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.ui-treetable .ui-treetable-data > tr > td.col-acoes,
.ui-treetable thead > tr > th.col-acoes {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.ui-treetable thead > tr > th.col-acoes .ui-column-title,
.ui-treetable thead > tr > th.td-center .ui-column-title { text-align: center; }
.ui-treetable thead > tr > th.td-right .ui-column-title { text-align: right; }

.ui-treetable .td-nowrap { white-space: nowrap !important; }
.ui-treetable .td-wrap { white-space: normal !important; }
.ui-treetable .td-center { text-align: center !important; }
.ui-treetable .td-right { text-align: right !important; }
.ui-treetable .td-left { text-align: left !important; }
.ui-treetable .td-muted { color: var(--muted-foreground) !important; font-weight: 400 !important; }
.ui-treetable .td-truncate {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

.ui-treetable table.table-fixed { table-layout: fixed !important; width: 100% !important; }
.ui-treetable table.table-fixed td { overflow: hidden; text-overflow: ellipsis; }

/* botoes de acao em celula do treeTable = mesmos 36x36 do dataTable */
.ui-treetable .ui-treetable-data > tr > td a.ui-commandlink,
.ui-treetable .ui-treetable-data > tr > td a.btn-acao-icone {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 1px !important;
  border: none !important;
  background: transparent !important;
  text-decoration: none !important;
  border-radius: var(--radius-md) !important;
  color: var(--primary) !important;
  transition: background var(--transition-fast);
}

.ui-treetable .ui-treetable-data > tr > td a.ui-commandlink:hover,
.ui-treetable .ui-treetable-data > tr > td a.btn-acao-icone:hover {
  background: var(--muted) !important;
}

.ui-treetable .ui-treetable-data > tr > td a.ui-commandlink > i,
.ui-treetable .ui-treetable-data > tr > td a.btn-acao-icone > i {
  font-size: 18px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.ui-treetable .ui-treetable-data > tr > td .ui-button {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  font-size: var(--text-sm) !important;
  margin: 0 2px !important;
}

/* ---- .badge-info: status neutro informativo (azul suave) ---- */
.badge-info,
.ui-badge.ui-badge-info {
  background: #DBEAFE !important;
  color: #1D4ED8 !important;
}

/* ---- icone no inicio de titulo: gap de 8px sem style inline ---- */
.section-title > i:first-child,
.page-title > i:first-child,
.page-header > h1 > i:first-child,
html body #formPrincipal h1 > i:first-child,
html body #formPrincipal h2 > i:first-child,
html body #formPrincipal h3 > i:first-child,
html body #formPrincipal h4 > i:first-child,
html body .ui-dialog h2 > i:first-child,
html body .ui-dialog h3 > i:first-child,
.ui-panel-titlebar .ui-panel-title > i:first-child,
.ui-dialog-title > i:first-child {
  margin-right: 8px !important;
  margin-left: 0 !important;
  vertical-align: middle;
  line-height: 1;
}

/* ---- .thumb-sm / .thumb-md: preview de imagem em celula/card ---- */
.thumb-sm,
.thumb-md {
  display: block !important;
  object-fit: cover !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
  background: var(--muted);
  box-sizing: border-box;
  max-height: none !important;   /* vence #formPrincipal img{max-height:50px} */
}

.thumb-sm { width: 80px !important; height: 60px !important; }
.thumb-md { width: 120px !important; height: 90px !important; }

.ui-datatable .ui-datatable-data > tr > td:has(> .thumb-sm),
.ui-datatable .ui-datatable-data > tr > td:has(> .thumb-md),
.ui-datatable .ui-datatable-data > tr > td:has(> a > .thumb-sm),
.ui-datatable .ui-datatable-data > tr > td:has(> a > .thumb-md) {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* ---- .alert-inline com texto longo / <pre> / <code> ("Ultimo Erro",
   divergencia): quebra dentro da caixa, nunca estoura a coluna ---- */
.alert-inline {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.alert-inline > span,
.alert-inline > div,
.alert-inline > p {
  flex: 1 1 auto;
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.alert-inline pre,
.alert-inline code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: var(--text-xs) !important;
  white-space: pre-wrap !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  margin: 4px 0 0 0;
  padding: 0;
  background: transparent;
  border: none;
  color: inherit;
  max-width: 100%;
}

.alert-inline.alert-block {
  display: block !important;
}

/* ============== Lote 3 (G5) ============== */

.text-left { text-align: left !important; }

/* Badges extras para telas com muitos estados (lead comercial tem 8) --
   mesma paleta dos .avatar-hue-*. */
.badge-purple, .ui-badge.ui-badge-purple { background: #EDE9FE !important; color: #6D28D9 !important; }
.badge-orange, .ui-badge.ui-badge-orange { background: #FFEDD5 !important; color: #C2410C !important; }
.badge-teal,   .ui-badge.ui-badge-teal   { background: #CCFBF1 !important; color: #0F766E !important; }
.badge-pink,   .ui-badge.ui-badge-pink   { background: #FCE7F3 !important; color: #BE185D !important; }

/* .row > .leftt seguido DIRETAMENTE do campo, sem .rightt (dialogs
   legados, ex.: administrarContaCorrente). O .row ja e flex column
   (regra .row:has(> .leftt)); aqui o campo solto recebe 100% da linha.
   NAO usar flex:1 1 200px como no .rightt: num container column a
   flex-basis vira ALTURA. Lista explicita de campos pra nao esticar
   checkbox/switch/botao/asterisco. */
html body .row:has(> .leftt):not(:has(> .rightt)):not(:has(> .righttt)) > :is(.ui-inputfield, .ui-inputtext, .ui-password, .ui-inputmask, .ui-inputtextarea, .ui-selectonemenu, .ui-selectcheckboxmenu, .ui-selectmanymenu, .ui-calendar, .ui-autocomplete, .ui-spinner, .ui-inputnumber, .periodoContainer, .field-pair, .ui-picklist, .ui-fileupload) {
  flex: 0 0 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* .field-w-* continua valendo nesse layout */
html body .row:has(> .leftt):not(:has(> .rightt)) > .field-w-xs,
html body .row:has(> .leftt):not(:has(> .rightt)) > :has(> .field-w-xs) { width: 90px !important; max-width: 90px !important; align-self: flex-start !important; }
html body .row:has(> .leftt):not(:has(> .rightt)) > .field-w-sm,
html body .row:has(> .leftt):not(:has(> .rightt)) > :has(> .field-w-sm) { width: 130px !important; max-width: 130px !important; align-self: flex-start !important; }
html body .row:has(> .leftt):not(:has(> .rightt)) > .field-w-md,
html body .row:has(> .leftt):not(:has(> .rightt)) > :has(> .field-w-md) { width: 200px !important; max-width: 200px !important; align-self: flex-start !important; }
html body .row:has(> .leftt):not(:has(> .rightt)) > .field-w-lg,
html body .row:has(> .leftt):not(:has(> .rightt)) > :has(> .field-w-lg) { width: 300px !important; max-width: 300px !important; align-self: flex-start !important; }

/* asterisco solto depois do campo (sem .rightt): nao vira "linha"
   propria de 40px -- fica pequeno, alinhado a esquerda. */
html body .row:has(> .leftt):not(:has(> .rightt)) > .campoObrigatorio {
  align-self: flex-start !important;
  margin: 2px 0 0 0 !important;
  line-height: 1 !important;
}

/* valor somente-leitura solto (span/outputLabel direto no .row) */
html body .row:has(> .leftt):not(:has(> .rightt)) > .ui-outputlabel,
html body .row:has(> .leftt):not(:has(> .rightt)) > span:not(.campoObrigatorio):not([class*="ui-"]) {
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  color: var(--foreground) !important;
  align-self: flex-start !important;
}

/* ===== Dashboard / Tela inicial =====
   Padrao Power CRM: 2 colunas (.dashboard-data + .dashboard-news),
   secoes com h3 + .dashboard-cards (grid de cards), e feed de
   novidades a direita. */

.dashboard {
  background: #f0f4f7;
  padding: 24px;
  min-height: calc(100vh - 60px);
  font-family: var(--font-sans);
}

.dashboard-content {
  display: flex;
  gap: 32px;
  max-width: 1600px;
  margin: 0 auto;
  align-items: flex-start;
}

.dashboard-data {
  flex: 1 1 70%;
  min-width: 0;
}

.dashboard-news {
  flex: 0 0 360px;
}

@media (max-width: 1100px) {
  .dashboard-content {
    flex-direction: column;
  }
  .dashboard-news {
    flex: 1 1 100%;
    width: 100%;
  }
}

.dashboard-header {
  margin-bottom: 32px;
}

.dashboard-header h1 {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: #374151;
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.dashboard-header p {
  font-size: var(--text-sm);
  color: #6b7280;
  margin: 0;
  font-weight: 400;
}

.dashboard-header p strong {
  font-weight: 500;
}

.dashboard-data > h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: #111827;
  margin: 24px 0 12px 0;
  line-height: 1.3;
}

.dashboard-data > h3:first-of-type {
  margin-top: 0;
}

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}

/* Card base: branco, sombra suave, sem borda. */
.dashboard-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
  transition: box-shadow 150ms ease, transform 150ms ease;
  min-height: 96px;
  display: flex;
  align-items: stretch;
}

.dashboard-card:hover {
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08), 0 2px 4px rgba(17, 24, 39, 0.04);
  transform: translateY(-1px);
}

.dashboard-card > a,
.dashboard-card > .ui-commandlink {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  text-decoration: none !important;
  color: inherit;
}

.dashboard-card p {
  margin: 0;
  font-size: var(--text-sm);
  color: #6b7280;
  font-weight: 500;
  line-height: 1.4;
}

.dashboard-card strong {
  font-size: var(--text-2xl);
  font-weight: 600;
  display: block;
  margin-top: 4px;
  font-family: var(--font-sans);
}

.dashboard-card .ContainerIndent {
  width: 100%;
  padding: 0;
}

/* Cor verde no valor (saldo / finalizadas) */
.dashboard-card .green,
.dashboard-card strong.green {
  color: #16a34a;
}

.dashboard-card .blue,
.dashboard-card strong.blue {
  color: #1e88e5;
}

.dashboard-card .red,
.dashboard-card strong.red {
  color: #ef4444;
}

.dashboard-card .gray {
  color: #6b7280;
}

/* Variantes de fundo solido (Atividades vencidas/negociacoes Power) */
.dashboard-card.bg-red {
  background: #ef4444;
}
.dashboard-card.bg-red p,
.dashboard-card.bg-red span,
.dashboard-card.bg-red strong {
  color: #ffffff !important;
}

.dashboard-card.bg-blue {
  background: #1e88e5;
}
.dashboard-card.bg-blue p,
.dashboard-card.bg-blue span,
.dashboard-card.bg-blue strong {
  color: #ffffff !important;
}

.dashboard-card.bg-green {
  background: #16a34a;
}
.dashboard-card.bg-green p,
.dashboard-card.bg-green span,
.dashboard-card.bg-green strong {
  color: #ffffff !important;
}

/* Card de atividade: numero grande no topo + texto embaixo */
.dashboard-card.card-activity > a,
.dashboard-card.card-activity > .ui-commandlink {
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
}

.dashboard-card.card-activity span {
  font-size: 24px;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1;
  display: block;
}

.dashboard-card.card-activity p {
  font-size: var(--text-sm);
  font-weight: 500;
}

.dashboard-card.card-activity i {
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

/* Card de link (central de ajuda) */
.dashboard-card.card-link {
  min-height: 110px;
}

.dashboard-card.card-link > a {
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
}

.dashboard-card.card-link i {
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #eff6ff;
  color: #1e88e5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dashboard-card.card-link p {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #111827;
}

/* Container generico (ex: secao do grafico/mapa) */
.dashboard-section {
  background: #ffffff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
  margin-bottom: 16px;
}

.dashboard-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.dashboard-section-header h3 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  color: #111827;
}

.dashboard-section-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: #6b7280;
  flex-wrap: wrap;
}

/* ===== Coluna de Novidades (replica Power CRM) ===== */
.dashboard-news h3 {
  margin: 0 0 20px;
  font-weight: 700;
  font-size: var(--text-2xl);
  color: #111827;
}

.dashboard-news .load {
  display: flex;
  flex-direction: column;
}

.card-news {
  padding: 16px 0;
  border-bottom: 1px solid #e5e7eb;
}

.card-news:first-child {
  padding-top: 0;
}

.card-news:last-of-type {
  border-bottom: none;
}

.card-news.card-none {
  display: none;
}

.card-news .cont {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-news .tags {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-news .tag,
.novidade-dialog .tag,
.tabela-padrao .tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
}

.card-news .tag-news,
.novidade-dialog .tag-news,
.tabela-padrao .tag-news {
  background: #d1fae5;
  color: #047857;
}

.card-news .tag-alert {
  background: #fee2e2;
  color: #b91c1c;
}

.card-news .tag-release,
.novidade-dialog .tag-release,
.tabela-padrao .tag-release {
  background: #dbeafe;
  color: #1e40af;
}

.card-news .tag-soon,
.novidade-dialog .tag-soon,
.tabela-padrao .tag-soon {
  background: #fef3c7;
  color: #92400e;
}

.card-news .date {
  font-size: var(--text-xs);
  color: #9ca3af;
  font-weight: 500;
}

.card-news .title {
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  color: #111827;
}

.card-news .title a,
.card-news .title .link {
  color: inherit;
  text-decoration: none;
}

.card-news .title a:hover,
.card-news .title .link:hover {
  color: #1e88e5;
  text-decoration: underline;
}

#showAllNews {
  margin-top: 16px;
  text-align: center;
  cursor: pointer;
  color: #6b7280;
  padding: 8px;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  transition: background 120ms ease;
}

#showAllNews:hover {
  background: #e5e7eb;
}

/* Override antigo: remove background da .layout-portlets-box quando
   estiver dentro do dashboard novo (mapa/grafico ja usam .dashboard-section). */
.dashboard .layout-portlets-box {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100% !important;
}

/* ============== Schedule / Agenda (p:schedule = FullCalendar 5) ==============
   Era o ultimo lugar do app com o azul do tema PrimeFaces (#007AD9): a barra
   Anterior/Proximo/Mes/Semana/Dia vinha com botoes azuis de 16px e radius 4,
   destoando de todo o resto. As classes sao do FC5 (confirmado no
   schedule.css do jar do PF 12): .fc-button-primary e a base, .fc-button-active
   o estado selecionado. O ScheduleRenderer do PF 12 NAO emite classe
   "ui-schedule" (so div#id > div#id_container > div.fc), por isso os seletores
   ancoram direto em .fc. */

html body .fc .fc-button,
html body .fc .fc-button-primary {
  background: var(--card) !important;
  background-image: none !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  height: 40px;
  padding: 0 14px !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html body .fc .fc-button:hover,
html body .fc .fc-button-primary:hover {
  background: var(--accent) !important;
  color: var(--foreground) !important;
}

html body .fc .fc-button-primary:not(:disabled).fc-button-active,
html body .fc .fc-button-primary:not(:disabled):active,
html body .fc .fc-button.fc-button-active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

html body .fc .fc-button:focus,
html body .fc .fc-button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(51, 116, 255, 0.25) !important;
}

html body .fc .fc-button:disabled {
  opacity: 0.5 !important;
  background: var(--muted) !important;
}

/* No grupo (Mes | Semana | Dia) so as pontas arredondam. */
html body .fc .fc-button-group > .fc-button {
  border-radius: 0 !important;
  margin: 0 !important;
}

html body .fc .fc-button-group > .fc-button:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}

html body .fc .fc-button-group > .fc-button:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

html body .fc .fc-button-group > .fc-button + .fc-button {
  border-left-width: 0 !important;
}

html body .fc .fc-toolbar-title {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xl) !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
}

html body .fc .fc-toolbar.fc-header-toolbar {
  margin-bottom: 16px !important;
  gap: 8px;
  flex-wrap: wrap;
}

/* Cabecalho dos dias no padrao do <th> das tabelas. */
html body .fc .fc-col-header-cell {
  background: var(--table-header-bg) !important;
  padding: 8px 4px !important;
}

html body .fc .fc-col-header-cell-cushion {
  font-family: var(--font-sans) !important;
  font-size: var(--text-2xs) !important;
  font-weight: 500 !important;
  color: var(--table-head-text) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em;
  text-decoration: none !important;
}

html body .fc-theme-standard td,
html body .fc-theme-standard th,
html body .fc-theme-standard .fc-scrollgrid {
  border-color: var(--table-border) !important;
}

html body .fc .fc-daygrid-day-number {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  color: var(--foreground) !important;
  text-decoration: none !important;
  padding: 6px 8px !important;
}

html body .fc .fc-day-today {
  background: rgba(51, 116, 255, 0.06) !important;
}

html body .fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
  color: var(--muted-foreground) !important;
}

html body .fc .fc-event,
html body .fc .fc-daygrid-block-event {
  border-radius: var(--radius-sm) !important;
  border: none !important;
  font-size: var(--text-xs) !important;
  font-family: var(--font-sans) !important;
  padding: 2px 6px !important;
}

/* ============== Datepicker: estados dos dias (p:datePicker e p:calendar) ==============
   O DS so estilizava a caixa do painel; os dias vinham do tema PF: selecionado
   em #007AD9 (azul do tema, nao o da marca), desabilitados/outro mes com
   opacity .5 (falha o contraste AA) e cabecalho da semana em 700 (Trello
   B0UeAZGf, "baixo contraste no calendario"). p:datePicker (PF12) usa <span>,
   o p:calendar legado (jQuery UI) usa <a> -- as regras cobrem os dois. */
html body .ui-datepicker {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  min-width: 288px;
}

html body .ui-datepicker table {
  font-size: var(--text-sm) !important;
  border-collapse: separate !important;
  border-spacing: 2px !important;
}

html body .ui-datepicker th,
html body .ui-datepicker th > span {
  font-size: var(--text-2xs) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em;
  color: var(--muted-foreground) !important;
  padding: 6px 0 !important;
}

html body .ui-datepicker td > span,
html body .ui-datepicker td > a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border-radius: 9999px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--foreground) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  transition: background var(--transition-fast);
}

html body .ui-datepicker td > span.ui-state-default:not(.ui-state-disabled):hover,
html body .ui-datepicker td > a.ui-state-default:hover {
  background: var(--accent) !important;
}

/* Hoje: contorno; selecionado: preenchido com a cor da marca. */
html body .ui-datepicker td > span.ui-state-highlight,
html body .ui-datepicker td > a.ui-state-highlight {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  font-weight: 500 !important;
}

html body .ui-datepicker td > span.ui-state-active,
html body .ui-datepicker td > a.ui-state-active,
html body .ui-datepicker td.ui-datepicker-current-day > a {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
  font-weight: 500 !important;
}

/* Outro mes / desabilitado: cor rebaixada em vez de transparencia (AA). */
html body .ui-datepicker td.ui-datepicker-other-month > span,
html body .ui-datepicker td.ui-datepicker-other-month > a,
html body .ui-datepicker td > span.ui-state-disabled,
html body .ui-datepicker td.ui-state-disabled > span,
html body .ui-datepicker td.ui-state-disabled > a {
  color: #9CA3AF !important;
  opacity: 1 !important;
  cursor: default;
}

html body .ui-datepicker .ui-datepicker-header {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 8px 4px !important;
  margin-bottom: 4px;
}

html body .ui-datepicker .ui-datepicker-title,
html body .ui-datepicker .ui-datepicker-month,
html body .ui-datepicker .ui-datepicker-year {
  font-size: var(--text-md) !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
}

html body .ui-datepicker .ui-datepicker-prev,
html body .ui-datepicker .ui-datepicker-next {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md) !important;
  color: var(--muted-foreground) !important;
  background: transparent !important;
  border: none !important;
  top: 6px !important;
}

html body .ui-datepicker .ui-datepicker-prev:hover,
html body .ui-datepicker .ui-datepicker-next:hover {
  background: var(--accent) !important;
  color: var(--foreground) !important;
}

html body .ui-datepicker .ui-datepicker-buttonbar,
html body .ui-datepicker .ui-datepicker-buttonpane {
  border-top: 1px solid var(--border) !important;
  padding: 8px !important;
  margin-top: 4px;
}

/* ==========================================================================
   Indicador de forca da senha (p:password feedback="true" inline="true")
   Trello 4gjUKWgm: o painel do tema e uma caixa branca com borda de ~90px de
   altura. Dentro de um modal com dois campos de senha isso somava ~180px,
   empurrava o rodape e desalinhava o cadastro. Aqui ele vira uma faixa fina
   colada ao campo: barra de forca + rotulo na mesma linha, ~18px no total,
   largura igual a do campo. Ver tambem Trello JqkslP9C (inline x overlay).
   ========================================================================== */
html body .ui-password-panel.ui-password-panel-inline {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 6px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: hidden;
}

/* O medidor do tema e um sprite (images/password-meter.png) sem largura propria,
   que em flex colapsa para 0. Aqui ele vira uma barra do DS: trilho cinza e
   preenchimento colorido conforme o nivel. O PrimeFaces indica o nivel pelo
   background-position inline (0 0 vazio, -10px fraca, -20px media, -30px forte),
   e e isso que os seletores de atributo abaixo leem. Sem correspondencia, sobra
   o trilho cinza -- degrada sem quebrar. */
html body .ui-password-panel.ui-password-panel-inline .ui-password-meter {
  flex: 0 0 auto;
  position: relative;
  width: 120px !important;
  height: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background-image: none !important;
  background-color: var(--muted, #e9ecef) !important;
  overflow: hidden;
}

html body .ui-password-panel.ui-password-panel-inline .ui-password-meter::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: 999px;
  transition: width var(--transition-fast, 0.15s) ease, background-color var(--transition-fast, 0.15s) ease;
}

html body .ui-password-panel.ui-password-panel-inline .ui-password-meter[style*="-10px"]::after {
  width: 34%;
  background-color: var(--destructive, #ef4444);
}

html body .ui-password-panel.ui-password-panel-inline .ui-password-meter[style*="-20px"]::after {
  width: 67%;
  background-color: var(--warning, #f59e0b);
}

html body .ui-password-panel.ui-password-panel-inline .ui-password-meter[style*="-30px"]::after {
  width: 100%;
  background-color: var(--success, #16a34a);
}

html body .ui-password-panel.ui-password-panel-inline .ui-password-info {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.2;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* O painel flutuante (sem inline) segue no padrao de popover do DS. */
html body .ui-password-panel:not(.ui-password-panel-inline) {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--card, #fff) !important;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12)) !important;
  padding: 10px 12px !important;
}

/* Links legais no rodape do painel (Termo de Uso / Politica de Privacidade), padrao do
   PowerCRM. Ficam a esquerda do bloco de contato, discretos. */
html body .rodape-legal { display: inline-block; float: left; margin: 12px 0 0 16px; font-size: 12px; }
html body .rodape-legal a { color: var(--muted-foreground); text-decoration: none; }
html body .rodape-legal a:hover { color: var(--foreground); text-decoration: underline; }
html body .rodape-legal .rodape-legal-sep { margin: 0 8px; color: var(--border); }


/* ---- Rodape do painel (Trello UgFRhM4j): caixa contida e sempre no fim ----
   O rodape e o ultimo filho de #layout-portlets-cover (coluna flex). Duas coisas o
   deixavam "descolado" do fim da pagina: o <form> ganha margin-bottom do navegador e o
   bloco de contato era um float de 3 linhas dentro de uma caixa que so media a logo,
   entao vazava por baixo e pintava uma faixa do fundo cinza. A caixa vira flex row
   (contem os filhos), o form perde a margem e recebe margin-top:auto -- se por qualquer
   motivo o form principal nao crescer, o rodape continua empurrado para o fim. */
html body #layout-portlets-cover > form.rodape-form {
  margin: auto 0 0 0 !important;
  flex: 0 0 auto;
  /* Segundo retorno do UgFRhM4j (28/09): o rodape NAO e o ultimo filho do
     cover -- o template insere <ui:insert name="dialogs"/> depois dele, e em
     Consultar Vistoria isso traz cinco <h:form> auxiliares (formBtnDownload,
     formBtnParecer, formRemoteParecer, formRotacionar, formRefazerPainel) e um
     panelGroup de modal. Cada <form> nasce com margin-bottom do navegador e,
     como sao itens da mesma coluna flex, somam ~100px ABAIXO do rodape.
     order alto poe o rodape por ultimo independentemente do que a pagina
     insere depois dele. */
  order: 99;
}
/* ...e os forms auxiliares inseridos depois do rodape nao podem ocupar altura
   nem margem: so carregam botoes ocultos e remoteCommands. */
html body #layout-portlets-cover > form:not(#formPrincipal):not(.rodape-form) {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
}
html body .rodape-box {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 16px !important;
  text-align: left !important;
  box-sizing: border-box;
  width: 100% !important;
}
/* logos: eram float:left inline; como itens flex o float e ignorado e elas ficam contidas */
html body .rodape-box > a,
html body .rodape-box > img { flex: 0 0 auto; float: none !important; }
/* bloco da direita: links legais + contato, empurrado para o fim da linha */
html body .rodape-box > div {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto !important;
  margin-right: 4px !important;
  min-width: 0;
}
html body .rodape-box .rodape-legal { float: none; margin: 0; white-space: nowrap; }
html body .rodape-box .rodape-contato { float: none; text-align: right; line-height: 1.4; }
@media (max-width: 640px) {
  html body .rodape-box { flex-wrap: wrap; }
  html body .rodape-box > div { flex-wrap: wrap; gap: 8px 16px; margin-left: 0 !important; }
}


/* ---- Novidades do Visto (Home) e janela de leitura -- Trello TQyRwkTm ---- */
.card-news .subtitle { color: var(--muted-foreground); font-size: 13px; margin-top: 2px; }
.card-news .title .link { color: var(--foreground); text-decoration: none; }
.card-news .title .link:hover { color: var(--primary); }
.novidade-pagina .novidade-topo, .novidade-dialog .novidade-topo { padding: 4px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.novidade-pagina .novidade-topo .tags, .novidade-dialog .novidade-topo .tags { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.novidade-pagina .novidade-titulo, .novidade-dialog .novidade-titulo { font-size: 22px; font-weight: 700; margin: 0; color: var(--foreground); }
.novidade-pagina .novidade-sub, .novidade-dialog .novidade-sub { color: var(--muted-foreground); font-size: 14px; margin-top: 4px; }
.novidade-pagina .novidade-corpo, .novidade-dialog .novidade-corpo { font-size: 14px; line-height: 1.6; color: var(--foreground); max-height: 60vh; overflow: auto; }
.novidade-pagina .novidade-corpo p, .novidade-dialog .novidade-corpo p { margin: 0 0 10px; }
.novidade-pagina .novidade-corpo ul, .novidade-pagina .novidade-corpo ol, .novidade-dialog .novidade-corpo ul, .novidade-dialog .novidade-corpo ol { margin: 0 0 10px 22px; padding: 0; }
.novidade-pagina .novidade-corpo li, .novidade-dialog .novidade-corpo li { margin-bottom: 4px; }

.novidade-pagina { max-width: 960px; margin: 0 auto; background: var(--card, #fff); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 32px; }
.novidade-pagina .novidade-titulo { font-size: 28px; }
.novidade-pagina .novidade-corpo { max-height: none; overflow: visible; font-size: 15px; }
.novidade-pagina .novidade-corpo img { max-width: 100%; height: auto; }
.novidade-pagina footer.acoes-form { margin-top: 24px; }
.novidade-editar-meta { max-width: 960px; }
.novidade-editor { max-width: 960px; }
.novidade-editor-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 8px; }
.novidade-editor-html { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.45; }

/* Grafico da Home (Chart.js) */
.dashboard-grafico { margin-top: 12px; padding: 12px 8px 4px; background: var(--card, #fff); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.dashboard-grafico canvas { max-width: 100%; }

/* Trello UhEVVDN6: variante alinhada a esquerda das barras de acao. A regra generica
   "html body .grid_12:has(> .ui-button):not(...)" tem especificidade (0,5,2) e vencia esta
   (0,3,2) mesmo com !important -- por isso ela agora exclui .acoes-esquerda/.acoes-form-left,
   e aqui a classe e repetida para ficar acima de qualquer variante da grade legada. */
html body .grid_12.acoes-form.acoes-esquerda.acoes-esquerda.acoes-esquerda,
html body .acoes-form.acoes-esquerda.acoes-esquerda.acoes-esquerda,
html body .grid_12.acoes-form.acoes-form-left.acoes-form-left.acoes-form-left {
  display: flex !important;
  justify-content: flex-start !important;
  text-align: left !important;
}