/* HNF - Solicitação de Prontuário: painel de atendimento (front-end, sem wp-admin) */

.hnf-staff-wrap {
	--hnf-vermelho: #b3122a;
	--hnf-marinho: #1c3a5e;
	--hnf-teal: #1f8a9e;
	--hnf-sucesso: #1f7a4d;
	--hnf-sucesso-escuro: #175c3a;
	--hnf-fundo: #f6f7f8;
	--hnf-texto: #2a2c2e;
	--hnf-texto-suave: #55595e;
	--hnf-borda: #e2e4e7;

	--hnf-fs-xs: 13px;
	--hnf-fs-sm: 14.5px;
	--hnf-fs-base: 16px;
	--hnf-fs-md: 17px;
	--hnf-fs-lg: 19px;

	max-width: 780px;
	margin: 24px auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: var(--hnf-fs-base);
	line-height: 1.5;
}

.hnf-staff-topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--hnf-fs-sm);
	color: var(--hnf-texto-suave);
	padding: 0 6px 12px;
}

.hnf-staff-topbar a {
	color: var(--hnf-vermelho);
	text-decoration: none;
	font-weight: 600;
}

.hnf-staff-login {
	max-width: 400px;
}

.hnf-staff-esqueci {
	text-align: center;
	margin-top: 14px;
	font-size: var(--hnf-fs-sm);
}

.hnf-staff-esqueci a {
	color: var(--hnf-teal);
	text-decoration: none;
}

#hnf-link-gerado-valor {
	width: 100%;
	max-width: 480px;
	padding: 9px 11px;
	border: 1px solid var(--hnf-borda);
	border-radius: 6px;
	font-size: var(--hnf-fs-sm);
	color: var(--hnf-texto-suave);
	margin-bottom: 6px;
}

.hnf-staff-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 18px;
}

.hnf-staff-tabs a {
	font-size: var(--hnf-fs-sm);
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--hnf-fundo);
	color: var(--hnf-texto-suave);
	text-decoration: none;
	border: 1px solid var(--hnf-borda);
}

.hnf-staff-tabs a.hnf-tab-ativa {
	background: var(--hnf-marinho);
	color: #fff;
	border-color: var(--hnf-marinho);
}

.hnf-staff-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hnf-staff-list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 13px 15px;
	border: 1px solid var(--hnf-borda);
	border-radius: 8px;
	text-decoration: none;
	color: var(--hnf-texto);
	transition: border-color 0.15s ease, background 0.15s ease;
}

.hnf-staff-list-item:hover {
	border-color: var(--hnf-teal);
	background: #fafdfe;
}

.hnf-staff-list-info {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: var(--hnf-fs-sm);
}

.hnf-staff-list-info strong {
	font-size: var(--hnf-fs-base);
	color: var(--hnf-marinho);
}

.hnf-staff-list-data {
	color: var(--hnf-texto-suave);
	font-size: var(--hnf-fs-xs);
}

.hnf-staff-dados {
	margin-bottom: 18px;
	border: 1px solid var(--hnf-borda);
	border-radius: 8px;
	padding: 12px 16px;
}

.hnf-staff-dados summary {
	cursor: pointer;
	font-weight: 600;
	font-size: var(--hnf-fs-base);
	color: var(--hnf-marinho);
}

.hnf-staff-tabela {
	width: 100%;
	margin-top: 10px;
	border-collapse: collapse;
	font-size: var(--hnf-fs-sm);
}

.hnf-staff-tabela th {
	text-align: left;
	color: var(--hnf-texto-suave);
	font-weight: 600;
	vertical-align: top;
	padding: 7px 10px 7px 0;
	width: 150px;
	white-space: nowrap;
}

.hnf-staff-tabela td {
	padding: 7px 0;
}

.hnf-link-doc {
	color: var(--hnf-teal);
	font-weight: 600;
	font-size: var(--hnf-fs-sm);
}

.hnf-staff-acao-box {
	border: 1px solid var(--hnf-borda);
	border-radius: 8px;
	padding: 18px;
	margin-bottom: 18px;
}

.hnf-staff-acao-box h3 {
	margin-top: 0;
	font-size: var(--hnf-fs-base);
	color: var(--hnf-marinho);
}

.hnf-staff-acao-box p {
	font-size: var(--hnf-fs-sm);
}

.hnf-staff-acao-box textarea,
.hnf-staff-acao-box input[type="email"],
.hnf-staff-acao-box input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--hnf-borda);
	border-radius: 6px;
	font-family: inherit;
	font-size: var(--hnf-fs-base);
	margin-bottom: 10px;
}

.hnf-staff-acao-box .hnf-btn {
	width: auto;
	margin-right: 8px;
	font-size: var(--hnf-fs-md);
}

.hnf-staff-acao-box hr {
	border: none;
	border-top: 1px solid var(--hnf-borda);
	margin: 16px 0;
}

@media (max-width: 560px) {
	.hnf-staff-wrap { margin: 12px; }
	.hnf-staff-list-item { flex-direction: column; align-items: flex-start; gap: 8px; }
}