/* ================================================================
   PREPS — Modern Corporate Theme 2026
   gov.br DS font: Rawline → fallback Raleway (Google Fonts)

   STRUCTURE:
   1. TOKENS          — CSS variables (design tokens)
   2. RESET / BASE    — global resets, html, body, typography
   3. LAYOUT          — page structure (#header, #info, .menu, etc.)
   4. COMPONENTS      — reusable UI pieces (classes only)
   5. DATA TABLES     — tabela system, rows, paginator
   6. PAGES           — page-specific overrides (login, home, webgis)
   7. UTILITIES       — single-purpose helper classes
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; }


/* ================================================================
   1. TOKENS
   ================================================================ */
:root {
	/* Primary palette */
	--color-primary: #294984;
	--color-primary-dark: #1e3a5f;
	--color-primary-hover: #1a365d;
	--color-primary-light: #3b6cb5;

	/* Neutral palette */
	--color-bg: #f0f2f5;
	--color-bg-light: #f7fafc;
	--color-bg-card: #fff;
	--color-text: #2d3748;
	--color-text-secondary: #4a5568;
	--color-text-muted: #718096;
	--color-text-inverse: #fff;

	/* Borders */
	--color-border: #c4cdd9;
	--color-border-input: #b0bac9;
	--color-border-light: #d5dbe3;

	/* Semantic */
	--color-danger: #e53e3e;
	--color-danger-dark: #b33;
	--color-danger-bg: #fff5f5;
	--color-warning: #FF6600;
	--color-info: #E2E9F5;
	--color-success: #38a169;

	/* Diagram / decorative */
	--color-muted: #7a8faa;
	--color-disabled: #9aa8bd;

	/* Radii */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 10px;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
	--shadow-md: 0 2px 8px rgba(41,73,132,0.12);
	--shadow-lg: 0 4px 16px rgba(41,73,132,0.12);
	--shadow-tooltip: 0 8px 32px rgba(0,0,0,0.2);

	/* Focus ring */
	--focus-ring: 0 0 0 3px rgba(41,73,132,0.08);

	/* Spacing */
	--input-height: 38px;
	--font-size-base: 14px;
	--font-size-sm: 13px;
	--font-size-xs: 12px;
}


/* ================================================================
   2. RESET / BASE
   ================================================================ */
html {
	height: 100%;
	min-width: 1024px;
}

body {
	background-color: var(--color-bg);
	margin: 0;
	padding: 0;
	font-family: Rawline, Raleway, sans-serif;
	font-size: var(--font-size-base);
	color: var(--color-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
}

body > br { display: none; }

h1, h2, h3, h4, p, form, ul { margin: 0; padding: 0; }

/* --- Base table reset --- */
table {
	width: 100%;
	border-collapse: collapse;
	font-family: inherit;
	font-size: var(--font-size-base);
	border-spacing: 0;
	border: none;
	table-layout: auto;
}

th {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	border: none;
	padding: 10px 12px;
	font-weight: 600;
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-align: center;
	white-space: nowrap;
	width: auto;
}

td {
	padding: 8px 12px;
	border: none;
	border-bottom: 1px solid var(--color-border-light);
	vertical-align: middle;
	text-align: left;
	white-space: nowrap;
	width: auto;
}

img { max-width: 100%; }

/* --- Base links --- */
a { color: var(--color-primary); text-decoration: none; font-weight: 500; }
a:hover { color: var(--color-primary-hover); text-decoration: none; }


/* ================================================================
   3. LAYOUT
   ================================================================ */

/* --- Header --- */
#header {
	width: 100%;
	flex-basis: 100%;
	height: auto;
	min-height: 60px;
	background-color: #ffffff;
	margin: 0;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 0 30px;
}

#header > div {
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	line-height: 1.5;
	padding: 12px 32px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

/* --- Info bar (dark blue) --- */
#info {
	width: 100%;
	flex-basis: 100%;
	height: auto;
	min-height: 36px;
	background-color: var(--color-primary-dark);
	margin: 0;
	font-size: var(--font-size-xs);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0;
	flex-wrap: nowrap;
	flex-shrink: 0;
	position: relative;
}

#info a:hover,
#info a.logout:hover { color: var(--color-text-inverse); }

@media (min-width: 1264px) {
	#info { padding: 0 calc(50% - 600px); }
}
@media (max-width: 1263px) {
	#info { padding: 0 32px; }
}

/* Info bar children — version, idioma, usuario */
.version-tag {
	color: rgba(255,255,255,0.5);
	font-size: 11px;
	margin: 0;
	padding: 5px 0;
	margin-right: auto;
	margin-left: 0;
	order: 1;
}

.idioma {
	padding: 5px 0;
	display: flex;
	align-items: center;
	gap: 8px;
	order: 2;
}

.usuario {
	color: var(--color-text-inverse);
	padding: 5px 8px;
	font-size: var(--font-size-xs);
	order: 3;
}
.usuario b { font-weight: 600; }

.idiomaSelecionado { border: 2px solid rgba(255,255,255,0.7); border-radius: 3px; }

a.logout { color: var(--color-text-inverse); opacity: 0.85; }
a.logout:hover { color: var(--color-text-inverse); opacity: 1; }

/* Reorder .idioma children:
   DOM: a:nth(1)=flag, a:nth(2)=[Trocar senha], a:nth(3)=[Ajuda]
   Visual: [Ajuda](3) [Trocar senha](2) flag(1) */
.idioma > a:nth-of-type(3) { order: 1; }
.idioma > a:nth-of-type(2) { order: 2; }
.idioma > a:nth-of-type(1) { order: 10; }

/* --- Container — centered fixed-width wrapper --- */
.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	min-height: calc(100vh - 60px - 36px);
	box-sizing: border-box;
}

/* --- Sidebar menu --- */
.menu {
	width: 220px;
	min-width: 220px;
	flex-shrink: 0;
	background-color: transparent;
	border: none;
	padding: 16px 12px 4px 0;
	min-height: calc(100vh - 60px - 36px - 16px);
	align-self: flex-start;
}

/* Hide legacy menu footer image */
.menu > h1 { display: none; }

/* --- Content containers --- */
.preConteudo {
	width: 100%;
	flex: 1 1 0;
	padding: 32px;
	border: none;
	min-height: calc(100vh - 60px - 36px);
}

.preConteudoAutenticado {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	border: none;
	overflow: visible;
	padding: 16px 0 24px 16px;
	min-height: calc(100vh - 60px - 36px - 16px);
}

/* --- #Conteudo — main content area --- */
#Conteudo {
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: auto;
	padding: 0;
	position: static;
	left: auto;
	top: auto;
	margin: 0;
	background-color: transparent;
	overflow: visible;
}

#Conteudo #Abas,
#Conteudo #pagina {
	width: 100%;
	height: auto;
}

/* --- empresa_altera_situacao: two-column layout; wrap ensures full-width fieldsets stack --- */
#Conteudo #pagina {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px;
	min-width: 0;
	overflow: hidden;
	width: 100%;
}

#Conteudo #alteraSituacao {
	flex: 0 0 340px;
	width: 340px;
	min-width: 0;
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

#Conteudo #alteraSituacao > fieldset {
	margin-bottom: 0;
	padding: 10px 12px 14px;
	flex: 1 1 auto;
	align-content: center;
	justify-content: center;
}

