/* ============================================================
   HSO Serviços — CSS da aplicação (conta, portal, painel)
   style.css cobre a landing (protótipo, CRLF); aqui ficam os
   componentes das telas autenticadas e de conta.
   Regra: nenhum hex/sombra/raio solto — tudo vem de tokens.css.
   Contraste: texto sempre em --text/--primary; --accent só em
   ícone/borda (>= 3:1 sobre --light), nunca como texto pequeno.
   ============================================================ */

/* --- Utilidades --------------------------------------------------------- */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Página (o header é fixo — ver style.css) --------------------------- */

.pagina {
	padding-top: calc(var(--header-height) + var(--space-4));
	padding-bottom: var(--space-6);
}

.container-conta {
	max-width: 560px;
}

.container-texto {
	max-width: 800px;
}

.card-conta {
	background-color: white;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: var(--space-4);
}

.card-conta h1 {
	font-size: var(--fs-xl);
	color: var(--primary);
	margin-bottom: var(--space-1);
}

.conta-lead {
	color: var(--text);
	margin-bottom: var(--space-3);
}

.conta-apoio {
	margin-top: var(--space-2);
	text-align: center;
}

.conta-apoio a {
	color: var(--primary);
}

/* Botão que ocupa a largura do card (um alvo por vez, alvo >= 44px) */
.btn-bloco {
	display: block;
	width: 100%;
	text-align: center;
	border: 2px solid var(--secondary);
}

/* --- Mensagens e alertas ------------------------------------------------ */

.mensagens {
	list-style: none;
	max-width: var(--container-max);
	margin: var(--header-height) auto var(--space-2);
	padding: 0 var(--space-2);
}

.shell-main .mensagens {
	margin-top: 0;
}

.alert {
	background-color: var(--light);
	border-left: 4px solid var(--primary);
	border-radius: var(--radius-sm);
	color: var(--text);
	padding: var(--space-2);
	margin-bottom: var(--space-2);
}

.alert i {
	color: var(--primary);
	margin-right: var(--space-1);
}

.alert-erro,
.alert-error,
.alert-warning {
	border-left-color: var(--accent);
}

.alert-erro i,
.alert-error i,
.alert-warning i {
	color: var(--accent);
}

.alert-sucesso,
.alert-success {
	border-left-color: var(--secondary);
}

.alert-info {
	border-left-color: var(--primary);
}

/* Confirmação devolvida pelo HTMX (troca out-of-band numa região aria-live) */
.aviso-htmx {
	background-color: var(--light);
	border-left: 4px solid var(--secondary);
	border-radius: var(--radius-sm);
	color: var(--text);
	padding: var(--space-2);
	margin-bottom: var(--space-2);
}

.aviso-htmx i {
	color: var(--primary);
	margin-right: var(--space-1);
}

.aviso-htmx:empty {
	display: none;
}

/* --- Campos de formulário ---------------------------------------------- */

.form-erro {
	color: var(--text);
	font-weight: 600;
	border-left: 3px solid var(--accent);
	padding-left: var(--space-1);
	margin-top: var(--space-1);
}

.form-erro i {
	color: var(--accent);
	margin-right: 0.35rem;
}

.form-ajuda {
	color: var(--text);
	font-size: var(--fs-sm);
	margin-top: var(--space-1);
}

.opcional {
	font-size: var(--fs-sm);
	font-weight: normal;
}

.checkbox-field {
	display: flex;
	align-items: flex-start;
	gap: var(--space-1);
}

/* A caixa é o alvo: >= 44px de área tocável, sem encolher o rótulo */
.checkbox-field input[type='checkbox'] {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 0.35rem 0 0;
	accent-color: var(--primary);
}

.checkbox-field label {
	margin: 0;
	font-weight: normal;
}

.checkbox-field label a {
	color: var(--primary);
}

.form-group input[readonly] {
	background-color: var(--light);
	color: var(--text);
}

/* --- Header: itens de conta -------------------------------------------- */

.sair-form {
	margin: 0;
}

.link-button {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-weight: 500;
	color: white;
	cursor: pointer;
}

nav ul li button.link-button:hover {
	color: var(--light);
	text-decoration: underline;
}

/* CTA de conta no header: --light sobre navy (>= 4.5:1) */
nav ul li a.nav-cta {
	background-color: var(--light);
	color: var(--primary);
	border-radius: var(--radius-pill);
	padding: 0.35rem 0.9rem;
	font-weight: bold;
}

nav ul li a.nav-cta:hover {
	background-color: white;
	color: var(--primary-dark);
}

/* --- Shell autenticado (AD-17) ----------------------------------------- */

.shell-main {
	padding-top: calc(var(--header-height) + var(--space-4));
	padding-bottom: var(--space-6);
	min-height: 60vh;
}

.titulo-pagina {
	font-size: var(--fs-xl);
	color: var(--primary);
	margin-bottom: var(--space-1);
}

