/* =========================================================
   EVOWEB Sistema — design tokens + app-shell
   Gradiente oficial da marca (extraído do logótipo):
   cyan #00b6f1 · azul #0037ff · roxo #652d99 · magenta #d9178b
   ========================================================= */

:root {
	--ev-cyan:    #00b6f1;
	--ev-blue:    #0037ff;
	--ev-purple:  #652d99;
	--ev-magenta: #d9178b;
	--ev-gradient: linear-gradient(120deg, #00b6f1 0%, #0037ff 34%, #652d99 68%, #d9178b 100%);

	--ev-font-display: "Space Grotesk", system-ui, sans-serif;
	--ev-font-body:    "Inter", system-ui, sans-serif;

	--ev-radius:    14px;
	--ev-radius-sm: 10px;
	--ev-sidebar-w: 244px;
}

/* Tema escuro (padrão) */
[data-tema="escuro"] {
	--ev-bg:        #0a0d1a;
	--ev-bg-2:      #0e1220;
	--ev-surface:   rgba(255,255,255,.035);
	--ev-surface-2: rgba(255,255,255,.06);
	--ev-border:    rgba(255,255,255,.09);
	--ev-border-2:  rgba(255,255,255,.16);
	--ev-text:      #e7ebf5;
	--ev-text-2:    #9aa2b8;
	--ev-text-3:    #6b7288;
	--ev-glass-blur: 14px;
}

/* Tema claro */
[data-tema="claro"] {
	--ev-bg:        #f4f6fb;
	--ev-bg-2:      #ffffff;
	--ev-surface:   #ffffff;
	--ev-surface-2: #f7f9fc;
	--ev-border:    #e4e8f0;
	--ev-border-2:  #d3d9e6;
	--ev-text:      #131829;
	--ev-text-2:    #5a6480;
	--ev-text-3:    #8a93aa;
	--ev-glass-blur: 0px;
}

* { box-sizing: border-box; }

body.evoweb-app,
body.evoweb-auth {
	margin: 0;
	font-family: var(--ev-font-body);
	background: var(--ev-bg);
	color: var(--ev-text);
	-webkit-font-smoothing: antialiased;
	line-height: 1.55;
}

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

/* ---------- Layout ---------- */
.ev-layout { display: flex; min-height: 100vh; }

.ev-sidebar {
	width: var(--ev-sidebar-w);
	flex-shrink: 0;
	background: var(--ev-bg-2);
	border-right: 1px solid var(--ev-border);
	display: flex;
	flex-direction: column;
	padding: 22px 16px;
	position: sticky;
	top: 0;
	height: 100vh;
}

.ev-brand { padding: 4px 8px 26px; }
.ev-logo  { width: 148px; height: auto; display: block; }

.ev-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }

.ev-nav-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border-radius: var(--ev-radius-sm);
	color: var(--ev-text-2);
	font-weight: 500;
	font-size: 14.5px;
	position: relative;
	transition: background .15s, color .15s;
}
.ev-nav-item:hover { background: var(--ev-surface); color: var(--ev-text); }

.ev-nav-item.is-active {
	color: #fff;
	background: var(--ev-surface-2);
}
.ev-nav-item.is-active::before {
	content: "";
	position: absolute;
	left: -16px;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 22px;
	border-radius: 0 3px 3px 0;
	background: var(--ev-gradient);
}
.ev-nav-item.is-active .ev-nav-icon svg { stroke: var(--ev-cyan); }

.ev-nav-icon svg { width: 19px; height: 19px; display: block; }

.ev-sidebar-foot { padding-top: 12px; border-top: 1px solid var(--ev-border); }

/* ---------- Topbar ---------- */
.ev-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ev-topbar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 28px;
	border-bottom: 1px solid var(--ev-border);
	background: var(--ev-bg);
	position: sticky;
	top: 0;
	z-index: 20;
}

.ev-search {
	flex: 1;
	max-width: 460px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	background: var(--ev-surface);
	border: 1px solid var(--ev-border);
	border-radius: 999px;
}
.ev-search svg { width: 17px; height: 17px; stroke: var(--ev-text-3); flex-shrink: 0; }
.ev-search input {
	border: 0; outline: 0; background: transparent; color: var(--ev-text);
	font: inherit; width: 100%;
}
.ev-search input::placeholder { color: var(--ev-text-3); }