#Conteudo #alteraSituacao > fieldset > .diagrama-situacao {
	margin: auto;
}

#Conteudo #direita {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow: hidden;
}

#Conteudo #situacaoAtual,
#Conteudo #novaSituacao {
	width: 100%;
	min-width: 0;
}

#Conteudo #situacaoAtual > fieldset,
#Conteudo #novaSituacao > fieldset {
	box-sizing: border-box;
	min-width: 0;
	margin-bottom: 0;
	padding: 10px 12px 12px;
	flex-direction: column;
	gap: 6px 0;
}

#Conteudo #situacaoAtual > fieldset > p.campo,
#Conteudo #novaSituacao > fieldset > p.campo {
	flex: 0 0 auto;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
}

#Conteudo #situacaoAtual > fieldset > p.campo > input,
#Conteudo #novaSituacao > fieldset > p.campo > input {
	width: 100%;
}

#Conteudo #situacaoAtual > fieldset > br,
#Conteudo #novaSituacao > fieldset > br {
	display: none;
}


/* --- Footer --- */
.site-footer {
	width: 100%;
	flex-basis: 100%;
	flex-shrink: 0;
	background-color: var(--color-primary-dark);
	color: rgba(255,255,255,0.55);
	font-size: var(--font-size-xs);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 32px;
	margin-top: 24px;
	gap: 16px;
}

@media (min-width: 1264px) {
	.site-footer { padding: 10px calc(50% - 600px); }
}

@media (max-width: 600px) {
	.site-footer { flex-direction: column; gap: 4px; text-align: center; }
}


/* ================================================================
   4. COMPONENTS
   ================================================================ */

/* --- 4.1 Labels --- */
.campo-label,
#Conteudo label:not(.campo-label):not(.info),
.area-dados label:not(.campo-label) {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	font-weight: 600;
	margin-bottom: 3px;
	display: block;
	width: auto;
	letter-spacing: 0.1px;
}

.campo-label--obrigatorio {
	font-weight: 700;
}

.campo-required {
	color: #dc3545 !important;
	font-weight: 700;
	font-size: 1.25em;
	margin-left: 1px;
	line-height: 1;
}

.texto-radio {
	font-size: var(--font-size-base);
	color: var(--color-text);
}


/* --- 4.2 Text inputs --- */
.texto:not(.color-swatch),
.campo-rotulo,
.texto-obrigatorio,
#Conteudo input[type="text"]:not(.texto):not(.campo-rotulo):not(.texto-obrigatorio):not(.color-swatch):not(.text) {
	width: 100%;
	height: var(--input-height);
	border: 1px solid var(--color-border-input);
	border-radius: var(--radius-md);
	background-color: var(--color-bg-card);
	font-family: inherit;
	font-size: var(--font-size-base);
	padding: 0 10px;
	box-sizing: border-box;
	line-height: var(--input-height);
}

.texto-obrigatorio {
	border: 2px solid var(--color-primary);
}


/* --- 4.3 Password --- */
.campo-senha,
#Conteudo input[type="password"]:not(.campo-senha) {
	width: 100%;
	height: var(--input-height);
	border: 1px solid var(--color-border-input);
	border-radius: var(--radius-md);
	background-color: var(--color-bg-card);
	font-family: inherit;
	font-size: var(--font-size-base);
	padding: 0 10px;
	box-sizing: border-box;
}


/* --- 4.4 Textarea --- */
.campo-textarea,
#Conteudo textarea:not(.campo-textarea) {
	width: 100%;
	border: 1px solid var(--color-border-input);
	border-radius: var(--radius-md);
	background-color: var(--color-bg-card);
	font-family: inherit;
	font-size: var(--font-size-base);
	padding: 8px 10px;
	box-sizing: border-box;
	resize: vertical;
	min-height: 60px;
}


/* --- 4.5 Focus state --- */
.texto:focus,
.campo-senha:focus,
.campo-textarea:focus,
.campo-rotulo:focus,
.seletor:focus,
.seletor-obrigatorio:focus,
.campo-arquivo:focus,
#Conteudo input[type="text"]:not(.texto):focus,
#Conteudo input[type="password"]:not(.campo-senha):focus,
#Conteudo textarea:not(.campo-textarea):focus,
#Conteudo select:not(.seletor):focus {
	border-color: var(--color-primary);
	outline: none;
	box-shadow: var(--focus-ring);
}


/* --- 4.6 Radio & Checkbox --- */
.campo-radio,
#Conteudo input[type="radio"]:not(.campo-radio) {
	accent-color: var(--color-primary);
	width: 16px;
	height: 16px;
	vertical-align: middle;
	margin: 0 6px 0 0;
	cursor: pointer;
}

.campo-checkbox,
#Conteudo input[type="checkbox"]:not(.campo-checkbox) {
	accent-color: var(--color-primary);
	width: 16px;
	height: 16px;
	vertical-align: middle;
	margin: 0 6px 0 0;
	cursor: pointer;
	border-radius: var(--radius-sm);
}


/* --- 4.7 File input --- */
.campo-arquivo,
#Conteudo input[type="file"]:not(.campo-arquivo) {
	width: 100%;
	height: auto;
	padding: 8px;
	border: 1px dashed var(--color-border-input);
	border-radius: var(--radius-md);
	background-color: var(--color-bg-light);
	cursor: pointer;
}


/* --- 4.8 Select --- */
.seletor,
#Conteudo select:not(.seletor):not(.seletor-obrigatorio) {
	width: 100%;
	height: var(--input-height);
	background-color: var(--color-bg-card);
	font-family: inherit;
	font-size: var(--font-size-base);
	border: 1px solid var(--color-border-input);
	border-radius: var(--radius-md);
	padding: 0 10px;
	box-sizing: border-box;
	appearance: auto;
}

.seletor-obrigatorio {
	border: 2px solid var(--color-primary);
}


/* --- 4.9 Disabled / readonly --- */
.disabledReadOnly {
	width: 100%;
	height: var(--input-height);
	line-height: var(--input-height);
	border: 1px solid var(--color-border-input);
	border-radius: var(--radius-md);
	background-color: var(--color-bg-light);
	color: var(--color-text-muted);
	font-size: var(--font-size-base);
	padding: 0 10px;
}

