/* CivilMX public website dummy v001. Plain CSS, no frameworks. */
:root {
	--bg: #f7faf9;
	--paper: #ffffff;
	--ink: #10202a;
	--muted: #5f7180;
	--line: #d9e4e2;
	--green: #147d64;
	--green-dark: #0d5f4c;
	--blue: #176a9a;
	--soft-blue: #e8f3f7;
	--soft-green: #e6f3ef;
	--shadow: 0 18px 44px rgba(16, 32, 42, .10);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

html,
body {
	overflow-x: hidden;
}

body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--ink);
	background: var(--bg);
	line-height: 1.55;
}

a {
	color: inherit;
	text-decoration: none;
}

.siteHeader {
	position: sticky;
	top: 0;
	z-index: 20;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 0 clamp(18px, 4vw, 56px);
	background: rgba(255, 255, 255, .94);
	border-bottom: 1px solid var(--line);
	backdrop-filter: blur(12px);
}

.brand {
	font-size: 24px;
	font-weight: 800;
	color: var(--green-dark);
	letter-spacing: .2px;
}

.mainNav {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 14px;
	color: #314451;
}

.mainNav a:hover {
	color: var(--green);
}

.headerActions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.menuBtn {
	display: none;
	border: 1px solid var(--line);
	background: var(--paper);
	border-radius: 8px;
	padding: 9px 12px;
	color: var(--ink);
	cursor: pointer;
}

.sectionBand {
	padding: 84px 0;
}

.sectionBand.alt {
	background: #eef6f4;
}

.sectionInner {
	width: min(1160px, calc(100% - 36px));
	margin: 0 auto;
}

.hero {
	padding-top: 92px;
	background: linear-gradient(180deg, #eff8f5 0%, #f7faf9 100%);
}

.heroGrid,
.twoCol,
.contactGrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
	gap: 48px;
	align-items: center;
}

.heroCopy {
	max-width: 680px;
}

.eyebrow {
	margin: 0 0 12px;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 12px;
	font-weight: 800;
	color: var(--green);
}

h1,
h2,
h3,
p {
	margin-top: 0;
}

h1 {
	margin-bottom: 20px;
	font-size: clamp(42px, 6vw, 72px);
	line-height: .98;
	letter-spacing: -.04em;
}

h2 {
	margin-bottom: 16px;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.08;
	letter-spacing: -.025em;
}

h3 {
	margin-bottom: 8px;
	font-size: 19px;
}

.lead {
	max-width: 620px;
	font-size: 19px;
	color: var(--muted);
}

.buttonRow {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	border-radius: 9px;
	padding: 11px 16px;
	border: 1px solid transparent;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}

.btn:disabled {
	opacity: .55;
	cursor: not-allowed;
}

.btn[aria-disabled="true"] {
	opacity: .55;
	cursor: not-allowed;
	pointer-events: auto;
}

.btnPrimary {
	background: var(--green);
	color: #fff;
}

.btnPrimary:hover {
	background: var(--green-dark);
}

.btnDisabledTooltip,
.btnDisabledTooltip:hover {
	opacity: .58;
	cursor: not-allowed;
	background: var(--green);
}

.btnSecondary {
	background: var(--blue);
	color: #fff;
}

.btnGhost {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--line);
}

.btnGhost:hover {
	border-color: var(--green);
	color: var(--green-dark);
}

.visualDummy {
	min-height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px;
	border: 1px solid #bed7d1;
	border-radius: 18px;
	background:
		linear-gradient(135deg, rgba(20, 125, 100, .16), rgba(23, 106, 154, .13)),
		repeating-linear-gradient(45deg, rgba(255,255,255,.45) 0 12px, rgba(255,255,255,.22) 12px 24px);
	box-shadow: var(--shadow);
	color: #24424f;
	text-align: center;
	font-weight: 800;
}

.heroVisual {
	min-height: 420px;
}

.mapVisual,
.platformVisual,
.founderVisual {
	min-height: 340px;
}

.sectionHead {
	max-width: 760px;
	margin-bottom: 30px;
}

.cardGrid {
	display: grid;
	gap: 18px;
}

.cardGrid.four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cardGrid.three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cardGrid.modules {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.platformLayout {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(340px, 1fr);
	gap: 36px;
	align-items: stretch;
}

.infoCard,
.caseCard {
	min-height: 150px;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--paper);
	box-shadow: 0 10px 28px rgba(16, 32, 42, .06);
}

.infoCard p,
.caseCard p {
	color: var(--muted);
}

.caseStudyPreview {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 4 / 3;
	margin: 14px 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #0d171d;
}

.caseStudyPreview iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

body.casoPreviewPage {
	width: 100%;
	height: 100vh;
	margin: 0;
	overflow: hidden;
	background: #0d171d;
}

.casoPreviewViewer {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #0d171d;
}

.casoPreviewViewer canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.casoPreviewStatus {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	padding: 20px;
	color: rgba(232, 243, 247, .78);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	pointer-events: none;
}

.casoPreviewStatus[hidden] {
	display: none;
}

.contactBand {
	background: #10202a;
	color: #fff;
}

.contactBand .eyebrow,
.contactBand p {
	color: #c4d6d3;
}

.contactForm {
	display: grid;
	gap: 14px;
	padding: 24px;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 16px;
	background: rgba(255,255,255,.07);
}

.contactForm label {
	display: grid;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: #e8f3f7;
}

.contactForm input,
.contactForm textarea {
	width: 100%;
	border: 1px solid rgba(255,255,255,.24);
	border-radius: 9px;
	padding: 11px 12px;
	background: rgba(255,255,255,.96);
	color: var(--ink);
	font: inherit;
}

.formNote {
	min-height: 20px;
	margin: 0;
	font-size: 13px;
}

.siteFooter {
	padding: 32px 0;
	background: #0a151c;
	color: #dce8e5;
}

.footerGrid {
	display: grid;
	grid-template-columns: 1.2fr repeat(7, auto);
	gap: 18px;
	align-items: center;
	font-size: 14px;
}

.footerGrid p {
	margin: 4px 0 0;
	color: #8ea5ad;
	font-size: 13px;
}

.footerGrid a:hover {
	color: #7ee0c7;
}

.authPage,
.accountPage {
	min-height: calc(100vh - 72px);
	padding: 72px 0;
	background:
		linear-gradient(180deg, rgba(20, 125, 100, .10), rgba(247, 250, 249, 0) 360px),
		var(--bg);
}

.authCard {
	width: min(520px, calc(100% - 36px));
	margin: 0 auto;
	padding: 30px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--paper);
	box-shadow: var(--shadow);
}

.authCard h1 {
	margin-bottom: 10px;
	font-size: clamp(30px, 5vw, 44px);
	line-height: 1.05;
}

.authIntro {
	color: var(--muted);
}

.authForm {
	display: grid;
	gap: 15px;
	margin-top: 22px;
}

.authForm label {
	display: grid;
	gap: 6px;
	font-size: 13px;
	font-weight: 800;
	color: #334b58;
}

.authForm label span {
	font-weight: 500;
	color: var(--muted);
}

.authForm input,
.authForm select,
.authForm textarea {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 9px;
	padding: 12px;
	font: inherit;
	color: var(--ink);
	background: #fbfefd;
}

.authForm input:focus,
.authForm select:focus,
.authForm textarea:focus,
.contactForm input:focus,
.contactForm textarea:focus {
	outline: 2px solid rgba(20, 125, 100, .18);
	border-color: var(--green);
}

.authForm textarea {
	resize: vertical;
}

.authLinks {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
	font-size: 14px;
}

.authLinks a {
	color: var(--green-dark);
	font-weight: 700;
}

.alert {
	margin: 12px 0;
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
}

.alertError {
	border: 1px solid #f3b4b4;
	background: #fff0f0;
	color: #8f1f1f;
}

.alertOk {
	border: 1px solid #a9d8c9;
	background: #edf9f4;
	color: #155f4d;
}

.alert a {
	color: inherit;
	text-decoration: underline;
}

.alert .btn {
	text-decoration: none;
}

.alert .btnPrimary,
.alert .btnSecondary {
	color: #fff;
}

.alert .btnPrimary:focus-visible,
.alert .btnSecondary:focus-visible {
	outline: 3px solid rgba(23, 106, 154, .28);
	outline-offset: 2px;
}

.projectFormCard {
	max-width: 620px;
}

.projectEditCard {
	max-width: 900px;
}

.projectEditForm {
	display: grid;
	gap: 24px;
	margin-top: 0;
}

.projectEditPage {
	padding-bottom: 64px;
	background: #f5f8f7;
}

.projectEditIntro {
	display: grid;
	gap: 6px;
	padding-top: 46px;
	padding-bottom: 26px;
}

.projectEditIntro h1,
.projectEditIntro p {
	margin: 0;
}

.projectEditIntro > strong {
	font-size: 18px;
}

.projectEditIntro > p:last-child {
	max-width: 680px;
	color: var(--muted);
}

.projectEditContent {
	max-width: 1040px;
}

.editSection {
	padding: 28px;
	border: 1px solid rgba(15, 35, 48, .12);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(16, 32, 42, .04);
}

.editSectionHeader {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 24px;
}

.editSectionHeader h2 {
	margin: 0 0 5px;
	font-size: 22px;
}

.editSectionHeader p {
	max-width: 720px;
	margin: 0;
	color: var(--muted);
}

.editSectionNumber {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 10px;
	background: rgba(22, 139, 115, .10);
	color: #14745f;
	font-weight: 800;
}

.editSectionBody {
	min-width: 0;
}

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

.editGrid.three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.editGrid .full {
	grid-column: 1 / -1;
}

.commercialDecisionGrid {
	display: grid;
	gap: 18px;
}

.commercialDecision {
	padding: 20px;
	border: 1px solid rgba(15, 35, 48, .10);
	border-radius: 14px;
	background: #fbfdfc;
}

.commercialDecisionHeader {
	margin-bottom: 16px;
}

.commercialDecisionHeader h3 {
	margin: 0 0 4px;
	font-size: 17px;
}

.commercialDecisionHeader p {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
}

.commercialConditional {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 16px;
}

.commercialConditional .full {
	grid-column: 1 / -1;
}

.commercialConditional [hidden] {
	display: none !important;
}

.commercialStatusNote,
.commercialLegacyNotice {
	margin: 14px 0 0;
	padding: 11px 13px;
	border-radius: 10px;
	background: rgba(22, 139, 115, .08);
	color: #28584d;
	font-size: 14px;
}

.commercialLegacyNotice {
	background: #fff5dc;
	color: #725511;
}

.projectEditForm label small {
	display: block;
	margin-top: 6px;
	color: var(--muted);
	font-weight: 400;
}

.landUseSummary {
	display: grid;
	gap: 5px;
	margin-bottom: 18px;
	padding: 14px 16px;
	border: 1px solid rgba(22, 139, 115, .18);
	border-radius: 12px;
	background: rgba(22, 139, 115, .07);
	color: #28584d;
}

.landUseSummary small,
.landUseHelp {
	color: var(--muted);
	font-size: 13px;
}

.landUseTableWrap {
	overflow-x: auto;
	border: 1px solid rgba(15, 35, 48, .11);
	border-radius: 14px;
}

.landUseTable {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
}

.landUseTable th,
.landUseTable td {
	padding: 12px 14px;
	border-bottom: 1px solid rgba(15, 35, 48, .09);
	vertical-align: middle;
	text-align: left;
}

.landUseTable th {
	background: #f4f8f6;
	color: #315449;
	font-size: 13px;
	font-weight: 800;
}

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

.landUseTable select,
.landUseTable input {
	min-width: 0;
	margin: 0;
}

.landUseCode {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 30px;
	border-radius: 8px;
	background: #153d34;
	color: #fff;
}

.landUsePercent {
	display: grid;
	grid-template-columns: minmax(82px, 120px) auto;
	align-items: center;
	gap: 7px;
}

.landUseHelp {
	margin: 16px 0 0;
	line-height: 1.55;
}

.landUseEmpty {
	margin: 18px 0 0;
	padding: 13px 15px;
	border-radius: 10px;
	background: #f4f7f6;
	color: var(--muted);
	font-size: 14px;
}

.landUseResult {
	display: grid;
	gap: 16px;
	margin-top: 20px;
	padding: 18px;
	border: 1px solid rgba(15, 35, 48, .12);
	border-radius: 14px;
	background: #fbfdfc;
}

.landUseResult > header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.landUseResult > header div {
	display: grid;
	gap: 3px;
}

.landUseResult > header span,
.landUseResult > p {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
}

.landUseResultState {
	padding: 7px 10px;
	border-radius: 999px;
	background: #e6f5ee;
	color: #13664f !important;
	font-weight: 800;
	white-space: nowrap;
}

.landUseResultState.hasWarnings {
	background: #fff1d7;
	color: #805c13 !important;
}

.landUseMetrics,
.landUseValidationGrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.landUseMetrics span,
.landUseValidation {
	padding: 11px 12px;
	border-radius: 10px;
	background: #f0f5f3;
	font-size: 13px;
}