.perfil-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: var(--space-3);
	margin-top: var(--space-3);
	align-items: start;
}

.card-bloco {
	background-color: white;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: var(--space-3);
}

.card-bloco h2 {
	font-size: var(--fs-md);
	color: var(--primary);
	margin-bottom: var(--space-2);
}

.card-bloco a {
	color: var(--primary);
}

/* --- Estado vazio (UX-DR12) --------------------------------------------- */

/* Sempre com ação de saída (CTA `btn empty-state-acao`) — nunca só "Nenhum dado".
   Ícone é decorativo: vai `aria-hidden` no HTML, o texto é a única fonte. */
.empty-state {
	padding-block: var(--space-5);
	text-align: center;
}

.empty-state i {
	color: var(--primary);
	display: block;
	font-size: var(--fs-2xl);
	margin-bottom: var(--space-2);
}

.empty-state-titulo {
	color: var(--text);
	font-size: var(--fs-lg);
	font-weight: 700;
	margin-bottom: var(--space-1);
}

.empty-state-apoio {
	color: var(--text);
	margin-bottom: var(--space-3);
}

/* O CTA herda o visual de `.btn`; aqui só o que o elemento <button> não herda sozinho
   (fonte do texto e cursor) — alvo segue >= 44px pelo padding do próprio botão. */
.empty-state-acao {
	cursor: pointer;
	font-family: inherit;
}

/* --- Política de Privacidade ------------------------------------------- */

.politica h1 {
	font-size: var(--fs-2xl);
	color: var(--primary);
	margin-bottom: var(--space-1);
}

.politica-versao {
	color: var(--text);
	font-size: var(--fs-sm);
	margin-bottom: var(--space-3);
}

.politica h2 {
	font-size: var(--fs-lg);
	color: var(--primary);
	margin: var(--space-4) 0 var(--space-1);
}

.politica p,
.politica li {
	color: var(--text);
}

.politica ul {
	margin: var(--space-1) 0 var(--space-2) 1.25rem;
}

.politica li {
	margin-bottom: 0.5rem;
}

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

/* --- Responsivo -------------------------------------------------------- */

@media (max-width: 768px) {
	.card-conta,
	.card-bloco {
		padding: var(--space-2);
	}

	/* Empilhado, o header cresce: mais folga no topo das telas com header fixo */
	.pagina {
		padding-top: calc(var(--header-height) + var(--space-2));
	}
}

/* --- Listas: request-table / request-card / filter-chip / paginação --------- */
/* Especificação em DESIGN.md §Components (UX-DR7/DR8/DR12/DR14/DR19):
   mesma peça vale fila, cadastros, orçamentos e auditoria. Tokens de
   `tokens.css` apenas (AD-15). */

/* Densidade do desktop (>768px): fundo --surface, cabeçalho --primary com texto
   claro, células --text em --fs-sm, divisória 1px --border (decorativa, sem
   sombra por linha), raio --radius-sm no contêiner. A linha inteira é navegável
   por **um** <a>/<button> focável — nunca <tr onclick>. */
.request-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--surface);
	border-radius: var(--radius-sm);
	overflow: hidden;
	font-size: var(--fs-sm);
}

.request-table thead th {
	background: var(--primary);
	color: var(--surface);
	text-align: left;
	padding: var(--space-2);
	font-weight: 600;
}

.request-table tbody td {
	color: var(--text);
	padding: var(--space-2);
	border-bottom: 1px solid var(--border);
}

.request-table tbody tr:last-child td {
	border-bottom: 0;
}

/* A linha recebe foco pelo link da primeira célula (ordem de tabulação = visual) */
.request-table tbody a {
	color: var(--primary);
	font-weight: 600;
	text-decoration: underline;
}

/* Versão mobile (<=768px): cards com sombra --shadow-card, raio --radius-md */
.request-card {
	background: var(--surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: var(--space-2);
	margin-bottom: var(--space-2);
}

.request-card-titulo {
	font-size: var(--fs-base);
	font-weight: 700;
	color: var(--text);
}

.request-card-linha {
	color: var(--text);
	font-size: var(--fs-sm);
}

.request-card .btn {
	margin-top: var(--space-2);
}

@media (max-width: 768px) {
	.request-table {
		display: none;
	}
}

@media (min-width: 769px) {
	.request-card {
		display: none;
	}
}

/* Chips de filtro ativos (UX-DR14): removíveis por <button> nomeado,
   alvo de toque >= 44px, raio pill */
.filter-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	background: var(--light);
	color: var(--text);
	border: 1px solid var(--text-muted);
	border-radius: var(--radius-pill);
	padding: 0 var(--space-2);
	min-height: 44px;
	margin: 0 var(--space-1) var(--space-1) 0;
	font-size: var(--fs-sm);
}

.filter-chip button {
	background: none;
	border: 0;
	color: var(--primary);
	font-size: var(--fs-base);
	cursor: pointer;
	min-width: 44px;
	min-height: 44px;
}