input[readonly]:not(#ind_cor),
input[disabled]:not(#ind_cor) {
	background-color: var(--color-bg-light);
	color: var(--color-text-muted);
	border-color: var(--color-border);
	cursor: default;
}


/* --- 4.10 Field wrapper (<p class="campo">) --- */
.campo,
#Conteudo > form > p:not(.campo):not(.area-botao):not(.separador),
.area-dados p:not(.campo):not(.area-botao):not(.separador) {
	margin-top: 4px;
	margin-bottom: 4px;
}

/* p.campo dentro de fieldset ocupa linha inteira por padrão */
fieldset > p.campo,
fieldset > form > p.campo {
	width: 100%;
	flex-shrink: 0;
}

.separador {
	height: 0;
	width: 0;
	margin: 0;
	padding: 0;
	display: none;
}
img.separador { display: none; }


/* --- 4.11 Buttons --- */
input[type="submit"],
input[type="button"],
input.botao {
	height: auto;
	min-height: var(--input-height);
	min-width: auto;
	width: auto;
	font-size: var(--font-size-base);
	font-family: inherit;
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	border: none;
	border-radius: var(--radius-md);
	padding: 8px 20px;
	cursor: pointer;
	font-weight: 500;
	letter-spacing: 0.2px;
	margin: 0;
	vertical-align: middle;
	white-space: nowrap;
	line-height: 1.4;
	display: inline-block;
}

input[type="submit"]:hover,
input[type="button"]:hover,
input.botao:hover {
	background-color: var(--color-primary-dark);
}

input[type="submit"]:disabled,
input[type="button"]:disabled,
input.botao:disabled {
	background-color: #8898b3;
	color: #e8ecf2;
	cursor: not-allowed;
	opacity: 1;
}

.area-botao {
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0;
	text-align: center;
}

/* Buttons inside fieldsets/forms: no margin (gap controls spacing) */
fieldset .area-botao {
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 0;
	flex-basis: auto;
	flex-shrink: 0;
}

fieldset .area-botao input[type="submit"],
fieldset .area-botao input[type="button"] {
	margin: 0;
}


/* --- 4.12 Fieldsets --- */
fieldset {
	width: 100%;
	height: auto;
	min-height: 0;
	max-height: none;
	margin: 0 0 16px 0;
	padding: 14px 16px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	background-color: var(--color-bg-card);
	box-shadow: var(--shadow-sm);
	font-size: var(--font-size-base);
	overflow: visible;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
}

/* Nested fieldsets */
fieldset fieldset {
	box-shadow: none;
	border: 1px solid var(--color-border);
	margin: 8px 0;
	padding: 12px 14px;
	width: 100%;
	flex-shrink: 0;
}

legend {
	font-size: var(--font-size-base);
	color: var(--color-primary);
	font-weight: 600;
	padding: 0 8px;
	width: auto;
	flex-shrink: 0;
}

legend.info {
	padding-left: 22px;
	background: url('../images/erro.gif') no-repeat left center;
	color: var(--color-danger);
}

fieldset#dados > input[type="hidden"] { display: none; }
fieldset#dados { overflow: visible; height: auto; }


/* --- 4.13 Fieldset: opções (button-only) ---
   Replaces the :has() monster selectors.
   Class added automatically by campo_fieldset() when label contains "opcoes". */
/* Qualquer fieldset com botões diretos usa space-between */
fieldset:has(> .area-botao),
.fieldset-opcoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	align-content: flex-start;
	gap: 8px;
	padding: 10px 16px;
}

/* Campos e divs dentro desses fieldsets ocupam linha inteira */
fieldset:has(> .area-botao) > p.campo,
fieldset:has(> .area-botao) > div,
fieldset:has(> .area-botao) > fieldset,
fieldset:has(> .area-botao) > form {
	width: 100%;
	flex-shrink: 0;
}

/* Form dentro de fieldset com botões: também space-between nos seus botões */
fieldset > form:has(> .area-botao) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	align-content: flex-start;
	gap: 8px;
}

fieldset > form:has(> .area-botao) > p.campo,
fieldset > form:has(> .area-botao) > div,
fieldset > form:has(> .area-botao) > fieldset {
	width: 100%;
	flex-shrink: 0;
}

.fieldset-opcoes > legend {
	width: auto;
	flex-shrink: 0;
}

.fieldset-opcoes > br[clear] {
	display: none;
}

.fieldset-opcoes > .separador {
	display: none;
}

.fieldset-opcoes > .area-botao {
	margin: 2px 4px;
	display: inline-block;
	width: auto;
	flex-basis: auto;
}

.fieldset-opcoes > input[type="hidden"] {
	display: none;
}


/* --- 4.14 Fieldset: error --- */
.fieldset-erro,
#erros fieldset {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-color: #e8a0a0;
	background-color: var(--color-danger-bg);
	text-align: center;
	padding: 12px 16px;
}

.fieldset-erro > label,
#erros fieldset > label,
#Conteudo .fieldset-erro > label,
#Conteudo #erros fieldset > label {
	margin: 0;
	padding: 0;
	text-align: center;
	width: 100%;
}

.fieldset-erro > p,
#erros fieldset > p {
	margin: 0;
	padding: 0;
}

/* Aviso inline dentro de fieldset (ex: "há áreas inválidas") */
fieldset p.aviso-campo {
	color: var(--color-danger);
	font-weight: 600;
	text-align: center;
	width: 100%;
	margin: 4px 0 8px;
	padding: 4px 8px;
}


/* --- 4.15 Title bar --- */
.titulo {
	margin: 0;
	padding: 12px 20px;
	background: var(--color-primary);
	font-size: 16px;
	color: var(--color-text-inverse);
	font-weight: 600;
	border-radius: var(--radius-lg);
	width: 100%;
	display: block;
}

.campo-titulo {
	background: var(--color-primary);
	border-radius: var(--radius-lg);
	margin-bottom: 16px;
	overflow: hidden;
}


/* --- 4.16 Menu header + navmenu --- */
.menu-header {
	background: var(--color-primary);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	margin-right: 0;
	margin-bottom: 0;
	overflow: hidden;
	width: 100%;
}

.menu-header .titulo {
	border-radius: 0;
	margin: 0;
	padding: 12px 16px;
}

#navmenu {
	background-color: var(--color-bg-card) !important;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
	overflow: visible !important;
	border: 1px solid var(--color-border) !important;
	border-top: none !important;
	box-shadow: var(--shadow-sm) !important;
	margin-top: 0 !important;
	width: 100% !important;
}

#navmenu > li:last-child > a {
	border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
	border-bottom: none !important;
}


/* --- 4.17 Tabs (multi-pagina) --- */
.multi-pagina {
	width: 100%;
	height: auto;
	margin: 0;
	position: relative;
}

.area-botoes {
	background-color: transparent;
	width: 100%;
	height: auto;
	display: flex;
	gap: 2px;
	border-bottom: 2px solid var(--color-border);
}

.aba-ativa {
	background-color: var(--color-bg-card);
	padding: 8px 16px;
	border: 1px solid var(--color-border);
	border-bottom: 2px solid var(--color-primary);
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	color: var(--color-primary);
	font-size: var(--font-size-sm);
	font-weight: 600;
	cursor: pointer;
	height: auto;
	margin: 0;
	width: auto;
}

.aba-inativa {
	background-color: var(--color-bg-light);
	padding: 8px 16px;
	border: 1px solid var(--color-border);
	border-bottom: none;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	cursor: pointer;
	height: auto;
	margin: 0;
	width: auto;
}

.area-dados {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-top: none;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	padding: 16px;
	overflow: auto;
	height: auto;
	min-height: 200px;
	position: relative;
}


/* --- 4.18 Br clear handling --- */
fieldset br[clear],
#Conteudo br[clear] {
	display: block;
	height: 4px;
	margin: 0;
	padding: 0;
	line-height: 0;
	font-size: 0;
}

#Conteudo > br,
#Conteudo > form > br,
fieldset > br:not([clear]) {
	display: block;
	height: 0;
	margin: 0;
	line-height: 0;
}


/* --- 4.19 Tooltips --- */
td[title],
a[title] {
	position: relative;
}