.landUseMetrics strong {
	display: block;
	font-size: 18px;
}

.landUseValidation {
	display: grid;
	gap: 3px;
	border-left: 4px solid #168b73;
}

.landUseValidation.isError {
	border-left-color: #c2453d;
	background: #fff0ef;
}

.landUseValidation small {
	color: inherit;
	font-weight: 800;
}

.landUseLots summary {
	cursor: pointer;
	color: #146a58;
	font-weight: 800;
}

.landUseLotsScroll {
	max-height: 420px;
	margin-top: 12px;
	overflow: auto;
	border: 1px solid rgba(15, 35, 48, .10);
	border-radius: 10px;
}

.landUseLots table {
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
	background: #fff;
}

.landUseLots th,
.landUseLots td {
	padding: 9px 11px;
	border-bottom: 1px solid rgba(15, 35, 48, .08);
	text-align: left;
	font-size: 12px;
}

.landUseLots th {
	position: sticky;
	top: 0;
	background: #eaf2ef;
	z-index: 1;
}

.editActions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 4px;
}

@media (max-width: 760px) {
	.projectEditIntro {
		padding-top: 32px;
	}

	.editSection {
		padding: 20px;
	}

	.editSectionHeader {
		gap: 12px;
	}

	.editGrid,
	.editGrid.three,
	.commercialConditional {
		grid-template-columns: 1fr;
	}

	.commercialDecision {
		padding: 16px;
	}

	.landUseMetrics,
	.landUseValidationGrid {
		grid-template-columns: 1fr;
	}
}

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

.checkRow {
	display: flex !important;
	grid-template-columns: none !important;
	align-items: center;
	gap: 10px !important;
	font-size: 14px !important;
}

.checkRow input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--green);
}

.checkRow span {
	color: var(--ink) !important;
	font-weight: 800 !important;
}

.projectList {
	display: grid;
	gap: 18px;
}

.projectCard {
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--paper);
	box-shadow: 0 10px 28px rgba(16, 32, 42, .06);
}

.projectCardCompact {
	display: grid;
	grid-template-columns: minmax(170px, 1.3fr) minmax(130px, .75fr) minmax(110px, .6fr) minmax(150px, .8fr) minmax(270px, auto);
	gap: 14px;
	align-items: center;
	padding: 14px 16px;
	border-radius: 12px;
}

/* INICIO VISTA_COMPACTA_2026_07 */
.projectCompactRow {
	grid-template-columns: minmax(180px, 1.25fr) minmax(130px, .65fr) minmax(210px, 1fr) minmax(360px, auto);
}
/* FIN VISTA_COMPACTA_2026_07 */

.projectCompactName {
	min-width: 0;
}

.projectCompactName h2 {
	margin: 0;
	overflow-wrap: anywhere;
	font-size: 20px;
	letter-spacing: 0;
}

.projectCompactMetric {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.projectCompactMetric span {
	color: var(--muted);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
}

.projectCompactMetric strong {
	color: var(--ink);
	font-size: 15px;
}

/* INICIO VISTA_COMPACTA_2026_07 */
.projectCompactSurface strong {
	font-size: 16px;
	white-space: nowrap;
}

.projectState {
	color: #314451;
	font-size: 14px;
	font-weight: 800;
	white-space: nowrap;
}
/* FIN VISTA_COMPACTA_2026_07 */

.projectStatusCompact {
	justify-self: start;
}

.projectCompactActions {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
}

.projectCompactActions .btn {
	min-height: 36px;
	padding: 8px 12px;
}

/* INICIO VISTA_COMPACTA_2026_07 */
.btnAnalyze {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--line);
}

.btnAnalyze:hover {
	border-color: var(--green);
	color: var(--green-dark);
}

.btnFuture {
	border-color: #d5e0df;
	background: #f4f8f7;
	color: #6d7f87;
	cursor: not-allowed;
	opacity: .78;
}

.btnFuture:hover {
	border-color: #d5e0df;
	color: #6d7f87;
}
/* FIN VISTA_COMPACTA_2026_07 */

.projectCardHead {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	align-items: flex-start;
	margin-bottom: 18px;
}

.projectCardHead h2 {
	margin-bottom: 4px;
	font-size: 24px;
}

.projectCardHead p {
	margin-bottom: 0;
	color: var(--muted);
}

.projectStatus {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--soft-blue);
	color: #22536b;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	white-space: nowrap;
}

.projectChecks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px;
	margin-bottom: 18px;
}

.projectChecks div {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fbfefd;
	font-size: 13px;
}

.projectChecks span {
	color: var(--muted);
}

.projectChecks strong {
	color: var(--green-dark);
}

.processState {
	margin: -2px 0 18px;
	padding: 10px 12px;
	border: 1px solid #c8d9e0;
	border-radius: 10px;
	background: var(--soft-blue);
	color: #24424f;
	font-size: 13px;
}

.progressTrack {
	height: 10px;
	overflow: hidden;
	border-radius: 999px;
	background: #e6eef0;
	margin: 16px 0 20px;
}

.progressFill {
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--green), #6aaebf);
	transition: width .25s ease;
}

.cleanSteps {
	display: grid;
	gap: 10px;
	margin: 18px 0;
	padding: 0;
	list-style: none;
}

.cleanSteps li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 13px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fbfefd;
	font-weight: 700;
}

.cleanSteps .stepDone {
	color: var(--green-dark);
}

.cleanSteps .stepActive {
	border-color: #a8cfd8;
	background: var(--soft-blue);
	color: #24424f;
}

.cleanSteps .stepPending {
	color: var(--muted);
}

.metricGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 10px;
	margin: 16px 0 18px;
}

.metricGrid div {
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fbfefd;
}

.metricGrid span {
	display: block;
	margin-bottom: 4px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.metricGrid strong {
	color: var(--ink);
	font-size: 17px;
}

.readyBadge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	border-radius: 9px;
	padding: 11px 16px;
	background: var(--soft-green);
	color: var(--green-dark);
	font-weight: 800;
}

.inlineForm {
	display: inline-flex;
	margin: 0;
}

.inlineForm .btn {
	width: 100%;
}

.accountHero {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
	padding: 30px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--paper);
	box-shadow: var(--shadow);
}

.accountHero h1 {
	margin-bottom: 10px;
	font-size: clamp(30px, 5vw, 48px);
}

.accountHero p {
	margin-bottom: 4px;
	color: var(--muted);
}

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

.accountCard {
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--paper);
	box-shadow: 0 10px 28px rgba(16, 32, 42, .06);
}

.accountCard h2 {
	font-size: 26px;
}

.accountTerrainList {
	display: grid;
	gap: 10px;
}

.accountTerrainItem {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fbfefd;
}

.accountTerrainItem div {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.accountTerrainItem strong {
	overflow-wrap: anywhere;
}

.accountTerrainItem span,
.accountTerrainItem small {
	color: var(--muted);
	font-size: 13px;
}

.accountDashboard {
	padding-bottom: 72px;
}

.accountDashboardHero {
	background:
		linear-gradient(135deg, rgba(20, 125, 100, .08), rgba(23, 106, 154, .05)),
		var(--paper);
}

.accountHeaderActions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	flex-wrap: wrap;
}

.cuentaCreditosBtn {
	white-space: nowrap;
}

.projectLevelCompact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 16px 0 18px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #f7faf9;
}

.projectLevelCompact > div {
	display: grid;
	gap: 2px;
}

.projectLevelActions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}

.projectLevelCompact span,
.terrainLevelOption small,
.terrainLevelSummary small {
	color: var(--muted);
	font-size: 13px;
}

.terrainLevelHero,
.terrainLevelExtend {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.terrainLevelSummary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-bottom: 30px;
}

.terrainLevelSummary article {
	display: grid;
	gap: 5px;
}

.terrainLevelSummary strong {
	font-size: 24px;
}

.terrainServiceSummary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 32px;
}

.terrainServiceSummary > div {
	display: grid;
	gap: 6px;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--paper);
}

.terrainServiceSummary span {
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.terrainServiceSummary strong {
	font-size: 18px;
}

.terrainLevelHeading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
}

.terrainCurrentLevel {
	padding: 7px 11px;
	border-radius: 999px;
	background: var(--soft-green);
	color: var(--green-dark);
	font-size: 13px;
	font-weight: 800;
}

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

.terrainLevelOption {
	display: grid;
	gap: 18px;
	align-content: start;
}

.terrainLevelOption h3,
.terrainLevelOption p {
	margin: 0;
}

.terrainLevelOption h3 {
	font-size: 24px;
	color: var(--green-dark);
}

.terrainLevelOption p {
	color: var(--muted);
}

.terrainModuleList {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.terrainModuleList span {
	padding: 5px 8px;
	border: 1px solid #cfe1dd;
	border-radius: 999px;
	background: #f4f9f7;
	font-size: 12px;
	font-weight: 700;
}

.terrainLevelCosts {
	display: grid;
	gap: 5px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	color: var(--muted);
}

.terrainDifference {
	margin-top: 5px;
	color: var(--ink);
	font-size: 19px;
}

.terrainLevelForm,
.terrainLevelExtend form {
	display: grid;
	gap: 12px;
	margin-top: 10px;
}

.terrainLevelForm label,
.terrainLevelExtend label {
	font-size: 13px;
	color: var(--muted);
}

.terrainLevelExtend {
	margin-top: 22px;
}

.terrainLevelExtend h3,
.terrainLevelExtend p {
	margin-bottom: 5px;
}

.terrainOperationState {
	max-width: 760px;
}

.terrainOperationResult,
.terrainInsufficient,
.terrainConfirmation {
	padding: clamp(24px, 5vw, 42px);
}

.terrainOperationResult {
	text-align: center;
}

.terrainOperationResult .buttonRow {
	justify-content: center;
}

.terrainOperationIcon {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--soft-green);
	color: var(--green-dark);
	font-size: 26px;
	font-weight: 800;
}

.terrainInsufficientNumbers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 22px 0;
}

.terrainInsufficientNumbers span {
	display: grid;
	gap: 3px;
	padding: 14px;
	border-radius: 10px;
	background: #fff6ed;
}

.terrainInsufficientNumbers strong {
	font-size: 22px;
}

.terrainConfirmation dl {
	display: grid;
	gap: 0;
	margin: 24px 0;
}

.terrainConfirmation dl div {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
}

.terrainConfirmation dt {
	color: var(--muted);
}

.terrainConfirmation dd {
	margin: 0;
	font-weight: 800;
	text-align: right;
}

.terrainConfirmationActions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

.accountCreditsBalance span {
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.accountCreditsBalance small {
	color: var(--muted);
}

.accountCreditsPage {
	padding-bottom: 70px;
}

.accountCreditsHero {
	align-items: center;
}

.accountCreditsBalance {
	min-width: 220px;
	padding: 18px 22px;
	border: 1px solid rgba(15, 35, 48, .13);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(15, 35, 48, .07);
}

.accountCreditsBalance strong {
	display: block;
	margin: 4px 0;
	font-size: 38px;
	line-height: 1;
}

.accountCreditsInfo {
	padding-top: 0;
}

.accountCreditsInfo .accountCard {
	max-width: 720px;
}

.accountCreditsInfo .accountCard p:last-child {
	margin-bottom: 0;
}

.accountCreditsHistory {
	padding-top: 28px;
}

.accountCreditsHistoryHeader {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 16px;
}

.accountCreditsHistoryHeader h2 {
	margin: 0;
}

.accountCreditsTableWrap {
	overflow: auto;
	border: 1px solid rgba(15, 35, 48, .12);
	border-radius: 14px;
	background: #fff;
}

.accountCreditsTable {
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
}

.accountCreditsTable th,
.accountCreditsTable td {
	padding: 13px 14px;
	border-bottom: 1px solid rgba(15, 35, 48, .09);
	text-align: left;
	vertical-align: top;
}

.accountCreditsTable th {
	color: var(--muted);
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.accountCreditsTable tr:last-child td {
	border-bottom: 0;
}

.accountCreditsTable .isCredit {
	color: #13795b;
	font-weight: 800;
}

.accountCreditsTable .isDebit {
	color: #b42318;
	font-weight: 800;
}

.accountCreditsEmpty {
	color: var(--muted);
}

.accountCreditsBack {
	margin-top: 22px;
}

.creditsPurchasePage,
.creditsRequestPage {
	padding-bottom: 72px;
}

.creditsPurchaseHero,
.creditsRequestHero {
	align-items: center;
}

.creditsPurchaseHero > div:first-child {
	max-width: 690px;
}

.creditsPurchaseNotice {
	padding-top: 0;
}

.creditsPurchaseOptions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	padding-top: 8px;
}

.creditsPurchaseOption {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	min-height: 280px;
}

.creditsPurchaseOption.isAvailable {
	border-color: rgba(22, 121, 87, .36);
	box-shadow: 0 15px 38px rgba(15, 35, 48, .08);
}

.creditsPurchaseOption h2,
.creditsPackageCard h3 {
	margin-top: 0;
}

.creditsPurchaseOption p:not(.eyebrow),
.creditsPackageCard p {
	color: var(--muted);
}

.creditsPurchaseOption .btn {
	width: 100%;
	margin-top: auto;
}

.creditsPackages {
	padding-top: 42px;
}

.creditsSectionHeading {
	max-width: 700px;
	margin-bottom: 20px;
}

.creditsSectionHeading h2 {
	margin: 0 0 8px;
}

.creditsPackagesGrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.creditsPackageCard {
	display: flex;
	flex-direction: column;
	min-height: 220px;
}

.creditsPackageCard .btn {
	width: 100%;
	margin-top: auto;
}

.creditsPurchaseBack {
	margin-top: 24px;
}

.creditsRequestHero > div {
	max-width: 720px;
}

.creditsRequestContent {
	padding-top: 8px;
}

.creditsRequestLayout {
	display: grid;
	grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr);
	gap: 20px;
	align-items: start;
}

