@import url("https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic");

:root {
	--m4s3-green: #22511A;
	--m4s3-green-light: #79C481;
	--m4s3-teal: #39c29d;
	--m4s3-dark: #232323;
	--m4s3-text: #333333;
	--m4s3-muted: #777777;
	--m4s3-bg: #fafafa;
	--m4s3-card-bg: #ffffff;
	--m4s3-border: #e5e5e5;
	--m4s3-danger: #b03a2e;
}

* { box-sizing: border-box; }

/* [hidden] precisa vencer classes com display custom (flex/grid). */
[hidden] { display: none !important; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--m4s3-bg);
	color: var(--m4s3-text);
	font-family: "Lato", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

a { color: var(--m4s3-green); }

.m4s3-header {
	background: var(--m4s3-green);
	color: #fff;
	padding: 14px 20px;
}
.m4s3-header-inner {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}
.m4s3-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: #fff;
	font-weight: 700;
	font-size: 1.2rem;
}
.m4s3-brand img { height: 34px; width: 34px; border-radius: 50%; }

/* Cabeçalho reduzido (?embed=1), para uso em iframe em sites de terceiros */
.m4s3-header--embed { padding: 6px 14px; }
.m4s3-header--embed .m4s3-brand { font-size: 0.9rem; gap: 6px; }
.m4s3-header--embed .m4s3-brand img { width: 20px; height: 20px; }