td[title]:hover::after,
a[title]:hover::after {
	content: attr(title);
	position: absolute;
	left: 0;
	top: calc(100% + 4px);
	z-index: 10000;
	background: var(--color-primary-dark);
	color: var(--color-text-inverse);
	font-size: var(--font-size-xs);
	font-weight: 400;
	line-height: 1.5;
	padding: 8px 12px;
	border-radius: var(--radius-md);
	box-shadow: 0 4px 16px rgba(0,0,0,0.18);
	white-space: pre-line;
	max-width: 360px;
	min-width: 180px;
	pointer-events: none;
	text-transform: none;
	letter-spacing: normal;
}

/* Overlib tooltip (JS-based) */
#overDiv {
	position: absolute;
	visibility: hidden;
	z-index: 99999;
	width: auto;
	max-width: 380px;
	min-width: 200px;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

#overDiv table {
	background: var(--color-primary-dark);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-tooltip);
}

#overDiv td {
	background: var(--color-primary-dark);
	color: var(--color-text-inverse);
	font-size: var(--font-size-sm);
	line-height: 1.6;
	padding: 10px 14px;
	border: none;
	border-bottom: none;
	font-family: Rawline, Raleway, sans-serif;
	white-space: normal;
	word-break: normal;
	text-align: left;
}

#overDiv td[bgcolor] { background: var(--color-primary-dark); }
#overDiv td.pointed_text,
#overDiv td font { color: var(--color-text-inverse); font-size: var(--font-size-sm); }


/* --- 4.20 Color picker --- */
/* containers: inline-flex side by side */
div[id*="conjunto_cores"] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
	margin-right: 24px;
}

/* swatches: fixed size colored rectangle */
#casco, #estrutura {
	display: inline-block;
	width: 30px;
	height: 15px;
	border: 1px solid #b1b1b1;
	flex-shrink: 0;
}

/* palette icon container */
div[id*="conjunto_cores"] > div[id="cor"] {
	cursor: pointer;
}

/* popup divs: absolute positioned for overlay */
div[id*="div_cor"] {
	position: absolute;
	z-index: 9999;
}

#tabela_cores {
	position: absolute;
	z-index: 9999;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 8px 32px rgba(0,0,0,0.18);
	padding: 0;
	overflow: hidden;
	min-width: 280px;
	max-width: 400px;
	left: 0;
	top: 100%;
	margin-top: 4px;
}

#tabela_cores table { width: 100%; table-layout: auto; }
#tabela_cores th { font-size: var(--font-size-sm); font-weight: 600; padding: 8px 12px; text-transform: none; letter-spacing: 0; }
#tabela_cores td { padding: 2px; border: none; border-bottom: none; cursor: pointer; }
#tabela_cores td[bgcolor],
#tabela_cores td[style*="background"] { border-radius: 3px; transition: transform 0.1s; }
#tabela_cores td[bgcolor]:hover,
#tabela_cores td[style*="background"]:hover { transform: scale(1.3); z-index: 1; position: relative; box-shadow: 0 0 0 2px var(--color-primary); }

/* Color picker component */
.color-picker-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 4px 0; width: 100%; }
.color-picker-wrapper > label { font-weight: 600; font-size: var(--font-size-sm); color: var(--color-text); white-space: nowrap; }
.color-picker-inline { position: relative; display: inline-flex; align-items: center; gap: 4px; overflow: visible; }

input#ind_cor.color-swatch,
input#ind_cor.color-swatch:disabled {
	width: 28px; height: 20px; border: 1px solid var(--color-border);
	border-radius: 3px; padding: 0; cursor: default;
	-webkit-appearance: none; appearance: none; opacity: 1;
	-webkit-text-fill-color: transparent; color: transparent;
}

.color-toggle-checkbox { display: none; }
.color-toggle-label { cursor: pointer; display: inline-flex; align-items: center; }
.color-toggle-label img { width: 18px; height: 18px; display: block; }

.color-dropdown { display: none; position: absolute; top: 100%; left: 0; margin-top: 2px; z-index: 9999; background: #fff; border: 1px solid var(--color-border); border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.15); width: fit-content; }
.color-toggle-checkbox:checked ~ .color-dropdown { display: block; }
.color-dropdown-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 10px; font-size: 13px; font-weight: 600; color: var(--color-text); border-bottom: 1px solid var(--color-border); }

.color-dropdown-close { cursor: pointer; display: inline-block; position: relative; width: 18px; height: 18px; vertical-align: middle; flex-shrink: 0; }
.color-dropdown-close::before,
.color-dropdown-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; background: var(--color-text); border-radius: 1px; }
.color-dropdown-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.color-dropdown-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.color-dropdown-close:hover::before,
.color-dropdown-close:hover::after { background: #000; }

.color-dropdown-default { padding: 2px 5px; border-bottom: 1px solid var(--color-border); }
.color-dropdown-default a { cursor: pointer; font-size: 12px; color: var(--color-primary); }
.color-dropdown-default a:hover { text-decoration: underline; }
.color-dropdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; padding: 3px; }
.color-cell { display: block; width: 100%; height: 28px; cursor: pointer; border-radius: 1px; border: 1px solid transparent; }
.color-cell:hover { border-color: #333; transform: scale(1.15); z-index: 1; }


/* --- 4.21 Point entry area --- */
#tabela {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow-y: auto;
	width: 100%;
	margin-left: 0;
	margin-top: 8px;
	min-height: 80px;
	text-align: center;
}

#tabela table { width: 100%; text-align: left; }

#area_pontos { width: 100%; overflow: visible; }
#manual, #ascii, #shape { overflow: visible; }

/* Tabela de pontos dentro da aba manual */
.manual-tabela table { width: 100%; border-collapse: collapse; }
.manual-tabela th { background-color: var(--color-primary); color: var(--color-text-inverse); padding: 6px 10px; font-size: var(--font-size-sm); text-align: right; text-transform: uppercase; letter-spacing: 0.04em; }
.manual-tabela th:last-child { text-align: center; }
.manual-tabela td { padding: 6px 10px; border-bottom: 1px solid var(--color-border-light); font-size: var(--font-size-sm); text-align: right; font-variant-numeric: tabular-nums; }
.manual-tabela td:last-child { text-align: center; }
.manual-tabela tr.tr1 td { background-color: var(--color-bg-card); }
.manual-tabela tr.tr0 td { background-color: var(--color-bg-light); }

/* Aba manual: grid 2 colunas — esquerda: coords+botão+hint | direita: tabela */
#manual { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; align-items: start; }
#manual > .manual-coords-row { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#manual > .manual-coords-row .grid-2col { width: 100%; }
#manual > .manual-coords-row .area-botao { width: 100%; margin-top: 8px; }
#manual > .manual-coords-row .area-botao input[type="button"],
#manual > .manual-coords-row .area-botao input[type="submit"] { width: 100%; }
#manual > .manual-coords-row .manual-wgs84-hint { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: 6px; }
#manual > .manual-tabela { min-height: 120px; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow-y: auto; padding: 8px; background: var(--color-bg-card); }
#manual div#carregando { display: none; }