.creditsRequestIdentity {
	position: sticky;
	top: 92px;
}

.creditsRequestIdentity h2 {
	margin: 0 0 6px;
}

.creditsRequestIdentity p:not(.eyebrow),
.creditsRequestIdentity small {
	color: var(--muted);
	overflow-wrap: anywhere;
}

.creditsRequestForm {
	max-width: none;
}

.creditsRequestForm select {
	width: 100%;
}

.creditsRequestConfirmation {
	max-width: 820px;
}

.creditsRequestConfirmation h2 {
	margin-top: 0;
}

.creditsRequestConfirmation dl {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 22px 0;
}

.creditsRequestConfirmation dl div {
	padding: 14px;
	border-radius: 10px;
	background: rgba(15, 35, 48, .04);
}

.creditsRequestConfirmation dt {
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.creditsRequestConfirmation dd {
	margin: 4px 0 0;
	font-weight: 800;
}

@media (max-width: 760px) {
	.accountHeaderActions {
		width: 100%;
		justify-content: flex-start;
	}

	.accountHeaderActions .btn {
		width: 100%;
		justify-content: center;
	}

	.projectLevelCompact,
	.terrainLevelHero,
	.terrainLevelExtend {
		align-items: stretch;
		flex-direction: column;
	}

	.projectLevelCompact .btn,
	.terrainLevelHero .btn,
	.terrainLevelExtend .btn {
		width: 100%;
	}

	.projectLevelActions {
		width: 100%;
	}

	.terrainLevelSummary,
	.terrainLevelGrid,
	.terrainServiceSummary,
	.terrainInsufficientNumbers {
		grid-template-columns: 1fr;
	}

	.terrainLevelHeading {
		align-items: flex-start;
		flex-direction: column;
	}

	.terrainConfirmation dl div,
	.terrainConfirmationActions {
		align-items: stretch;
		flex-direction: column;
	}

	.terrainConfirmation dd {
		text-align: left;
	}

	.terrainConfirmationActions .btn,
	.terrainOperationState .buttonRow .btn {
		width: 100%;
	}

	.accountCreditsHero,
	.accountCreditsHistoryHeader {
		align-items: stretch;
		flex-direction: column;
	}

	.accountCreditsBalance {
		min-width: 0;
	}

	.creditsPurchaseHero,
	.creditsRequestHero {
		align-items: stretch;
		flex-direction: column;
	}

	.creditsPurchaseOptions,
	.creditsPackagesGrid,
	.creditsRequestLayout,
	.creditsRequestConfirmation dl {
		grid-template-columns: 1fr;
	}

	.creditsPurchaseOption,
	.creditsPackageCard {
		min-height: 0;
	}

	.creditsPurchaseOption .btn,
	.creditsPackageCard .btn,
	.creditsRequestForm .btn,
	.creditsRequestConfirmation .btn {
		width: 100%;
	}

	.creditsRequestIdentity {
		position: static;
	}
}

.accountSummary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 28px;
}

.accountSummaryCard {
	display: grid;
	gap: 3px;
	padding: 20px;
	border: 1px solid var(--line);
	border-top: 4px solid #77909b;
	border-radius: 14px;
	background: var(--paper);
	box-shadow: 0 8px 24px rgba(16, 32, 42, .05);
}

.accountSummaryCard strong {
	font-size: 32px;
	line-height: 1;
}

.accountSummaryCard span {
	color: var(--muted);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
}

.accountSummaryCard.isReady {
	border-top-color: var(--green);
}

.accountSummaryCard.isProcessing {
	border-top-color: #cb8b24;
}

.accountSummaryCard.isError {
	border-top-color: #b94a42;
}

.accountMessages {
	display: grid;
	gap: 10px;
	margin-bottom: 24px;
}

.accountMessages .alert {
	margin: 0;
}

.accountProjects {
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: #f8fbfa;
	box-shadow: var(--shadow);
}

.accountProjectsHeader {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	margin-bottom: 24px;
}

.accountProjectsHeader h2 {
	margin-bottom: 8px;
}

.accountProjectsHeader p:last-child {
	margin-bottom: 0;
	color: var(--muted);
}

.accountProjectFilters {
	display: grid;
	grid-template-columns: minmax(190px, 1.3fr) minmax(160px, 1fr) minmax(140px, .8fr);
	gap: 10px;
	min-width: min(100%, 580px);
}

.accountProjectFilters label {
	display: grid;
	gap: 5px;
}

.accountProjectFilters label > span {
	color: var(--muted);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.accountProjectFilters input,
.accountProjectFilters select {
	width: 100%;
	min-height: 42px;
	border: 1px solid var(--line);
	border-radius: 9px;
	padding: 9px 11px;
	background: var(--paper);
	color: var(--ink);
}

.accountFilterResult {
	margin-bottom: 12px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 800;
}

.accountProjectList {
	display: grid;
	gap: 16px;
}

.accountProjectCard {
	padding: 22px;
	border: 1px solid var(--line);
	border-left: 5px solid #77909b;
	border-radius: 15px;
	background: var(--paper);
	box-shadow: 0 10px 28px rgba(16, 32, 42, .06);
}

.accountProjectCard.is-listo {
	border-left-color: var(--green);
}

.accountProjectCard.is-procesando {
	border-left-color: #cb8b24;
}

.accountProjectCard.is-error {
	border-left-color: #b94a42;
}

.accountProjectCardHeader {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 18px;
}

.accountProjectCardHeader h3 {
	margin-bottom: 4px;
	font-size: 26px;
	overflow-wrap: anywhere;
}

.accountProjectCardHeader p {
	margin-bottom: 0;
	color: var(--muted);
	font-weight: 700;
}

.projectCardMain {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.projectCardContent {
	min-width: 0;
}

.projectPolygonThumb {
	position: relative;
	width: 200px;
	height: 200px;
	overflow: hidden;
	border: 1px solid rgba(15, 35, 48, .12);
	border-radius: 14px;
	background: linear-gradient(145deg, rgba(22, 139, 115, .07), rgba(255, 255, 255, .96));
}

.projectPolygonThumbCanvas {
	width: 100%;
	height: 100%;
}

.projectPolygonThumbCanvas svg {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 12px;
}

.projectPolygonThumbShape {
	fill: rgba(22, 139, 115, .18);
	stroke: #14745f;
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
	stroke-linejoin: round;
}

.projectPolygonThumbLoading,
.projectPolygonThumbEmpty,
.projectPolygonThumbError {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	text-align: center;
	font-size: 12px;
	color: #60737b;
}

.projectPolygonThumbError {
	color: #a13b3b;
}

.projectPolygonThumbCanvas[hidden],
.projectPolygonThumbLoading[hidden],
.projectPolygonThumbEmpty[hidden],
.projectPolygonThumbError[hidden] {
	display: none;
}

.accountProjectActions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.accountProjectActions .btn {
	min-height: 38px;
	padding: 9px 13px;
}

.projectVersionsPanel {
	margin-top: 18px;
	border-top: 1px solid rgba(15, 35, 48, .12);
	padding-top: 22px;
}

.projectVersionsPanel[hidden] {
	display: none;
}

.projectVersionsPanelHeader {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 18px;
}

.projectVersionsPanelHeader h4 {
	margin: 0 0 4px;
	font-size: 20px;
}

.projectVersionsPanelHeader p {
	margin: 0;
	color: var(--muted);
}

.projectVersionsSummary {
	display: flex;
	align-items: flex-end;
	flex-direction: column;
	gap: 3px;
	color: var(--muted);
	font-size: 13px;
	white-space: nowrap;
}

.projectVersionsSummary strong {
	color: var(--green-dark);
}

.projectVersionsToggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.projectVersionsToggleIcon {
	font-size: 15px;
	line-height: 1;
	transition: transform .2s ease;
}

.projectVersionsPanel .versionItem {
	background: #fff;
}

.projectVersionsPanel .versionItem .btn {
	min-height: 34px;
	padding: 7px 10px;
}

.accountVersionsPanel {
	display: grid;
	gap: 18px;
}

.accountVersionsPanel .versionItem small {
	display: block;
	margin-top: 2px;
}

.accountVersionCreate {
	gap: 12px;
	margin-top: 2px;
	border-top: 1px solid var(--line);
	padding-top: 18px;
}

.accountVersionCreate h4 {
	margin: 0;
	font-size: 18px;
}

.accountVersionCreateFields {
	display: grid;
	grid-template-columns: minmax(170px, .7fr) minmax(240px, 1.3fr) auto;
	align-items: end;
	gap: 12px;
}

.accountVersionCreateFields label {
	margin: 0;
}

.accountVersionCreateFields .btn {
	margin-bottom: 1px;
}

.accountProjectEmpty {
	text-align: center;
}

.accountProjectEmpty .buttonRow {
	justify-content: center;
}

.accountNoFilterResults {
	padding: 28px;
	border: 1px dashed var(--line);
	border-radius: 12px;
	background: var(--paper);
	color: var(--muted);
	text-align: center;
	font-weight: 700;
}

@media (max-width: 980px) {
	.accountProjectsHeader {
		align-items: stretch;
		flex-direction: column;
	}

	.accountProjectFilters {
		min-width: 0;
	}

}

@media (max-width: 768px) {
	.projectCardMain {
		grid-template-columns: 1fr;
	}

	.projectPolygonThumb {
		margin: 0 auto;
	}

	.projectVersionsPanelHeader {
		flex-direction: column;
	}

	.projectVersionsSummary {
		align-items: flex-start;
		white-space: normal;
	}
}

@media (max-width: 680px) {
	.accountDashboard {
		padding-bottom: 48px;
	}

	.accountSummary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.accountSummaryCard {
		padding: 16px;
	}

	.accountProjects {
		padding: 18px;
	}

	.accountProjectFilters {
		grid-template-columns: 1fr;
	}

	.accountProjectCard {
		padding: 18px;
	}

	.accountProjectCardHeader {
		align-items: flex-start;
		flex-direction: column;
	}

	.accountVersionCreateFields {
		grid-template-columns: 1fr;
	}

	.accountProjectActions .btn {
		width: 100%;
	}

	.accountVersionCreateFields .btn {
		width: 100%;
	}
}

.versionsLayout {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr);
	gap: 20px;
}

.versionsLayout > .alert {
	grid-column: 1 / -1;
}

.versionsCard h2 {
	margin-bottom: 18px;
}

.versionsList {
	display: grid;
	gap: 10px;
}

.versionItem {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fbfefd;
}

.versionItem.isActive {
	border-color: #91c6ae;
	background: var(--soft-green);
}

.versionItem > div {
	display: grid;
	gap: 3px;
}

.versionItem span {
	color: var(--muted);
	font-size: 13px;
}

.versionActiveBadge {
	color: var(--green-dark) !important;
	font-weight: 800;
}

.versionActions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
}

.versionPreparationState {
	font-weight: 800;
}

.versionPreparationState.is-lista_geo {
	color: var(--green-dark);
}

.versionPreparationState.is-requiere_correccion {
	color: #a33a32;
}

.versionResultState {
	color: var(--green-dark) !important;
	font-weight: 800;
}

.versionResultState.isPending {
	color: var(--muted) !important;
	font-weight: 700;
}

.versionItem small {
	max-width: 520px;
	color: var(--muted);
}

@media (max-width: 780px) {
	.versionsLayout {
		grid-template-columns: 1fr;
	}

	.versionItem {
		align-items: stretch;
		flex-direction: column;
	}

	.versionItem .btn {
		width: 100%;
	}

	.versionActions,
	.versionActions form {
		width: 100%;
	}
}

.versionProductsPage {
	padding-bottom: 64px;
}

.versionProductsHero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.versionProductsHero h1 {
	margin: 4px 0 8px;
}

.versionProductsContent {
	display: grid;
	gap: 28px;
}

.versionProductsSummary {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.versionProductsSummary > div {
	display: grid;
	gap: 5px;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
}

.versionProductsSummary span {
	color: var(--muted);
	font-size: 13px;
}

.versionProductGroup {
	display: grid;
	gap: 14px;
}

.versionProductGroupHeader h2 {
	margin: 3px 0 0;
}

.versionProductGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 14px;
}

