@CHARSET "UTF-8";

/* =========================================================================
   Identidade visual das telas Pratic.

   .pratic-shell  — raiz que carrega os tokens e os primitivos (campos,
                    rótulos, botões, mensagens). Toda página que adota o
                    visual novo põe esta classe no wrapper.
   .auth-split    — layout split-screen das telas de ACESSO (cadastro,
                    login, recuperação de senha), que não têm header.
   .sel-shell     — layout de card centralizado das telas INTERNAS de
                    seleção, que já vêm com header e footer do template.

   Tudo escopado de propósito: termos_de_uso_apprh.css entra na página de
   cadastro pelo ui:include do diálogo e ocupa nomes genéricos (.titulo,
   .contentTelaPadrao, #rootTermos).
   ========================================================================= */

.pratic-shell {
	/* Tokens do tema saga sobrescritos SÓ aqui dentro (custom properties
	   herdam, então nada fora da página é afetado). */
	--primary-color: #1c4587;
	--primary-color-text: #ffffff;
	--border-radius: 10px;

	--auth-navy: #1c4587;
	--auth-navy-deep: #143567;
	--auth-gold: #f8c301;
	--auth-ink: #1f2933;
	--auth-muted: #667085;
	--auth-line: #e3e8ef;
	--auth-field-h: 52px;

	--auth-body-font: "Open Sans", "Segoe UI", "Helvetica Neue", sans-serif;
	--auth-display-font: "Plus Jakarta Sans", "Open Sans", "Segoe UI", sans-serif;

	font-family: var(--auth-body-font);
	color: var(--auth-ink);
}

/* global.css deixa #root como flex column com height:100%. Como o wrapper de
   conteúdo do template é um <span> sem id (o layout="rootContent" inválido),
   ele entra como flex item encolhível e é espremido abaixo da altura do card
   — o conteúdo então transbordava por cima do footer. Nem conteúdo nem footer
   devem encolher: a página é que rola. */
#root > * {
	flex-shrink: 0;
}

/* Layout split-screen — só as telas de acesso. */
.auth-split {
	display: flex;
	align-items: stretch;
	min-height: 100vh;
	min-height: 100dvh;
	background: #ffffff;
}

/* global.css força uppercase em todo input/textarea da aplicação, o que
   vaza para os placeholders e deixa os combos (que não são input)
   destoando dos vizinhos. Neutralizado dentro do shell. */
.pratic-shell input,
.pratic-shell textarea {
	text-transform: none;
}

/* ---------------------------------------------------------------- marca */

.auth-brand {
	position: relative;
	overflow: hidden;
	flex: 0 0 42%;
	max-width: 560px;
	padding: 56px 52px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--auth-navy);
	color: #ffffff;
}

/* Malha diagonal sutil — profundidade sem gradiente chapado. */
.auth-brand::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(115deg,
		rgba(255, 255, 255, .05) 0 1px, transparent 1px 64px);
	pointer-events: none;
}

.auth-brand::after {
	content: "";
	position: absolute;
	right: -180px;
	bottom: -200px;
	width: 460px;
	height: 460px;
	border: 1px solid rgba(248, 195, 1, .22);
	border-radius: 50%;
	pointer-events: none;
}

.auth-brand > * {
	position: relative;
	z-index: 1;
}

.auth-brand-logo img {
	width: 132px;
	height: auto;
	display: block;
}

.auth-brand-headline {
	font-family: var(--auth-display-font);
	font-weight: 800;
	font-size: 38px;
	line-height: 1.14;
	letter-spacing: -.02em;
	margin: 0 0 18px;
	text-wrap: balance;
}

.auth-brand-headline em {
	font-style: normal;
	color: var(--auth-gold);
}

.auth-brand-rule {
	width: 56px;
	height: 4px;
	background: var(--auth-gold);
	border-radius: 2px;
	margin-bottom: 26px;
}

.auth-brand-sub {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .82);
	margin: 0 0 34px;
	max-width: 40ch;
	text-wrap: pretty;
}

.auth-benefits {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.auth-benefit {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .92);
}

.auth-benefit svg {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	stroke: var(--auth-gold);
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.auth-brand-foot {
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .62);
}

/* -------------------------------------------------------------- painel */

.auth-panel {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 40px;
	background: #f7f9fc;
}

.auth-card {
	width: 100%;
	max-width: 520px;
}

.auth-title {
	font-family: var(--auth-display-font);
	font-weight: 700;
	font-size: 27px;
	line-height: 1.2;
	letter-spacing: -.015em;
	margin: 0 0 8px;
	color: var(--auth-ink);
}