.m4s3-lang-switch a {
	background: #DAE5D5;
	color: var(--m4s3-green);
	text-decoration: none;
	margin-left: 10px;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 0.85rem;
}
.m4s3-lang-switch a.active { background: #528A42; color: #fff; }

.m4s3-seealso { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.m4s3-seealso-toggle {
	background: none;
	border: 1px solid #444;
	color: #ccc;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 0.85rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
}
.m4s3-seealso-toggle:hover { border-color: var(--m4s3-green-light); color: #fff; }
.m4s3-caret { font-size: 0.7rem; }
.m4s3-seealso-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	color: var(--m4s3-text);
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.25);
	padding: 16px;
	display: flex;
	gap: 28px;
	z-index: 50;
	min-width: 260px;
}
.m4s3-seealso-col h4 {
	margin: 0 0 8px;
	color: var(--m4s3-green);
	font-size: 0.85rem;
	white-space: nowrap;
}
.m4s3-seealso-col ul { list-style: none; margin: 0; padding: 0; }
.m4s3-seealso-col li { margin-bottom: 6px; }
.m4s3-seealso-col a {
	color: var(--m4s3-text);
	text-decoration: none;
	font-size: 0.85rem;
	white-space: nowrap;
}
.m4s3-seealso-col a:hover { color: var(--m4s3-green); text-decoration: underline; }
.m4s3-seealso-current {
	display: block;
	font-size: 0.85rem;
	white-space: nowrap;
	font-style: italic;
}
@media (max-width: 700px) {
	.m4s3-seealso-menu { flex-direction: column; gap: 14px; }
}

.m4s3-container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

.m4s3-main { padding: 30px 0 60px; }

.m4s3-hero-title { color: var(--m4s3-green); margin-bottom: 4px; }
.m4s3-hero-subtitle { color: var(--m4s3-muted); margin-top: 0; margin-bottom: 24px; }

.m4s3-card {
	background: var(--m4s3-card-bg);
	border: 1px solid var(--m4s3-border);
	border-radius: 8px;
	padding: 24px;
	margin-bottom: 24px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.m4s3-fieldset {
	border: 1px solid var(--m4s3-border);
	border-radius: 6px;
	padding: 14px 16px 16px;
	margin: 0;
}
.m4s3-fieldset legend {
	font-weight: 700;
	color: var(--m4s3-green);
	padding: 0 6px;
}

.m4s3-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 16px;
}
@media (max-width: 700px) {
	.m4s3-grid-2 { grid-template-columns: 1fr; }
}

.m4s3-field { margin-bottom: 14px; }
.m4s3-field label { display: block; font-weight: 700; margin-bottom: 4px; font-size: 0.92rem; }

.m4s3-field select,
.m4s3-field input[type="text"],
.m4s3-field input[type="number"],
.m4s3-field input[type="file"],
.m4s3-field textarea {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-family: inherit;
	font-size: 1rem;
}
.m4s3-field select:disabled {
	background: #f0f0f0;
	color: var(--m4s3-muted);
	cursor: not-allowed;
}
.m4s3-field textarea { font-family: "Source Code Pro", monospace; resize: vertical; }

.m4s3-zone-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.m4s3-hint { display: block; color: var(--m4s3-muted); margin-top: 3px; font-size: 0.8rem; }
.m4s3-error { display: block; color: var(--m4s3-danger); margin-top: 3px; font-size: 0.85rem; }
.m4s3-info {
	background: #eaf4fb;
	border: 1px solid #a9d3ef;
	color: #1c5a85;
	padding: 8px 10px;
	border-radius: 4px;
	font-size: 0.85rem;
	margin-top: 8px;
}
.m4s3-warning {
	background: #fff6e5;
	border: 1px solid #f0d38a;
	color: #7a5c00;
	padding: 8px 10px;
	border-radius: 4px;
	font-size: 0.85rem;
	margin-top: 8px;
}

.m4s3-checkbox { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; margin-top: 6px; }
.m4s3-checkbox input { width: auto; }

/* Radios de método de área (Geodésica/Planar), mesmo alinhamento do .m4s3-checkbox acima. */
.m4s3-radio-group { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 0.9rem; margin-top: 6px; }
.m4s3-radio { display: flex; align-items: center; gap: 5px; }
.m4s3-radio input { width: auto; }
.m4s3-radio-info-btn {
	background: none; border: none; padding: 0; margin: 0;
	display: inline-flex; align-items: center; cursor: pointer;
	color: var(--m4s3-muted);
}
.m4s3-radio-info-btn:hover, .m4s3-radio-info-btn:focus-visible { color: var(--m4s3-green); }

/* Bloco de resultado de área (Área Total/Área do polígono + aviso de anéis internos). */
.m4s3-area-result:empty { display: none; }
.m4s3-area-result { margin-top: 10px; }
.m4s3-area-result .m4s3-warning { margin-top: 6px; }

.m4s3-btn-link {
	background: none;
	border: none;
	color: var(--m4s3-green);
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	font-size: 0.85rem;
	margin-top: 6px;
	display: block;
}

.m4s3-radio-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.m4s3-radio-row label { font-weight: 400; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.m4s3-kml-dica {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.8rem;
	color: var(--m4s3-muted);
	background: #f4faf3;
	border: 1px solid var(--m4s3-green-light);
	border-radius: 4px;
	padding: 4px 10px;
}
.m4s3-kml-dica svg { flex-shrink: 0; color: var(--m4s3-green); }

.m4s3-input-panel { margin-top: 10px; }

.m4s3-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }

.m4s3-processing { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--m4s3-muted); }
.m4s3-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid var(--m4s3-border);
	border-top-color: var(--m4s3-green);
	border-radius: 50%;
	animation: m4s3-spin 0.7s linear infinite;
}
@keyframes m4s3-spin { to { transform: rotate(360deg); } }