.versionProductCard {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
}

.versionProductCard h3 {
	margin: 8px 0 0;
	font-size: 20px;
}

.versionProductStatus {
	display: inline-flex;
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--soft-green);
	color: var(--green-dark);
	font-size: 12px;
	font-weight: 800;
}

.versionProductStatus.is-advertencia,
.versionProductWarning {
	color: #9a4f08;
}

.versionProductStatus.is-advertencia {
	background: #fff2d9;
}

.versionProductWarning {
	margin: 0;
	font-size: 13px;
}

.versionProductFiles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.versionProductFiles .btn small {
	font-size: 11px;
	opacity: .8;
}

@media (max-width: 680px) {
	.versionProductsHero {
		align-items: stretch;
		flex-direction: column;
	}

	.versionProductsSummary {
		grid-template-columns: 1fr;
	}

	.versionProductFiles .btn {
		width: 100%;
	}
}

.diagGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 10px;
	margin: 16px 0;
}

.diagGridSmall {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.diagGrid div {
	display: grid;
	gap: 4px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fbfefd;
	min-width: 0;
}

.diagGrid span {
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.diagGrid strong {
	overflow-wrap: anywhere;
	color: var(--ink);
	font-size: 13px;
}

.diagPre {
	overflow: auto;
	max-height: 460px;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #0f1f27;
	color: #d6f6e8;
	font: 13px/1.5 Consolas, Monaco, monospace;
	white-space: pre-wrap;
}

.emptyState {
	margin-top: 18px;
	padding: 18px;
	border: 1px dashed #aac5bd;
	border-radius: 12px;
	background: var(--soft-green);
	color: #31574d;
	font-weight: 700;
}

body:has(.projectDetailPage) .menuBtn {
	display: none !important;
}

.projectDetailPage {
	padding-top: 42px;
	background: var(--bg);
}

.projectViewerPage {
	min-height: calc(100vh - 72px);
	padding-top: 0;
	background: #0d171d;
}

.projectViewerPage .atlasMiViewer {
	width: 100%;
	height: calc(100vh - 72px);
	min-height: calc(100vh - 72px);
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.projectViewerError {
	padding-top: 42px;
	padding-bottom: 42px;
}

.projectDetailHeader {
	margin-bottom: 18px;
}

.projectDetailHeader h1 {
	margin: 8px 0 0;
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.05;
	letter-spacing: 0;
}

.backLink {
	display: inline-flex;
	color: var(--green-dark);
	font-size: 14px;
	font-weight: 800;
}

.backLink:hover {
	color: var(--green);
}

.projectDetailLayout {
	display: grid;
	grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
	gap: 22px;
	align-items: stretch;
}

.projectSidePanel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.projectSidePanel .accountCard,
.metricCard {
	border-radius: 12px;
	box-shadow: 0 10px 28px rgba(16, 32, 42, .06);
}

.metricCard {
	display: grid;
	gap: 10px;
	padding: 18px;
	border: 1px solid var(--line);
	background: var(--paper);
}

.metricCard div {
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
}

.metricCard div:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.metricCard span {
	display: block;
	margin-bottom: 4px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
}

.metricCard strong {
	display: block;
	color: var(--ink);
	font-size: 22px;
	line-height: 1.15;
}

.commercialProgress,
.publicationCard {
	padding: 18px;
}

.commercialProgress h2,
.publicationCard h2 {
	margin-bottom: 10px;
	font-size: 19px;
	letter-spacing: 0;
}

.commercialProgress .progressTrack {
	margin: 14px 0 10px;
}

.commercialProgress p,
.publicationCard p {
	margin-bottom: 0;
	color: var(--muted);
}

.publicationCard form {
	margin-top: 14px;
}

.publicationCard .btn,
.projectSidePanel > .btn {
	width: 100%;
}

.projectViewer {
	position: relative;
	min-height: min(72vh, 720px);
	border: 1px solid #263d45;
	border-radius: 12px;
	overflow: hidden;
	background:
		linear-gradient(135deg, rgba(20, 125, 100, .22), rgba(23, 106, 154, .16)),
		#0d171d;
	box-shadow: 0 18px 44px rgba(16, 32, 42, .16);
}

.viewerLayerButtons {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.viewerLayerButtons button {
	min-height: 32px;
	padding: 7px 10px;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 8px;
	background: rgba(255,255,255,.10);
	color: #e8f3f7;
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}

.viewerLayerButtons button:hover {
	background: rgba(255,255,255,.17);
}

.viewerPlaceholder {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	color: rgba(232, 243, 247, .72);
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	pointer-events: none;
}

.atlasMiViewer {
	min-height: min(78vh, 780px);
	background:
		linear-gradient(135deg, rgba(5, 28, 34, .92), rgba(17, 44, 48, .84)),
		#0d171d;
}

.atlasMiViewer canvas {
	z-index: 1;
}

.atlasMiTopbar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 54px;
	min-height: 54px;
	padding: 10px 14px;
	border-bottom: 1px solid rgba(255,255,255,.10);
	background: rgba(8, 21, 26, .82);
	backdrop-filter: blur(10px);
}

.atlasMiTitle {
	color: #f0fbf6;
	font-size: 14px;
	font-weight: 900;
}

.atlasMiTopActions {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.atlasMiTopActions::-webkit-scrollbar {
	display: none;
}

.atlasMiTopActions button,
.atlasMiTopActions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 7px 11px;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 8px;
	background: rgba(255,255,255,.10);
	color: #e8f3f7;
	font: inherit;
	font-size: 12px;
	font-weight: 850;
	text-decoration: none;
	cursor: pointer;
}

.atlasMiTopActions button:hover,
.atlasMiTopActions a:hover {
	background: rgba(36, 184, 126, .26);
	color: #ffffff;
}

.atlasMiTopActions button.isActive {
	border-color: rgba(67, 214, 143, .55);
	background: rgba(35, 154, 103, .34);
	color: #ffffff;
}

.atlasMiTopActions button[hidden] {
	display: none;
}

.visorFloatingTools {
	position: absolute;
	top: 66px;
	left: 14px;
	z-index: 7;
	width: min(340px, calc(100vw - 28px));
	pointer-events: auto;
}

.atlasMiHeaderPanels {
	position: absolute;
	top: calc(100% + 8px);
	right: 14px;
	z-index: 8;
	display: grid;
	justify-items: end;
	width: min(340px, calc(100vw - 28px));
}

.visorFloatingTools .atlasMiHeaderPanels {
	top: 0;
	left: 0;
	right: auto;
	width: 100%;
	justify-items: start;
}

.atlasMiHeaderPanel {
	width: 100%;
	padding: 12px;
	border: 1px solid rgba(255,255,255,.13);
	border-radius: 10px;
	background: rgba(15, 31, 39, .94);
	box-shadow: 0 16px 34px rgba(0,0,0,.28);
	backdrop-filter: blur(10px);
}

.atlasMiHeaderPanel[hidden] {
	display: none;
}

.atlasMiHeaderPanel h2 {
	margin: 0 0 10px;
	color: #eaf9f2;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0;
	text-transform: uppercase;
}

.atlasMiHeaderPanel .atlasMiToolList button:not(:disabled) {
	cursor: pointer;
	color: #dcece8;
	border-color: rgba(255,255,255,.14);
	background: rgba(255,255,255,.08);
}

.atlasMiHeaderPanel .atlasMiToolList button.isActive {
	color: #f1fff8;
	border-color: rgba(67, 214, 143, .48);
	background: rgba(35, 154, 103, .34);
}

.atlasMiField {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 96px auto;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	color: #dcece8;
	font-size: 12px;
	font-weight: 800;
}

.atlasMiField input {
	min-width: 0;
	min-height: 34px;
	padding: 7px 9px;
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 8px;
	background: rgba(255,255,255,.08);
	color: #ffffff;
	font: inherit;
	text-align: right;
}

.atlasMiField small {
	color: rgba(220, 236, 232, .76);
	font-size: 12px;
	font-weight: 800;
}

.atlasMiHistogram {
	position: absolute;
	inset: 54px 0 40px;
	z-index: 3;
	padding: 18px;
}

.atlasMiHistogram[hidden] {
	display: none;
}

.atlasMiRendimiento {
	position: absolute;
	inset: 54px 0 40px;
	z-index: 3;
	padding: 12px;
	background: rgba(2,6,23,.72);
}

.atlasMiRendimiento[hidden] {
	display: none;
}

.atlasMiRendimiento .atlasMiModeloBody {
	height: 100%;
}

.atlasMiAcumulada {
	position: absolute;
	inset: 54px 0 40px;
	z-index: 3;
	padding: 18px;
}

.atlasMiAcumulada[hidden] {
	display: none;
}

.acumView {
	width: 100%;
	height: 100%;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 24px 28px 26px;
	color: #e8f0f2;
	border: 1px solid rgba(133,171,177,.12);
	border-radius: 14px;
	background:
		radial-gradient(circle at 50% 0%, rgba(23,80,84,.12), transparent 38%),
		linear-gradient(180deg, rgba(7,29,33,.98), rgba(5,24,28,.98));
	box-shadow: 0 22px 54px rgba(0,0,0,.22);
}

.acumHeader {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 0 2px;
}

.acumTitle {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #f5f8f9;
	font-size: clamp(20px, 1.6vw, 28px);
	font-weight: 750;
	line-height: 1.15;
	letter-spacing: 0;
}

.acumHelpIcon {
	color: rgba(222,235,237,.72);
	font-size: 16px;
	font-weight: 800;
	cursor: help;
}

.acumSubtitle {
	margin: 7px 0 0;
	color: rgba(211,226,229,.62);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

.curvaAcumuladaBody {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 18px;
	flex: 1 1 auto;
	min-height: 0;
	align-items: stretch;
}

.acumSummary {
	min-height: 0;
	padding: 16px;
	border: 1px solid rgba(138,174,181,.16);
	border-radius: 14px;
	background: linear-gradient(145deg, rgba(30,54,59,.92), rgba(20,42,47,.84));
	box-shadow: 0 10px 26px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.025);
}

.acumSummary h3,
.acumChartMeta h3,
.acumDistribution h3 {
	margin: 0;
	color: #f5f8f9;
	font-size: 13px;
	font-weight: 850;
	line-height: 1.2;
	letter-spacing: 0;
}

.acumSummaryList {
	display: grid;
	gap: 12px;
	margin-top: 16px;
}

.acumSummaryItem {
	display: grid;
	gap: 4px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255,255,255,.07);
}

.acumSummaryItem:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.acumSummaryItem span {
	color: rgba(205,220,223,.56);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.15;
}

.acumSummaryItem strong {
	color: #ffffff;
	font-size: 19px;
	font-weight: 850;
	line-height: 1;
}

.acumSummaryItem small {
	color: rgba(205,220,223,.48);
	font-size: 11px;
	font-weight: 600;
}

.acumChartCard {
	flex: 1 1 auto;
	min-height: 430px;
	display: flex;
	flex-direction: column;
	padding: 18px 20px 14px;
	border: 1px solid rgba(133,171,177,.16);
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(19,43,48,.94), rgba(14,36,41,.96));
	box-shadow: 0 18px 46px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.02);
	overflow: hidden;
}

.acumChartMeta {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 0 4px 10px;
}

.acumCanvasWrap {
	position: relative;
	flex: 1 1 auto;
	min-height: 340px;
	width: 100%;
	min-width: 0;
	overflow: hidden;
	border-radius: 8px;
}

.acumCanvas {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
}

.acumInsight {
	flex: 0 0 auto;
	padding: 12px 14px;
	border: 1px solid rgba(255,255,255,.07);
	border-radius: 12px;
	background: rgba(4,21,25,.38);
	color: rgba(237,243,244,.84);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
}

.acumInsight strong {
	display: block;
	margin-bottom: 4px;
	color: #ffffff;
	font-size: 12px;
	font-weight: 900;
}

.acumInsight span {
	display: block;
	color: rgba(222,235,237,.68);
	font-weight: 650;
}

.acumDistribution {
	flex: 0 0 auto;
	padding: 10px 12px;
	border: 1px solid rgba(133,171,177,.16);
	border-radius: 14px;
	background: rgba(14,36,41,.72);
	overflow: hidden;
}

.acumTableWrap {
	flex: 0 0 auto;
	margin-top: 8px;
	overflow: auto;
	border: 1px solid rgba(255,255,255,.07);
	border-radius: 10px;
}

.acumTable {
	width: 100%;
	border-collapse: collapse;
	font-size: 11px;
}

.acumTable th,
.acumTable td {
	padding: 6px 8px;
	border-bottom: 1px solid rgba(255,255,255,.06);
	color: rgba(226,238,240,.82);
	text-align: right;
	white-space: nowrap;
}

.acumTable th:first-child,
.acumTable td:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background: rgba(10,31,36,.98);
	text-align: left;
}

.acumTable th {
	position: sticky;
	top: 0;
	background: rgba(10,31,36,.98);
	color: #f5f8f9;
	font-weight: 800;
}