.auth-subtitle {
	font-size: 15px;
	line-height: 1.55;
	color: var(--auth-muted);
	margin: 0 0 30px;
}

.auth-messages {
	margin-bottom: 18px;
}

/* --------------------------------------------------------------- campos */

.auth-fields {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

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

.auth-field {
	display: block;
	width: 100%;
}

/* Rótulos fixos acima do campo, e não float labels: o widget SelectOneMenu do
   PF15 só aplica ui-inputwrapper-focus, nunca ui-inputwrapper-filled, então um
   cargo já selecionado faria o rótulo flutuante cair por cima do texto. Rótulo
   fixo se comporta igual nos cinco tipos de controle desta tela. */
.pratic-shell .auth-label {
	display: block;
	margin-bottom: 7px;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .005em;
	color: #3d4a5c;
}

.pratic-shell .auth-label .ui-outputlabel-rfi {
	color: #c2410c;
	margin-left: 2px;
}

.pratic-shell .ui-inputfield,
.pratic-shell .ui-selectonemenu {
	width: 100%;
	height: var(--auth-field-h);
	padding: 0 14px;
	box-sizing: border-box;
	font-family: var(--auth-body-font);
	font-size: 15px;
	color: var(--auth-ink);
	background: #ffffff;
	border: 1px solid var(--auth-line);
	border-radius: var(--border-radius);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.pratic-shell .ui-inputfield:enabled:hover,
.pratic-shell .ui-selectonemenu:not(.ui-state-disabled):hover {
	border-color: #c4cdda;
}

.pratic-shell .ui-inputfield:enabled:focus,
.pratic-shell .ui-selectonemenu.ui-state-focus {
	border-color: var(--auth-navy);
	box-shadow: 0 0 0 3px rgba(28, 69, 135, .13);
}

.pratic-shell .ui-inputfield.ui-state-error {
	border-color: #d64545;
}

/* p:password com toggleMask envolve o input num span .ui-password. */
.pratic-shell .ui-password {
	display: block;
	width: 100%;
}

.pratic-shell .ui-password > .ui-password-icon {
	right: 14px;
	color: var(--auth-muted);
	cursor: pointer;
}

.pratic-shell .ui-password-panel {
	border-radius: var(--border-radius);
}

/* primefaces.css marca .ui-selectonemenu com min-width:100% !important;
   dentro do grid de duas colunas isso briga com o track. */
.pratic-shell .ui-selectonemenu {
	min-width: 0 !important;
	display: flex;
	align-items: center;
}

.pratic-shell .ui-selectonemenu .ui-selectonemenu-label {
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 15px;
	line-height: var(--auth-field-h);
	/* "Analista / Assistente de Departamento Pessoal" não cabe na coluna. */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.pratic-shell .ui-selectonemenu .ui-selectonemenu-trigger {
	width: 2.4rem;
	background: transparent;
	border: 0;
	color: var(--auth-muted);
}

.auth-hint {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--auth-muted);
}

/* ---------------------------------------------------------------- ações */

.auth-terms {
	margin-top: 26px;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
}

/* O box do PrimeFaces tem 24px; o padding no rótulo leva a área de toque
   da linha inteira para 44px sem aumentar o desenho do checkbox. */
.pratic-shell .ui-chkbox-label {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--auth-ink);
	margin: 0;
	padding: 11px 0;
	cursor: pointer;
}

.auth-actions {
	margin-top: 26px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pratic-shell .auth-submit.ui-button {
	width: 100%;
	min-height: 52px;
	justify-content: center;
	font-family: var(--auth-display-font);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .01em;
	background: var(--auth-navy);
	border: 1px solid var(--auth-navy);
	border-radius: var(--border-radius);
	box-shadow: 0 1px 2px rgba(20, 53, 103, .18);
}

.pratic-shell .auth-submit.ui-button:enabled:hover {
	background: var(--auth-navy-deep);
	border-color: var(--auth-navy-deep);
}

.pratic-shell .auth-submit.ui-button:enabled:focus {
	box-shadow: 0 0 0 3px rgba(28, 69, 135, .28);
}

.auth-login {
	text-align: center;
	font-size: 14.5px;
	color: var(--auth-muted);
}

.pratic-shell .auth-login a {
	color: var(--auth-navy);
	font-weight: 600;
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.pratic-shell .auth-login a:hover,
.pratic-shell .auth-login a:focus {
	text-decoration: underline;
}

/* Ícone de estado das telas de confirmação (email confirmado, etc.). */
.auth-status-icon {
	margin-bottom: 18px;
}

.auth-status-icon {
	color: #15803d;
}

.auth-status-icon.is-info {
	color: #b45309;
}

.auth-status-icon.is-neutral {
	color: var(--auth-navy);
}

.auth-status-icon svg {
	width: 48px;
	height: 48px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ------------------------------- específicos de login / recuperação */

/* "Esqueceu a senha?" alinhado à direita, logo abaixo do campo de senha. */
.auth-inline-link {
	margin-top: 10px;
	text-align: right;
	font-size: 14px;
}

.pratic-shell .auth-inline-link a {
	color: var(--auth-navy);
	font-weight: 600;
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.pratic-shell .auth-inline-link a:hover,
.pratic-shell .auth-inline-link a:focus {
	text-decoration: underline;
}

/* Bloco dos p:staticMessage (contentReSend) das duas telas. */
.auth-static-messages {
	margin-top: 20px;
}

.pratic-shell .auth-static-messages .ui-message {
	width: 100%;
	margin: 0 0 10px;
	border-radius: var(--border-radius);
}

.pratic-shell .auth-static-messages .ui-message:last-child {
	margin-bottom: 0;
}

.auth-resend {
	margin-top: 10px;
	text-align: right;
	font-size: 14px;
}

.pratic-shell .auth-resend a {
	color: var(--auth-navy);
	font-weight: 600;
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.pratic-shell .auth-resend a:hover,
.pratic-shell .auth-resend a:focus {
	text-decoration: underline;
}

/* ====================================================================
   Header das telas internas (template.xhtml).
   ==================================================================== */

.app-header {
	background: #ffffff;
	border-bottom: 1px solid var(--auth-line, #e3e8ef);
	font-family: var(--auth-body-font, "Open Sans", "Segoe UI", sans-serif);
}

.app-header-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	min-height: 66px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.app-header-brand {
	display: flex;
	align-items: center;
	gap: 12px;
}

.app-header-brand img {
	width: 96px;
	height: auto;
	display: block;
}

/* Filete dourado separando a marca do nome do produto. */
.app-header-divider {
	width: 1px;
	height: 26px;
	background: var(--auth-line, #e3e8ef);
}

.app-header-product {
	font-family: var(--auth-display-font, "Plus Jakarta Sans", sans-serif);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--auth-navy, #1c4587);
}

.app-header-user {
	display: flex;
	align-items: center;
	gap: 12px;
}

.app-header-identity {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.app-header-avatar {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eef3fb;
	color: var(--auth-navy, #1c4587);
	font-family: var(--auth-display-font, "Plus Jakarta Sans", sans-serif);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}

.app-header-name {
	font-size: 14px;
	font-weight: 600;
	color: #3d4a5c;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 260px;
}

.app-header .app-logout.ui-button {
	min-height: 40px;
	padding: 0 16px;
	font-family: var(--auth-display-font, "Plus Jakarta Sans", sans-serif);
	font-size: 14px;
	font-weight: 700;
	color: var(--auth-navy, #1c4587);
	background: #ffffff;
	border: 1px solid var(--auth-line, #e3e8ef);
	border-radius: 10px;
	box-shadow: none;
}

.app-header .app-logout.ui-button:enabled:hover {
	background: #f2f6fc;
	border-color: var(--auth-navy, #1c4587);
}

.app-header .app-logout.ui-button:enabled:focus {
	box-shadow: 0 0 0 3px rgba(28, 69, 135, .18);
}

@media (max-width: 640px) {
	.app-header-inner {
		padding: 0 16px;
		min-height: 58px;
	}

	.app-header-brand img {
		width: 84px;
	}

	/* Em telas estreitas sobra o essencial: marca e a ação de sair. */
	.app-header-divider,
	.app-header-product,
	.app-header-name {
		display: none;
	}
}

/* ====================================================================
   Telas internas de seleção (contrato / suporte) — card centralizado.
   Aqui NÃO existe painel de marca: estas páginas usam template.xhtml,
   que já traz header e footer, e o usuário já está autenticado.
   ==================================================================== */

/* Card centralizado na faixa entre o header e o footer. Com align-items
   center e min-height, um card mais alto que a faixa apenas estica o
   container (a centralização vira neutra), então não há corte no topo. */
.sel-shell {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
	background: #f7f9fc;
	min-height: 70vh;
	min-height: 70dvh;
}

.sel-card {
	width: 100%;
	max-width: 580px;
	background: var(--surface-card, #ffffff);
	border: 1px solid var(--auth-line);
	border-radius: 14px;
	padding: 34px 32px;
	box-shadow: 0 1px 2px rgba(16, 40, 80, .04), 0 8px 24px rgba(16, 40, 80, .06);
}

.sel-logo {
	margin-bottom: 22px;
}

.sel-logo img {
	width: 116px;
	height: auto;
	display: block;
}

.sel-rule {
	width: 44px;
	height: 4px;
	background: var(--auth-gold);
	border-radius: 2px;
	margin-bottom: 20px;
}

/* Linhas de escolha (contratos e módulos). Os nomes .contract e
   .contract_cancelado vêm do bean (getStyleClassContratos), então não podem
   ser renomeados; .module vem do markup do module_selection. */
.pratic-shell .contract,
.pratic-shell .contract_cancelado,
.pratic-shell .module {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--auth-line);
	border-radius: var(--border-radius);
	background: #ffffff;
	color: var(--auth-ink);
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease,
		box-shadow .15s ease;
}

.pratic-shell .contract::after,
.pratic-shell .contract_cancelado::after,
.pratic-shell .module::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: .45;
}

.pratic-shell .contract:hover,
.pratic-shell .module:hover {
	border-color: var(--auth-navy);
	background: #f2f6fc;
	box-shadow: 0 0 0 3px rgba(28, 69, 135, .10);
}

/* Ícone do módulo. width fixo para a linha não pular quando o arquivo do
   ícone não existe (MODULE_HOLERITE_ICON e MODULE_PRATICSITE_ICON apontam
   para imagens que não estão em resources/images). */
.pratic-shell .module img {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	object-fit: contain;
	margin-right: 12px;
}

/* O texto do módulo fica entre o ícone e o chevron. */
.pratic-shell .module > span,
.pratic-shell .module {
	gap: 0;
}

.pratic-shell .module {
	justify-content: flex-start;
}

.pratic-shell .module::after {
	margin-left: auto;
}

/* Contrato cancelado: vermelho sóbrio, não o #ff0000 anterior. */
.pratic-shell .contract_cancelado {
	color: #b42318;
	border-color: #f3c9c4;
	background: #fdf5f4;
}

.pratic-shell .contract_cancelado:hover {
	border-color: #b42318;
	background: #fbeae8;
	box-shadow: 0 0 0 3px rgba(180, 35, 24, .10);
}

.pratic-shell .contract a,
.pratic-shell .contract a:hover,
.pratic-shell .contract_cancelado a,
.pratic-shell .contract_cancelado a:hover,
.pratic-shell .module a,
.pratic-shell .module a:hover {
	color: inherit;
	text-decoration: none;
}

/* O h:commandLink que envolve cada item não pode inserir sublinhado nem
   cor de link entre o card e a linha do contrato. */
.pratic-shell .sel-list a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.sel-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 4px;
}

/* ------------------------------------------------- ação da tela

   Na tela de suporte a linha do contrato escolhido NÃO é mais um item de
   lista: é o botão que entra no contrato. Sem destaque ela ficava idêntica
   aos cartões do combo e só se diferenciava no hover. O realce é de leve —
   fundo azulado, borda e texto em navy — em vez de um botão sólido, para não
   competir com a hierarquia do card. */
.sel-action {
	margin-top: 18px;
}

.pratic-shell .sel-action .contract {
	min-height: 60px;
	background: #eef3fb;
	border-color: rgba(28, 69, 135, .28);
	border-left-width: 4px;
	border-left-color: var(--auth-navy);
	color: var(--auth-navy);
	font-weight: 700;
	box-shadow: 0 1px 2px rgba(28, 69, 135, .10);
}

.pratic-shell .sel-action .contract::after {
	opacity: .85;
	border-width: 2.5px;
}

.pratic-shell .sel-action .contract:hover {
	background: #e3ecfa;
	border-color: var(--auth-navy);
	box-shadow: 0 0 0 3px rgba(28, 69, 135, .14);
}

/* Contrato cancelado continua vermelho, mas com o mesmo peso de ação. */
.pratic-shell .sel-action .contract_cancelado {
	min-height: 60px;
	border-left-width: 4px;
	font-weight: 700;
	box-shadow: 0 1px 2px rgba(180, 35, 24, .10);
}

/* Rótulo dos combos das telas de seleção (title_for_selection vem do
   markup antigo e é reaproveitado). */
.pratic-shell .title_for_selection {
	display: block;
	margin-bottom: 7px;
	font-size: 13.5px !important;
	font-weight: 600;
	letter-spacing: .005em;
	color: #3d4a5c;
}

/* p:autoComplete com dropdown="true" rende input + button irmãos dentro do
   wrapper. Sem flex aqui o botão cai para a linha de baixo, porque a regra
   genérica .ui-inputfield já dá width:100% ao input. */
.pratic-shell .ui-autocomplete {
	display: flex;
	width: 100%;
}

.pratic-shell .ui-autocomplete .ui-autocomplete-input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: var(--auth-field-h);
	box-sizing: border-box;
	padding: 0 14px;
	font-family: var(--auth-body-font);
	font-size: 15px;
	border: 1px solid var(--auth-line);
	border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.pratic-shell .ui-autocomplete .ui-autocomplete-dropdown {
	flex: 0 0 auto;
	width: 46px;
	height: var(--auth-field-h);
	margin: 0;
	background: #ffffff;
	border: 1px solid var(--auth-line);
	border-left: 0;
	border-radius: 0 var(--border-radius) var(--border-radius) 0;
	color: var(--auth-muted);
	box-shadow: none;
}

.pratic-shell .ui-autocomplete .ui-autocomplete-dropdown:enabled:hover {
	background: #f2f6fc;
	color: var(--auth-navy);
}

/* ====================================================================
   Combo de contrato com linhas em cartão.

   Mesmo padrão visual do search_select_one_funcionario.xhtml do
   praticrh-site (.prc-row*), porém adaptado: lá o componente é um
   p:selectOneMenu, cujo painel rende
       div.ui-selectonemenu-panel > ... > table.ui-selectonemenu-table
   e aqui é um p:autoComplete, que com <p:column> rende
       div.ui-autocomplete-panel > table.ui-autocomplete-table
   com as linhas em tr.ui-autocomplete-item. As cores saem dos tokens do
   pratic-ui em vez das variáveis de tema do praticrh-site.
   ==================================================================== */

.ui-autocomplete-panel.prc-combo-panel,
.ui-selectonemenu-panel.prc-combo-panel {
	--prc-accent: #1c4587;
	--prc-accent-bg: rgba(28, 69, 135, .12);
	--prc-accent-bg-strong: rgba(28, 69, 135, .10);
	--prc-inactive: #b42318;
	--prc-inactive-bg: rgba(180, 35, 24, .14);
	--prc-inactive-bg-strong: rgba(180, 35, 24, .10);
	--prc-inactive-border: rgba(180, 35, 24, .35);
	--prc-warn: #b45309;
	--prc-warn-bg: rgba(180, 83, 9, .12);
	--prc-warn-border: rgba(180, 83, 9, .35);
	--prc-line: #e3e8ef;

	padding: 0;
	border: 1px solid var(--prc-line);
	border-radius: 12px;
	box-sizing: border-box;
	max-width: calc(100vw - 1rem);
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(16, 40, 80, .14);
	font-family: var(--auth-body-font, "Open Sans", "Segoe UI", sans-serif);

	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Onde fica a rolagem muda entre os dois componentes:

   - autoComplete: não existe wrapper interno, a tabela é filha direta do
     painel, e é o PAINEL que recebe o height do scrollHeight (alignPanel).
     Um overflow:hidden aqui corta a lista e some com a barra.
   - selectOneMenu: o PrimeFaces cria o .ui-selectonemenu-items-wrapper e é
     nele que aplica o max-height do atributo "height"; o painel fica só com o
     recorte das bordas arredondadas. */
.ui-autocomplete-panel.prc-combo-panel {
	overflow-x: hidden;
	overflow-y: auto;
}

.ui-selectonemenu-panel.prc-combo-panel {
	overflow: hidden;
}

.ui-selectonemenu-panel.prc-combo-panel .ui-selectonemenu-items-wrapper {
	padding: .5rem;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Mesma blocagem da tabela do autoComplete: mantendo o <table> como tabela, o
   navegador recria caixas anônimas em volta dos filhos blocados e a altura da
   <tr> deixa de acompanhar a do <td>. */
.ui-selectonemenu-panel.prc-combo-panel table.ui-selectonemenu-table {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: none;
	background: transparent;
}

.ui-selectonemenu-panel.prc-combo-panel table.ui-selectonemenu-table > tbody {
	display: block;
	width: 100%;
}

.ui-selectonemenu-panel.prc-combo-panel table.ui-selectonemenu-table > tbody > tr.ui-selectonemenu-item {
	white-space: normal !important;
	/* mesmo motivo do combo de contrato: primefaces.css tem
	   "table tbody tr { height: 35px !important }" valendo no projeto inteiro. */
	height: auto !important;
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0 !important;
	margin: 0 0 .4rem 0;
	border: 1px solid var(--prc-line);
	border-left: 3px solid var(--prc-accent);
	border-radius: 10px;
	background: #ffffff;
	color: var(--auth-ink, #1f2933);
	transition: background-color .12s ease, border-color .12s ease;
}

.ui-selectonemenu-panel.prc-combo-panel table.ui-selectonemenu-table > tbody > tr.ui-selectonemenu-item:last-child {
	margin-bottom: 0;
}

.ui-selectonemenu-panel.prc-combo-panel table.ui-selectonemenu-table > tbody > tr.ui-selectonemenu-item > td {
	display: block;
	border: none !important;
	background: transparent !important;
	padding: .5rem .7rem !important;
}

.ui-selectonemenu-panel.prc-combo-panel tr.ui-selectonemenu-item:hover,
.ui-selectonemenu-panel.prc-combo-panel tr.ui-selectonemenu-item.ui-state-highlight {
	background: #f2f6fc !important;
	border-color: var(--prc-accent);
	color: var(--auth-ink, #1f2933) !important;
}

.ui-selectonemenu-panel.prc-combo-panel tr.ui-selectonemenu-item.ui-state-highlight {
	box-shadow: inset 0 0 0 1px var(--prc-accent);
}

/* A tabela inteira é blocada (e não só tbody/tr/td). Deixando o <table> como
   table, o navegador recria caixas anônimas de tabela em volta dos filhos
   blocados e a altura da <tr> deixa de acompanhar a do <td> — os cartões
   ficavam sobrepostos. Como bloco, tudo vira layout de bloco normal. */
.ui-autocomplete-panel.prc-combo-panel table.ui-autocomplete-table {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: .5rem;
	border: none;
	background: transparent;
}

.ui-autocomplete-panel.prc-combo-panel table.ui-autocomplete-table > tbody {
	display: block;
	width: 100%;
}

.ui-autocomplete-panel.prc-combo-panel table.ui-autocomplete-table > tbody > tr.ui-autocomplete-item {
	/* primefaces.css do projeto força white-space:pre-wrap em itens de combo;
	   sem normalizar aqui, a indentação do XHTML entre as tags vira espaço em
	   branco dentro do cartão. O padding fica só no <td>. */
	white-space: normal !important;
	/* resources/css/primefaces.css tem "table tbody tr { height: 35px !important }"
	   valendo para o projeto inteiro. Sem devolver height:auto aqui, o cartão fica
	   preso em 35px e o conteúdo vaza por cima da linha de baixo. */
	height: auto !important;
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0 !important;
	margin: 0 0 .4rem 0;
	border: 1px solid var(--prc-line);
	border-left: 3px solid var(--prc-line);
	border-radius: 10px;
	background: #ffffff;
	color: var(--auth-ink, #1f2933);
	transition: background-color .12s ease, border-color .12s ease;
}

.ui-autocomplete-panel.prc-combo-panel table.ui-autocomplete-table > tbody > tr.ui-autocomplete-item:last-child {
	margin-bottom: 0;
}

.ui-autocomplete-panel.prc-combo-panel table.ui-autocomplete-table > tbody > tr.ui-autocomplete-item > td {
	display: block;
	border: none !important;
	background: transparent !important;
	padding: .5rem .7rem !important;
}

/* Faixa lateral por situação do contrato. */
.ui-autocomplete-panel.prc-combo-panel tr.ui-autocomplete-item:has(.prc-row-ativo) {
	border-left-color: var(--prc-accent);
}

.ui-autocomplete-panel.prc-combo-panel tr.ui-autocomplete-item:has(.prc-row-inativo) {
	border-left-color: var(--prc-inactive);
}

.ui-autocomplete-panel.prc-combo-panel tr.ui-autocomplete-item:hover,
.ui-autocomplete-panel.prc-combo-panel tr.ui-autocomplete-item.ui-state-highlight {
	background: #f2f6fc !important;
	border-color: var(--prc-accent);
	color: var(--auth-ink, #1f2933) !important;
}

.ui-autocomplete-panel.prc-combo-panel tr.ui-autocomplete-item.ui-state-highlight {
	box-shadow: inset 0 0 0 1px var(--prc-accent);
}

.ui-autocomplete-panel.prc-combo-panel .ui-autocomplete-emptyMessage {
	padding: .9rem .8rem;
	color: var(--auth-muted, #667085);
	font-size: 14px;
}

/* ------------------------------------------------ conteúdo da linha */

.prc-row {
	white-space: normal;
	display: flex;
	align-items: center;
	gap: .65rem;
	min-width: 0;
}

.prc-row-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	border-radius: 8px;
	background: var(--prc-accent-bg);
	color: var(--prc-accent);
	font-size: .92rem;
}

.prc-row-inativo .prc-row-pill {
	background: var(--prc-inactive-bg);
	color: var(--prc-inactive);
}

.prc-row-body {
	flex: 1 1 auto;
	min-width: 0;
}

.prc-row-title {
	display: flex;
	align-items: center;
	gap: .4rem;
	min-width: 0;
}

.prc-row-code {
	flex-shrink: 0;
	padding: .1rem .35rem;
	border-radius: 5px;
	background: var(--prc-accent-bg-strong);
	color: var(--prc-accent);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .3px;
}

.prc-row-inativo .prc-row-code {
	background: var(--prc-inactive-bg-strong);
	color: var(--prc-inactive);
}

/* Nome comprido quebra em vez de cortar; quem cede espaço é ele, não o
   código (flex-shrink:0 no chip). */
.prc-row-name {
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--auth-ink, #1f2933);
	overflow-wrap: anywhere;
}

.prc-row-sub {
	margin-top: .15rem;
	font-size: .85rem;
	line-height: 1.5;
	color: var(--auth-muted, #667085);
}

.prc-row-sub span {
	white-space: nowrap;
}

/* Detalhe sozinho pode quebrar: sem irmãos não há "•" para preservar, e uma
   frase inteira (o aviso do servidor padrão) era cortada em tela estreita. */
.prc-row-sub span:only-child {
	white-space: normal;
}

/* Separador no fim de cada item, não no início do seguinte: assim o "•"
   fica na linha de cima quando há quebra. */
.prc-row-sub span:not(:last-child)::after {
	content: "•";
	margin: 0 .5rem;
	opacity: .5;
}

.prc-row-sub i {
	margin-right: .25rem;
	font-size: .8rem;
	opacity: .85;
}

.prc-row-right {
	display: flex;
	align-items: center;
	gap: .4rem;
	flex-shrink: 0;
}

.prc-row-badge {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .12rem .5rem .12rem .45rem;
	border: 1px solid var(--prc-inactive-border);
	border-radius: 999px;
	background: var(--prc-inactive-bg);
	color: var(--prc-inactive);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
	line-height: 1.45;
	white-space: nowrap;
}

.prc-row-badge::before {
	content: "";
	flex-shrink: 0;
	width: .35rem;
	height: .35rem;
	border-radius: 50%;
	background: currentColor;
	opacity: .75;
}

.prc-row-badge.is-warn {
	border-color: var(--prc-warn-border);
	background: var(--prc-warn-bg);
	color: var(--prc-warn);
}

@media (max-width: 640px) {
	.prc-row-name {
		font-size: .9rem;
	}

	.prc-row-pill {
		width: 1.75rem;
		height: 1.75rem;
	}

	.prc-row-right {
		max-width: 40%;
		overflow: hidden;
	}

	.ui-autocomplete-panel.prc-combo-panel table.ui-autocomplete-table {
		padding: .35rem;
	}

	.ui-autocomplete-panel.prc-combo-panel table.ui-autocomplete-table > tbody > tr.ui-autocomplete-item > td {
		padding: .45rem .55rem !important;
	}
}

/* Botão secundário (Sair) — mesma altura e raio do primário. */
.pratic-shell .sel-logout.ui-button {
	width: 100%;
	min-height: 48px;
	justify-content: center;
	font-family: var(--auth-display-font);
	font-size: 15px;
	font-weight: 700;
	color: var(--auth-navy);
	background: #ffffff;
	border: 1px solid var(--auth-line);
	border-radius: var(--border-radius);
	box-shadow: none;
}

.pratic-shell .sel-logout.ui-button:enabled:hover {
	background: #f2f6fc;
	border-color: var(--auth-navy);
	color: var(--auth-navy-deep);
}

.pratic-shell .sel-logout.ui-button:enabled:focus {
	box-shadow: 0 0 0 3px rgba(28, 69, 135, .18);
}

.sel-footer {
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--auth-line);
}

@media (max-width: 640px) {
	.sel-shell {
		padding: 24px 16px 48px;
	}

	.sel-card {
		padding: 24px 20px;
	}
}

/* ---------------------------------------------------- diálogo de termos */

.pratic-shell .auth-terms-actions {
	margin: 4px 0 12px;
}

/* --------------------------------------------------------- responsivo */

@media (max-width: 960px) {
	.auth-split {
		flex-direction: column;
		min-height: 0;
	}

	.auth-brand {
		flex: 0 0 auto;
		max-width: none;
		padding: 26px 26px 28px;
		gap: 20px;
	}

	.auth-brand::after {
		display: none;
	}

	.auth-brand-logo img {
		width: 104px;
	}

	.auth-brand-headline {
		font-size: 26px;
		margin-bottom: 12px;
	}

	.auth-brand-rule {
		margin-bottom: 16px;
	}

	.auth-brand-sub {
		font-size: 15px;
		margin-bottom: 20px;
	}

	.auth-benefits {
		gap: 11px;
	}

	.auth-benefit {
		font-size: 14px;
	}

	/* Empilhado, o painel de marca empurra o formulário para baixo da dobra. */
	.auth-brand-foot {
		display: none;
	}

	.auth-panel {
		padding: 32px 26px 48px;
	}
}

@media (max-width: 640px) {
	.auth-brand {
		padding: 24px 20px 28px;
	}

	.auth-brand-logo img {
		width: 110px;
	}

	.auth-brand-headline {
		font-size: 23px;
		margin-bottom: 10px;
	}

	.auth-brand-sub {
		font-size: 14.5px;
		margin-bottom: 18px;
	}

	.auth-panel {
		padding: 26px 20px 40px;
	}

	.auth-title {
		font-size: 23px;
	}

	/* Duas colunas não cabem: cada campo ocupa a linha inteira. */
	.auth-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================================
   Rodapé Pratic — compartilhado pelas 12 telas.

   Tokens redeclarados aqui de propósito: o footer é um fragmento incluído
   por páginas que podem não carregar o pratic-ui.css, então ele precisa se
   sustentar sozinho. Os valores são os mesmos do pratic-ui.
   ========================================================================= */

.pratic-footer {
	--pf-navy: #1c4587;
	--pf-navy-deep: #143567;
	--pf-gold: #f8c301;
	--pf-on-navy: rgba(255, 255, 255, .82);
	--pf-on-navy-dim: rgba(255, 255, 255, .58);
	--pf-line: rgba(255, 255, 255, .14);

	--pf-body-font: "Open Sans", "Segoe UI", "Helvetica Neue", sans-serif;
	--pf-display-font: "Plus Jakarta Sans", "Open Sans", "Segoe UI", sans-serif;

	position: relative;
	background: var(--pf-navy);
	color: var(--pf-on-navy);
	font-family: var(--pf-body-font);
	font-size: 14px;
	line-height: 1.6;
}

/* Fio dourado no topo, amarrando com a régua das telas. */
.pratic-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--pf-gold);
}

.pratic-footer a {
	color: var(--pf-on-navy);
	text-decoration: none;
}

.pratic-footer a:hover,
.pratic-footer a:focus {
	color: #ffffff;
	text-decoration: underline;
}

.pratic-footer-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 40px 24px 28px;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 40px;
}

/* ------------------------------------------------------------- marca */

.pratic-footer-logo {
	display: inline-block;
	margin-bottom: 16px;
}

.pratic-footer-logo img {
	width: 104px;
	height: auto;
	display: block;
}

.pratic-footer-company {
	font-family: var(--pf-display-font);
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 4px;
}

.pratic-footer-meta {
	margin: 0;
	color: var(--pf-on-navy-dim);
	font-size: 13px;
}

.pratic-footer-tagline {
	margin: 12px 0 0;
	max-width: 42ch;
	text-wrap: pretty;
}

.pratic-footer-social {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
}

.pratic-footer-social a {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--pf-line);
	transition: background-color .15s ease, border-color .15s ease;
}

.pratic-footer-social a:hover,
.pratic-footer-social a:focus {
	background: rgba(255, 255, 255, .10);
	border-color: var(--pf-gold);
}

.pratic-footer-social svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: #ffffff;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ------------------------------------------------------------ suporte */

.pratic-footer-heading {
	font-family: var(--pf-display-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pf-gold);
	margin: 0 0 6px;
}

.pratic-footer-hours {
	margin: 0 0 16px;
	color: var(--pf-on-navy-dim);
	font-size: 13px;
}

.pratic-footer-channels {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pratic-footer-channel {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pratic-footer-channel svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: var(--pf-gold);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Alvo de toque decente nos links de contato. */
.pratic-footer-channel a,
.pratic-footer-channel > span {
	min-height: 24px;
	display: inline-flex;
	align-items: center;
	word-break: break-word;
}

/* ------------------------------------------------------ barra inferior */

.pratic-footer-bottom {
	border-top: 1px solid var(--pf-line);
}

.pratic-footer-bottom-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 12.5px;
	color: var(--pf-on-navy-dim);
}

/* --------------------------------------------------------- responsivo */

@media (max-width: 820px) {
	.pratic-footer-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
		padding: 32px 20px 24px;
	}

	.pratic-footer-bottom-inner {
		padding: 14px 20px;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
}