.ev-topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.ev-icon-btn {
	position: relative;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	background: var(--ev-surface);
	border: 1px solid var(--ev-border);
	border-radius: 11px;
	color: var(--ev-text-2);
	cursor: pointer;
	transition: color .15s, border-color .15s;
}
.ev-icon-btn:hover { color: var(--ev-text); border-color: var(--ev-border-2); }
.ev-icon-btn svg { width: 18px; height: 18px; }

.ev-badge {
	position: absolute; top: -5px; right: -5px;
	min-width: 17px; height: 17px; padding: 0 4px;
	font-size: 10.5px; font-weight: 600;
	display: grid; place-items: center;
	color: #fff; border-radius: 999px;
	background: var(--ev-magenta);
}

.ev-user { display: flex; align-items: center; gap: 10px; padding-left: 6px; }
.ev-user-avatar {
	width: 34px; height: 34px; border-radius: 50%;
	display: grid; place-items: center;
	font-weight: 600; color: #fff; font-size: 14px;
	background: var(--ev-gradient);
}
.ev-user-name { font-size: 14px; font-weight: 500; }

.ev-menu-toggle { display: none; }

/* ---------- Conteúdo ---------- */
.ev-content { padding: 30px 28px 48px; }

.ev-page-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 26px; }
.ev-page-title { font-family: var(--ev-font-display); font-size: 26px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.ev-page-sub { color: var(--ev-text-2); margin: 4px 0 0; font-size: 14.5px; }

/* Cartões de métrica */
.ev-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 26px;
}
.ev-card {
	display: flex; align-items: center; gap: 16px;
	padding: 20px;
	background: var(--ev-surface);
	border: 1px solid var(--ev-border);
	border-radius: var(--ev-radius);
	backdrop-filter: blur(var(--ev-glass-blur));
}
.ev-card-icon {
	width: 46px; height: 46px; flex-shrink: 0;
	display: grid; place-items: center;
	border-radius: 12px;
	background: var(--ev-surface-2);
	border: 1px solid var(--ev-border);
}
.ev-card-icon svg { width: 21px; height: 21px; stroke: var(--ev-cyan); }
.ev-card-body { display: flex; flex-direction: column; }
.ev-card-label { font-size: 13px; color: var(--ev-text-2); font-weight: 500; }
.ev-card-value { font-family: var(--ev-font-display); font-size: 27px; font-weight: 600; line-height: 1.15; }
.ev-card-sub { font-size: 12px; color: var(--ev-text-3); }

/* Painéis */
.ev-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ev-panel {
	padding: 22px;
	background: var(--ev-surface);
	border: 1px solid var(--ev-border);
	border-radius: var(--ev-radius);
}
.ev-panel-title { font-family: var(--ev-font-display); font-size: 16.5px; font-weight: 600; margin: 0 0 16px; }
.ev-empty { color: var(--ev-text-3); font-size: 14px; padding: 22px 0; text-align: center; }

/* Botões / formulários */
.ev-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 11px 20px;
	border-radius: var(--ev-radius-sm);
	font: 500 14.5px var(--ev-font-body);
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .12s, opacity .15s;
}
.ev-btn:active { transform: translateY(1px); }
.ev-btn-primary { background: var(--ev-gradient); color: #fff; background-size: 160% 160%; }
.ev-btn-primary:hover { opacity: .94; }

/* Erros */
.ev-error { text-align: center; padding: 80px 20px; }
.ev-error-code { font-family: var(--ev-font-display); font-size: 64px; font-weight: 700; background: var(--ev-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ev-error-title { font-family: var(--ev-font-display); font-size: 24px; margin: 8px 0 6px; }
.ev-error-sub { color: var(--ev-text-2); margin: 0 0 24px; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
	.ev-cards { grid-template-columns: repeat(2, 1fr); }
	.ev-panels { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	.ev-sidebar {
		position: fixed; z-index: 40; left: 0; top: 0;
		transform: translateX(-100%); transition: transform .22s ease;
	}
	.ev-sidebar.is-open { transform: translateX(0); }
	.ev-menu-toggle {
		display: flex; flex-direction: column; gap: 4px;
		width: 40px; height: 40px; padding: 10px;
		background: var(--ev-surface); border: 1px solid var(--ev-border);
		border-radius: 11px; cursor: pointer;
	}
	.ev-menu-toggle span { height: 2px; background: var(--ev-text); border-radius: 2px; }
	.ev-user-name { display: none; }
	.ev-content { padding: 22px 16px 40px; }
	.ev-cards { grid-template-columns: 1fr; }
}