.acumTable td.acumColorCell {
	font-weight: 900;
	border-bottom-color: transparent;
}

.acumTooltip {
	position: absolute;
	z-index: 4;
	min-width: 210px;
	padding: 10px 12px;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 10px;
	background: rgba(4,21,25,.94);
	box-shadow: 0 16px 34px rgba(0,0,0,.32);
	color: #eef7f8;
	font-size: 12px;
	font-weight: 750;
	line-height: 1.35;
	pointer-events: none;
	white-space: pre-line;
}

.acumTooltip strong {
	color: #ffffff;
	font-weight: 900;
}

.histView {
	width: 100%;
	height: 100%;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 24px 28px 26px;
	color: #e8f0f2;
	border: 1px solid rgba(133, 171, 177, .12);
	border-radius: 14px;
	background:
		radial-gradient(circle at 50% 0%, rgba(23, 80, 84, .12), transparent 38%),
		linear-gradient(180deg, rgba(7, 29, 33, .98), rgba(5, 24, 28, .98));
	box-shadow: 0 22px 54px rgba(0,0,0,.22);
}

.histHeader {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 0 2px;
}

.histTitle {
	margin: 0;
	color: #f5f8f9;
	font-size: clamp(20px, 1.6vw, 28px);
	font-weight: 750;
	line-height: 1.15;
	letter-spacing: 0;
}

.histSubtitle {
	margin: 7px 0 0;
	color: rgba(211,226,229,.62);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

.histStats {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(220px, 320px));
	justify-content: start;
	gap: 12px;
}

.histStat {
	position: relative;
	min-height: 104px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 16px 18px;
	border: 1px solid rgba(138,174,181,.16);
	border-radius: 12px;
	background: linear-gradient(145deg, rgba(30,54,59,.92), rgba(20,42,47,.84));
	box-shadow: 0 10px 26px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.025);
}

.histStatHead {
	display: flex;
	align-items: center;
	gap: 7px;
	color: rgba(222,233,235,.72);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}

.histStatValue {
	display: block;
	margin-top: 9px;
	color: #ffffff;
	font-size: clamp(24px, 2.1vw, 34px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
}

.histStatCaption {
	margin-top: 7px;
	color: rgba(205,220,223,.52);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
}

.histInfoButton {
	width: 17px;
	height: 17px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba(183,208,212,.28);
	border-radius: 50%;
	background: rgba(255,255,255,.04);
	color: rgba(222,235,237,.74);
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
	cursor: help;
}

.histInfoButton:hover,
.histInfoButton:focus-visible {
	border-color: rgba(255,255,255,.60);
	background: rgba(255,255,255,.10);
	color: #ffffff;
	outline: none;
}

.histChartCard {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 18px 20px 14px;
	border: 1px solid rgba(133,171,177,.16);
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(19,43,48,.94), rgba(14,36,41,.96));
	box-shadow: 0 18px 46px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.02);
	overflow: hidden;
}

.histChartMeta {
	flex: 0 0 auto;
	min-height: 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 0 4px 10px;
}

.histAxisTitle {
	color: rgba(228,237,239,.78);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.histLegend {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 11px;
	border: 1px solid rgba(255,255,255,.055);
	border-radius: 999px;
	background: rgba(4,21,25,.42);
	color: rgba(237,243,244,.84);
	font-size: 11px;
	font-weight: 650;
	line-height: 1;
}

.histLegendLine {
	width: 26px;
	height: 2px;
	display: inline-block;
	border-radius: 999px;
	background: #ffffff;
	box-shadow: 0 0 8px rgba(255,255,255,.22);
}

.histCanvasWrap {
	position: relative;
	flex: 1 1 auto;
	min-height: 360px;
	width: 100%;
	min-width: 0;
	overflow: hidden;
	border-radius: 8px;
}

.histCanvas {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
}

.atlasMiSide {
	position: absolute;
	top: 68px;
	left: 14px;
	bottom: 96px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(270px, calc(100% - 28px));
	overflow: auto;
	padding-right: 4px;
}

.atlasMiSection,
.atlasMiTables {
	border: 1px solid rgba(255,255,255,.13);
	border-radius: 10px;
	background: rgba(15, 31, 39, .84);
	box-shadow: 0 12px 28px rgba(0,0,0,.20);
	backdrop-filter: blur(10px);
}

.atlasMiSection {
	padding: 12px;
}

.atlasMiSection h2,
.atlasMiTables h2 {
	margin: 0 0 10px;
	color: #eaf9f2;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0;
	text-transform: uppercase;
}

.atlasMiToolList,
.atlasMiLayerList {
	display: grid;
	gap: 6px;
}

.atlasMiToolList button,
.atlasMiLayerButton {
	width: 100%;
	min-height: 34px;
	padding: 8px 10px;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 8px;
	background: rgba(255,255,255,.08);
	color: #dcece8;
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	text-align: left;
}

.atlasMiToolList button:disabled,
.atlasMiLayerButton:disabled {
	opacity: .52;
	cursor: not-allowed;
}

.atlasMiToolList button:not(:disabled) {
	cursor: pointer;
	opacity: 1;
	color: #f1fff8;
	border-color: rgba(67, 214, 143, .48);
	background: rgba(35, 154, 103, .26);
}

.atlasMiToolList button:not(:disabled):hover {
	background: rgba(35, 154, 103, .40);
}

.atlasMiLayerButton {
	cursor: pointer;
}

.atlasMiLayerButton.isActive {
	border-color: rgba(67, 214, 143, .48);
	background: rgba(35, 154, 103, .26);
	color: #f1fff8;
}

.atlasMiScale {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 48px;
	align-items: center;
	gap: 10px;
}

.atlasMiScale input {
	width: 100%;
	accent-color: var(--green);
}

.atlasMiScale strong {
	color: #effff6;
	font-size: 13px;
	text-align: right;
}

.atlasMiTables {
	position: absolute;
	top: 68px;
	right: 14px;
	z-index: 5;
	width: min(230px, calc(100% - 28px));
	padding: 12px;
	color: #e9f7f2;
}

.atlasMiTables[hidden] {
	display: none;
}

.atlasMiTables dl {
	display: grid;
	gap: 8px;
	margin: 0;
}

.atlasMiTables dl div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255,255,255,.10);
}

.atlasMiTables dl div:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.atlasMiTables dt {
	color: rgba(233, 247, 242, .72);
	font-size: 12px;
	font-weight: 800;
}

.atlasMiTables dd {
	margin: 0;
	color: #ffffff;
	font-size: 13px;
	font-weight: 900;
}

.atlasMiRangosBar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	border-top: 1px solid rgba(255,255,255,.14);
	border-radius: 0;
	background: rgba(11, 24, 30, .94);
	box-shadow: 0 -12px 30px rgba(0,0,0,.28);
	backdrop-filter: blur(10px);
}

.atlasMiRangosTop {
	display: none;
}

.atlasMiRangosTop span:last-child {
	color: rgba(234, 249, 242, .70);
	font-weight: 800;
}

.atlasMiRangosScale {
	position: relative;
	width: 100%;
	height: 24px;
}

.atlasMiRangosTrack {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	height: 22px;
	border-top: 1px solid rgba(255,255,255,.16);
	border-bottom: 0;
	border-radius: 0;
	background: rgba(255,255,255,.10);
}

.atlasMiRangosSegment {
	position: absolute;
	top: 0;
	bottom: 0;
	height: 100%;
}

.atlasMiRangosLabels,
.atlasMiRangosGrips {
	position: relative;
	width: 100%;
}

.atlasMiRangosLabels {
	height: 16px;
	margin: 0;
}

.atlasMiRangosLabel {
	position: absolute;
	top: 2px;
	transform: translateX(-50%);
	color: rgba(234, 249, 242, .84);
	font-size: 10px;
	font-weight: 900;
	line-height: 1;
	white-space: nowrap;
	text-shadow: 0 1px 3px rgba(0,0,0,.55);
}

.atlasMiRangosLabel:first-child {
	transform: translateX(0);
}

.atlasMiRangosLabel:last-child {
	transform: translateX(-100%);
}

.atlasMiRangosGrips {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.atlasMiRangosGrip {
	position: absolute;
	top: 2px;
	width: 0;
	min-width: 0;
	height: 0;
	padding: 0;
	border: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 11px solid #ffffff;
	border-radius: 0;
	background: transparent;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
	cursor: ew-resize;
	pointer-events: auto;
	transform: translateX(-50%);
	touch-action: none;
}

.atlasMiRangosGrip:hover,
.atlasMiRangosGrip:focus-visible {
	border-top-color: #dffcf0;
	outline: none;
}

.atlasMiModeloModal {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	background: rgba(2, 6, 23, .78);
	font-family: Arial, Helvetica, sans-serif;
}

.atlasMiModeloBox {
	display: flex;
	overflow: hidden;
	flex-direction: column;
	width: min(1280px, 96vw);
	height: min(900px, 96vh);
	border: 1px solid #334155;
	border-radius: 12px;
	background: #0f172a;
	box-shadow: 0 24px 90px rgba(0,0,0,.48);
	color: #e5e7eb;
}

.atlasMiModeloHead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 42px;
	padding: 5px 12px;
	border-bottom: 1px solid #334155;
	background: #111827;
}

.atlasMiModeloHead strong {
	display: block;
	color: #f8fafc;
	font-size: 15px;
	line-height: 1.2;
}

.atlasMiModeloActions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.atlasMiModeloActions button {
	min-height: 30px;
	border: 1px solid #334155;
	border-radius: 8px;
	background: #0f172a;
	color: #e5e7eb;
	font: inherit;
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
}

.atlasMiModeloClose {
	width: 32px;
	padding: 0;
	font-size: 24px !important;
	line-height: 1;
}

.atlasMiModeloBody {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	min-height: 0;
	padding: 8px;
	overflow: hidden;
}

.atlasMiModeloSuperior {
	display: grid;
	grid-template-columns: 350px minmax(0, 1fr);
	gap: 8px;
	flex: 1 1 auto;
	min-height: 0;
	align-items: stretch;
}

.atlasMiModeloPanel {
	min-width: 0;
	min-height: 0;
	padding: 8px;
	border: 1px solid #1e293b;
	border-radius: 10px;
	background: #020617;
	overflow: hidden;
}

.atlasMiModeloPanel h3 {
	margin: 0 0 10px;
	color: #f8fafc;
	font-size: 14px;
}

.atlasMiModeloGrafica {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	min-height: 0;
}

.atlasMiModeloResumen {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	overflow: visible;
}

.atlasMiModeloResumen > [data-atlas-mi-resumen] {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}

.atlasMiModeloTabla {
	flex: 0 0 auto;
	overflow-x: auto;
	overflow-y: hidden;
}

.atlasMiModeloGrafica canvas {
	width: 100%;
	flex: 1;
	min-height: 0;
	border: 1px solid #1e293b;
	border-radius: 8px;
	background: #0b1120;
	cursor: crosshair;
}

.atlasMiModeloEscala {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	flex: 0 0 auto;
	color: #94a3b8;
	font-size: 12px;
	font-weight: 800;
}

.atlasMiModeloEscala button {
	min-height: 24px;
	padding: 3px 8px;
	border: 1px solid #334155;
	border-radius: 7px;
	background: #0f172a;
	color: #cbd5e1;
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}

.atlasMiModeloEscala button.isActive {
	border-color: #38bdf8;
	background: #0e7490;
	color: #f8fafc;
}

.atlasMiModeloKpis {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(7, minmax(0, 1fr));
	gap: 8px;
	flex: 1 1 auto;
	height: 100%;
	min-height: 0;
}

.atlasMiModeloKpis div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: auto;
	min-height: 0;
	padding: 5px 8px;
	border: 1px solid #1e293b;
	border-radius: 8px;
	background: #0f172a;
}

.atlasMiModeloTooltip {
	position: relative;
}

.atlasMiModeloTooltip::after {
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	z-index: 20;
	width: 300px;
	max-width: min(300px, 42vw);
	padding: 10px 12px;
	border: 1px solid #334155;
	border-radius: 8px;
	background: #020617;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .34);
	color: #dbeafe;
	content: attr(data-tooltip);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
	opacity: 0;
	pointer-events: none;
	text-align: left;
	transform: translateY(-50%) translateX(-4px);
	transition: opacity .12s ease, transform .12s ease;
	white-space: pre-line;
}