/* Abas ascii/shape: elementos ocupam largura total */
#ascii, #shape { width: 100%;  }
#ascii p.campo, #shape p.campo { width: 100%; flex-shrink: 0; }
#ascii #f, #ascii > div { width: 100%; }
#area_pontos > #shape > .campo { margin-bottom: 12px; }



/* --- 4.22 Loading indicator --- */
#carregando_aba {
	position: fixed;
	bottom: 20px;
	right: 20px;
	top: auto;
	left: auto;
	margin: 0;
	width: auto;
	height: auto;
	z-index: 9999;
	background: rgba(255, 255, 255, 0.95);
	border-radius: var(--radius-lg);
	padding: 10px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.15);
	border: 1px solid var(--color-border);
	clear: none;
	display: block;
}

#carregando_aba img {
	display: block;
	width: 28px;
	height: 28px;
	border: none;
	padding: 0;
	box-shadow: none;
	border-radius: 0;
}

#aba_block { display: none; }


/* --- 4.23 Scrollbar --- */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-input); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: #8e9aab; }


/* --- 4.24 Notification / error messages --- */
font[color="red"] {
	color: var(--color-danger) !important;
	font-size: var(--font-size-base);
	line-height: 1.5;
	display: block;
	padding: 4px 0;
}

font[color="#FF6600"] {
	color: #c05621 !important;
	font-size: var(--font-size-base);
}


/* --- 4.25 H2 heading --- */
#Conteudo h2 {
	font-size: 20px;
	color: var(--color-text);
	border-bottom: 2px solid var(--color-primary);
	padding-bottom: 8px;
	font-weight: 600;
	margin: 0 0 16px 0;
}

#Conteudo h2:first-letter {
	font-size: 20px;
	color: var(--color-primary);
}


/* Empty forms/fieldsets — hide */
form#filtro:empty,
form[name="filtro"]:empty {
	display: none;
	padding: 0;
	margin: 0;
	border: none;
}


/* ================================================================
   5. DATA TABLES
   ================================================================ */

/* --- Table wrapper --- */
.tabela {
	width: 100%;
	max-width: 100%;
	height: auto;
	/*min-height: 100px;*/
	overflow: hidden;
	overflow-x: auto;
	margin: 0 0 16px 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background-color: var(--color-bg-card);
	box-shadow: var(--shadow-sm);
	position: static;
	left: auto;
}

/* Data table cells — word wrap (inside .tabela and fieldset) */
.tabela td,
.tabela th,
fieldset table td,
fieldset table th {
	white-space: normal;
	word-break: normal;
	overflow-wrap: break-word;
	max-width: none;
	overflow: visible;
	width: auto;
	text-align: left;
}

/* Column alignment helpers — aplicável em td, th e span (tabela.class.php) */
td.col-data, th.col-data, span.col-data { text-align: center; }
td.col-numero, th.col-numero, span.col-numero { text-align: right; font-variant-numeric: tabular-nums; }
/* col-right com tabular-nums para números */
span.col-right, td.col-right { font-variant-numeric: tabular-nums; }

/* Window-style tables */
.tabela-janela { margin: 12px 0; border: none; border-radius: var(--radius-lg); overflow: hidden; }
.tabela-janela-topo { background-color: var(--color-primary); color: var(--color-text-inverse); }
.tabela-janela td { background-color: var(--color-bg-card); border: none; border-bottom: 1px solid var(--color-border-light); }
.tabela-janela th { background-color: var(--color-bg-light); border: none; border-bottom: 1px solid var(--color-border); }

.nao-selecionavel { user-select: none; }

/* --- Table rows --- */
.linha-par { background: var(--color-bg-card); height: auto; padding: 0; cursor: pointer; }
.linha-par:hover { background-color: #f0f4f8; }
.linha-impar { background: #f8fafc; height: auto; padding: 0; cursor: pointer; }
.linha-impar:hover { background-color: #e8edf4; }

.linha-selecionada { background-color: var(--color-primary-light); border: none; border-bottom: 1px solid rgba(255,255,255,0.15); color: var(--color-text-inverse); cursor: pointer; }
.linha-selecionada a { color: var(--color-text-inverse); }
.linha-selecionada td { color: var(--color-text-inverse); border-bottom-color: rgba(255,255,255,0.15); }

/* Links inside table cells */
td a { font-weight: 500; }

/* Tables inside fieldsets — borders and rounding */
fieldset table { border: none; border-collapse: collapse; }
fieldset table th:first-child { border-top-left-radius: 8px; }
fieldset table th:last-child { border-top-right-radius: 8px; }
fieldset table tr:last-child td:first-child { border-bottom-left-radius: 8px; }
fieldset table tr:last-child td:last-child { border-bottom-right-radius: 8px; }

fieldset table,
fieldset > .tabela,
fieldset .tabela,
.tabela > table {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

fieldset > table,
fieldset > div > table {
	border: 1px solid var(--color-border);
}

/* --- Paginator --- */
#paginador {
	margin: 16px 0;
	width: 100%;
	padding: 12px 0;
	font-size: 0;
	word-spacing: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

#paginador a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0 2px;
	border-radius: var(--radius-sm);
	color: var(--color-primary);
	font-weight: 500;
	font-size: var(--font-size-sm);
	border: 1px solid var(--color-border);
	background-color: var(--color-bg-card);
	width: 34px;
	height: 34px;
	text-align: center;
	cursor: pointer;
}

#paginador a:hover {
	color: var(--color-text-inverse);
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	text-decoration: none;
}

#paginador span,
#paginador b,
#paginador strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0 2px;
	border-radius: var(--radius-sm);
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	font-size: var(--font-size-sm);
	font-weight: 600;
	width: 34px;
	height: 34px;
	text-align: center;
	border: 2px solid var(--color-primary-dark);
}

#paginador a,
#paginador span,
#paginador b,
#paginador strong {
	vertical-align: middle;
	flex-shrink: 0;
}

#paginador img { width: 14px; height: 14px; vertical-align: middle; opacity: 0.6; }
#paginador a:hover img { opacity: 1; filter: brightness(10); }

.pagina-ativa { color: gray; font-weight: bold; }


/* ================================================================
   6. PAGES — page-specific rules
   ================================================================ */

/* --- 6.1 Login page --- */
.preConteudo #Conteudo {
	background-color: transparent;
	width: 100%;
	margin: 0 auto;
	position: static;
	left: auto;
}

.preConteudo #Conteudo > div { width: 100%; }

.preConteudo fieldset > div {
	margin-top: 12px;
	margin-bottom: 0;
	width: 100%;
	text-align: center;
}

.preConteudo fieldset p {
	width: 100%;
}

.preConteudo fieldset .area-botao {
	display: inline-block;
	width: auto;
}

/* --- 6.2 Homepage --- */
.preConteudo > br { display: none; }

.preConteudo > p[align="center"] {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
	text-align: center;
	margin: 0 0 28px 0;
	padding: 0;
	line-height: 1.8;
}

/* Homepage cards table — flex row */
.home-cards,
.preConteudo > table {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	gap: 28px;
	border: none;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	table-layout: auto;
}

.home-cards > tbody,
.preConteudo > table > tbody { display: contents; }

.home-cards tr,
.preConteudo > table tr { display: contents; }

