/* ==========================================================================
   Mockups das telas do Global Max CRM (tema escuro do sistema)
   ========================================================================== */
.gm-mk {
	--mk-bg: #0B1120; --mk-rail: #0F172A; --mk-panel: #111B2E; --mk-card: #172238; --mk-line: rgba(148, 163, 184, .14);
	--mk-text: #E2E8F0; --mk-muted: #94A3B8; --mk-dim: #64748B;
	position: relative; font-family: 'Inter', system-ui, sans-serif; font-size: 11px; line-height: 1.35; color: var(--mk-text);
	padding: 18px 0 26px; user-select: none;
}
.gm-mk b { font-weight: 600; }
.gm-mk small { display: block; color: var(--mk-muted); font-size: 9.5px; }

.gm-mk-win {
	position: relative; background: var(--mk-bg); border-radius: 14px; overflow: hidden;
	border: 1px solid rgba(148, 163, 184, .22);
	box-shadow: 0 40px 80px -20px rgba(15, 23, 42, .55), 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 0 60px rgba(124, 58, 237, .18);
	transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); transition: transform .4s ease;
}
.gm-mk:hover .gm-mk-win { transform: perspective(1400px) rotateY(0) rotateX(0); }
.gm-mk-bar { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #0A0F1C; border-bottom: 1px solid var(--mk-line); }
.gm-mk-bar span { width: 8px; height: 8px; border-radius: 50%; background: #334155; }
.gm-mk-bar span:nth-child(1) { background: #EF4444; } .gm-mk-bar span:nth-child(2) { background: #F59E0B; } .gm-mk-bar span:nth-child(3) { background: #22C55E; }
.gm-mk-bar em { margin-left: 10px; font-style: normal; font-size: 10px; color: var(--mk-dim); background: #111827; padding: 3px 10px; border-radius: 6px; }

.gm-mk-app { display: grid; grid-template-columns: 44px 1fr; min-height: 330px; }
.gm-mk-rail { background: var(--mk-rail); border-right: 1px solid var(--mk-line); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; }
.gm-mk-logo { width: 22px; height: 22px; border-radius: 50%; margin-bottom: 8px; background: conic-gradient(from 90deg, #2563EB, #7C3AED, #06B6D4, #2563EB); box-shadow: 0 0 12px rgba(124, 58, 237, .5); }
.gm-mk-ri { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #64748B; }
.gm-mk-ri svg { width: 15px; height: 15px; }
.gm-mk-ri.is-on { background: linear-gradient(135deg, #2563EB, #7C3AED); color: #fff; }

.gm-mk-main { padding: 14px; min-width: 0; }
.gm-mk-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.gm-mk-h b { font-size: 14px; letter-spacing: -.01em; }
.gm-mk-h small { font-size: 10px; }

/* Badges e avatares */
.gm-mk-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.gm-mk-badge { display: inline-block; font-size: 9.5px; font-weight: 600; padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.gm-mk-badge--green { background: rgba(22, 163, 74, .18); color: #4ADE80; }
.gm-mk-badge--blue { background: rgba(37, 99, 235, .2); color: #93C5FD; }
.gm-mk-badge--orange { background: rgba(245, 158, 11, .18); color: #FBBF24; }
.gm-mk-badge--red { background: rgba(220, 38, 38, .2); color: #F87171; }
.gm-mk-badge--violet { background: rgba(124, 58, 237, .22); color: #C4B5FD; }
.gm-mk-badge--gray { background: rgba(148, 163, 184, .14); color: #CBD5E1; }
.gm-mk-av { flex: 0 0 22px; width: 22px; height: 22px; min-width: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 8.5px; font-weight: 700; color: #fff; }
.gm-mk-person { display: flex; align-items: center; gap: 7px; min-width: 0; }
.gm-mk-person > span:not(.gm-mk-av) { min-width: 0; }
.gm-mk-person b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tabela */
.gm-mk-table { background: var(--mk-panel); border: 1px solid var(--mk-line); border-radius: 10px; overflow: hidden; }
.gm-mk-tr { display: grid; grid-template-columns: var(--cols, .9fr 1.5fr 1.4fr .9fr); gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--mk-line); }
.gm-mk-tr:first-child { border-top: none; }
.gm-mk-tr--h { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--mk-muted); font-weight: 600; background: rgba(255, 255, 255, .02); }
.gm-mk-tr > span { min-width: 0; }
.gm-mk-table--os .gm-mk-tr { grid-template-columns: 2fr .7fr .9fr; }
.gm-mk-tr--total { background: rgba(37, 99, 235, .08); }
.gm-mk-tr--total span:first-child { color: #4ADE80; font-size: 10px; }
.gm-mk-tr--total span:last-child { font-weight: 700; font-size: 13px; }

/* Kanban */
.gm-mk-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.gm-mk-kpi { background: linear-gradient(135deg, #172554, #111B2E); border: 1px solid var(--mk-line); border-radius: 9px; padding: 8px 10px; }
.gm-mk-kpi b { display: block; font-size: 14px; margin-top: 2px; }
.gm-mk-kpi b.is-orange { color: #FBBF24; } .gm-mk-kpi b.is-red { color: #F87171; }
.gm-mk-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gm-mk-col { min-width: 0; }
.gm-mk-kpis > div, .gm-mk-fields > div { min-width: 0; }
.gm-mk-col { background: var(--mk-panel); border: 1px solid var(--mk-line); border-top: 2px solid #2563EB; border-radius: 9px; padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.gm-mk-col__h { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; flex-wrap: wrap; }
.gm-mk-col__h i { font-style: normal; width: 16px; height: 16px; border-radius: 50%; background: #1E3A8A; color: #BFDBFE; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; }
.gm-mk-col__h small { width: 100%; text-transform: none; letter-spacing: 0; font-weight: 400; }
.gm-mk-card { background: var(--mk-card); border: 1px solid var(--mk-line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.gm-mk-card__top { display: flex; gap: 6px; align-items: flex-start; }
.gm-mk-card__top > span:not(.gm-mk-av) { flex: 1; min-width: 0; }
.gm-mk-card__top b { display: block; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-mk-card__top em { font-style: normal; font-size: 9.5px; color: #60A5FA; white-space: nowrap; font-weight: 600; }
.gm-mk-task { font-size: 9.5px; color: #F87171; background: rgba(220, 38, 38, .1); border-radius: 5px; padding: 3px 6px; }

/* Chat */
.gm-mk-main--chat { padding: 0; }
.gm-mk-chat { display: grid; grid-template-columns: .95fr 1.3fr; height: 100%; min-height: 330px; }
.gm-mk-list { border-right: 1px solid var(--mk-line); background: var(--mk-panel); }
.gm-mk-tabs { display: flex; gap: 5px; padding: 10px 8px; }
.gm-mk-tabs span { font-size: 9.5px; padding: 3px 8px; border-radius: 99px; background: rgba(148, 163, 184, .12); color: var(--mk-muted); }
.gm-mk-tabs span.is-on { background: #2563EB; color: #fff; }
.gm-mk-conv { display: flex; gap: 7px; padding: 8px; border-top: 1px solid var(--mk-line); }
.gm-mk-conv.is-on { background: rgba(37, 99, 235, .12); }
.gm-mk-conv > span:not(.gm-mk-av) { min-width: 0; flex: 1; }
.gm-mk-conv b { display: flex; justify-content: space-between; font-size: 10.5px; }
.gm-mk-conv b em { font-style: normal; font-weight: 400; color: var(--mk-dim); font-size: 9px; }
.gm-mk-conv small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-mk-conv small.ch-wa::before { content: "● "; color: #25D366; }
.gm-mk-conv small.ch-ig::before { content: "● "; color: #E1306C; }
.gm-mk-conv small.ch-mail::before { content: "● "; color: #60A5FA; }
.gm-mk-thread { min-width: 0; display: flex; flex-direction: column; background: #0E1626 radial-gradient(circle at 20% 30%, rgba(148, 163, 184, .05) 0 2px, transparent 3px) 0 0 / 26px 26px; }
.gm-mk-thread__h { display: flex; align-items: center; gap: 7px; padding: 9px 10px; border-bottom: 1px solid var(--mk-line); background: var(--mk-panel); }
.gm-mk-thread__h small { margin-left: auto; }
.gm-mk-msgs { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.gm-mk-msg { max-width: 82%; padding: 6px 9px; border-radius: 9px; font-size: 10.5px; }
.gm-mk-msg small { font-size: 8.5px; margin-top: 2px; }
.gm-mk-msg--in { background: #1E293B; align-self: flex-start; }
.gm-mk-msg--out { background: #047857; align-self: flex-end; }
.gm-mk-msg--out small { color: #A7F3D0; }
.gm-mk-msg--doc { background: #065F46; }
.gm-mk-compose { margin: 8px; padding: 7px 10px; border-radius: 99px; background: #1E293B; color: var(--mk-dim); font-size: 9.5px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }

/* Jarvis */
.gm-mk-jarvis { background: radial-gradient(120% 90% at 50% 0%, #172554 0%, #0B1120 70%); border: 1px solid var(--mk-line); border-radius: 12px; padding: 22px 16px; text-align: center; min-height: 300px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gm-mk-kick { letter-spacing: .2em; text-transform: uppercase; font-size: 8.5px !important; }
.gm-mk-jt { font-size: 19px; letter-spacing: -.02em; line-height: 1.15; }
.gm-mk-jt span { background: linear-gradient(90deg, #38BDF8, #2563EB); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gm-mk-ask { width: 92%; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 99px; border: 1px solid rgba(96, 165, 250, .45); background: rgba(15, 23, 42, .7); box-shadow: 0 0 22px rgba(37, 99, 235, .25); text-align: left; font-size: 10.5px; }
.gm-mk-ask span { color: #60A5FA; }
.gm-mk-ask i { margin-left: auto; font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: #2563EB; display: inline-flex; align-items: center; justify-content: center; }
.gm-mk-answer { width: 92%; text-align: left; background: rgba(37, 99, 235, .1); border: 1px solid rgba(96, 165, 250, .2); border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; }
.gm-mk-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.gm-mk-chips span { font-size: 9px; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--mk-line); color: var(--mk-muted); }

/* Campos (OS) */
.gm-mk-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.gm-mk-fields > div { background: var(--mk-panel); border: 1px solid var(--mk-line); border-radius: 8px; padding: 7px 9px; }
.gm-mk-fields b { display: block; margin-top: 2px; font-size: 10.5px; }

/* Obras */
.gm-mk-ob { font-size: 10.5px; }
.gm-mk-obs { margin-top: -4px; }
.gm-mk-bars { display: grid; grid-template-columns: auto 1fr; gap: 4px 6px; align-items: center; }
.gm-mk-bars small { font-size: 8.5px; }
.gm-mk-bars span { height: 5px; border-radius: 5px; background: #1E293B; overflow: hidden; }
.gm-mk-bars i { display: block; height: 100%; background: #3B82F6; border-radius: 5px; }
.gm-mk-bars i.is-ok { background: #22C55E; } .gm-mk-bars i.is-over { background: #F59E0B; }

/* Fluxo */
.gm-mk-flow { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 6px 0; position: relative; }
.gm-mk-node { position: relative; width: 70%; background: var(--mk-card); border: 1px solid var(--mk-line); border-left: 3px solid #3B82F6; border-radius: 9px; padding: 8px 12px; }
.gm-mk-node:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -17px; width: 2px; height: 16px; background: linear-gradient(#3B82F6, #7C3AED); }
.gm-mk-node--violet { border-left-color: #8B5CF6; } .gm-mk-node--green { border-left-color: #22C55E; }
.gm-mk-node small { text-transform: uppercase; letter-spacing: .08em; font-size: 8.5px; }
.gm-mk-node b { font-size: 11px; }

/* Grid integrações */
.gm-mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gm-mk-int { background: var(--mk-card); border: 1px solid var(--mk-line); border-radius: 9px; padding: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.gm-mk-int b { font-size: 10.5px; }

/* Cards flutuantes */
.gm-mk-float {
	position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; max-width: 260px;
	background: #fff; color: #0F172A; border-radius: 12px; padding: 9px 12px 9px 9px;
	box-shadow: 0 18px 40px rgba(15, 23, 42, .22); border: 1px solid #E2E8F0;
	animation: gmMkFloat 5s ease-in-out infinite;
}
.gm-mk-float b { display: block; font-size: 12px; }
.gm-mk-float small { color: #64748B; font-size: 10.5px; }
.gm-mk-float__ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.gm-mk-float__ic svg { width: 16px; height: 16px; }
.gm-mk-float--tr { top: 0; right: -14px; }
.gm-mk-float--bl { bottom: 0; left: -22px; }
@keyframes gmMkFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .gm-mk-float { animation: none; } .gm-mk-win { transform: none; } }

/* Hero com mockup */
.gm-lp-hero__grid--mk { grid-template-columns: 1fr 1.05fr; gap: 48px; }
.gm-lp-answer-wrap { max-width: var(--gm-max); margin: 0 auto; padding: 8px 32px 0; }
.gm-lp-answer--wide { box-shadow: var(--gm-shadow-card); }
.gm-lp-answer--wide p { max-width: 980px; }

@media (max-width: 1100px) {
	.gm-mk-float--tr { right: 0; } .gm-mk-float--bl { left: 0; }
}
@media (max-width: 980px) {
	.gm-lp-hero__grid--mk { grid-template-columns: 1fr; }
	.gm-mk-win { transform: none; }
}
@media (max-width: 760px) {
	.gm-lp-answer-wrap { padding: 8px 20px 0; }
	.gm-mk { font-size: 10px; padding-bottom: 8px; }
	.gm-mk-app { grid-template-columns: 34px 1fr; min-height: 0; }
	.gm-mk-ri { width: 24px; height: 24px; } .gm-mk-ri svg { width: 13px; height: 13px; }
	.gm-mk-ri:nth-child(n+8) { display: none; }
	.gm-mk-main { padding: 10px; }
	.gm-mk-tr { grid-template-columns: 1fr 1fr; }
	.gm-mk-tr > span:nth-child(n+3) { display: none; }
	.gm-mk-table--os .gm-mk-tr { grid-template-columns: 1.6fr .8fr; }
	.gm-mk-table--os .gm-mk-tr > span:nth-child(2) { display: none; }
	.gm-mk-table--os .gm-mk-tr > span:nth-child(3) { display: block; }
	.gm-mk-kpis, .gm-mk-fields { grid-template-columns: 1fr 1fr; }
	.gm-mk-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gm-mk-board .gm-mk-col:nth-child(3) { display: none; }
	.gm-mk-chat { grid-template-columns: 1fr; }
	.gm-mk-list { display: none; }
	.gm-mk-grid { grid-template-columns: 1fr 1fr; }
	.gm-mk-node { width: 92%; }
	.gm-mk-float { max-width: 230px; padding: 7px 10px 7px 7px; }
	.gm-mk-float b { font-size: 11px; } .gm-mk-float small { font-size: 9.5px; }
	.gm-mk-float--tr { position: relative; top: auto; bottom: auto; right: auto; margin: -16px 6px 0 auto; width: max-content; }
	.gm-mk-float--bl { display: none; }
}

/* Imóveis */
.gm-mk-props { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.gm-mk-prop { background: var(--mk-card); border: 1px solid var(--mk-line); border-radius: 10px; overflow: hidden; min-width: 0; }
.gm-mk-prop__img { position: relative; height: 92px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .55); background: linear-gradient(135deg, var(--c), #0B1120); }
.gm-mk-prop__img svg { width: 34px; height: 34px; }
.gm-mk-prop__img .gm-mk-badge { position: absolute; top: 7px; left: 7px; }
.gm-mk-prop__body { padding: 8px 9px 10px; display: flex; flex-direction: column; gap: 3px; }
.gm-mk-prop__body > b { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-mk-prop__price { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin: 3px 0 4px; }
.gm-mk-prop__price em { font-style: normal; font-weight: 700; color: #60A5FA; font-size: 11.5px; white-space: nowrap; }
@media (max-width: 760px) {
	.gm-mk-props { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gm-mk-props .gm-mk-prop:nth-child(3) { display: none; }
}