.atlasMiModeloTooltip:hover::after,
.atlasMiModeloTooltip:focus-visible::after {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

.atlasMiModeloKpis span {
	display: block;
	margin-bottom: 1px;
	color: #94a3b8;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.15;
}

.atlasMiModeloKpis strong {
	display: block;
	color: #f8fafc;
	font-size: 13px;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.atlasMiModeloEmpty {
	padding: 12px;
	border: 1px dashed #334155;
	border-radius: 8px;
	color: #94a3b8;
	font-size: 13px;
}

.atlasMiModeloTable {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

.atlasMiModeloTable th,
.atlasMiModeloTable td {
	padding: 8px;
	border-bottom: 1px solid #1e293b;
	color: #dbeafe;
	text-align: right;
	white-space: nowrap;
}

.atlasMiModeloTable th:first-child,
.atlasMiModeloTable td:first-child {
	text-align: left;
}

.atlasMiModeloTable th {
	position: sticky;
	top: 0;
	background: #0f172a;
	color: #f8fafc;
	z-index: 1;
}

.atlasMiModeloTable td span {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 7px;
	border-radius: 999px;
	vertical-align: -1px;
}

@media (max-width: 1180px) {
	.atlasMiModeloSuperior {
		grid-template-columns: minmax(300px, 350px) minmax(0, 1fr);
	}
}

@media (max-width: 980px) {
	.mainNav {
		position: absolute;
		left: 14px;
		right: 14px;
		top: 76px;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 10px;
		border: 1px solid var(--line);
		border-radius: 14px;
		background: var(--paper);
		box-shadow: var(--shadow);
	}

	.mainNav.isOpen {
		display: flex;
	}

	.mainNav a {
		width: 100%;
		min-height: 44px;
		display: flex;
		align-items: center;
		padding: 12px;
		border-radius: 8px;
	}

	.mainNav a:hover {
		background: var(--soft-green);
	}

	.menuBtn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 42px;
	}

	.heroGrid,
	.twoCol,
	.contactGrid,
	.platformLayout {
		grid-template-columns: 1fr;
	}

	.cardGrid.four,
	.cardGrid.three,
	.cardGrid.modules {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footerGrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.accountHero {
		align-items: flex-start;
		flex-direction: column;
	}

	.accountGrid {
		grid-template-columns: 1fr;
	}

	.projectDetailLayout {
		grid-template-columns: 1fr;
	}

	.projectViewer {
		min-height: 520px;
	}

	.atlasMiSide {
		top: 64px;
		bottom: 104px;
		width: min(240px, calc(100% - 28px));
	}

	.projectChecks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.atlasMiModeloBox {
		width: min(760px, 96vw);
		height: min(900px, 96vh);
	}

	.atlasMiModeloSuperior {
		grid-template-columns: 1fr;
		grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.siteHeader {
		height: 66px;
		gap: 10px;
		padding: 0 14px;
	}

	.brand {
		flex: 0 0 auto;
		font-size: 21px;
	}

	.headerActions {
		flex: 0 1 auto;
		justify-content: flex-end;
		gap: 8px;
		min-width: 0;
	}

	.headerActions .btn,
	.menuBtn {
		min-height: 44px;
		padding: 10px 12px;
		white-space: nowrap;
	}

	.mainNav {
		top: 70px;
		left: 10px;
		right: 10px;
		max-height: calc(100vh - 84px);
		overflow-y: auto;
	}

	.sectionBand {
		padding: 58px 0;
	}

	.cardGrid.four,
	.cardGrid.three,
	.cardGrid.modules {
		grid-template-columns: 1fr;
	}

	.visualDummy,
	.heroVisual,
	.mapVisual,
	.platformVisual,
	.founderVisual {
		min-height: 240px;
	}

	.buttonRow {
		flex-direction: column;
		align-items: stretch;
	}

	.projectCardHead {
		flex-direction: column;
	}

	.projectCardCompact {
		grid-template-columns: 1fr;
		align-items: stretch;
	}

	.formGridTwo {
		grid-template-columns: 1fr;
	}

	.projectStatusCompact {
		justify-self: start;
	}

	.projectCompactActions {
		justify-content: stretch;
	}

	.projectCompactActions .btn,
	.projectCompactActions .inlineForm {
		width: 100%;
	}

	.projectChecks {
		grid-template-columns: 1fr;
	}

	.accountTerrainItem {
		align-items: stretch;
		flex-direction: column;
	}

	.projectDetailPage {
		padding-top: 28px;
	}

	.projectViewerPage {
		min-height: calc(100vh - 66px);
		padding-top: 0;
	}

	.projectViewerPage .atlasMiViewer {
		height: calc(100vh - 66px);
		min-height: calc(100vh - 66px);
	}

	.projectViewer {
		min-height: 420px;
	}

	.atlasMiViewer {
		min-height: 620px;
	}

	.atlasMiTopbar {
		align-items: center;
		flex-direction: row;
	}

	.atlasMiTopActions {
		width: auto;
	}

	.atlasMiTopActions button,
	.atlasMiTopActions a {
		min-height: 32px;
		padding: 7px 10px;
	}

	.visorFloatingTools {
		top: 76px;
		left: 10px;
		width: min(300px, calc(100vw - 20px));
	}

	.atlasMiHeaderPanels {
		left: 14px;
		right: 14px;
		justify-items: stretch;
		width: auto;
	}

	.visorFloatingTools .atlasMiHeaderPanels {
		left: 0;
		right: auto;
		width: 100%;
	}

	.atlasMiField {
		grid-template-columns: 1fr 92px auto;
	}

	.atlasMiHistogram {
		top: 112px;
		padding: 10px;
	}

	.atlasMiRendimiento {
		top: 112px;
		padding: 10px;
	}

	.atlasMiAcumulada {
		top: 112px;
		padding: 10px;
	}

	.histView {
		gap: 14px;
		padding: 16px;
	}

	.histStats {
		grid-template-columns: 1fr;
	}

	.histStat {
		min-height: 88px;
	}

	.histChartCard {
		padding: 14px 10px 10px;
	}

	.histChartMeta {
		align-items: flex-start;
		gap: 10px;
	}

	.histLegend {
		font-size: 10px;
	}

	.histCanvasWrap {
		min-height: 340px;
	}

	.acumView {
		gap: 14px;
		padding: 16px;
	}

	.acumChartCard {
		padding: 14px 10px 10px;
	}

	.acumHeader {
		flex-direction: column;
	}

	.curvaAcumuladaBody {
		grid-template-columns: 1fr;
	}

	.acumChartMeta {
		align-items: flex-start;
		gap: 10px;
	}

	.acumCanvasWrap {
		min-height: 320px;
	}

	.atlasMiSide {
		top: 118px;
		bottom: 104px;
	}

	.atlasMiTables {
		top: 118px;
		left: 14px;
		right: 14px;
		width: auto;
	}

	.atlasMiRangosTop {
		align-items: flex-start;
		flex-direction: column;
		gap: 4px;
	}

	.viewerLayerButtons {
		right: 14px;
	}

	.viewerLayerButtons button {
		flex: 1 1 auto;
	}
}

@media (max-width: 430px) {
	.siteHeader {
		padding: 0 10px;
	}

	.brand {
		font-size: 20px;
	}

	.headerActions {
		gap: 6px;
	}

	.headerActions .btn,
	.menuBtn {
		min-height: 44px;
		padding: 9px 10px;
		font-size: 13px;
	}
}

/* DXF preparation guide */
.dxfHelpPage {
	padding: 48px 0 72px;
	background: #f5f7f8;
}

.dxfHelpHero,
.dxfHelpFooterAction {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.dxfHelpHero h1 {
	max-width: 820px;
	margin: 4px 0 12px;
	font-size: clamp(32px, 5vw, 54px);
	line-height: 1.06;
}

.dxfHelpHero p:not(.eyebrow) {
	max-width: 760px;
	margin: 0;
	color: #51606a;
	font-size: 18px;
	line-height: 1.65;
}

.dxfHelpLegend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 26px;
}

.dxfHelpTag {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	min-height: 28px;
	margin: 0;
	padding: 4px 10px;
	border: 1px solid #ccd5da;
	border-radius: 999px;
	background: #fff;
	color: #40505a;
	font-size: 12px;
	font-weight: 700;
}

.dxfHelpTag.isRequired {
	border-color: #efb2ad;
	background: #fff4f2;
	color: #8b2d25;
}

.dxfHelpTag.isRecommended {
	border-color: #a9cfb9;
	background: #f0f9f3;
	color: #22613b;
}

.dxfHelpTag.isNotValidated {
	border-color: #b8c7d3;
	background: #f2f6f9;
	color: #415a6b;
}

.dxfHelpIntro {
	margin-top: 28px;
	padding-top: 28px;
	padding-bottom: 28px;
	border-top: 1px solid #d7dfe3;
	border-bottom: 1px solid #d7dfe3;
}

.dxfHelpIntro h2,
.dxfHelpSection h2,
.dxfHelpFooterAction h2 {
	margin: 0;
}

.dxfHelpIntro p {
	max-width: 920px;
	margin: 10px 0 0;
	color: #40505a;
	font-size: 17px;
	line-height: 1.7;
}

.dxfHelpVideoSection {
	margin-top: 28px;
}

.dxfHelpVideoFrame {
	display: grid;
	place-items: center;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid #d4dde1;
	border-radius: 8px;
	background: #eef3f6;
}

.dxfHelpVideoFrame video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.dxfHelpVideoPlaceholder {
	padding: 24px;
	color: #40505a;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

.dxfHelpContent {
	display: grid;
	gap: 0;
	margin-top: 18px;
}

.dxfHelpSection {
	padding: 34px 0;
	border-bottom: 1px solid #d7dfe3;
}

.dxfHelpSection > header {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	margin-bottom: 20px;
}

.dxfHelpSection > header > span {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #123d35;
	color: #fff;
	font-weight: 800;
}

.dxfHelpSection header p {
	margin: 5px 0 0;
	color: #687780;
}

.dxfHelpSection ul,
.dxfHelpSection ol {
	margin: 0;
	padding-left: 24px;
}

.dxfHelpSection li {
	margin: 9px 0;
	line-height: 1.55;
}

.dxfHelpSection code,
.dxfUploadSummary code {
	padding: 2px 5px;
	border-radius: 4px;
	background: #e9eef0;
	color: #183e37;
	font-family: Consolas, monospace;
	font-size: .92em;
}

.dxfHelpNotice {
	margin: 18px 0;
	padding: 14px 16px;
	border-left: 4px solid #718591;
	background: #eef3f6;
	color: #334750;
	line-height: 1.55;
}

.dxfHelpNotice.isRequired {
	border-left-color: #b84438;
	background: #fff2f0;
	color: #6f2b25;
}

.dxfHelpNotice.isNotValidated {
	border-left-color: #607d8b;
}

.dxfHelpLegalArea {
	margin: 16px 0;
	padding: 28px;
	border: 1px solid #e3aaa5;
	border-radius: 8px;
	background: #fffafa;
}

.dxfHelpExample {
	display: grid;
	gap: 7px;
	max-width: 560px;
	margin-top: 18px;
	padding: 16px;
	border: 1px solid #d4dde1;
	border-radius: 7px;
	background: #fff;
}

.dxfHelpExample span,
.dxfHelpExample small {
	color: #63737c;
}

.dxfHelpExample code {
	padding: 10px;
	font-size: 16px;
}

.dxfHelpColumns,
.dxfHelpChecklist,
.dxfHelpSteps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 28px;
}

.dxfHelpChecklist {
	list-style: none;
	padding: 0 !important;
}

.dxfHelpChecklist li {
	position: relative;
	padding: 10px 12px 10px 42px;
	border: 1px solid #d6dee2;
	border-radius: 6px;
	background: #fff;
}

.dxfHelpChecklist li::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 13px;
	width: 17px;
	height: 17px;
	border: 2px solid #789087;
	border-radius: 3px;
}

.dxfHelpErrors {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.dxfHelpErrors article {
	padding: 16px;
	border: 1px solid #d8dfe2;
	border-radius: 7px;
	background: #fff;
}

.dxfHelpErrors p {
	margin: 7px 0 0;
	color: #5c6a72;
	line-height: 1.5;
}

.dxfHelpFooterAction {
	margin-top: 34px;
	padding-top: 28px;
	border-top: 1px solid #cfd9dd;
}

.dxfHelpFooterAction p {
	margin: 7px 0 0;
	color: #5d6c74;
}

.dxfUploadHeading {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 7px;
}

.dxfUploadHeading a {
	font-size: 13px;
	font-weight: 700;
}

.dxfUploadSummary {
	display: grid !important;
	gap: 5px;
	margin-top: 10px;
	padding: 11px 12px;
	border: 1px solid #d7e0dc;
	border-radius: 6px;
	background: #f4f8f6;
}

.dxfUploadSummary strong {
	color: #24453d;
}

.dxfUploadSummary small {
	position: relative;
	padding-left: 15px;
	color: #52665f;
}

.dxfUploadSummary small::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 2px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #39735e;
}

.dxfUploadGuideNote {
	margin-top: 7px;
	font-size: 12px !important;
	font-style: italic;
}

@media (max-width: 780px) {
	.dxfHelpPage {
		padding-top: 28px;
	}

	.dxfHelpHero,
	.dxfHelpFooterAction {
		align-items: flex-start;
		flex-direction: column;
	}

	.dxfHelpHero h1 {
		font-size: 34px;
	}

	.dxfHelpLegalArea {
		padding: 22px 18px;
	}

	.dxfHelpColumns,
	.dxfHelpChecklist,
	.dxfHelpSteps,
	.dxfHelpErrors {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.dxfHelpHero h1 {
		font-size: 30px;
	}

	.dxfHelpSection > header {
		grid-template-columns: 34px minmax(0, 1fr);
	}

	.dxfHelpSection > header > span {
		width: 32px;
		height: 32px;
	}

	.dxfUploadHeading {
		align-items: flex-start;
		flex-direction: column;
	}
}

.geoCompact {
	display: grid;
	gap: 7px;
	min-width: 190px;
}

.geoProgress {
	display: grid;
	gap: 4px;
	font-size: 12px;
}

.geoProgressRow {
	display: flex;
	align-items: center;
	gap: 8px;
}

.geoProgressRow progress {
	width: 145px;
	height: 8px;
	accent-color: #39735e;
}

.geoResult {
	color: #39735e;
}

.geoResult.isError {
	color: #a43c32;
}

.technicalEditorPage {
	min-height: calc(100vh - 80px);
	padding: 28px 0 44px;
	background: #eef2f2;
}

.technicalEditorHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 18px;
}

.technicalEditorIdentity {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	color: #253a40;
}

.technicalEditorIdentity span {
	font-weight: 500;
	color: #52656c;
}

.technicalEditorShell {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	min-height: 620px;
	padding: 0;
	overflow: hidden;
	border: 1px solid #cad5d8;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 16px 40px rgba(20, 42, 48, .12);
}

.technicalEditorPanel {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 20px;
	border-right: 1px solid #d5dddf;
	background: #f8faf9;
}

.technicalEditorActions {
	display: grid;
	gap: 9px;
}

.technicalLayers {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 14px;
	border: 1px solid #d2dcda;
	border-radius: 7px;
}

.technicalLayers legend {
	padding: 0 5px;
	font-weight: 700;
}

.technicalLayers label {
	display: flex;
	align-items: center;
	gap: 8px;
}

.technicalEditorViewer {
	position: relative;
	min-width: 0;
	min-height: 620px;
	overflow: hidden;
	background: #0d171d;
}

.technicalEditorCanvas {
	display: block;
	width: 100%;
	height: 100%;
}

.technicalEditorViewer .viewerPlaceholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	z-index: 1;
	color: #d8e4e1;
	pointer-events: none;
}

@media (max-width: 780px) {
	.technicalEditorHeader {
		align-items: flex-start;
		flex-direction: column;
	}

	.technicalEditorShell {
		grid-template-columns: 1fr;
	}

	.technicalEditorPanel {
		border-right: 0;
		border-bottom: 1px solid #d5dddf;
	}

	.technicalEditorViewer {
		min-height: 480px;
	}
}

.tooltipWrap{
	position:relative;
	display:inline-block;
}

.civilmxTooltip{
	position:absolute;
	left:0;
	bottom:calc(100% + 12px);

	width:320px;
	max-width:min(320px, calc(100vw - 40px));

	padding:12px 14px;
	background:#111827;
	color:#fff;

	font-size:14px;
	line-height:1.45;

	border-radius:10px;
	box-shadow:0 10px 30px rgba(0,0,0,.25);

	opacity:0;
	visibility:hidden;
	pointer-events:none;

	transition:opacity .18s ease;
	z-index:1000;
}

.civilmxTooltip strong{
	display:block;
	margin-bottom:6px;
	font-size:15px;
}

.civilmxTooltip::after{
	content:"";
	position:absolute;
	top:100%;
	left:28px;

	border:8px solid transparent;
	border-top-color:#111827;
}

.tooltipWrap:hover .civilmxTooltip{
	opacity:1;
	visibility:visible;
}

.solutionsHead{
	max-width:800px;
	margin-bottom:34px;
}

.solutionsHead h2{
	max-width:760px;
}

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

.solutionCard{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	min-height:100%;
	padding:32px;
	border:1px solid rgba(15, 35, 48, .14);
	border-radius:18px;
	background:#ffffff;
	box-shadow:0 12px 32px rgba(15, 35, 48, .06);
}

.solutionNumber{
	margin:0 0 18px;
	font-size:13px;
	font-weight:800;
	letter-spacing:.14em;
	color:#168b73;
}

.solutionCard h3{
	margin:0 0 14px;
	font-size:25px;
}

.solutionCard > p:not(.solutionNumber){
	margin:0 0 20px;
	line-height:1.65;
}

.solutionCard ul{
	margin:0 0 28px;
	padding-left:20px;
	line-height:1.8;
}

.solutionCard .btn,
.solutionCard .tooltipWrap{
	margin-top:auto;
}

@media (max-width:760px){
	.solutionsGrid{
		grid-template-columns:1fr;
	}

	.solutionCard{
		padding:24px;
	}
}

/* Confirmación de procesamiento desde Mis Terrenos */
.processTerrainButton{
	font-weight:800;
	letter-spacing:.025em;
}

.processTerrainDialog{
	width:min(720px,calc(100% - 28px));
	max-height:calc(100vh - 32px);
	padding:0;
	border:0;
	border-radius:18px;
	background:#fff;
	box-shadow:0 28px 80px rgba(6,24,34,.28);
}

.processTerrainDialog::backdrop{
	background:rgba(6,24,34,.62);
	backdrop-filter:blur(3px);
}

.processTerrainDialogPanel{
	padding:26px;
}

.processTerrainDialogHeader{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:20px;
}

.processTerrainDialogHeader h2{
	margin:2px 0 0;
}

.processTerrainDialogClose{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	padding:0;
	border:1px solid var(--line);
	border-radius:50%;
	background:#fff;
	color:var(--ink);
	font:inherit;
	font-size:25px;
	cursor:pointer;
}

.processTerrainLevelChoices{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:12px;
	margin:18px 0 4px;
	padding:0;
	border:0;
}

.processTerrainLevelChoices legend{
	grid-column:1/-1;
	margin-bottom:2px;
	color:var(--ink);
	font-weight:800;
}

.processTerrainLevelChoices label{
	display:flex;
	align-items:flex-start;
	gap:10px;
	padding:14px;
	border:1px solid var(--line);
	border-radius:12px;
	background:#fff;
	cursor:pointer;
}

.processTerrainLevelChoices label:has(input:checked){
	border-color:var(--green);
	background:rgba(19,135,105,.08);
	box-shadow:0 0 0 2px rgba(19,135,105,.10);
}

.processTerrainLevelChoices input{
	margin-top:3px;
	accent-color:var(--green);
}

.processTerrainLevelChoices span,
.processTerrainLevelChoices small{
	display:block;
}

.processTerrainLevelChoices small{
	margin-top:5px;
	color:var(--muted);
}

.processTerrainNumbers{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:12px;
	margin:20px 0;
}

.processTerrainNumbers div{
	display:grid;
	gap:4px;
	padding:14px;
	border-radius:12px;
	background:rgba(15,35,48,.045);
}

.processTerrainNumbers span{
	color:var(--muted);
	font-size:12px;
	font-weight:700;
	text-transform:uppercase;
}

.processTerrainNumbers strong span{
	color:inherit;
	font-size:inherit;
	text-transform:none;
}

.processTerrainRate{
	margin:-4px 0 20px;
	color:var(--muted);
	font-size:14px;
	line-height:1.55;
}

.processTerrainPurchaseOptions{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:10px;
}

.processTerrainPurchaseOptions .btn{
	text-align:center;
}

@media (max-width:620px){
	.processTerrainDialogPanel{
		padding:20px;
	}

	.processTerrainNumbers,
	.processTerrainPurchaseOptions,
	.processTerrainLevelChoices{
		grid-template-columns:1fr;
	}

	.processTerrainDialog .buttonRow,
	.processTerrainDialog .buttonRow .btn{
		width:100%;
	}
}

.solutionMoreLink {
	margin-top: 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--green-dark);
	text-decoration: underline;
	text-decoration-color: rgba(13, 95, 76, .35);
	text-underline-offset: 4px;
}

.solutionMoreLink:hover {
	text-decoration-color: currentColor;
}

.interiorHero {
	padding: 68px 0 64px;
	background: linear-gradient(180deg, #eaf6f2 0%, var(--bg) 100%);
}

.interiorHeroCopy {
	max-width: 940px;
}

.interiorHero h1 {
	margin-bottom: 14px;
	font-size: clamp(40px, 6vw, 66px);
}

.interiorBackLink {
	display: inline-flex;
	margin-bottom: 32px;
	font-size: 14px;
	font-weight: 700;
	color: var(--green-dark);
}

.interiorBackLink:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.interiorHeadline {
	max-width: 820px;
	margin-bottom: 18px;
	font-size: clamp(23px, 3vw, 34px);
	font-weight: 700;
	line-height: 1.18;
}

.interiorFlow {
	display: grid;
	grid-template-columns: auto 24px auto 24px auto 24px auto;
	align-items: center;
	gap: 8px;
	margin-top: 34px;
	padding: 20px 24px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: rgba(255, 255, 255, .82);
	font-size: 14px;
	font-weight: 700;
}

.interiorFlowArrow {
	color: var(--green);
	text-align: center;
}

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

.interiorContentCard,
.serviceStep,
.interiorOptionGrid article {
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--paper);
	box-shadow: 0 10px 28px rgba(16, 32, 42, .06);
}

.interiorContentCard h2 {
	font-size: clamp(25px, 3vw, 34px);
}

.interiorList,
.serviceStep ul {
	margin: 0;
	padding-left: 20px;
	color: var(--muted);
}

.interiorList li,
.serviceStep li {
	margin-bottom: 8px;
}

.interiorModuleGrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.interiorModuleGrid article {
	display: grid;
	gap: 7px;
	padding: 20px;
	border: 1px solid #cfe1dd;
	border-radius: 13px;
	background: var(--paper);
}

.interiorModuleGrid strong,
.serviceStep > span {
	font-size: 13px;
	letter-spacing: .1em;
	color: var(--green);
}

.interiorModuleGrid span,
.interiorOptionGrid p {
	color: var(--muted);
}

.interiorNotice {
	margin: 24px 0 0;
	padding: 16px 18px;
	border-left: 4px solid var(--green);
	background: var(--soft-green);
	color: #294a43;
}

.interiorAudienceGrid,
.interiorOptionGrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.interiorAudienceGrid p {
	margin: 0;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: 13px;
	background: var(--paper);
}

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

.serviceStep h3 {
	margin: 8px 0 16px;
	font-size: 24px;
}

.interiorOptionGrid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.interiorOptionGrid article {
	box-shadow: none;
}

.interiorCta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
	padding: 38px;
	border: 1px solid #c9dfd9;
	border-radius: 18px;
	background: var(--paper);
}