.home-card,
.preConteudo > table td {
	display: block;
	border: none;
	border-bottom: none;
	padding: 0;
	width: auto;
	max-width: none;
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
	flex: 1 1 0;
	min-width: 200px;
	max-width: 300px;
}

/* Card links */
.home-card a,
.preConteudo > table td a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 32px 24px 28px;
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
	text-decoration: none;
	color: var(--color-primary);
	font-weight: 700;
	font-size: var(--font-size-base);
	line-height: 1.4;
	height: 100%;
}

.home-card a:hover,
.preConteudo > table td a:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
	color: var(--color-primary-dark);
}

/* Card images */
.home-card img,
.preConteudo > table td img,
.preConteudo > table td a img {
	border: none;
	border-radius: 0;
	padding: 0;
	background-color: transparent;
	box-shadow: none;
	max-width: 170px;
	width: auto;
	height: auto;
	margin-bottom: 18px;
	opacity: 0.9;
}

.home-card a:hover img,
.preConteudo > table td a:hover img { opacity: 1; }


/* --- 6.3 WebGIS page --- */
#Conteudo:has(> div#imagem) {
	background-color: var(--color-bg-card);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	padding: 24px;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

#Conteudo:has(> div#imagem) > .campo-titulo {
	margin: -24px -24px 0 -24px;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	width: calc(100% + 48px);
	flex: 0 0 calc(100% + 48px);
}

#Conteudo > div#imagem {
	margin: 0;
	flex: 0 0 auto;
	width: auto;
	order: 1;
}

#Conteudo > div#imagem a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 24px 32px;
	background: var(--color-bg-light);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: var(--color-primary);
	font-weight: 600;
	font-size: var(--font-size-base);
	transition: border-color 0.15s, box-shadow 0.15s;
	min-width: 200px;
}

#Conteudo > div#imagem a:hover {
	border-color: var(--color-primary);
	box-shadow: 0 2px 12px rgba(41,73,132,0.1);
}

#Conteudo > div#imagem img { border-radius: var(--radius-md); border: 1px solid #ddd; max-width: 280px; }
#Conteudo > div#imagem center { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: 400; line-height: 1.5; }
#Conteudo > div#imagem center small { color: var(--color-text-muted); }

#Conteudo > div#texto {
	margin: 0;
	padding: 0;
	font-size: var(--font-size-base);
	line-height: 1.7;
	color: var(--color-text-secondary);
	flex: 0 0 100%;
	order: 3;
	text-align: center;
}

#Conteudo:has(> div#imagem) > br,
#Conteudo:has(> div#imagem) > br[clear] { display: none; }
#Conteudo:has(> div#imagem) > div#erros { flex: 0 0 100%; order: 0; }
#Conteudo:has(> div#imagem) > fieldset { flex: 0 0 100%; order: 4; }
#Conteudo:has(> div#imagem) > input[type="hidden"] { display: none; }


/* --- 6.4 Forms without fieldsets — card wrapper --- */
#Conteudo > form:not(:has(fieldset)) {
	background-color: var(--color-bg-card);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	padding: 16px;
	margin-bottom: 16px;
}

/* Empty forms — hide */
#Conteudo > form:not(:has(fieldset)):not(:has(p)):not(:has(input:not([type="hidden"]))):not(:has(select)):not(:has(textarea)):not(:has(table)) {
	display: none;
	padding: 0;
	margin: 0;
	border: none;
}

/* Empty fieldsets — hide */
#Conteudo > fieldset:not(:has(p)):not(:has(div)):not(:has(table)):not(:has(form)):not(:has(input)):not(:has(label)) {
	display: none;
	padding: 0;
	margin: 0;
	border: none;
}


/* --- 6.5 Search form buttons --- */
fieldset > form {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
}

fieldset > form > p.campo {
	width: 100%;
	flex-shrink: 0;
}

fieldset > form > fieldset {
	width: 100%;
}

fieldset > form .area-botao {
	display: inline-block;
	width: auto;
	flex-basis: auto;
}


/* ================================================================
   7. UTILITIES
   ================================================================ */

/* ================================================================
   8. FORM GRID HELPERS
   — Grid wrappers for field groups inside fieldsets.
     Fields inside them remain width:100% of their column.
   ================================================================ */

.grid-2col,
.grid-3col,
.grid-4col,
.grid-5col,
.grid-empresa-topo,
.grid-fone-fax,
.grid-cep-uf-mun,
.grid-relatorio-datas,
.grid-periodo-botao,
.grid-uf-mun-fone-fax,
.grid-nome-cpf {
	display: grid;
	gap: 6px 16px;
	width: 100%;
	align-items: start;
	margin: 4px 0;
}