/* Paginação explícita (UX-DR7/DR14): <nav aria-label="Páginas"> com
   aria-current="page" no item corrente */
.paginacao {
	margin-top: var(--space-3);
}

.paginacao ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	padding: 0;
}

.paginacao a,
.paginacao span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border: 1px solid var(--border-control);
	border-radius: var(--radius-sm);
	color: var(--primary);
	text-decoration: none;
	background: var(--surface);
}

.paginacao span[aria-current='page'] {
	background: var(--primary);
	color: var(--surface);
	border-color: var(--primary);
	font-weight: 700;
}

/* Barra de filtros compacta sobre a lista (FR-14/FR-22) */
.filtros-barra {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: flex-end;
	margin-bottom: var(--space-3);
}

.filtros-barra .form-group {
	margin-bottom: 0;
	flex: 1 1 180px;
}

/* --- Linha do tempo de status (DESIGN.md §Components, FR-11/UX-DR) --------- */
/* Trilho vertical 1px --text-muted (>=3:1); a atualização mais recente é a
   única destacada; rótulo pt-BR do Glossário, data dd/mm/aaaa e quem atuou. */
.status-timeline {
	list-style: none;
	margin: 0 0 var(--space-4);
	padding-left: var(--space-3);
	border-left: 1px solid var(--text-muted);
}

.status-timeline-item {
	margin-bottom: var(--space-3);
	position: relative;
}

.status-timeline-item::before {
	content: '';
	position: left center;
	position: absolute;
	left: calc(-1 * var(--space-3) - 5px);
	top: 0.35rem;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--text-muted);
}

.status-timeline-atual::before {
	background: var(--primary);
	width: 13px;
	height: 13px;
	left: calc(-1 * var(--space-3) - 7px);
}

.status-timeline-rotulo {
	color: var(--text);
	font-weight: 700;
	margin-bottom: var(--space-1);
}

.status-timeline-atual .status-timeline-rotulo {
	color: var(--primary);
}

.status-timeline-data {
	display: block;
	color: var(--text-muted);
	font-size: var(--fs-sm);
	font-weight: 400;
}

.status-timeline-texto {
	color: var(--text);
	font-size: var(--fs-sm);
}

/* --- Estagnação >24h (DESIGN.md stale-*, FR-14/UX-DR7) -------------------- */
/* Nunca só cor: o rótulo textual é obrigatório junto do ícone. */
.stale-highlight {
	background: var(--light);
}

.stale-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	background: var(--accent);
	color: var(--text);
	border-radius: var(--radius-pill);
	padding: 0.15rem var(--space-2);
	font-size: var(--fs-sm);
	margin-left: var(--space-1);
}

.stale-label {
	color: var(--text);
	font-weight: 600;
	margin-bottom: var(--space-2);
}

/* --- Modal drawer (DESIGN.md, UX-DR11) ----------------------------------- */
/* Scrim + painel; foco preso, Esc fecha, foco volta ao gatilho (modal.js). */
.modal-scrim[hidden] {
	display: none;
}

.modal-scrim {
	position: fixed;
	inset: 0;
	background: var(--overlay-hero);
	z-index: var(--z-header);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-2);
}

.modal-drawer {
	background: var(--surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	max-width: 520px;
	width: 100%;
	padding: var(--space-3);
}

.modal-drawer h2 {
	color: var(--primary);
	margin-bottom: var(--space-2);
}

.status-timeline-nota .status-timeline-rotulo {
	color: var(--text-muted);
}

/* --- Calendário de eventos (DESIGN.md event-calendar, FR-17/UX-DR13) ------- */
/* Grade acessível: role="grid", setas navegam (agenda.js), célula >= 44px,
   Enter cria o evento na célula — duplo-clique só atalho. <=768px a lista é a
   visão primária (a grade rola sem overflow). */
.event-calendar {
	background: var(--surface);
	border-radius: var(--radius-md);
	overflow-x: auto;
	margin-bottom: var(--space-4);
}

.event-calendar-semana {
	display: grid;
	grid-template-columns: repeat(7, minmax(44px, 1fr));
}

.event-calendar-cabecalho {
	text-align: center;
	color: var(--text-muted);
	font-size: var(--fs-sm);
	padding: var(--space-1) 0;
	border-bottom: 1px solid var(--border);
}

.event-calendar-celula {
	min-height: 64px;
	min-width: 44px;
	padding: var(--space-1);
	border: 1px solid var(--border);
	background: var(--surface);
}

.event-calendar-celula:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
}

.event-calendar-hoje {
	background: var(--light);
}

.event-calendar-dia {
	color: var(--text);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.event-calendar-evento {
	display: block;
	background: var(--secondary);
	color: var(--surface);
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	font-weight: 600;
	margin-top: 0.15rem;
	padding: 0.15rem var(--space-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.event-calendar-evento a {
	color: inherit;
	text-decoration: underline;
}