.interiorCta h2 {
	margin-bottom: 10px;
}

.interiorCta p:last-child {
	margin-bottom: 0;
	color: var(--muted);
}

.interiorCta .buttonRow {
	flex: 0 0 auto;
	margin-top: 0;
}

@media (max-width: 900px) {
	.interiorFlow {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.interiorFlowArrow {
		transform: rotate(90deg);
	}

	.interiorModuleGrid,
	.interiorAudienceGrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.interiorCta {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (max-width: 640px) {
	.interiorHero {
		padding: 48px 0;
	}

	.interiorBackLink {
		margin-bottom: 24px;
	}

	.interiorContentGrid,
	.interiorModuleGrid,
	.interiorAudienceGrid,
	.interiorOptionGrid,
	.serviceSequence {
		grid-template-columns: 1fr;
	}

	.interiorContentCard,
	.serviceStep,
	.interiorOptionGrid article,
	.interiorCta {
		padding: 22px;
	}

	.interiorCta .buttonRow,
	.interiorCta .btn,
	.interiorCta .tooltipWrap {
		width: 100%;
	}
}

.comparisonSection {
	background: #f1f7f5;
	border-top: 1px solid #dce9e6;
	border-bottom: 1px solid #dce9e6;
}

.comparisonIntro {
	max-width: 880px;
}

.comparisonIntro p:not(.eyebrow) {
	color: var(--muted);
}

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

.comparisonCard {
	padding: 26px;
	border: 1px solid var(--line);
	border-radius: 15px;
	background: var(--paper);
}

.comparisonCardCivilmx {
	border-color: #a9d1c6;
}

.comparisonCard h3 {
	margin-bottom: 14px;
}

.comparisonCard ul {
	margin: 0;
	padding-left: 20px;
	color: var(--muted);
}

.comparisonCard li + li {
	margin-top: 8px;
}

.comparisonCard p {
	margin-bottom: 0;
	color: var(--muted);
}

.comparisonHighlight {
	margin: 28px 0;
	padding: 28px 30px;
	border-left: 5px solid var(--green);
	border-radius: 0 14px 14px 0;
	background: var(--soft-green);
	font-size: clamp(22px, 3vw, 31px);
	font-weight: 800;
	line-height: 1.25;
}

.comparisonHighlight p {
	max-width: 820px;
	margin: 12px 0 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
	color: #34554e;
}

.comparisonDevelopment {
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: 15px;
	background: var(--paper);
}

.comparisonDevelopment > p {
	max-width: 900px;
	color: var(--muted);
}

.comparisonDevelopment .solutionMoreLink,
.comparisonDevelopment .btn {
	display: inline-flex;
	margin-top: 18px;
}

.comparisonFlow {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 22px;
	margin: 24px 0;
}

.comparisonFlow span {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
	padding: 14px;
	border: 1px solid #cfe1dd;
	border-radius: 11px;
	background: var(--paper);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

.comparisonFlow span:not(:last-child)::after {
	content: "→";
	position: absolute;
	left: calc(100% + 7px);
	color: var(--green);
}

.comparisonMetrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-top: 22px;
}

.comparisonMetrics div {
	padding: 15px;
	border: 1px solid #cfe1dd;
	border-radius: 11px;
	background: #f8fbfa;
	font-size: 14px;
	font-weight: 700;
}

.comparisonStatement {
	margin: 28px 0;
	padding: 28px 30px;
	border-left: 5px solid var(--green);
	border-radius: 0 14px 14px 0;
	background: var(--soft-green);
}

.comparisonStatement strong {
	display: block;
	max-width: 900px;
	font-size: clamp(22px, 3vw, 31px);
	line-height: 1.25;
}

.comparisonStatement p {
	max-width: 800px;
	margin: 12px 0 0;
	color: #34554e;
}

.comparisonOwner {
	display: grid;
	grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
	gap: 28px;
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: 15px;
	background: var(--paper);
}

.comparisonOwner h3 {
	font-size: 24px;
}

.comparisonOwner .solutionMoreLink,
.comparisonOwner .btn {
	margin-top: 8px;
}

.comparisonCaveat {
	font-weight: 700;
	color: #34554e;
}

.comparisonSteps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 24px;
}

.comparisonSteps article {
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: 13px;
	background: var(--paper);
}

.comparisonSteps span {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .1em;
	color: var(--green);
}

.comparisonSteps p {
	margin: 10px 0 0;
	font-weight: 700;
}

.comparisonAudience {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

@media (max-width: 900px) {
	.comparisonSteps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.comparisonFlow {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.comparisonFlow span:not(:last-child)::after {
		top: calc(100% + 1px);
		left: 50%;
		transform: translateX(-50%) rotate(90deg);
	}

	.comparisonMetrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.comparisonOwner {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

@media (max-width: 640px) {
	.comparisonGrid,
	.comparisonSteps,
	.comparisonAudience,
	.comparisonMetrics {
		grid-template-columns: 1fr;
	}

	.comparisonCard,
	.comparisonHighlight,
	.comparisonDevelopment,
	.comparisonStatement,
	.comparisonOwner,
	.comparisonSteps article {
		padding: 22px;
	}
}

.solutionsSection{
	overflow:hidden;
}

.solutionsHead{
	max-width:900px;
	margin-bottom:38px;
}

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

.solutionCardVisual{
	position:relative;
	display:flex;
	flex-direction:column;
	padding:0;
	overflow:hidden;
	background:#fff;
	border:1px solid rgba(15,35,48,.13);
	border-radius:22px;
	box-shadow:0 18px 45px rgba(15,35,48,.08);
	transition:
		transform .35s ease,
		box-shadow .35s ease,
		border-color .35s ease;
	will-change:transform;
}

.solutionCardVisual::after{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	background:linear-gradient(
		115deg,
		transparent 25%,
		rgba(255,255,255,.20) 45%,
		transparent 65%
	);
	transform:translateX(-120%);
	transition:transform .8s ease;
}

.solutionCardVisual:hover{
	transform:translateY(-8px);
	border-color:rgba(22,139,115,.32);
	box-shadow:0 28px 60px rgba(15,35,48,.15);
}

.solutionCardVisual:hover::after{
	transform:translateX(120%);
}

.solutionImageWrap{
	position:relative;
	aspect-ratio:16 / 9;
	overflow:hidden;
	background:#dce9e6;
}

.solutionImage{
	display:block;
	width:100%;
	height:112%;
	object-fit:cover;
	transform:scale(1.08);
	transform-origin:center center;
	transition:transform .8s cubic-bezier(.2,.7,.2,1);
	will-change:transform;
}

.solutionCardVisual.is-visible .solutionImage{
	transform:scale(1);
}

.solutionCardVisual:hover .solutionImage{
	transform:scale(1.06);
}

.solutionNumberOverlay{
	position:absolute;
	top:18px;
	left:18px;
	z-index:2;
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:58px;
	height:48px;
	margin:0;
	padding:0 15px;
	color:#fff;
	background:rgba(0,126,96,.92);
	border:1px solid rgba(255,255,255,.32);
	border-radius:13px;
	box-shadow:0 10px 24px rgba(0,0,0,.18);
	backdrop-filter:blur(8px);
}

.solutionCardBody{
	display:flex;
	flex:1;
	flex-direction:column;
	align-items:flex-start;
	padding:30px 32px 34px;
}

.solutionCardBody h3{
	margin:0 0 14px;
	font-size:27px;
}

.solutionCardBody > p{
	margin:0 0 20px;
	line-height:1.65;
}

.solutionCardBody ul{
	margin:0 0 28px;
	padding-left:21px;
	line-height:1.85;
}

.solutionButton{
	display:inline-flex;
	align-items:center;
	gap:10px;
	margin-top:auto;
}

.solutionButton span{
	font-size:19px;
	transition:transform .22s ease;
}

.solutionButton:hover span{
	transform:translateX(5px);
}

@media (max-width:820px){
	.solutionsGrid{
		grid-template-columns:1fr;
	}

	.solutionCardBody{
		padding:25px;
	}
}

@media (prefers-reduced-motion:reduce){
	.solutionCardVisual,
	.solutionImage,
	.solutionButton span,
	.solutionCardVisual::after{
		transition:none;
		transform:none;
	}
}

/* Solicitudes y pagos de créditos */
.creditsPaymentsPage,
.creditsPaymentsAdminPage{
	padding-bottom:72px;
}

.creditsPaymentsHero,
.creditsPaymentsHeading{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
}

.creditsPaymentsHero>div:first-child,
.creditsPaymentsHeading>div:first-child{
	max-width:720px;
}

.creditsPaymentsContent,
.creditsPaymentRequestSummary{
	padding-top:8px;
}

.creditsPaymentsList,
.creditsAccountPayments{
	display:grid;
	gap:18px;
}

.creditsAccountRequestHeader,
.creditsAccountPaymentHeading,
.creditsPaymentCardHeader{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:18px;
}

.creditsAccountRequestHeader span:first-child,
.creditsPaymentCardHeader span:first-child,
.creditsPaymentRequestSummary span{
	display:block;
	color:var(--muted);
	font-size:12px;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:uppercase;
}

.creditsAccountRequestHeader h2,
.creditsPaymentCardHeader h2{
	margin:4px 0 0;
}

.creditsAccountRequestDate{
	margin:8px 0 18px;
	color:var(--muted);
	font-size:13px;
}

.creditsAccountPayment,
.creditsAccountPaymentEmpty{
	padding:16px;
	border:1px solid rgba(15,35,48,.1);
	border-radius:12px;
	background:rgba(15,35,48,.025);
}

.creditsAccountPayment>p{
	margin:14px 0 0;
	color:var(--muted);
}

.creditsPaymentStatus{
	display:inline-flex;
	align-items:center;
	min-height:30px;
	padding:5px 10px;
	border-radius:999px;
	background:rgba(15,35,48,.08);
	color:#243746;
	font-size:12px;
	font-weight:800;
	white-space:nowrap;
}

.creditsPaymentStatus.is-pendiente,
.creditsPaymentStatus.is-request{
	background:#fff4cc;
	color:#785900;
}

.creditsPaymentStatus.is-confirmado{
	background:#d9f5e9;
	color:#0d684b;
}

.creditsPaymentStatus.is-cancelado,
.creditsPaymentStatus.is-reembolsado{
	background:#fce1de;
	color:#9b2c22;
}

.creditsPaymentDetails{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:10px;
	margin:16px 0 0;
}

.creditsPaymentDetails div{
	padding:12px;
	border-radius:10px;
	background:rgba(15,35,48,.045);
}

.creditsPaymentDetails dt{
	color:var(--muted);
	font-size:11px;
	font-weight:700;
	text-transform:uppercase;
}

.creditsPaymentDetails dd{
	margin:4px 0 0;
	font-weight:800;
	overflow-wrap:anywhere;
}

.creditsPaymentRequestSummary{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:14px;
	margin:22px 0;
}

.creditsPaymentRequestSummary>div{
	display:grid;
	gap:4px;
}

.creditsPaymentRequestSummary small{
	color:var(--muted);
	overflow-wrap:anywhere;
}

.creditsPaymentCreate,
.creditsPaymentCard{
	margin:18px 0;
}

.creditsPaymentCard.isSelected{
	border-color:rgba(22,121,87,.42);
	box-shadow:0 15px 38px rgba(15,35,48,.08);
}

.creditsPaymentFields{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:12px;
}

.creditsPaymentCreate select,
.creditsPaymentAction select{
	width:100%;
}

.creditsPaymentActions{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:16px;
	margin-top:18px;
}

.creditsPaymentAction{
	max-width:none;
	padding:16px;
	border:1px solid rgba(15,35,48,.1);
	border-radius:12px;
	background:rgba(15,35,48,.025);
}

.creditsPaymentAction h3{
	margin:0;
}

.creditsPaymentRefund{
	margin-top:18px;
}

.creditsPaymentRefund summary{
	cursor:pointer;
	font-weight:800;
}

.creditsPaymentsRecent{
	margin-top:42px;
}

@media (max-width:760px){
	.creditsPaymentsHero,
	.creditsPaymentsHeading,
	.creditsAccountRequestHeader,
	.creditsPaymentCardHeader{
		align-items:stretch;
		flex-direction:column;
	}

	.creditsPaymentsHero .buttonRow .btn,
	.creditsPaymentsHeading .btn{
		width:100%;
	}

	.creditsPaymentDetails,
	.creditsPaymentRequestSummary,
	.creditsPaymentFields,
	.creditsPaymentActions{
		grid-template-columns:1fr;
	}
}


/* ================================
   PANEL DE DIAGNÓSTICO GEO
   ================================ */

.geoProcesoEstado{

    min-height:110px;
    max-height:260px;

    margin-top:12px;
    padding:12px 14px;

    overflow-y:auto;

    white-space:pre-wrap;
    overflow-wrap:anywhere;

    border:1px solid #cfd8dc;
    border-radius:8px;

    background:#f8fafb;

    font-family:Consolas, Monaco, monospace;
    font-size:13px;
    line-height:1.45;

}

.geoProcesoEstado.ok{

    background:#f5fcf7;
    border-color:#8ec9a0;
    color:#155724;

}

.geoProcesoEstado.error{

    background:#fff4f4;
    border-color:#d58b8b;
    color:#922020;

}/* CivilMX - mejoras de accesibilidad y claridad para acceso/registro */
.authCardFriendly { max-width: 620px; }
.authMainButton { width: 100%; min-height: 50px; font-size: 16px; }
.authSteps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:20px 0 24px; }
.authSteps span { display:flex; align-items:center; gap:7px; padding:10px; border:1px solid var(--line); border-radius:10px; color:var(--muted); font-size:12px; font-weight:700; background:#fbfefd; }
.authSteps span b { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#e8efed; color:var(--ink); }
.authSteps span.isActive { border-color:#91c8ba; background:var(--soft-green); color:var(--green-dark); }
.authSteps span.isActive b { background:var(--green); color:#fff; }
.passwordField { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:stretch; }
.passwordField input { min-width:0; }
.passwordToggle { min-width:78px; border:1px solid var(--line); border-radius:9px; padding:0 12px; background:#fff; color:var(--green-dark); font-weight:800; cursor:pointer; }
.authHelpBox { margin:16px 0; padding:16px; border:1px solid #bfded5; border-radius:12px; background:#f0f9f6; }
.authHelpBox p { margin:6px 0 14px; color:var(--muted); }
.authBrowserNote { margin:18px 0 0; padding:12px 14px; border-radius:10px; background:#f3f6f5; color:var(--muted); font-size:13px; }
.authChecklist { margin:0 0 20px; padding-left:24px; color:var(--ink); }
.authChecklist li { margin:9px 0; }
.authEmailTarget { display:grid; gap:3px; margin:18px 0; padding:14px; border:1px solid var(--line); border-radius:10px; background:#fbfefd; }
.authEmailTarget span { color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; }
.authEmailTarget strong { overflow-wrap:anywhere; font-size:18px; }
.authActionStack { display:grid; gap:10px; margin-top:20px; }
.authLinksFriendly { margin-top:22px; }
@media (max-width:620px) {
  .authSteps { grid-template-columns:1fr; }
  .passwordField { grid-template-columns:1fr; }
  .passwordToggle { min-height:42px; }
}

/* CivilMX - recuperación de contraseña */
.authCardFriendly .alertOk { line-height:1.5; }
.authCardFriendly .authHelpBox strong { display:block; }
.authCardFriendly input[type="hidden"] { display:none; }