.grid-2col          { grid-template-columns: 1fr 1fr; }
.grid-3col          { grid-template-columns: 1fr 1fr 1fr; }
.grid-4col          { grid-template-columns: 1fr 1fr 1fr 1fr; }
.grid-5col          { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.grid-empresa-topo  { grid-template-columns: 1fr auto; gap: 6px 20px; }
.grid-fone-fax      { grid-template-columns: 1fr 1fr; }
.grid-uf-mun-fone-fax { grid-template-columns: 1fr 2fr 1fr 1fr; align-items: end; }
.grid-uf-mun-fone-fax > div > .campo { width: 100% !important; margin: 0; padding: 2px 0; }
.grid-nome-cpf      { grid-template-columns: 3fr 1fr; }
.grid-cep-uf-mun    { grid-template-columns: 1fr 1fr 1fr; }
.grid-relatorio-datas { grid-template-columns: 1fr 1fr; }
.grid-embarcacao { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; width: 100%; align-items: end; }
.grid-embarcacao > .campo { width: auto !important; margin: 0; padding: 2px 0; }
.grid-select-botao { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; align-items: end; width: 100%; }
.grid-select-botao > .campo,
.grid-select-botao > .area-botao { width: auto !important; margin: 0; padding: 2px 0; align-self: end; }
.grid-periodo-botao   { grid-template-columns: 1fr 1fr auto auto; align-items: end; margin-bottom: 8px; }
.grid-periodo-botao > .area-botao { margin: 0; padding: 0; align-self: end; }
.grid-periodo-botao > .campo { margin: 0; padding: 2px 0; align-self: end; }
.grid-periodo-botao input[type="checkbox"] { position: relative; }
#sf { width: 100%; }

/* Remove campo default spacing inside grids */
.grid-2col > .campo,
.grid-3col > .campo,
.grid-4col > .campo,
.grid-5col > .campo,
.grid-empresa-topo > .campo,
.grid-fone-fax > .campo,
.grid-cep-uf-mun > .campo,
.grid-relatorio-datas > .campo,
.grid-uf-mun-fone-fax > .campo,
.grid-uf-mun-fone-fax > div,
.grid-nome-cpf > .campo {
	width: auto !important;
	flex-shrink: 1;
	margin: 0;
	padding: 2px 0;
}

/* Full-row span helper */
.grid-full { grid-column: 1 / -1; }

/* Flex full-row helper - força um campo a ocupar linha própria no fieldset flex */
.row-full { width: 100%; flex-shrink: 0; }

/* Radio group campo sempre ocupa linha própria (campo_radio gera 1 p.campo com todos os radios dentro) */
fieldset p.campo:has(input[type="radio"]) { width: 100%; flex-shrink: 0; }

/* Layout */
.page-centered { width: 100%; margin: 0; position: relative; }
.full-width { width: 100%; }

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Components */
.empty-state { border: none; text-align: center; width: 100%; padding: 12px 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.no-border { border: none; }
.download-link { color: var(--color-danger); font-weight: bold; }
.mb-10 { margin-bottom: 10px; }

.aviso-relatorios {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-info);
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	font-weight: bold;
	padding: 16px;
	margin: 16px 0;
	max-width: 400px;
}

.aviso-adesao {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	margin-bottom: 16px;
	width: 100%;
}
.aviso-adesao img {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}
.aviso-adesao span {
	color: var(--color-danger);
	font-weight: 700;
	font-size: var(--font-size-base);
	line-height: 1.4;
}

.area-botoes-pesquisa,
.area-botoes-grupo {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}
.area-botoes-pesquisa > p.area-botao,
.area-botoes-grupo > p.area-botao {
	width: auto;
	margin: 0;
}

/* --- Olho de senha --- */
.senha-olho-wrapper {
	display: flex;
	align-items: center;
	width: 100%;
	border: 1px solid var(--color-border-input);
	border-radius: var(--radius-md);
	background-color: var(--color-bg-card);
	box-sizing: border-box;
	height: var(--input-height);
}
.senha-olho-wrapper input[type="password"],
.senha-olho-wrapper input[type="text"] {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: none !important;
	border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
	background: transparent !important;
	outline: none;
	padding: 0 8px;
	font-size: var(--font-size-base);
	font-family: inherit;
	box-sizing: border-box;
}
.senha-olho-wrapper input[type="password"]:-webkit-autofill,
.senha-olho-wrapper input[type="text"]:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--color-bg-card) inset !important;
	box-shadow: 0 0 0 1000px var(--color-bg-card) inset !important;
}
.senha-olho-wrapper:focus-within {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 2px rgba(26,54,93,.15);
}
.senha-olho-btn {
	flex-shrink: 0;
	background: inherit;
	border: none;
	cursor: pointer;
	padding: 0 8px;
	color: var(--color-text-secondary);
	line-height: 1;
	opacity: 0.5;
	display: flex;
	align-items: center;
	height: 100%;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.senha-olho-btn:hover,
.senha-olho-btn.ativo { opacity: 1; }

/* --- Validação visual de senha --- */
.senha-checklist {
	list-style: none;
	margin: 4px 0 8px 0;
	padding: 0;
	font-size: var(--font-size-sm);
	width: 100%;
}
.senha-checklist li {
	color: var(--color-danger);
	padding: 1px 0;
}
.senha-checklist li.ok {
	color: var(--color-success);
}
.senha-confirma-status {
	font-size: var(--font-size-sm);
	margin: 4px 0 0 0;
	padding: 0;
}
.senha-confirma-ok  { color: var(--color-success); }
.senha-confirma-erro { color: var(--color-danger); }

.report-wrapper { position: relative; left: 25px; width: 91%; }

.header-logo { height: 50px; flex-shrink: 0; }

/* Table columns */
.col-left { text-align: left; }
.col-right { text-align: right; }

/* Radio spacing */
.opcao-radio { margin-right: 5%; display: inline-block; }

/* Pointer cursor on clickable radio/checkbox labels */
label.opcao-radio,
label.opcao-checkbox { cursor: pointer; }

label.opcao-radio:has(input:disabled),
label.opcao-checkbox:has(input:disabled) { cursor: not-allowed; }

/* Table "no records" */
.tabela-sem-registros { background: var(--color-info); border: none; text-align: center; padding: 24px 0; }
.tabela-vazio { border-width: 0; }
.tabela-vazio table { width: 100%; }
.tabela-vazio td.tabela-sem-registros { text-align: center !important; width: 100%; }

/* .text class inputs — apply same base sizing as other text inputs */
#Conteudo input[type="text"].text {
	width: 100%;
	height: var(--input-height);
	border: 1px solid var(--color-border-input);
	border-radius: var(--radius-md);
	background-color: var(--color-bg-card);
	font-family: inherit;
	font-size: var(--font-size-base);
	padding: 0 10px;
	box-sizing: border-box;
	line-height: var(--input-height);
}

/* Danger text — needs !important to override input base color */
.text-danger,
input.text-danger,
input.text.text-danger { color: var(--color-danger) !important; }
.text-bold { font-weight: bold; }

/* Card */
.card {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 16px;
	margin-bottom: 16px;
}

/* Documentation table */
.tabela-doc { width: 100%; table-layout: fixed; }
.tabela-doc th,
.tabela-doc td { text-align: left; }
.tabela-doc .col-link { width: 60px; text-align: center !important; }

/* FAQ */
.faq-container { width: 100%; height: 400px; overflow: auto; }
.faq-iframe { width: 100%; height: 100%; border: none; }

/* Contact textarea */
.campo-textarea-wrapper { width: 100%; min-height: 170px; }

/* Support nav */
.suporte-nav { width: 100%; height: 100%; }