.m4s3-btn {
	padding: 10px 22px;
	border-radius: 4px;
	border: none;
	font-weight: 700;
	cursor: pointer;
	font-size: 0.95rem;
}
.m4s3-btn-primary { background: var(--m4s3-green); color: #fff; }
.m4s3-btn-primary:hover { background: var(--m4s3-green-light); color: var(--m4s3-dark); }
.m4s3-btn-secondary { background: #eee; color: var(--m4s3-text); }
.m4s3-btn-secondary:hover { background: #e0e0e0; }
.m4s3-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.m4s3-srs-info {
	background: #f4faf3;
	border: 1px solid var(--m4s3-green-light);
	border-radius: 6px;
	padding: 12px 14px;
	margin-bottom: 16px;
	font-size: 0.9rem;
}
.m4s3-srs-info div { margin-bottom: 4px; }
.m4s3-srs-info b { color: var(--m4s3-green); }
.m4s3-results-meta { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.m4s3-area-info { font-weight: 700; color: var(--m4s3-green); }

.m4s3-methodology-note {
	font-size: 0.8rem;
	color: var(--m4s3-muted);
	border-left: 3px solid var(--m4s3-green-light);
	padding: 4px 10px;
	margin: 0 0 12px;
}

.m4s3-table-wrap { overflow-x: auto; margin-bottom: 16px; }
.m4s3-table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
.m4s3-table th, .m4s3-table td {
	border: 1px solid var(--m4s3-border);
	padding: 6px 10px;
	text-align: right;
	white-space: nowrap;
}
.m4s3-table th { background: var(--m4s3-green); color: #fff; text-align: center; }
.m4s3-table td:first-child, .m4s3-table th:first-child { text-align: center; }

.m4s3-map-controls { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 0.9rem; }
.m4s3-map-controls label { font-weight: 700; }
.m4s3-map-controls select { padding: 4px 8px; border-radius: 4px; border: 1px solid #ccc; font-family: inherit; font-size: 0.9rem; }
.m4s3-map-goto { display: inline-flex; align-items: center; gap: 8px; margin-left: 16px; }
.m4s3-map-goto label { font-weight: 400; font-size: 0.8rem; }

.m4s3-map { height: 420px; margin-top: 12px; border-radius: 6px; border: 1px solid var(--m4s3-border); }

.m4s3-footer-note { text-align: center; font-size: 0.9rem; }
.m4s3-footer-sep { color: var(--m4s3-muted); margin: 0 8px; }
.m4s3-report-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--m4s3-muted);
}
.m4s3-report-link:hover { color: var(--m4s3-danger); }
.m4s3-report-link svg { flex-shrink: 0; }

.m4s3-modal {
	position: fixed; inset: 0; background: rgba(0,0,0,0.5);
	display: flex; align-items: center; justify-content: center;
	z-index: 1000; padding: 20px;
}
.m4s3-modal-inner {
	background: #fff; border-radius: 8px; padding: 26px;
	max-width: 640px; max-height: 80vh; overflow-y: auto; position: relative;
}
.m4s3-modal-close {
	position: absolute; top: 10px; right: 14px; background: none; border: none;
	font-size: 1.6rem; cursor: pointer; color: var(--m4s3-muted); line-height: 1;
}
.m4s3-modal-inner h2 { color: var(--m4s3-green); margin-top: 0; }
.m4s3-modal-inner h3 { color: var(--m4s3-green); margin-bottom: 4px; }
.m4s3-modal-inner p { margin-top: 4px; }
.m4s3-modal-inner code { background: #f2f2f2; padding: 1px 5px; border-radius: 3px; }
.m4s3-formula-img { display: block; max-width: 100%; height: auto; margin: 14px auto; }

/* Popup de info do método de área: fonte reduzida (~0.78) pra ficar menos "assustador". */
#areaMethodInfoModal .m4s3-modal-inner { max-width: 520px; font-size: 0.78em; }
#areaMethodInfoModal h3#lbl_areaMethodInfoTitle { margin-top: 0; }
#areaMethodInfoModal .m4s3-formula-img { max-width: 78%; }

.m4s3-footer {
	background: var(--m4s3-green); color: #ccc; text-align: center;
	padding: 20px 0; font-size: 0.85rem;
}
.m4s3-footer a { color: var(--m4s3-green-light); }
.m4s3-footer .credits {
	font-size: 10px;
	color: #999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin-top: 10px;
}
.m4s3-footer .credits img { border-radius: 50%; }

/* Cookie consent (mesmo padrão visual do site institucional Map4s3) */
.cookieConsentContainer{z-index:999;width:340px;max-width:90vw;box-sizing:border-box;padding:24px;background:var(--m4s3-dark);position:fixed;bottom:20px;right:20px;display:none;border-radius:6px}
.cookieConsentContainer .cookieTitle a{color:#fff;font-size:1.2rem;display:block;font-weight:700}
.cookieConsentContainer .cookieDesc p{margin:8px 0 0;color:#fff;font-size:0.85rem}
.cookieConsentContainer .cookieDesc a{color:#fff;text-decoration:underline}
.cookieConsentContainer .cookieButton a{display:inline-block;color:#fff;font-size:0.85rem;font-weight:700;margin-top:12px;background:var(--m4s3-green);padding:8px 18px;border-radius:4px;cursor:pointer}
.cookieConsentContainer .cookieButton a:hover{background:var(--m4s3-green-light);color:var(--m4s3-dark)}
@media (max-width: 700px){ .cookieConsentContainer{ right:0; left:0; bottom:0; width:100%; border-radius:0; } }