/* Permissions table */
/* --- Permissions table --- */
.tabela-permissoes { width: 100%; border-collapse: collapse; margin-top: 4px; }
.tabela-permissoes thead tr { background-color: var(--color-primary); color: var(--color-text-inverse); }
.tabela-permissoes thead th { padding: 10px 12px; text-align: left; font-size: var(--font-size-sm); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.tabela-permissoes thead th.col-menu { text-align: center; width: 120px; word-break: break-word; white-space: normal; }
.tabela-permissoes td { padding: 6px 10px; border-bottom: 1px solid var(--color-border-light); vertical-align: middle; height: auto; }
/* col-toggle: espaço do + */
.tabela-permissoes td.col-toggle { width: 32px; min-width: 32px; max-width: 32px; text-align: center; padding: 6px 4px; cursor: pointer; color: var(--color-primary); font-weight: bold; user-select: none; }
/* col-check: checkbox */
.tabela-permissoes td.col-check { width: 28px; min-width: 28px; max-width: 28px; text-align: center; padding: 6px 4px; }
/* col-nome: texto do módulo */
.tabela-permissoes td.col-nome { padding-left: 6px; }
/* col-menu: checkbox visualiza menu */
.tabela-permissoes td.col-menu { width: 120px; min-width: 120px; max-width: 120px; text-align: center; }
.tabela-permissoes tr.linha-par td { background-color: var(--color-bg-card); }
.tabela-permissoes tr.linha-impar td { background-color: #f8fafc; }
.tabela-permissoes tbody tr.perm-modulo { cursor: default; }
.tabela-permissoes tbody tr.perm-modulo[onclick] { cursor: pointer; }
.tabela-permissoes tbody tr.perm-modulo:hover td { background-color: #e8edf4; }
/* linha wrapper das ações — sem padding/border próprios */
.tabela-permissoes tr.perm-acoes-row > td { padding: 0; background-color: transparent !important; border-bottom: none; }
/* sub-tabela de ações — mesmas larguras de coluna que a tabela pai */
.tabela-permissoes tr.perm-acoes-row > td > div > table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tabela-permissoes tr.perm-acoes-row > td > div > table td { padding: 5px 10px; border-bottom: 1px solid var(--color-border-light); vertical-align: middle; font-size: var(--font-size-sm); }
.tabela-permissoes tr.perm-acoes-row > td > div > table td:nth-child(1) { width: 32px; min-width: 32px; max-width: 32px; padding: 5px 4px; }
.tabela-permissoes tr.perm-acoes-row > td > div > table td:nth-child(2) { width: 28px; min-width: 28px; max-width: 28px; text-align: center; padding: 5px 4px; }
.tabela-permissoes tr.perm-acoes-row > td > div > table td:nth-child(3) { padding: 5px 10px; }
.tabela-permissoes tr.perm-acoes-row > td > div > table td:nth-child(4) { width: 120px; min-width: 120px; max-width: 120px; text-align: center; padding: 5px 4px; }
.tabela-permissoes tr.perm-acao td { background-color: #f0f2f6; }
.tabela-permissoes tr.perm-acao:nth-child(even) td { background-color: #e8ebf2; }
.tabela-permissoes-vazia { width: 90%; margin-left: 25px; }

/* Action column */
.col-acao { text-align: center; width: 12%; }

/* Clickable */
.clickable { cursor: pointer; }

/* Actions table wrapper */
#lista_acao { width: 100%; }
#lista_descricao { width: 100%; }
#lista_descricao table { width: 100%; }
.tabela-acoes-wrapper { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: auto; margin-top: 12px; }
.tabela-acoes-wrapper table { width: 100%; border-collapse: collapse; }
.tabela-acoes-wrapper th { background-color: var(--color-primary); color: var(--color-text-inverse); padding: 10px 12px; text-align: left; font-size: var(--font-size-sm); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.tabela-acoes-wrapper th:first-child { border-top-left-radius: var(--radius-lg); }
.tabela-acoes-wrapper th:last-child { border-top-right-radius: var(--radius-lg); }
.tabela-acoes-wrapper td { padding: 8px 12px; border-bottom: 1px solid var(--color-border-light); vertical-align: middle; }
.tabela-acoes-wrapper tr:last-child td { border-bottom: none; }
.tabela-acoes-wrapper tr.tr0 td { background-color: var(--color-bg-card); }
.tabela-acoes-wrapper tr.tr1 td { background-color: #f8fafc; }
.tabela-acoes-wrapper td.text-center { text-align: center; width: 60px; }
.tabela-acoes-wrapper td.empty-state { padding: 24px; text-align: center; color: var(--color-text-muted); }

/* Sistema configuração — painéis condicionais (JS usa display:inline) */
.config-panel { width: 100%; box-sizing: border-box; }
.config-panel fieldset { width: 100%; box-sizing: border-box; }

/* Half-width field */
.campo-half { width: 50%; }


/* ================================================================
   DIAGRAM — empresa situation flow
   ================================================================ */
.diagrama-situacao { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; width: 100%; flex: 1 1 auto; }

.diagrama-celula { display: flex; width: 100%; }
.diagrama-celula--centro { justify-content: center; }
.diagrama-celula--duplo { justify-content: space-between; padding: 0 8px; position: relative; }
.diagrama-celula--esq { justify-content: flex-start; padding: 0 8px; }

/* Outline button — needs !important to override input[type="button"] base styles */
.bt--outline,
.diagrama-btn {
	background-color: var(--color-bg-card) !important;
	color: var(--color-primary) !important;
	border: 1px solid var(--color-primary) !important;
	transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
	min-width: 120px;
}

.bt--outline:hover:not(:disabled),
.diagrama-btn:hover:not(:disabled) {
	background-color: var(--color-primary) !important;
	color: var(--color-text-inverse) !important;
	box-shadow: var(--shadow-md) !important;
}

.bt--outline:disabled,
.diagrama-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	border-color: var(--color-disabled) !important;
	color: var(--color-disabled) !important;
}

/* Danger button — needs !important to override .bt--outline */
.bt--danger,
.diagrama-btn-perigo {
	border-color: var(--color-danger-dark) !important;
	color: var(--color-danger-dark) !important;
}

.bt--danger:hover:not(:disabled),
.diagrama-btn-perigo:hover:not(:disabled) {
	background-color: var(--color-danger-dark) !important;
	color: var(--color-text-inverse) !important;
	box-shadow: 0 2px 8px rgba(180,50,50,0.18) !important;
}

.bt--danger:disabled,
.diagrama-btn-perigo:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	border-color: var(--color-disabled) !important;
	color: var(--color-disabled) !important;
}

/* Connectors */
.diagrama-conector { position: relative; width: 100%; }

.diagrama-conector--vertical-centro { height: 28px; }
.diagrama-conector--vertical-centro::before { content: ''; position: absolute; left: 50%; top: 0; width: 2px; height: 100%; background-color: var(--color-muted); transform: translateX(-50%); }
.diagrama-conector--vertical-centro::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--color-muted); }

.diagrama-conector--bifurca { height: 28px; padding: 0 8px; box-sizing: border-box; }
.diagrama-conector--bifurca::before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 2px; height: 50%; background-color: var(--color-muted); }
.diagrama-conector--bifurca::after { content: ''; position: absolute; top: 50%; left: calc(8px + 60px); right: calc(8px + 60px); height: 2px; background-color: var(--color-muted); transform: translateY(-50%); }

.diagrama-celula--duplo::before,
.diagrama-celula--duplo::after { content: ''; position: absolute; top: -14px; width: 2px; height: 14px; background-color: var(--color-muted); }
.diagrama-celula--duplo::before { left: calc(8px + 60px); transform: translateX(-50%); }
.diagrama-celula--duplo::after { right: calc(8px + 60px); transform: translateX(50%); }

.diagrama-conector--vertical-esq { height: 28px; padding: 0 8px; box-sizing: border-box; }
.diagrama-conector--vertical-esq::before { content: ''; position: absolute; left: calc(8px + 60px); top: 0; width: 2px; height: 100%; background-color: var(--color-muted); transform: translateX(-50%); }
.diagrama-conector--vertical-esq::after { content: ''; position: absolute; left: calc(8px + 60px); bottom: 0; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--color-muted); }



#lista_pontos { min-height: 120px; display: flex; align-items: center; justify-content: center; width: 100%; text-align: center; flex-wrap: wrap; }
#lista_pontos table { width: 100%; }
#lista_pontos .tabela-vazio td { text-align: center !important; }
.area-botoes-tabela { display: flex; justify-content: space-between; width: 100%; margin-top: 8px; }
.area-botoes-tabela .area-botao { margin: 0; }

p[align="center"] {
	text-align: center;
	width: 100%;
}

/* --- historico de alertas da embarcacao --- */
#paginador { margin-bottom: 6px; }

#filtro-alertas-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 16px;
	padding: 4px 4px 0;
}

#filtro-alertas-grid .fa-label {
	font-size: 12px;
	color: #555;
	margin-bottom: 2px;
	display: block;
}

#filtro-alertas-grid input[type=text],
#filtro-alertas-grid select {
	width: 100%;
	box-sizing: border-box;
}

#filtro-alertas-checkboxes {
	grid-column: 1 / -1;
	display: flex;
	gap: 20px;
	align-items: center;
	margin-top: 2px;
}

#filtro-alertas-botoes {
	grid-column: 1 / -1;
	display: flex;
	gap: 10px;
	margin-top: 8px;
}