/**
 * Minha Agenda Pro — Design System v2
 *
 * 1. Tokens · 2. Temas (claro/escuro) · 3. App shell · 4. Filtros
 * 5. KPIs e cards · 6. Tabelas · 7. Botões, formulários e modais
 * 8. Módulos · 9. Login · 10. Responsivo e impressão
 *
 * Regra do sistema: componentes nunca usam cor literal — só tokens,
 * para que o modo escuro funcione sem exceções.
 */

/* ==================================================================
 * 1. TOKENS
 * ================================================================== */

.emteck-dash {
	/* Marca */
	--e-azul: #0056B3;
	--e-azul-forte: #00408A;
	--e-azul-suave: #E8F1FB;

	/* Semânticas de dados (paleta reforçada para gráficos) */
	--e-verde: #0E9F6E;
	--e-verde-suave: #E3F6EE;
	--e-vermelho: #D93025;
	--e-vermelho-suave: #FDECEA;
	--e-ambar: #D97706;
	--e-ambar-suave: #FEF3C7;
	--e-roxo: #7C3AED;
	--e-roxo-suave: #F1EBFD;
	--e-ciano: #0891B2;
	--e-rosa: #DB2777;

	/* Tipografia */
	--e-fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--e-txt-xs: 11px;
	--e-txt-sm: 12.5px;
	--e-txt-md: 14px;
	--e-txt-lg: 16px;
	--e-txt-xl: 21px;
	--e-txt-2xl: 28px;

	/* Espaçamento */
	--e-esp-1: 4px;
	--e-esp-2: 8px;
	--e-esp-3: 12px;
	--e-esp-4: 16px;
	--e-esp-5: 20px;
	--e-esp-6: 24px;

	/* Formas e movimento */
	--e-raio-sm: 8px;
	--e-raio: 12px;
	--e-raio-lg: 16px;
	--e-raio-pill: 999px;
	--e-transicao: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================================================================
 * 2. TEMAS
 * ================================================================== */

.emteck-dash,
.emteck-dash[data-tema="claro"] {
	--e-fundo: #F1F4F9;
	--e-superficie: #FFFFFF;
	--e-superficie-2: #F7F9FC;
	--e-superficie-3: #EDF1F7;
	--e-borda: #E3E8EF;
	--e-borda-forte: #CDD5E0;
	--e-texto: #101828;
	--e-texto-2: #475467;
	/* #667085 garante contraste AA (4.6:1) em rótulos pequenos; o tom mais
	   claro fica só para elementos decorativos (--e-texto-4). */
	--e-texto-3: #667085;
	--e-texto-4: #98A2B3;
	--e-nav-fundo: #101828;
	--e-nav-texto: #D0D5DD;
	--e-nav-hover: rgba(255, 255, 255, .08);
	--e-sombra: 0 1px 2px rgba(16, 24, 40, .05);
	--e-sombra-md: 0 4px 12px -2px rgba(16, 24, 40, .08);
	--e-sombra-lg: 0 20px 48px -12px rgba(16, 24, 40, .25);
}

.emteck-dash[data-tema="escuro"] {
	--e-azul: #4D9BF0;
	--e-azul-forte: #7AB4F5;
	--e-azul-suave: #16283D;
	--e-verde: #34D399;
	--e-verde-suave: #10281F;
	--e-vermelho: #F87171;
	--e-vermelho-suave: #2A1614;
	--e-ambar: #FBBF24;
	--e-ambar-suave: #3A2E0F;
	--e-roxo: #A78BFA;
	--e-roxo-suave: #241C3D;
	--e-ciano: #22D3EE;
	--e-rosa: #F472B6;

	--e-fundo: #0B1220;
	--e-superficie: #141C2B;
	--e-superficie-2: #1B2436;
	--e-superficie-3: #232D42;
	--e-borda: #263145;
	--e-borda-forte: #35425C;
	--e-texto: #F2F5F9;
	--e-texto-2: #A8B3C5;
	--e-texto-3: #94A2B8;
	--e-texto-4: #6B7890;
	--e-nav-fundo: #070C16;
	--e-nav-texto: #A8B3C5;
	--e-nav-hover: rgba(255, 255, 255, .06);
	--e-sombra: 0 1px 2px rgba(0, 0, 0, .4);
	--e-sombra-md: 0 4px 14px -2px rgba(0, 0, 0, .5);
	--e-sombra-lg: 0 24px 56px -12px rgba(0, 0, 0, .7);
}

/* ==================================================================
 * 3. APP SHELL
 * ================================================================== */

.emteck-dash {
	font-family: var(--e-fonte);
	color: var(--e-texto);
	font-size: var(--e-txt-md);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

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

.emteck-app {
	display: grid;
	grid-template-columns: 244px 1fr;
	min-height: 80vh;
	background: var(--e-fundo);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio-lg);
	/* "visible" (não "hidden") de propósito: um ancestral com overflow
	   diferente de visible vira o "contêiner de rolagem" de referência do
	   position:sticky do menu lateral logo abaixo — com hidden aqui, o menu
	   nunca "gruda" de verdade porque essa caixa nunca rola de fato (ela
	   sempre mede exatamente o próprio conteúdo). Quem rola a página é o
	   documento, então o sticky precisa enxergar o documento, não este card. */
	overflow: visible;
	transition: background var(--e-transicao), border-color var(--e-transicao);
}

.emteck-sidebar {
	background: var(--e-nav-fundo);
	color: var(--e-nav-texto);
	display: flex;
	flex-direction: column;
	padding: var(--e-esp-5) var(--e-esp-3);
	gap: var(--e-esp-4);
	/* Menu fixo ao rolar a página (pedido do usuário): gruda no topo da
	   janela em vez de acompanhar o scroll do conteúdo principal. Com
	   align-self:start ele NÃO estica pra acompanhar a altura do conteúdo
	   (isso já bastava pro fundo escuro cobrir a coluna toda antes); agora
	   sua própria caixa mede 1 tela de altura e o sticky mantém essa tela
	   sempre visível, decote a decote, enquanto o resto rola por trás. */
	position: sticky;
	top: 0;
	align-self: start;
	height: 100vh;
	height: 100dvh;
	/* Compensa a perda do overflow:hidden do .emteck-app acima — sem ele,
	   os cantos retos do fundo escuro do menu passariam a aparecer por
	   cima dos cantos arredondados do card externo. */
	border-radius: var(--e-raio-lg) 0 0 var(--e-raio-lg);
}

.emteck-sidebar__marca {
	display: flex;
	align-items: center;
	gap: var(--e-esp-3);
	padding: 0 var(--e-esp-2) var(--e-esp-4);
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.emteck-sidebar__logo {
	width: 42px;
	height: 42px;
	border-radius: var(--e-raio-sm);
	background: var(--e-azul);
	color: #fff;
	font-weight: 700;
	font-size: var(--e-txt-md);
	letter-spacing: .04em;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

/* A logo completa aparece no desktop; o selo "EM" fica para a barra móvel. */
.emteck-sidebar__logo-img { width: 100%; max-width: 178px; height: auto; display: block; }
.emteck-sidebar__marca .emteck-sidebar__logo { display: none; }

.emteck-sidebar__nome { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.emteck-sidebar__nome strong { color: #fff; font-size: var(--e-txt-lg); font-weight: 700; letter-spacing: .02em; }
.emteck-sidebar__nome span { font-size: 10px; color: var(--e-texto-3); letter-spacing: .24em; text-transform: uppercase; }

/* min-height:0 é o que permite este flex item encolher e rolar por dentro
   em vez de estourar a altura fixa (100vh) do .emteck-sidebar sticky —
   sem ele, uma tela baixa com muitos itens de menu cortaria o rodapé
   (bloco da conta/Sair) pra fora da área visível. */
.emteck-sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; min-height: 0; }

.emteck-nav__item {
	display: flex;
	align-items: center;
	gap: var(--e-esp-3);
	width: 100%;
	text-align: left;
	border: 0;
	background: transparent;
	color: var(--e-nav-texto);
	font-family: inherit;
	font-size: var(--e-txt-md);
	font-weight: 500;
	padding: 10px var(--e-esp-3);
	border-radius: var(--e-raio-sm);
	cursor: pointer;
	transition: background var(--e-transicao), color var(--e-transicao);
}

.emteck-nav__item:hover { background: var(--e-nav-hover); color: #fff; }

.emteck-nav__item--ativo,
.emteck-nav__item--ativo:hover {
	background: var(--e-azul);
	color: #fff;
	box-shadow: 0 2px 8px -2px rgba(0, 86, 179, .6);
}

.emteck-nav__icone {
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: .92;
	flex: 0 0 auto;
}

.emteck-nav__icone svg { display: block; }

/* Rótulos de seção do menu lateral (Operação / Financeiro / Cadastros / Sistema)
   — só organizam visualmente, não são clicáveis nem afetam a navegação. */
.emteck-nav__rotulo {
	margin: var(--e-esp-4) 0 2px;
	padding: 0 var(--e-esp-3);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--e-texto-3);
}

.emteck-nav__rotulo:first-child { margin-top: 0; }

.emteck-sidebar__rodape {
	border-top: 1px solid rgba(255, 255, 255, .07);
	padding-top: var(--e-esp-3);
	font-size: var(--e-txt-xs);
	color: var(--e-texto-3);
	display: flex;
	flex-direction: column;
	gap: var(--e-esp-1);
}

.emteck-sidebar__rodape strong { color: var(--e-nav-texto); font-weight: 600; }
.emteck-sidebar__atualizacao { opacity: .8; }
.emteck-sidebar__auto { margin-left: 4px; opacity: .6; font-size: .9em; }

/* Bloco da conta: avatar + identificação + botão de sair */
.emteck-conta {
	display: flex;
	align-items: center;
	gap: var(--e-esp-2);
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: var(--e-raio);
	padding: 8px 9px;
	margin-top: var(--e-esp-1);
}

.emteck-conta__avatar {
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--e-azul);
	color: #fff;
	font-size: var(--e-txt-md);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: .01em;
}

.emteck-conta__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
	line-height: 1.25;
}

.emteck-conta__nome {
	font-size: var(--e-txt-sm);
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.emteck-conta__papel {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--e-texto-3);
}

/* Botão de sair: discreto em repouso, vermelho e nítido no hover */
.emteck-sair {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	border: 1px solid rgba(255, 255, 255, .14);
	background: transparent;
	color: var(--e-nav-texto);
	border-radius: var(--e-raio-sm);
	padding: 6px 10px;
	font-size: var(--e-txt-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	text-decoration: none;
	cursor: pointer;
	transition: all var(--e-transicao);
}

.emteck-sair:hover,
.emteck-sair:focus-visible {
	background: var(--e-vermelho);
	border-color: var(--e-vermelho);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 3px 10px -2px rgba(217, 48, 37, .55);
}

.emteck-sair:active { transform: translateY(0); }

.emteck-sair__icone {
	font-size: var(--e-txt-md);
	line-height: 1;
	transition: transform var(--e-transicao);
}

.emteck-sair:hover .emteck-sair__icone { transform: translateX(2px); }

.emteck-main { padding: var(--e-esp-5) var(--e-esp-6) var(--e-esp-6); min-width: 0; }

.emteck-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-esp-3);
	flex-wrap: wrap;
	margin-bottom: var(--e-esp-4);
}

.emteck-topo__titulo {
	margin: 0;
	font-size: var(--e-txt-xl);
	font-weight: 700;
	color: var(--e-texto);
	letter-spacing: -.02em;
}

/* Botão do menu (só no mobile) — cheio, com rótulo e sombra, para não
   passar despercebido em telas pequenas. */
.emteck-menu-btn {
	display: none;
	align-items: center;
	gap: 9px;
	height: 44px;
	padding: 0 16px 0 14px;
	flex: 0 0 auto;
	border: 0;
	background: var(--e-azul);
	color: #fff;
	border-radius: var(--e-raio-sm);
	font-family: inherit;
	font-size: var(--e-txt-sm);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 6px 16px -6px rgba(0, 86, 179, .85);
	transition: background var(--e-transicao), transform var(--e-transicao), box-shadow var(--e-transicao);
}

.emteck-menu-btn:hover { background: var(--e-azul-forte); }
.emteck-menu-btn:active { transform: scale(.97); }

.emteck-menu-btn__barras {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 18px;
	height: 16px;
}

.emteck-menu-btn__barras span {
	display: block;
	height: 2.5px;
	border-radius: 2px;
	background: #fff;
	transition: transform var(--e-transicao), opacity var(--e-transicao);
}

/* Com o menu aberto: vira "Fechar" em vermelho e as barras viram X */
.emteck-dash--menu .emteck-menu-btn {
	background: var(--e-vermelho);
	box-shadow: 0 6px 16px -6px rgba(217, 48, 37, .85);
}

.emteck-dash--menu .emteck-menu-btn__barras span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.emteck-dash--menu .emteck-menu-btn__barras span:nth-child(2) { opacity: 0; }
.emteck-dash--menu .emteck-menu-btn__barras span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.emteck-scrim { display: none; }

/* Botão que mostra/esconde o painel de filtros */
.emteck-filtros-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--e-borda);
	background: var(--e-superficie);
	color: var(--e-texto-2);
	border-radius: var(--e-raio-sm);
	padding: 9px 14px;
	font-family: inherit;
	font-size: var(--e-txt-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all var(--e-transicao);
}

.emteck-filtros-btn:hover { border-color: var(--e-azul); color: var(--e-azul); background: var(--e-azul-suave); }

.emteck-filtros-btn[aria-expanded="true"] {
	background: var(--e-azul);
	border-color: var(--e-azul);
	color: #fff;
}

.emteck-filtros-btn[hidden] { display: none; }
.emteck-filtros-btn__icone { font-size: var(--e-txt-md); line-height: 1; }

/* Quantos filtros estão ativos, sem precisar abrir o painel */
.emteck-filtros-btn__contador {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: var(--e-raio-pill);
	background: var(--e-azul);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
}

.emteck-filtros-btn[aria-expanded="true"] .emteck-filtros-btn__contador { background: #fff; color: var(--e-azul); }
.emteck-filtros-btn__contador[hidden] { display: none; }

.emteck-tema {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--e-borda);
	background: var(--e-superficie);
	color: var(--e-texto-2);
	border-radius: var(--e-raio-pill);
	padding: 7px 14px;
	font-family: inherit;
	font-size: var(--e-txt-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all var(--e-transicao);
}

.emteck-tema:hover { border-color: var(--e-azul); color: var(--e-azul); }
.emteck-tema__icone { font-size: var(--e-txt-md); line-height: 1; }

.emteck-alerta {
	display: none;
	border-radius: var(--e-raio);
	padding: var(--e-esp-3) var(--e-esp-4);
	margin-bottom: var(--e-esp-4);
	font-size: var(--e-txt-md);
	font-weight: 500;
	border: 1px solid transparent;
}

.emteck-alerta--ok { display: block; background: var(--e-verde-suave); color: var(--e-verde); border-color: var(--e-verde); }
.emteck-alerta--erro { display: block; background: var(--e-vermelho-suave); color: var(--e-vermelho); border-color: var(--e-vermelho); }
.emteck-alerta--info { display: block; background: var(--e-azul-suave); color: var(--e-azul); border-color: var(--e-azul); }

/* ==================================================================
 * 4. FILTROS
 * ================================================================== */

.emteck-filtros {
	background: var(--e-superficie);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio);
	box-shadow: var(--e-sombra);
	padding: var(--e-esp-4);
	margin-bottom: var(--e-esp-5);
	display: flex;
	flex-direction: column;
	gap: var(--e-esp-3);
}

.emteck-filtros[hidden] { display: none; }

/* Cada filtro é um seletor próprio que abre em popover */
.emteck-filtros__grupos {
	display: flex;
	gap: var(--e-esp-2);
	flex-wrap: wrap;
}

.emteck-filtro { position: relative; }

.emteck-filtro__botao {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--e-borda);
	background: var(--e-superficie);
	border-radius: var(--e-raio-sm);
	padding: 9px 13px;
	font-family: inherit;
	font-size: var(--e-txt-sm);
	cursor: pointer;
	transition: all var(--e-transicao);
	min-height: 42px;
}

.emteck-filtro__botao:hover { border-color: var(--e-azul); background: var(--e-azul-suave); }

.emteck-filtro__botao[aria-expanded="true"] {
	border-color: var(--e-azul);
	box-shadow: 0 0 0 3px var(--e-azul-suave);
}

.emteck-filtro__rotulo {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--e-texto-3);
}

.emteck-filtro__valor { font-weight: 700; color: var(--e-texto); }

/* Filtro em uso ganha destaque azul */
.emteck-filtro--ativo .emteck-filtro__botao { border-color: var(--e-azul); background: var(--e-azul-suave); }
.emteck-filtro--ativo .emteck-filtro__valor { color: var(--e-azul); }

.emteck-filtro__seta { font-size: 10px; color: var(--e-texto-3); }
.emteck-filtro__botao[aria-expanded="true"] .emteck-filtro__seta { transform: rotate(180deg); }

.emteck-filtro__pop {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 600;
	background: var(--e-superficie);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio);
	box-shadow: var(--e-sombra-md);
	padding: var(--e-esp-3);
	min-width: 260px;
	max-width: min(520px, 92vw);
}

.emteck-filtro__pop[hidden] { display: none; }

.emteck-filtro__campos { display: flex; align-items: center; gap: var(--e-esp-2); flex-wrap: wrap; }
.emteck-filtro__campos--coluna { flex-direction: column; align-items: stretch; }
.emteck-filtro__campos select { width: 100%; font-weight: 600; cursor: pointer; }

.emteck-filtros__linha { display: flex; align-items: center; gap: var(--e-esp-3); flex-wrap: wrap; }

.emteck-filtros__rotulo {
	flex: 0 0 66px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--e-texto-3);
}

.emteck-filtros__campos { display: flex; align-items: center; gap: var(--e-esp-2); flex-wrap: wrap; flex: 1; }

.emteck-meses { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }

.emteck-meses__aba {
	border: 1px solid var(--e-borda);
	background: var(--e-superficie);
	border-radius: var(--e-raio-sm);
	padding: 6px 13px;
	font-family: inherit;
	font-size: var(--e-txt-sm);
	font-weight: 600;
	color: var(--e-texto-2);
	cursor: pointer;
	transition: all var(--e-transicao);
}

.emteck-meses__aba:hover { border-color: var(--e-azul); color: var(--e-azul); background: var(--e-azul-suave); }

.emteck-meses__aba--ativa,
.emteck-meses__aba--ativa:hover { background: var(--e-azul); border-color: var(--e-azul); color: #fff; }

.emteck-anos__rotulo { display: none; }

.emteck-periodo { display: flex; align-items: center; gap: 6px; }
.emteck-periodo label { font-size: var(--e-txt-sm); font-weight: 600; color: var(--e-texto-2); }

.emteck-atalhos { display: flex; gap: 4px; flex-wrap: wrap; }

.emteck-dash input[type="text"],
.emteck-dash input[type="search"],
.emteck-dash input[type="number"],
.emteck-dash input[type="date"],
.emteck-dash input[type="tel"],
.emteck-dash input[type="email"],
.emteck-dash input[type="password"],
.emteck-dash select,
.emteck-dash textarea {
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio-sm);
	padding: 8px 11px;
	font-family: inherit;
	font-size: var(--e-txt-md);
	color: var(--e-texto);
	background: var(--e-superficie);
	transition: border-color var(--e-transicao), box-shadow var(--e-transicao);
	min-width: 0;
}

.emteck-dash input:focus,
.emteck-dash select:focus,
.emteck-dash textarea:focus {
	outline: none;
	border-color: var(--e-azul);
	box-shadow: 0 0 0 3px var(--e-azul-suave);
}

.emteck-dash input::placeholder { color: var(--e-texto-3); }

.emteck-filtros__campos select { font-weight: 600; min-width: 178px; cursor: pointer; }

.emteck-filtros__ativos {
	display: flex;
	align-items: center;
	gap: var(--e-esp-3);
	flex-wrap: wrap;
	border-top: 1px dashed var(--e-borda);
	padding-top: var(--e-esp-3);
}

.emteck-filtros__ativos[hidden] { display: none; }

.emteck-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }

.emteck-chip {
	border: 1px solid var(--e-azul);
	background: var(--e-azul-suave);
	color: var(--e-azul);
	border-radius: var(--e-raio-pill);
	padding: 5px 12px;
	font-family: inherit;
	font-size: var(--e-txt-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all var(--e-transicao);
}

.emteck-chip:hover { background: var(--e-azul); color: #fff; }
.emteck-chip span { opacity: .7; margin-left: 3px; }

/* ==================================================================
 * 5. KPIs E CARDS
 * ================================================================== */

.emteck-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--e-esp-4);
	margin-bottom: var(--e-esp-5);
}

.emteck-kpi {
	background: var(--e-superficie);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio);
	box-shadow: var(--e-sombra);
	padding: var(--e-esp-4) var(--e-esp-5);
	position: relative;
	overflow: hidden;
	transition: box-shadow var(--e-transicao), transform var(--e-transicao);
}

.emteck-kpi:hover { box-shadow: var(--e-sombra-md); transform: translateY(-1px); }

.emteck-kpi::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--e-texto-3);
}

.emteck-kpi--receita::before { background: var(--e-verde); }
.emteck-kpi--despesa::before { background: var(--e-vermelho); }
.emteck-kpi--resultado::before { background: var(--e-azul); }

.emteck-kpi__rotulo {
	margin: 0 0 var(--e-esp-2);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--e-texto-3);
}

.emteck-kpi__valor {
	margin: 0;
	font-size: var(--e-txt-2xl);
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.emteck-kpi--receita .emteck-kpi__valor { color: var(--e-verde); }
.emteck-kpi--despesa .emteck-kpi__valor { color: var(--e-vermelho); }
.emteck-kpi--resultado .emteck-kpi__valor { color: var(--e-azul); }

.emteck-kpi__detalhe {
	margin: var(--e-esp-2) 0 0;
	font-size: var(--e-txt-sm);
	color: var(--e-texto-2);
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	min-height: 20px;
}

/* Variante compacta: usada dentro de cards menores (ex.: Relação com
   Clientes), onde os números são contagens simples, não valores em
   reais — cabe mais coluna e menos respiro que os KPIs financeiros do
   topo. */
.emteck-kpis--compacta {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--e-esp-3);
	margin-bottom: var(--e-esp-4);
}

.emteck-kpis--compacta .emteck-kpi {
	padding: var(--e-esp-3) var(--e-esp-4);
}

.emteck-kpis--compacta .emteck-kpi__valor {
	font-size: var(--e-txt-xl);
}

.emteck-var {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	border-radius: var(--e-raio-pill);
	padding: 2px 9px;
	font-size: var(--e-txt-xs);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.emteck-var--pos { background: var(--e-verde-suave); color: var(--e-verde); }
.emteck-var--neg { background: var(--e-vermelho-suave); color: var(--e-vermelho); }
.emteck-var--neutro { background: var(--e-superficie-3); color: var(--e-texto-2); }

/* Investimentos já resgatados (inativos): linha esmaecida, mas ainda legível. */
.emteck-linha-inativa { opacity: .55; }
.emteck-linha-inativa:hover { opacity: .85; }

/* Pastilha de cor do profissional (Fase 1 da Agenda) — mesmo espírito das
   demais tabelas de cadastro, sem depender de nenhuma lib nova. */
.emteck-swatch {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid var(--e-borda);
	vertical-align: middle;
}

/* Linha de montagem dos itens de um Pacote (Fase 2 da Agenda): o select do
   serviço ocupa o espaço disponível, a quantidade fica estreita e o botão
   de adicionar no fim — não reaproveita .emteck-cadastro-form__linha porque
   aquela tem colunas de largura fixa pensadas pra código/grupo/nome. */
.emteck-pacote-item-linha {
	display: flex;
	gap: var(--e-esp-2);
	align-items: center;
	margin-bottom: var(--e-esp-2);
}
.emteck-pacote-item-linha select { flex: 1; min-width: 0; }
.emteck-pacote-item-linha input[type="number"] { width: 80px; flex: none; }

.emteck-skeleton {
	display: inline-block;
	border-radius: var(--e-raio-sm);
	background: linear-gradient(90deg, var(--e-superficie-3) 25%, var(--e-superficie-2) 50%, var(--e-superficie-3) 75%);
	background-size: 200% 100%;
	animation: emteck-shimmer 1.4s ease-in-out infinite;
}

@keyframes emteck-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.emteck-card {
	background: var(--e-superficie);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio);
	box-shadow: var(--e-sombra);
	padding: var(--e-esp-5);
	margin-bottom: var(--e-esp-5);
}

.emteck-card--wide { width: 100%; }

.emteck-card__titulo {
	margin: 0 0 var(--e-esp-4);
	font-size: var(--e-txt-lg);
	font-weight: 700;
	color: var(--e-texto);
	letter-spacing: -.01em;
}

.emteck-card__cabecalho {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--e-esp-3);
	margin-bottom: var(--e-esp-4);
}

.emteck-card__cabecalho .emteck-card__titulo { margin-bottom: 0; }

.emteck-acoes { display: flex; gap: var(--e-esp-2); flex-wrap: wrap; align-items: center; }

.emteck-graficos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
	gap: var(--e-esp-4);
	margin-bottom: var(--e-esp-5);
}

.emteck-graficos .emteck-card { margin-bottom: 0; }

.emteck-texto-apoio {
	font-size: var(--e-txt-md);
	color: var(--e-texto-2);
	margin: 0 0 var(--e-esp-4);
	max-width: 70ch;
}

/* Aviso dentro de um card — mesma linguagem visual do selo "Sem data" */
.emteck-texto-apoio--aviso {
	background: var(--e-ambar-suave);
	color: var(--e-ambar);
	border-left: 3px solid var(--e-ambar);
	padding: var(--e-esp-3) var(--e-esp-4);
	border-radius: var(--e-raio-sm);
	max-width: none;
}

/* Título secundário dentro de um card (ex.: "Restaurar backup" abaixo de
   "Backup completo do sistema"). */
.emteck-subtitulo {
	font-size: var(--e-txt-lg);
	font-weight: 700;
	color: var(--e-texto);
	margin: var(--e-esp-5) 0 var(--e-esp-3);
	padding-top: var(--e-esp-4);
	border-top: 1px solid var(--e-borda);
}

/* ==================================================================
 * 6. TABELAS
 * ================================================================== */

.emteck-tabela-toolbar { display: flex; gap: var(--e-esp-2); flex-wrap: wrap; margin-bottom: var(--e-esp-3); }
.emteck-tabela-toolbar input[type="search"] { min-width: 340px; flex: 1; }

.emteck-tabela-wrap {
	max-height: 64vh;
	overflow: auto;
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio-sm);
}

.emteck-tabela { width: 100%; border-collapse: collapse; font-size: var(--e-txt-sm); }

.emteck-tabela thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--e-superficie-2);
	text-align: left;
	padding: 11px var(--e-esp-3);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--e-texto-3);
	white-space: nowrap;
	border-bottom: 1px solid var(--e-borda);
	user-select: none;
}

.emteck-tabela th[data-orderby] { cursor: pointer; }
.emteck-tabela th[data-orderby]:hover { color: var(--e-azul); }

.emteck-tabela tbody td {
	padding: 11px var(--e-esp-3);
	border-bottom: 1px solid var(--e-borda);
	color: var(--e-texto);
	vertical-align: middle;
}

.emteck-tabela tbody tr:last-child td { border-bottom: 0; }
.emteck-tabela tbody tr { transition: background var(--e-transicao); }
.emteck-tabela tbody tr:hover { background: var(--e-superficie-2); }

.emteck-tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.emteck-vazio { text-align: center; color: var(--e-texto-3); padding: var(--e-esp-6); font-size: var(--e-txt-md); }
.emteck-nulo { color: var(--e-texto-3); }
.emteck-obs { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--e-texto-2); }

.emteck-badge {
	display: inline-block;
	border-radius: var(--e-raio-pill);
	padding: 3px 10px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* O atributo `hidden` do HTML precisa vencer o `display` acima — CSS de
   autor sempre tem prioridade sobre o `[hidden]{display:none}` padrão do
   navegador, então sem esta regra um badge com `hidden` ainda aparece
   (bug real da v2.14.1: "Configurada" e "Ainda não configurada" apareciam
   juntos no painel de Configurações PIX). */
.emteck-badge[hidden] { display: none; }

.emteck-badge--receita { background: var(--e-verde-suave); color: var(--e-verde); }
.emteck-badge--despesa { background: var(--e-vermelho-suave); color: var(--e-vermelho); }
.emteck-badge--aviso { background: var(--e-ambar-suave); color: var(--e-ambar); }

/* Coluna "Situação" de Lançamentos — combina Tipo + campo "pago" (mesmo
   conceito do Pipeline/"Valores em Aberto") num rótulo que o gestor entende
   sem precisar saber o que "receita/despesa" e "pago" significam juntos. */
.emteck-badge--situacao-ok { background: var(--e-verde-suave); color: var(--e-verde); }
.emteck-badge--situacao-aberto { background: var(--e-ambar-suave); color: var(--e-ambar); }

.emteck-col-acoes { width: 88px; text-align: center; white-space: nowrap; }

.emteck-paginacao {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-esp-3);
	flex-wrap: wrap;
	margin-top: var(--e-esp-3);
	font-size: var(--e-txt-sm);
	color: var(--e-texto-2);
}

.emteck-paginacao__botoes { display: flex; gap: var(--e-esp-2); }

/* ==================================================================
 * 7. BOTÕES, FORMULÁRIOS E MODAIS
 * ================================================================== */

.emteck-btn {
	border: 1px solid var(--e-borda);
	background: var(--e-superficie);
	color: var(--e-texto);
	border-radius: var(--e-raio-sm);
	padding: 9px 16px;
	font-family: inherit;
	font-size: var(--e-txt-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all var(--e-transicao);
}

.emteck-btn:hover:not(:disabled) { border-color: var(--e-azul); color: var(--e-azul); background: var(--e-azul-suave); }
.emteck-btn:disabled { opacity: .45; cursor: not-allowed; }

.emteck-btn--primario {
	background: var(--e-azul);
	border-color: var(--e-azul);
	color: #fff;
	box-shadow: 0 1px 3px rgba(0, 86, 179, .35);
}

.emteck-btn--primario:hover:not(:disabled) { background: var(--e-azul-forte); border-color: var(--e-azul-forte); color: #fff; }
.emteck-btn--mini { padding: 5px 11px; font-size: var(--e-txt-xs); }

/* Ação destrutiva (exclusão em lote) — mesma linguagem de cor dos badges de despesa/erro. */
.emteck-btn--perigo {
	background: var(--e-vermelho);
	border-color: var(--e-vermelho);
	color: #fff;
}
.emteck-btn--perigo:hover:not(:disabled) { background: var(--e-vermelho); border-color: var(--e-vermelho); filter: brightness(0.92); color: #fff; }

/* Card com borda de alerta — sinaliza uma área de risco (exclusão permanente). */
.emteck-card--perigo { border-left: 3px solid var(--e-vermelho); }

.emteck-lote-resultado { margin-top: var(--e-esp-4); padding-top: var(--e-esp-4); border-top: 1px dashed var(--e-borda); }
.emteck-lote-resultado[hidden] { display: none; }
#emteck-lote-resumo { font-size: var(--e-txt-md); font-weight: 600; margin: 0 0 var(--e-esp-3); }
.emteck-lote-erro { color: var(--e-vermelho); font-size: var(--e-txt-sm); margin: var(--e-esp-3) 0 0; }
.emteck-lote-erro:empty { display: none; }

/* Blocos extras dentro do módulo Clientes e Fornecedores (Fase 12 da
   Agenda, v2.36.0): tabela "Todos os cadastros" e "Unificar Contatos". */
.emteck-cadastro-lista-completa {
	margin-top: var(--e-esp-5);
	padding-top: var(--e-esp-5);
	border-top: 1px dashed var(--e-borda);
}

/* Módulo Clientes e Fornecedores em abas (Fase 14 da Agenda, v2.38.0),
   inspirado no layout do sistema de referência (MinhaAgenda) — reaproveita
   .emteck-pill e .emteck-relatorios__pills já existentes pra navegação entre
   as abas Gerenciamento/Retornos/Sumidos/Aniversários/Unificar Contatos.
   (Fichas de Anamnese virou módulo próprio no menu lateral na v2.48.0 — a
   antiga alternância .emteck-clientes-toggle não existe mais.) */

.emteck-clientes-busca-rapida { display: flex; align-items: center; gap: var(--e-esp-2); margin-bottom: var(--e-esp-4); }
.emteck-clientes-busca-rapida input[type="text"] { flex: 1; max-width: 360px; }

.emteck-btn-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--e-borda);
	background: var(--e-superficie);
	border-radius: var(--e-raio-sm);
	width: 31px;
	height: 31px;
	vertical-align: middle;
	cursor: pointer;
	font-size: var(--e-txt-md);
	line-height: 1;
	color: var(--e-texto-2);
	margin: 0 2px;
	transition: all var(--e-transicao);
}

/* SVG inline é "inline" por padrão em alguns navegadores/temas, o que pode
   colapsar a altura dentro do botão flex e deixá-lo aparentemente vazio.
   Forçar display:block (mesma solução já usada em .emteck-nav__icone svg)
   e uma cor de traço explícita evitam depender só da cascata de currentColor. */
.emteck-btn-icone svg {
	display: block !important;
	flex-shrink: 0;
	stroke: currentColor;
	width: 15px;
	height: 15px;
}

.emteck-btn-icone:hover { background: var(--e-azul-suave); border-color: var(--e-azul); color: var(--e-azul); }
.emteck-btn-icone--perigo:hover { background: var(--e-vermelho-suave); border-color: var(--e-vermelho); color: var(--e-vermelho); }

.emteck-pill {
	border: 1px solid var(--e-borda);
	background: var(--e-superficie);
	border-radius: var(--e-raio-pill);
	padding: 7px 16px;
	font-family: inherit;
	font-size: var(--e-txt-sm);
	font-weight: 600;
	color: var(--e-texto-2);
	cursor: pointer;
	transition: all var(--e-transicao);
}

.emteck-pill:hover { border-color: var(--e-azul); color: var(--e-azul); }

.emteck-pill--ativa,
.emteck-pill--ativa:hover { background: var(--e-azul); border-color: var(--e-azul); color: #fff; }

.emteck-pill--mini { padding: 5px 12px; font-size: var(--e-txt-xs); }

.emteck-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-esp-3) var(--e-esp-4); }

.emteck-form-grid label,
.emteck-campo {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: var(--e-txt-sm);
	color: var(--e-texto-2);
	min-width: 0;
}

.emteck-form-grid label span,
.emteck-campo span { font-weight: 600; }

.emteck-form-grid__larga { grid-column: 1 / -1; }

.emteck-form-erro {
	color: var(--e-vermelho);
	font-size: var(--e-txt-sm);
	font-weight: 500;
	margin: var(--e-esp-3) 0 0;
	min-height: 1em;
}

.emteck-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--e-esp-4);
}

.emteck-modal[hidden] { display: none; }

.emteck-modal__fundo { position: absolute; inset: 0; background: rgba(8, 13, 24, .6); }

.emteck-modal__caixa {
	position: relative;
	background: var(--e-superficie);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio-lg);
	box-shadow: var(--e-sombra-lg);
	width: 100%;
	max-width: 700px;
	max-height: 90vh;
	overflow: auto;
	padding: var(--e-esp-5) var(--e-esp-6);
}

.emteck-modal--largo .emteck-modal__caixa { max-width: 920px; }

.emteck-modal__cabecalho { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--e-esp-4); }
.emteck-modal__cabecalho h3 { margin: 0; font-size: var(--e-txt-lg); font-weight: 700; color: var(--e-texto); }

.emteck-modal__fechar {
	border: 0;
	background: transparent;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: var(--e-texto-3);
	padding: 0 4px;
	transition: color var(--e-transicao);
}

.emteck-modal__fechar:hover { color: var(--e-vermelho); }

.emteck-modal__rodape {
	display: flex;
	justify-content: flex-end;
	gap: var(--e-esp-2);
	margin-top: var(--e-esp-5);
	padding-top: var(--e-esp-4);
	border-top: 1px solid var(--e-borda);
}

body.emteck-modal-aberto { overflow: hidden; }

/* Variante mais larga do modal — usada pela lista de confirmação do
 * "Lançar recorrentes do mês" (Lançamentos → Recorrentes), que precisa de
 * mais espaço horizontal do que o formulário padrão. */
.emteck-modal__caixa--larga { max-width: 920px; }

.emteck-campo-checkbox {
	display: flex;
	align-items: center;
	gap: var(--e-esp-2);
	font-size: var(--e-txt-sm);
	color: var(--e-texto-2);
	font-weight: 600;
}

.emteck-campo-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--e-azul); }

/* Linhas do modal de confirmação de recorrentes: checkbox + descrição +
 * valor/data editáveis antes de confirmar o lançamento em lote. */
.emteck-recorrentes-lote { display: flex; flex-direction: column; gap: var(--e-esp-2); max-height: 50vh; overflow: auto; }

.emteck-recorrentes-lote__linha {
	display: flex;
	align-items: center;
	gap: var(--e-esp-3);
	flex-wrap: wrap;
	padding: var(--e-esp-3);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio);
	background: var(--e-superficie-2);
}

.emteck-recorrentes-lote__linha input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--e-azul); flex-shrink: 0; }
.emteck-recorrentes-lote__desc { flex: 1 1 220px; min-width: 0; font-weight: 600; color: var(--e-texto); }
.emteck-recorrentes-lote__desc small { display: block; font-weight: 400; color: var(--e-texto-3); }
.emteck-recorrentes-lote__linha input[type="number"] { width: 130px; }
.emteck-recorrentes-lote__linha input[type="date"] { width: 150px; }

/* ==================================================================
 * 8. MÓDULOS
 * ================================================================== */

.emteck-upload {
	border: 2px dashed var(--e-borda-forte);
	border-radius: var(--e-raio);
	background: var(--e-superficie-2);
	padding: var(--e-esp-6);
	text-align: center;
	cursor: pointer;
	transition: all var(--e-transicao);
	margin-bottom: var(--e-esp-4);
}

.emteck-upload:hover,
.emteck-upload--ativo { border-color: var(--e-azul); background: var(--e-azul-suave); }

.emteck-upload__icone { font-size: 30px; margin-bottom: var(--e-esp-2); }
.emteck-upload__icone svg { display: block; margin: 0 auto; color: var(--e-texto-3); }
.emteck-upload__texto { font-size: var(--e-txt-md); color: var(--e-texto-2); }
.emteck-upload__texto strong { color: var(--e-azul); }
.emteck-upload input[type="file"] { display: none; }

.emteck-upload__progresso {
	display: none;
	height: 6px;
	background: var(--e-superficie-3);
	border-radius: var(--e-raio-pill);
	margin-top: var(--e-esp-3);
	overflow: hidden;
}

.emteck-upload__progresso-barra { height: 100%; width: 0; background: var(--e-azul); transition: width .25s ease; }

.emteck-relatorios__pills { display: flex; gap: var(--e-esp-2); flex-wrap: wrap; margin-bottom: var(--e-esp-4); }

/* ---- Pipeline (kanban) + Ranking de atividade ---- */

.emteck-kanban {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--e-esp-4);
	align-items: start;
}

.emteck-kanban__coluna {
	background: var(--e-superficie-2);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio-sm);
	display: flex;
	flex-direction: column;
	min-height: 160px;
}

.emteck-kanban__cabecalho {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-esp-2);
	padding: var(--e-esp-3) var(--e-esp-4);
	border-bottom: 1px solid var(--e-borda);
}

.emteck-kanban__titulo {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--e-texto-3);
}

.emteck-kanban__titulo--vencido { color: var(--e-vermelho); }
.emteck-kanban__titulo--a-vencer { color: var(--e-ambar); }
.emteck-kanban__titulo--pago { color: var(--e-verde); }

.emteck-kanban__contagem {
	background: var(--e-superficie-3);
	color: var(--e-texto-2);
	border-radius: var(--e-raio-pill);
	padding: 1px 9px;
	font-size: 11px;
	font-weight: 700;
}

.emteck-kanban__metricas { display: flex; align-items: center; gap: 6px; }

.emteck-kanban__total {
	font-size: 11px;
	font-weight: 700;
	color: var(--e-texto-2);
	white-space: nowrap;
}

.emteck-pipeline-filtro { margin-bottom: var(--e-esp-3); }

/* Lembretes (Visão Geral) */
.emteck-lembretes__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--e-esp-5);
}

@media (max-width: 760px) {
	.emteck-lembretes__grid { grid-template-columns: minmax(0, 1fr); }
}

.emteck-lembretes__subtitulo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--e-texto-2);
	margin: 0 0 var(--e-esp-2);
	padding-bottom: var(--e-esp-2);
	border-bottom: 1px solid var(--e-borda);
}

.emteck-lembretes__subtitulo--despesa { border-bottom-color: var(--e-vermelho); }
.emteck-lembretes__subtitulo--receita { border-bottom-color: var(--e-verde); }

.emteck-lembretes__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }

.emteck-lembrete-item {
	display: flex;
	align-items: center;
	gap: var(--e-esp-2);
	padding: 7px 4px;
	border-bottom: 1px solid var(--e-borda);
	font-size: var(--e-txt-sm);
	min-width: 0;
	max-width: 100%;
}

.emteck-lembrete-item:last-child { border-bottom: 0; }

.emteck-lembrete-item--atraso { background: color-mix(in srgb, var(--e-vermelho) 8%, transparent); border-radius: var(--e-raio-sm); }

.emteck-lembrete-item__data { color: var(--e-texto-3); white-space: nowrap; font-variant-numeric: tabular-nums; flex-shrink: 0; }
/* min-width:0 é essencial aqui: sem ele, um item flex nunca encolhe além da
   largura do próprio conteúdo (comportamento padrão do flexbox), então o
   text-overflow:ellipsis abaixo nunca chega a entrar em ação — o texto
   simplesmente vaza para fora do card no mobile (bug relatado pelo usuário). */
.emteck-lembrete-item__desc { flex: 1; min-width: 0; color: var(--e-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emteck-lembrete-item__valor { font-weight: 700; color: var(--e-texto); white-space: nowrap; flex-shrink: 0; }

.emteck-lembretes__mais { font-size: 11.5px; color: var(--e-texto-3); margin: var(--e-esp-2) 0 0; }

.emteck-kanban__lista {
	display: flex;
	flex-direction: column;
	gap: var(--e-esp-3);
	padding: var(--e-esp-3);
	min-height: 120px;
	max-height: 60vh;
	overflow-y: auto;
	transition: background var(--e-transicao);
}

.emteck-kanban__lista--sobre { background: var(--e-azul-suave); }

.emteck-kanban__lista .emteck-vazio { padding: var(--e-esp-4) var(--e-esp-2); font-size: var(--e-txt-sm); }

.emteck-kanban__card {
	background: var(--e-superficie);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio-sm);
	padding: var(--e-esp-3);
	cursor: grab;
	box-shadow: var(--e-sombra);
	transition: box-shadow var(--e-transicao), opacity var(--e-transicao);
}

.emteck-kanban__card[draggable="true"]:hover { box-shadow: 0 2px 8px rgba(16, 24, 40, .08); }
.emteck-kanban__card--arrastando { opacity: .4; }

.emteck-kanban__card-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-esp-2);
	margin-bottom: var(--e-esp-2);
	font-size: var(--e-txt-sm);
}

.emteck-kanban__card-titulo {
	font-size: var(--e-txt-sm);
	font-weight: 600;
	color: var(--e-texto);
	margin-bottom: var(--e-esp-2);
	overflow-wrap: anywhere;
}

.emteck-kanban__card-info {
	display: flex;
	justify-content: space-between;
	gap: var(--e-esp-2);
	font-size: 12px;
	color: var(--e-texto-3);
}

.emteck-ranking { margin-top: var(--e-esp-4); }
.emteck-tabela--ranking td:nth-child(1) { font-weight: 700; color: var(--e-texto-3); width: 40px; }

.emteck-diario-colunas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--e-esp-4);
	align-items: start;
}

.emteck-tabela--diario .emteck-dia { width: 46px; font-weight: 600; }

.emteck-resultado-dia { display: inline-block; padding: 2px 9px; border-radius: var(--e-raio-sm); font-weight: 700; }

.emteck-diario-total {
	display: flex;
	gap: var(--e-esp-5);
	flex-wrap: wrap;
	margin-top: var(--e-esp-4);
	padding: var(--e-esp-3) var(--e-esp-4);
	background: var(--e-superficie-2);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio-sm);
	font-size: var(--e-txt-md);
}

.emteck-aberto-resumo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--e-esp-3);
	margin-bottom: var(--e-esp-4);
}

.emteck-aberto-card {
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio);
	padding: var(--e-esp-3) var(--e-esp-4);
	display: flex;
	flex-direction: column;
	gap: var(--e-esp-1);
	background: var(--e-superficie-2);
}

.emteck-aberto-card span { font-size: var(--e-txt-sm); color: var(--e-texto-3); font-weight: 600; }
.emteck-aberto-card strong { font-size: var(--e-txt-xl); font-variant-numeric: tabular-nums; }
.emteck-aberto-card--receber { border-left: 3px solid var(--e-verde); border-radius: 0 var(--e-raio) var(--e-raio) 0; }
.emteck-aberto-card--receber strong { color: var(--e-verde); }
.emteck-aberto-card--pagar { border-left: 3px solid var(--e-vermelho); border-radius: 0 var(--e-raio) var(--e-raio) 0; }
.emteck-aberto-card--pagar strong { color: var(--e-vermelho); }

.emteck-dre-wrap { overflow-x: auto; }

.emteck-tabela--dre th:first-child,
.emteck-tabela--dre td:first-child {
	position: sticky;
	left: 0;
	background: var(--e-superficie);
	min-width: 190px;
	z-index: 1;
}

.emteck-tabela--dre thead th:first-child { background: var(--e-superficie-2); z-index: 3; }

.emteck-planejamento__margem {
	font-size: var(--e-txt-sm);
	font-weight: 600;
	color: var(--e-texto-2);
	background: var(--e-superficie-2);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio-pill);
	padding: 6px 14px;
}

.emteck-situacao {
	display: block;
	padding: 9px 13px;
	border-radius: 0 var(--e-raio-sm) var(--e-raio-sm) 0;
	font-size: var(--e-txt-sm);
	font-weight: 600;
	line-height: 1.4;
}

.emteck-situacao--ok { background: var(--e-verde-suave); color: var(--e-verde); border-left: 3px solid var(--e-verde); }
.emteck-situacao--alerta { background: var(--e-vermelho-suave); color: var(--e-vermelho); border-left: 3px solid var(--e-vermelho); }

.emteck-transf-seta { color: var(--e-azul); font-weight: 700; margin-right: 3px; }

.emteck-cadastros-toolbar select { min-width: 250px; font-weight: 600; }

.emteck-cadastro-form { display: flex; flex-direction: column; gap: var(--e-esp-2); margin-bottom: var(--e-esp-3); }

.emteck-cadastro-form__linha { display: grid; grid-template-columns: 130px 1fr 1.6fr; gap: var(--e-esp-2); }
.emteck-cadastro-form__contato { grid-template-columns: 1fr 1.2fr 1.6fr; }
.emteck-cadastro-form__contato[hidden] { display: none; }

.emteck-cadastro-form__banco {
	grid-template-columns: repeat(4, 1fr);
	align-items: end;
	background: var(--e-superficie-2);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio-sm);
	padding: var(--e-esp-3);
}

.emteck-cadastro-form__banco[hidden] { display: none; }

/*
 * Blocos extras do cadastro de contato (dados de PF/PJ, endereço, PIX):
 * mesma linguagem visual "caixa" do bloco bancário, mas com grid auto-fit
 * em vez de colunas fixas — evita ter que calcular breakpoint por bloco,
 * já que o número de campos varia (4 no de documento, 7 no de endereço,
 * 2 no de PIX).
 */
.emteck-cadastro-form__extra {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	align-items: end;
	background: var(--e-superficie-2);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio-sm);
	padding: var(--e-esp-3);
}
.emteck-cadastro-form__extra[hidden] { display: none; }

/*
 * Consulta de contato (cliente/fornecedor): substitui a listagem completa
 * por uma busca — o gestor filtra por código/documento/nome/telefone e
 * abre o resultado num modal, em vez de rolar uma tabela com todo mundo.
 */
.emteck-cadastro-busca[hidden] { display: none; }
.emteck-cadastro-busca .emteck-acoes { margin-top: var(--e-esp-3); }

.emteck-busca-resultados { margin-top: var(--e-esp-4); display: flex; flex-direction: column; gap: var(--e-esp-2); }
.emteck-busca-resultados[hidden] { display: none; }

.emteck-busca-resultado-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-esp-3);
	padding: var(--e-esp-3) var(--e-esp-4);
	background: var(--e-superficie);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio-sm);
	cursor: pointer;
	text-align: left;
	width: 100%;
	font-family: inherit;
	color: inherit;
	transition: border-color var(--e-transicao);
}
.emteck-busca-resultado-item:hover { border-color: var(--e-azul); background: var(--e-azul-suave); }
.emteck-busca-resultado-item strong { display: block; }
.emteck-busca-resultado-item span { font-size: var(--e-txt-sm); color: var(--e-texto-2); }

/* Corpo do modal de detalhe do contato: grid de rótulo/valor. */
.emteck-modal-cliente-corpo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--e-esp-3) var(--e-esp-4);
	margin-bottom: var(--e-esp-4);
}
.emteck-modal-cliente-corpo dt { font-size: var(--e-txt-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--e-texto-3); margin: 0 0 2px; }
.emteck-modal-cliente-corpo dd { margin: 0; font-size: var(--e-txt-md); color: var(--e-texto); word-break: break-word; }
.emteck-modal-cliente-corpo .emteck-modal-cliente-full { grid-column: 1 / -1; }
.emteck-cadastro-form__botoes { display: flex; gap: var(--e-esp-2); grid-template-columns: none; }
.emteck-cadastro-form input[name="codigo"][readonly] {
	background: var(--e-superficie-2);
	color: var(--e-texto-3);
	cursor: not-allowed;
}
.emteck-cadastros-lista { max-height: 48vh; }

.emteck-passos {
	margin: 0;
	padding-left: var(--e-esp-5);
	display: flex;
	flex-direction: column;
	gap: var(--e-esp-3);
	font-size: var(--e-txt-md);
	color: var(--e-texto-2);
	max-width: 78ch;
}

.emteck-passos strong { color: var(--e-texto); }

.emteck-instrucoes details {
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio-sm);
	padding: var(--e-esp-3) var(--e-esp-4);
	margin-bottom: var(--e-esp-2);
	background: var(--e-superficie-2);
	transition: border-color var(--e-transicao);
}

.emteck-instrucoes summary { cursor: pointer; font-weight: 600; font-size: var(--e-txt-md); color: var(--e-texto); }
.emteck-instrucoes summary:hover { color: var(--e-azul); }
.emteck-instrucoes details[open] { border-color: var(--e-azul); }
.emteck-instrucoes details p { margin: var(--e-esp-3) 0 0; font-size: var(--e-txt-md); color: var(--e-texto-2); max-width: 74ch; }
.emteck-instrucoes details p + p { margin-top: var(--e-esp-2); }

/* Manual de Operação: caixa de pesquisa + aviso de "sem resultado". */
.emteck-manual-busca { display: flex; gap: var(--e-esp-2); align-items: center; margin-top: var(--e-esp-3); max-width: 520px; }
.emteck-manual-busca input[type="search"] { flex: 1; min-width: 0; }
.emteck-manual-vazio { margin-top: var(--e-esp-3); color: var(--e-texto-3); font-size: var(--e-txt-md); }
.emteck-manual-vazio[hidden] { display: none; }
.emteck-manual-secao[hidden] { display: none; }

/* ==================================================================
 * 9. LOGIN
 * ================================================================== */

/* --- Tela de acesso (login) — visual do site institucional --- */

.emteck-acesso {
	--a-azul: #1B2FBF;
	--a-azul-escuro: #0A1560;
	--a-ciano: #4FC3D9;
	position: relative;
	overflow: hidden;
	border-radius: var(--e-raio-lg);
	background: linear-gradient(150deg, var(--a-azul) 0%, var(--a-azul-escuro) 58%, #060B33 100%);
	padding: clamp(28px, 5vw, 64px);
	min-height: 76vh;
	/* Coluna: o conteúdo ocupa o miolo e a assinatura fica no rodapé. */
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--e-esp-5);
}

/* Halo suave que dá profundidade ao fundo */
.emteck-acesso__brilho {
	position: absolute;
	width: 620px;
	height: 620px;
	right: -180px;
	top: -240px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(79, 195, 217, .28) 0%, rgba(79, 195, 217, 0) 68%);
	pointer-events: none;
}

.emteck-acesso__conteudo {
	position: relative;
	flex: 1 1 auto;
	align-content: center;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
}

/* Coluna da marca */
.emteck-acesso__logo {
	width: 216px;
	max-width: 62%;
	height: auto;
	display: block;
	margin-bottom: var(--e-esp-6);
}

.emteck-acesso__titulo {
	margin: 0 0 var(--e-esp-4);
	font-size: clamp(30px, 4.4vw, 46px);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -.03em;
	color: #fff;
}

.emteck-acesso__titulo span {
	display: block;
	color: var(--a-ciano);
	font-weight: 500;
}

.emteck-acesso__texto {
	margin: 0 0 var(--e-esp-5);
	font-size: var(--e-txt-lg);
	line-height: 1.6;
	color: rgba(255, 255, 255, .8);
	max-width: 46ch;
}

.emteck-acesso__itens {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--e-esp-3);
}

.emteck-acesso__itens li {
	position: relative;
	padding-left: 26px;
	font-size: var(--e-txt-md);
	color: rgba(255, 255, 255, .78);
}

.emteck-acesso__itens li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--a-ciano);
	box-shadow: 0 0 0 4px rgba(79, 195, 217, .18);
}

/* Cartão de acesso */
.emteck-acesso__painel { display: flex; justify-content: center; }

.emteck-acesso__card {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 32px 64px -18px rgba(3, 8, 45, .55);
	padding: clamp(26px, 3.4vw, 40px);
	width: 100%;
	max-width: 430px;
}

.emteck-acesso__card h2 {
	margin: 0 0 6px;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #0B1220;
}

.emteck-acesso__sub {
	margin: 0 0 var(--e-esp-5);
	font-size: var(--e-txt-md);
	color: #5A6577;
}

.emteck-acesso__erro {
	background: #FDECEA;
	color: #B3261E;
	border: 1px solid #F5C2BD;
	border-radius: var(--e-raio-sm);
	padding: var(--e-esp-3);
	font-size: var(--e-txt-sm);
	font-weight: 500;
	margin-bottom: var(--e-esp-4);
}

.emteck-acesso__campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: var(--e-esp-4);
}

.emteck-acesso__campo span {
	font-size: var(--e-txt-sm);
	font-weight: 700;
	color: #344054;
	letter-spacing: .01em;
}

.emteck-acesso .emteck-acesso__campo input {
	border: 1.5px solid #DDE3EC;
	border-radius: var(--e-raio-sm);
	padding: 12px 14px;
	font-family: inherit;
	font-size: var(--e-txt-lg);
	color: #0B1220;
	background: #F8FAFD;
	transition: all var(--e-transicao);
	width: 100%;
}

.emteck-acesso .emteck-acesso__campo input:focus {
	outline: none;
	background: #fff;
	border-color: var(--a-azul);
	box-shadow: 0 0 0 4px rgba(27, 47, 191, .12);
}

.emteck-acesso__linha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-esp-3);
	flex-wrap: wrap;
	margin-bottom: var(--e-esp-5);
}

.emteck-acesso__lembrar {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: var(--e-txt-sm);
	color: #5A6577;
	font-weight: 500;
	cursor: pointer;
}

.emteck-acesso__link {
	font-size: var(--e-txt-sm);
	font-weight: 700;
	color: var(--a-azul);
	text-decoration: none;
}

.emteck-acesso__link:hover { text-decoration: underline; }

.emteck-acesso__botao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	border: 0;
	border-radius: var(--e-raio-sm);
	background: var(--a-azul);
	color: #fff;
	font-family: inherit;
	font-size: var(--e-txt-lg);
	font-weight: 700;
	padding: 14px;
	cursor: pointer;
	box-shadow: 0 10px 24px -8px rgba(27, 47, 191, .7);
	transition: all var(--e-transicao);
}

.emteck-acesso__botao:hover {
	background: #1526A3;
	transform: translateY(-1px);
	box-shadow: 0 14px 28px -8px rgba(27, 47, 191, .8);
}

.emteck-acesso__botao:active { transform: translateY(0); }
.emteck-acesso__botao span { transition: transform var(--e-transicao); }
.emteck-acesso__botao:hover span { transform: translateX(3px); }

.emteck-acesso__rodape {
	margin: var(--e-esp-5) 0 0;
	font-size: var(--e-txt-xs);
	color: #8A94A6;
	text-align: center;
	line-height: 1.5;
}

@media (max-width: 900px) {
	.emteck-acesso { padding: 28px 18px; min-height: 0; }
	.emteck-acesso__conteudo { grid-template-columns: 1fr; gap: 28px; }
	.emteck-acesso__itens { display: none; }
	.emteck-acesso__texto { font-size: var(--e-txt-md); margin-bottom: 0; }
	.emteck-acesso__logo { margin-bottom: var(--e-esp-4); }
	.emteck-acesso__brilho { width: 380px; height: 380px; right: -140px; top: -160px; }
}

/* Login antigo (compatibilidade) */
.emteck-login {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 68vh;
	padding: var(--e-esp-5);
	background: var(--e-fundo);
	border-radius: var(--e-raio-lg);
}

.emteck-login__card {
	background: var(--e-superficie);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio-lg);
	box-shadow: var(--e-sombra-md);
	padding: var(--e-esp-6);
	width: 100%;
	max-width: 400px;
}

.emteck-login__card h1 { margin: 0 0 var(--e-esp-2); font-size: var(--e-txt-xl); font-weight: 700; color: var(--e-texto); }
.emteck-login__card p { color: var(--e-texto-2); margin: 0 0 var(--e-esp-5); font-size: var(--e-txt-md); }

.emteck-login__campo {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: var(--e-esp-4);
	font-size: var(--e-txt-sm);
	font-weight: 600;
	color: var(--e-texto-2);
}

.emteck-login__lembrar {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: var(--e-txt-sm);
	color: var(--e-texto-2);
	margin-bottom: var(--e-esp-4);
	font-weight: 500;
}

.emteck-login__erro {
	background: var(--e-vermelho-suave);
	color: var(--e-vermelho);
	border: 1px solid var(--e-vermelho);
	border-radius: var(--e-raio-sm);
	padding: var(--e-esp-3);
	font-size: var(--e-txt-sm);
	margin-bottom: var(--e-esp-4);
}

.emteck-login .emteck-btn { width: 100%; padding: 11px; font-size: var(--e-txt-md); }

.emteck-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-esp-4);
	flex-wrap: wrap;
	margin-bottom: var(--e-esp-4);
}

.emteck-header__logo {
	width: 44px;
	height: 44px;
	border-radius: var(--e-raio-sm);
	background: var(--e-azul);
	color: #fff;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.emteck-header__marca { display: flex; align-items: center; gap: var(--e-esp-3); }
.emteck-header__titulo { margin: 0; font-size: var(--e-txt-lg); font-weight: 700; color: var(--e-texto); }
.emteck-header__subtitulo { margin: 0; font-size: var(--e-txt-sm); color: var(--e-texto-2); }
.emteck-header__meta { font-size: var(--e-txt-sm); color: var(--e-texto-2); text-align: right; }

/* ==================================================================
 * 10. RESPONSIVO E IMPRESSÃO
 * ================================================================== */

@media (max-width: 1100px) {
	.emteck-graficos { grid-template-columns: 1fr; }
	.emteck-kanban { grid-template-columns: 1fr; }
}

@media (max-width: 920px) {
	.emteck-app { grid-template-columns: 1fr; }

	/* ---------- Menu lateral deslizante (padrão de app móvel) ---------- */
	.emteck-menu-btn { display: inline-flex; }
	.emteck-topo__titulo { font-size: 18px; flex: 1; min-width: 0; }

	.emteck-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(288px, 82vw);
		z-index: 100000;
		transform: translateX(-101%);
		transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
		/* Reseta o sticky de desktop: no mobile a gaveta usa top/left/bottom
		   fixos (acima), então altura e cantos arredondados do menu fixo
		   não fazem sentido aqui — senão vazariam pra este modo também. */
		height: auto;
		align-self: auto;
		border-radius: 0;
		/* A gaveta não rola: quem rola é a lista de módulos, para que o
		   bloco da conta (com o botão Sair) fique sempre visível embaixo. */
		overflow: hidden;
		padding: var(--e-esp-4) var(--e-esp-3);
		gap: var(--e-esp-3);
		box-shadow: none;
	}

	.emteck-sidebar__nav {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		min-height: 0;
		flex: 1 1 auto;
	}

	.emteck-sidebar__rodape { flex: 0 0 auto; }

	.emteck-dash--menu .emteck-sidebar {
		transform: translateX(0);
		box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
	}

	/* Fundo escurecido: fecha o menu ao toque */
	.emteck-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 99990;
		background: rgba(8, 13, 24, .55);
		opacity: 0;
		pointer-events: none;
		transition: opacity 200ms ease;
	}

	.emteck-dash--menu .emteck-scrim { opacity: 1; pointer-events: auto; }

	/* Dentro da gaveta o menu mantém o layout vertical do desktop */
	.emteck-sidebar__logo-img { display: block; max-width: 160px; }
	.emteck-sidebar__marca .emteck-sidebar__logo { display: none; }
	.emteck-sidebar__nav { flex-direction: column; }
	.emteck-nav__item { width: 100%; }

	.emteck-main { padding: var(--e-esp-4) var(--e-esp-3) var(--e-esp-5); }

	/* O topo acompanha a rolagem: o botão do menu fica sempre alcançável */
	.emteck-topo {
		position: sticky;
		top: 0;
		z-index: 500;
		background: var(--e-fundo);
		padding: var(--e-esp-2) 0;
		margin: calc(var(--e-esp-2) * -1) 0 var(--e-esp-3);
		border-bottom: 1px solid var(--e-borda);
	}

	.emteck-filtros__rotulo { flex-basis: 100%; }
	.emteck-filtros__campos select { min-width: 0; flex: 1 1 150px; }

	/* Seletores de filtro ocupam a linha; o conteúdo abre como folha
	   inferior (bottom sheet), que nunca vaza para fora da tela. */
	.emteck-filtros__grupos { gap: 6px; }
	.emteck-filtro { flex: 1 1 calc(50% - 3px); position: static; }
	.emteck-filtro__botao { width: 100%; justify-content: space-between; }

	.emteck-filtro__pop {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: auto;
		min-width: 0;
		max-width: none;
		max-height: 72vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 100001;
		border: 0;
		border-radius: var(--e-raio-lg) var(--e-raio-lg) 0 0;
		box-shadow: 0 -18px 48px rgba(8, 13, 24, .38);
		padding: var(--e-esp-5) var(--e-esp-4) calc(var(--e-esp-5) + env(safe-area-inset-bottom, 0px));
		animation: emteck-sobe 220ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	/* Alça da folha, como nos apps nativos */
	.emteck-filtro__pop::before {
		content: "";
		display: block;
		width: 42px;
		height: 4px;
		border-radius: var(--e-raio-pill);
		background: var(--e-borda-forte);
		margin: -6px auto var(--e-esp-4);
	}

	/* Meses e anos em grade: cabem sem rolagem lateral */
	.emteck-filtro__pop .emteck-meses {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
	}

	.emteck-filtro__pop .emteck-meses__aba {
		width: 100%;
		min-height: 44px;
		justify-content: center;
		display: flex;
		align-items: center;
	}

	.emteck-filtro__pop .emteck-filtro__campos { flex-direction: column; align-items: stretch; gap: var(--e-esp-3); }
	.emteck-filtro__pop .emteck-periodo { flex-wrap: wrap; }
	.emteck-filtro__pop .emteck-periodo input[type="date"] { flex: 1 1 40%; }
	.emteck-filtro__pop .emteck-atalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
	.emteck-filtro__pop .emteck-atalhos .emteck-pill { justify-content: center; min-height: 40px; }
	.emteck-filtro__pop select { min-height: 44px; }

	/* Fundo escurecido reaproveitado da gaveta do menu */
	.emteck-dash--filtro .emteck-scrim { display: block; opacity: 1; pointer-events: auto; z-index: 100000; }
	.emteck-form-grid { grid-template-columns: 1fr; }
	.emteck-cadastro-form__linha,
	.emteck-cadastro-form__contato { grid-template-columns: 1fr; }
	.emteck-cadastro-form__banco { grid-template-columns: 1fr 1fr; }
	.emteck-tabela-toolbar input[type="search"] { min-width: 0; width: 100%; }
	.emteck-kpi__valor { font-size: 23px; }
	.emteck-modal__caixa { padding: var(--e-esp-4); }
}

/* Trava a rolagem do fundo com o menu aberto */
body.emteck-menu-aberto { overflow: hidden; }

/* Telas bem estreitas (até 480px) */
@media (max-width: 480px) {
	.emteck-app { border-radius: var(--e-raio); }
	.emteck-main { padding: var(--e-esp-3) var(--e-esp-2) var(--e-esp-4); }
	.emteck-topo { gap: var(--e-esp-2); }
	.emteck-topo__titulo { font-size: 18px; }
	.emteck-topo__titulo::before { height: 20px; }
	.emteck-kpis { grid-template-columns: 1fr 1fr; gap: var(--e-esp-2); }
	.emteck-kpi { padding: var(--e-esp-3); }
	.emteck-kpi__valor { font-size: 19px; }
	.emteck-filtros { padding: var(--e-esp-3); }
	.emteck-card { padding: var(--e-esp-3); }
	.emteck-tema__texto,
	.emteck-tema span:last-child { display: none; }
	.emteck-tema { padding: 8px 11px; }
	.emteck-diario-colunas { grid-template-columns: 1fr; }
}


/* ==================================================================
 * 13. IMPRESSÃO / PDF
 * ================================================================== */

/* Cabeçalho do relatório: existe apenas no papel */
.emteck-relatorio-cabecalho { display: none; }

@media print {
	body.emteck-imprimindo * { visibility: hidden; }
	body.emteck-imprimindo #emteck-dash,
	body.emteck-imprimindo #emteck-dash * { visibility: visible; }

	body.emteck-imprimindo #emteck-dash { position: absolute; inset: 0 auto auto 0; width: 100%; }
	body.emteck-imprimindo .emteck-app { display: block; border: 0; background: #fff; }
	body.emteck-imprimindo .emteck-main { padding: 0; }

	body.emteck-imprimindo .emteck-relatorio-cabecalho {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: var(--e-esp-3);
		flex-wrap: wrap;
		border-bottom: 3px solid #0056B3;
		padding-bottom: var(--e-esp-2);
		margin-bottom: var(--e-esp-4);
		font-size: var(--e-txt-sm);
		color: #101828;
	}

	body.emteck-imprimindo .emteck-relatorio-cabecalho strong { font-size: var(--e-txt-lg); }

	body.emteck-imprimindo .emteck-sidebar,
	body.emteck-imprimindo .emteck-scrim,
	body.emteck-imprimindo .emteck-menu-btn,
	body.emteck-imprimindo .emteck-filtros,
	body.emteck-imprimindo .emteck-filtros-btn,
	body.emteck-imprimindo .emteck-upload,
	body.emteck-imprimindo .emteck-acoes,
	body.emteck-imprimindo .emteck-tabela-toolbar,
	body.emteck-imprimindo .emteck-paginacao__botoes,
	body.emteck-imprimindo .emteck-col-acoes,
	body.emteck-imprimindo .emteck-alerta,
	body.emteck-imprimindo .emteck-relatorios__pills,
	body.emteck-imprimindo .emteck-modal {
		display: none !important;
	}

	body.emteck-imprimindo .emteck-graficos { display: block; }

	body.emteck-imprimindo .emteck-card,
	body.emteck-imprimindo .emteck-kpi {
		break-inside: avoid;
		page-break-inside: avoid;
		box-shadow: none;
		border: 1px solid #E3E8EF;
		margin-bottom: var(--e-esp-3);
	}

	body.emteck-imprimindo .emteck-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-esp-2); }
	body.emteck-imprimindo .emteck-tabela { font-size: 10px; }
	body.emteck-imprimindo .emteck-tabela-wrap { max-height: none; overflow: visible; border: 0; }
	body.emteck-imprimindo .emteck-tabela thead th { position: static; }
	body.emteck-imprimindo .emteck-topo { position: static; border: 0; }

	@page { size: A4 portrait; margin: 12mm; }
}


/* Entrada da folha inferior de filtros (mobile) */
@keyframes emteck-sobe {
	from { transform: translateY(14%); opacity: .4; }
	to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.emteck-filtro__pop { animation: none; }
}


/* ==================================================================
 * 14. FOLHA INFERIOR DOS FILTROS (mobile)
 *
 * Vive fora da árvore do dashboard, num contêiner próprio no <body>,
 * para não depender de overflow/z-index/transform do tema.
 * ================================================================== */

.emteck-folha-host {
	position: fixed;
	inset: 0;
	z-index: 100050;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.emteck-folha-host[hidden] { display: none; }

.emteck-folha-host__fundo {
	position: absolute;
	inset: 0;
	background: rgba(8, 13, 24, .55);
}

.emteck-folha-host__cabecalho {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-esp-3);
	background: var(--e-superficie);
	border-radius: var(--e-raio-lg) var(--e-raio-lg) 0 0;
	padding: var(--e-esp-3) var(--e-esp-4) var(--e-esp-2);
	border-bottom: 1px solid var(--e-borda);
}

.emteck-folha-host__cabecalho[hidden] { display: none; }

.emteck-folha-host__titulo {
	font-size: var(--e-txt-lg);
	font-weight: 700;
	color: var(--e-texto);
}

.emteck-folha-host__fechar {
	border: 0;
	background: var(--e-superficie-3);
	color: var(--e-texto-2);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: all var(--e-transicao);
}

.emteck-folha-host__fechar:hover { background: var(--e-vermelho); color: #fff; }

.emteck-folha-host .emteck-filtro__pop {
	position: relative;
	z-index: 2;
	flex: 0 1 auto;
	border-radius: 0;
	left: auto;
	right: auto;
	bottom: auto;
	top: auto;
	width: auto;
	min-width: 0;
	max-width: none;
	max-height: 68vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--e-superficie);
	color: var(--e-texto);
	border: 0;
	border-radius: var(--e-raio-lg) var(--e-raio-lg) 0 0;
	box-shadow: 0 -18px 48px rgba(8, 13, 24, .45);
	padding: var(--e-esp-5) var(--e-esp-4) calc(var(--e-esp-5) + env(safe-area-inset-bottom, 0px));
	animation: emteck-sobe 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

.emteck-folha-host .emteck-filtro__pop::before { display: none; }

/* Lista vertical, no formato dos seletores nativos do celular */
.emteck-folha-host .emteck-meses {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.emteck-folha-host .emteck-meses__aba {
	width: 100%;
	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--e-borda);
	border-radius: 0;
	padding: 0 var(--e-esp-3);
	font-size: var(--e-txt-lg);
	font-weight: 500;
	background: transparent;
	color: var(--e-texto);
}

.emteck-folha-host .emteck-meses__aba:last-child { border-bottom: 0; }
.emteck-folha-host .emteck-meses__aba:hover { background: var(--e-superficie-2); color: var(--e-texto); }

.emteck-folha-host .emteck-meses__aba--ativa,
.emteck-folha-host .emteck-meses__aba--ativa:hover {
	background: var(--e-azul);
	color: #fff;
	border-radius: var(--e-raio-sm);
	border-bottom-color: transparent;
	font-weight: 700;
}

/* O marcador inferior não faz sentido numa lista */
.emteck-folha-host .emteck-meses__aba::after { display: none; }

.emteck-folha-host .emteck-filtro__campos { display: flex; flex-direction: column; align-items: stretch; gap: var(--e-esp-3); }
.emteck-folha-host .emteck-periodo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.emteck-folha-host .emteck-periodo input[type="date"] { flex: 1 1 40%; min-height: 44px; }
.emteck-folha-host .emteck-atalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.emteck-folha-host .emteck-atalhos .emteck-pill { justify-content: center; min-height: 44px; }
.emteck-folha-host select { width: 100%; min-height: 46px; }

/* ==================================================================
 * 15. ASSINATURA E ITEM "SAIR" NO MENU
 * ================================================================== */

.emteck-assinatura {
	clear: both;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	flex-wrap: wrap;
	margin-top: var(--e-esp-5);
	padding-top: var(--e-esp-3);
	border-top: 1px solid var(--e-borda);
	font-size: var(--e-txt-xs);
	color: var(--e-texto-3);
	text-align: center;
}

.emteck-assinatura a { color: var(--e-texto-3); text-decoration: none; }
.emteck-assinatura a:hover { color: var(--e-azul); text-decoration: underline; }

/* No login o rodapé fica sobre o fundo azul */
.emteck-assinatura--claro {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, .12);
	margin-top: 0;
	padding-top: var(--e-esp-4);
	color: rgba(255, 255, 255, .62);
}

.emteck-assinatura--claro a { color: rgba(255, 255, 255, .78); }
.emteck-assinatura--claro a:hover { color: #fff; }

@media print {
	body.emteck-imprimindo .emteck-assinatura { display: none !important; }
}

/* Botão de instalar o aplicativo (aparece quando o navegador permite) */
.emteck-btn--instalar {
	background: var(--e-verde);
	border-color: var(--e-verde);
	color: #fff;
	font-weight: 700;
}

.emteck-btn--instalar:hover:not(:disabled) {
	background: var(--e-verde);
	border-color: var(--e-verde);
	color: #fff;
	filter: brightness(.94);
}

.emteck-btn--instalar[hidden] { display: none; }

/* Assinatura no celular: uma linha por item, sem apertar o conteúdo */
@media (max-width: 640px) {
	.emteck-assinatura {
		flex-direction: column;
		gap: 3px;
		line-height: 1.5;
	}

	.emteck-assinatura span[aria-hidden] { display: none; }
	.emteck-assinatura--claro { padding-top: var(--e-esp-3); }
}

/* Caixa que exibe a senha gerada, uma única vez */
.emteck-senha-box {
	display: flex;
	align-items: center;
	gap: var(--e-esp-2);
	background: var(--e-superficie-2);
	border: 1px dashed var(--e-borda-forte);
	border-radius: var(--e-raio-sm);
	padding: var(--e-esp-3);
	margin-bottom: var(--e-esp-3);
}

.emteck-senha-box code {
	flex: 1;
	font-size: var(--e-txt-lg);
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--e-texto);
	word-break: break-all;
}

/* Recibo PIX */
.emteck-pix-recibo { text-align: center; }

.emteck-pix-recibo__beneficiario {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--e-texto-3);
	margin: 0 0 4px;
}

.emteck-pix-recibo__valor {
	font-size: 32px;
	font-weight: 800;
	color: var(--e-azul);
	margin: 0 0 var(--e-esp-3);
}

.emteck-pix-recibo__linha { text-align: left; font-size: var(--e-txt-sm); color: var(--e-texto-2); margin: 4px 0; }
.emteck-pix-recibo__linha strong { color: var(--e-texto); }

.emteck-pix-recibo__qr {
	display: flex;
	justify-content: center;
	margin: var(--e-esp-4) 0;
	padding: var(--e-esp-3);
	background: #fff;
	border-radius: var(--e-raio-sm);
	border: 1px solid var(--e-borda);
}

.emteck-pix-recibo__rotulo {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--e-texto-3);
	margin: 0 0 6px;
}

.emteck-pix-recibo__copia {
	display: flex;
	align-items: center;
	gap: var(--e-esp-2);
	background: var(--e-superficie-2);
	border: 1px dashed var(--e-borda-forte);
	border-radius: var(--e-raio-sm);
	padding: var(--e-esp-3);
	text-align: left;
}

.emteck-pix-recibo__copia code {
	flex: 1;
	font-size: 11px;
	color: var(--e-texto-2);
	word-break: break-all;
}

/* Impressão isolada do recibo PIX — não usa o mesmo body.emteck-imprimindo
   do "Exportar PDF" (aquele imprime o painel inteiro; este imprime só o
   conteúdo do modal). */
@media print {
	body.emteck-imprimindo-pix * { visibility: hidden; }
	body.emteck-imprimindo-pix #emteck-modal-pix,
	body.emteck-imprimindo-pix #emteck-modal-pix * { visibility: visible; }
	body.emteck-imprimindo-pix #emteck-modal-pix { position: absolute; inset: 0; background: #fff; }
	body.emteck-imprimindo-pix .emteck-modal__fundo,
	body.emteck-imprimindo-pix .emteck-nao-imprimir { display: none !important; }
}


/* ---------------------------------------------------------------------
 * Agenda em grade (Fase 4 da Agenda, v2.26.0) — colunas por profissional,
 * linha do tempo vertical, blocos posicionados por horário. Substitui a
 * lista simples da primeira versão da tela, inspirada no visual do
 * sistema de referência (MinhaAgenda). As posições/alturas dos blocos são
 * calculadas em JS (minutos desde EMTECK_AGENDA_INICIO_MIN) e aplicadas
 * via style inline — o CSS aqui só cuida da moldura, cores e tipografia.
 * ------------------------------------------------------------------- */

.emteck-agenda-toolbar { flex-wrap: wrap; }

/* Legenda fixa acima da grade (Fase 34, v2.54.0) — antes o significado de
   cada cor só aparecia no tooltip (title) ao passar o mouse no bloco. */
.emteck-agenda-legenda {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-esp-3);
	margin: 0 0 var(--e-esp-2);
	font-size: var(--e-txt-xs);
	color: var(--e-texto-3);
}

.emteck-agenda-legenda__item {
	display: flex;
	align-items: center;
	gap: 5px;
}

/* Mesmo visual do badge que aparece no canto do bloco na grade
   (.emteck-agenda-bloco__status-icone), só que sem position:absolute —
   repete o círculo + ícone pra legenda e grade usarem a mesma linguagem. */
.emteck-agenda-legenda__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	flex: none;
	background: var(--e-superficie-2);
	box-shadow: 0 0 0 1px var(--e-borda);
}

.emteck-agenda-legenda__icone--concluido { color: var(--e-verde); }
.emteck-agenda-legenda__icone--cancelado { color: var(--e-texto-4); }
.emteck-agenda-legenda__icone--faltou    { color: var(--e-ambar); }

.emteck-agenda-legenda__separador { color: var(--e-borda); }
.emteck-agenda-legenda__nota { font-style: italic; }

.emteck-agenda-grade-wrap {
	overflow-x: auto;
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio-sm);
	background: var(--e-superficie);
}

.emteck-agenda-grade {
	display: grid;
	min-width: 100%;
}

.emteck-agenda-grade .emteck-vazio { padding: var(--e-esp-6); }

.emteck-agenda-cabecalho-hora {
	position: sticky;
	left: 0;
	z-index: 3;
	background: var(--e-superficie-2);
	border-right: 1px solid var(--e-borda);
	border-bottom: 1px solid var(--e-borda);
}

.emteck-agenda-cabecalho-prof {
	padding: var(--e-esp-3) var(--e-esp-2);
	border-left: 1px solid var(--e-borda);
	border-bottom: 1px solid var(--e-borda);
	background: var(--e-superficie-2);
	display: flex;
	align-items: center;
	gap: var(--e-esp-2);
	font-size: var(--e-txt-sm);
	font-weight: 700;
	color: var(--e-texto);
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 2;
}

.emteck-agenda-cabecalho-prof .emteck-swatch { flex: none; }

.emteck-agenda-coluna-horas {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--e-superficie);
	border-right: 1px solid var(--e-borda);
}

.emteck-agenda-hora-rotulo {
	position: absolute;
	right: var(--e-esp-2);
	transform: translateY(-50%);
	font-size: 10.5px;
	color: var(--e-texto-4);
	white-space: nowrap;
}

.emteck-agenda-coluna-prof {
	position: relative;
	border-left: 1px solid var(--e-borda);
	/* Linhas horizontais a cada hora, sem precisar de elemento extra por linha. */
	background-image: repeating-linear-gradient(
		to bottom,
		var(--e-borda) 0,
		var(--e-borda) 1px,
		transparent 1px,
		transparent var(--e-agenda-hora-px, 60px)
	);
}

.emteck-agenda-bloco {
	position: absolute;
	left: 3px;
	right: 3px;
	border-radius: var(--e-raio-sm);
	/* Espaço à direita reservado pro badge de status (Fase 35, v2.55.0) —
	   fixo mesmo quando não tem ícone (agendado), pra não reposicionar o
	   texto conforme o status muda. */
	padding: 3px 20px 3px 6px;
	font-size: 11px;
	line-height: 1.3;
	overflow: hidden;
	cursor: pointer;
	border: 1px solid rgba(0, 0, 0, .06);
	/* Largura/estilo fixos aqui; a COR vem inline por profissional (ver
	   desenharGradeAgenda() em emteck-dashboard.js, Fase 34, v2.54.0) —
	   inline vence só o lado esquerdo, os outros 3 continuam com a borda
	   sutil de cima. */
	border-left-width: 4px;
	border-left-style: solid;
	box-shadow: var(--e-sombra);
}

.emteck-agenda-bloco:hover { filter: brightness(0.97); }
.emteck-agenda-bloco:focus-visible { outline: 2px solid var(--e-azul); outline-offset: 1px; }

.emteck-agenda-bloco__cliente { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emteck-agenda-bloco__servico { display: block; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Badge de status no canto do card (Fase 35, v2.55.0) — antes o fundo
 * inteiro do bloco era a cor do status; agora o fundo é a categoria do
 * serviço (ver coresPorTexto() no JS), então status virou um ícone
 * pequeno: só as exceções (concluído/cancelado/faltou) aparecem, o
 * estado "agendado" (mais comum) fica sem marcador pra não poluir.
 * Fundo branco semi-opaco fixo — o ícone precisa de contraste previsível
 * mesmo em cima de qualquer matiz de categoria. */
.emteck-agenda-bloco__status-icone {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .88);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

.emteck-agenda-bloco__status-icone--concluido { color: var(--e-verde); }
.emteck-agenda-bloco__status-icone--cancelado { color: var(--e-texto-4); }
.emteck-agenda-bloco__status-icone--faltou    { color: var(--e-ambar); }

/* Cancelado ainda recebe um tratamento a mais além do ícone — "apagado"
 * e riscado deixa claro de longe que aquele horário não vale mais, sem
 * depender só do ícone pequeno no canto. */
.emteck-agenda-bloco--cancelado { opacity: .6; text-decoration: line-through; }

@media (max-width: 782px) {
	.emteck-agenda-cabecalho-prof,
	.emteck-agenda-coluna-prof { min-width: 150px; }
}

/* ---------------------------------------------------------------------
 * Horário de trabalho do profissional (modal de Profissionais)
 * ------------------------------------------------------------------- */

.emteck-horario-trabalho {
	margin-top: var(--e-esp-4);
	padding-top: var(--e-esp-4);
	border-top: 1px solid var(--e-borda);
}

.emteck-horario-trabalho__cabecalho {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-esp-2);
	font-weight: 700;
}

.emteck-horario-trabalho__linhas {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: var(--e-esp-2);
}

.emteck-horario-trabalho__linha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	padding: 6px 8px;
	background: var(--e-superficie-2);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio-sm);
}

.emteck-horario-trabalho__dia { min-width: 108px; margin: 0; }

.emteck-horario-trabalho__linha input[type="time"] {
	width: 100px;
	padding: 4px 6px;
}

.emteck-horario-trabalho__ate { color: var(--e-texto-4); }

.emteck-horario-trabalho__separador {
	margin-left: 6px;
	font-size: var(--e-txt-xs);
	color: var(--e-texto-3);
}

/* ---------------------------------------------------------------------
 * Faixas de bloqueio na grade da Agenda (fora de expediente / almoço),
 * desenhadas atrás dos blocos de agendamento — ver desenharGradeAgenda().
 * ------------------------------------------------------------------- */

.emteck-agenda-bloqueio {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 0;
	pointer-events: none;
}

/* Cores nas faixas de bloqueio (Fase 36, v2.56.0) — antes as 2 eram tons
 * de cinza quase iguais, difícil distinguir uma da outra de relance. Roxo
 * pra "fora de expediente" e âmbar pra "almoço" porque nenhum dos dois já
 * significa outra coisa nesta tela (o âmbar de "faltou" só aparece como
 * ícone pequeno dentro de um agendamento, contexto bem diferente de uma
 * faixa de fundo vazia) — vermelho ficou de fora de propósito, já é
 * reservado pra despesa/erro no resto do sistema. */
.emteck-agenda-bloqueio--fora {
	background: repeating-linear-gradient(
		45deg,
		var(--e-roxo-suave) 0,
		var(--e-roxo-suave) 6px,
		var(--e-superficie-2) 6px,
		var(--e-superficie-2) 12px
	);
}

.emteck-agenda-bloqueio--almoco {
	background: var(--e-ambar-suave);
}

.emteck-agenda-bloqueio__rotulo {
	position: sticky;
	top: 2px;
	display: block;
	padding: 2px 6px;
	font-size: 10px;
	font-weight: 600;
	color: var(--e-texto-4);
}

.emteck-agenda-bloqueio--fora .emteck-agenda-bloqueio__rotulo { color: var(--e-roxo); }
.emteck-agenda-bloqueio--almoco .emteck-agenda-bloqueio__rotulo { color: var(--e-ambar); }

.emteck-agenda-coluna-prof { position: relative; }
.emteck-agenda-bloco { z-index: 1; }

/* ---------------------------------------------------------------------
 * Comandas (Fase 5 da Agenda)
 * ------------------------------------------------------------------- */

/* Mesmo motivo do .emteck-badge[hidden] acima: .emteck-form-grid label
 * já define display:flex, que vence o [hidden] padrão do navegador — os
 * campos condicionais do formulário de item da comanda (data-campo-comanda)
 * dependem desta regra pra sumir de verdade quando o tipo muda. */
.emteck-form-grid label[hidden] { display: none; }

.emteck-comanda-resumo {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-esp-2) var(--e-esp-5);
	padding: var(--e-esp-3) var(--e-esp-4);
	background: var(--e-superficie-2);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio-sm);
	margin-bottom: var(--e-esp-4);
	font-size: var(--e-txt-sm);
}

.emteck-comanda-resumo strong { color: var(--e-texto); }

.emteck-comanda-form-item {
	margin-top: var(--e-esp-4);
	padding-top: var(--e-esp-4);
	border-top: 1px solid var(--e-borda);
}

.emteck-comanda-fechamento {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-esp-3);
	margin-top: var(--e-esp-4);
	padding-top: var(--e-esp-4);
	border-top: 1px solid var(--e-borda);
}

.emteck-comanda-fechamento select { flex: 1 1 220px; }

/* Relatório "Cobranças" — total em aberto por cliente. */
.emteck-cobrancas-lista { margin-top: var(--e-esp-4); }

.emteck-cobranca-cliente {
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio-sm);
	padding: var(--e-esp-3) var(--e-esp-4);
	margin-bottom: var(--e-esp-2);
	background: var(--e-superficie-2);
	transition: border-color var(--e-transicao);
}

.emteck-cobranca-cliente[open] { border-color: var(--e-azul); }

.emteck-cobranca-cliente summary {
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-esp-3);
}

.emteck-cobranca-nome { font-weight: 600; color: var(--e-texto); }

.emteck-cobranca-meta {
	display: flex;
	align-items: center;
	gap: var(--e-esp-3);
	font-size: var(--e-txt-sm);
	color: var(--e-texto-3);
}

.emteck-cobranca-meta strong { font-size: var(--e-txt-md); font-variant-numeric: tabular-nums; }

.emteck-cobranca-cliente .emteck-tabela-wrap { margin-top: var(--e-esp-3); }

/* Modal "Aniversariantes" (Fase 10 da Agenda) — lista simples de nome + data + WhatsApp. */
.emteck-aniversariantes-lista-itens {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--e-esp-2);
}

.emteck-aniversariante-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-esp-3);
	padding: var(--e-esp-3);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio-sm);
	background: var(--e-superficie-2);
}

.emteck-aniversariante-nome { font-weight: 600; color: var(--e-texto); }

.emteck-aniversariante-data {
	font-size: var(--e-txt-sm);
	color: var(--e-texto-3);
	margin-left: auto;
	margin-right: var(--e-esp-2);
	white-space: nowrap;
}

/* Relatórios "Retornos" e "Sumidos" (Fase 11 da Agenda) — mesma estrutura de lista simples. */
.emteck-retorno-lista {
	display: flex;
	flex-direction: column;
	gap: var(--e-esp-2);
}

.emteck-retorno-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-esp-3);
	padding: var(--e-esp-3);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio-sm);
	background: var(--e-superficie-2);
}

.emteck-retorno-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.emteck-retorno-nome { font-weight: 600; color: var(--e-texto); }

.emteck-retorno-meta {
	font-size: var(--e-txt-sm);
	color: var(--e-texto-3);
}

/* ==================================================================
 * 11. PORTAL DO CLIENTE (Fase 2, v2.44.0; ajustes visuais em 07/08/2026,
 * v2.45.2 e v2.45.3)
 *
 * v2.45.3: em vez de um layout próprio simplificado (topo + pills), o
 * Portal passou a reaproveitar LITERALMENTE o app-shell do painel da
 * equipe (.emteck-app, .emteck-sidebar, .emteck-nav__item, .emteck-conta,
 * .emteck-menu-btn, .emteck-scrim — ver seção 3 "APP SHELL" e o início
 * deste arquivo) com IDs próprios (emteck-portal-*) só pra nunca colidir
 * com o JS do painel da equipe, que nunca é carregado nesta página. Por
 * isso não há CSS novo pro menu em si — o grid de duas colunas, a barra
 * lateral escura fixa (mesma cor em qualquer tema, ver --e-nav-fundo) e a
 * gaveta deslizante no mobile já vêm de graça. Só ficam aqui: o ajuste do
 * cartão de aviso "acesso sem vínculo" (que não usa a sidebar) e os badges
 * de status do Portal (agendamento e solicitação de horário), que não
 * existiam quando os badges do painel da equipe foram criados.
 * ================================================================== */

/* Aviso de "acesso sem vínculo" (Shortcode_Portal::render() retorna cedo,
   sem sidebar) — sem o grid de .emteck-app, só centraliza o cartão. */
.emteck-portal--aviso .emteck-main {
	max-width: 480px;
	margin: var(--e-esp-6) auto;
	padding: var(--e-esp-4);
}

/* Badges de status próprios do Portal — mesma linguagem visual dos badges
   do painel da equipe (.emteck-badge--situacao-*), só que cobrindo os
   status de agendamento e de solicitação de horário, que não existiam
   ainda quando aqueles foram criados. */
.emteck-badge--portal-agendado  { background: var(--e-azul-suave);     color: var(--e-azul); }
.emteck-badge--portal-pendente  { background: var(--e-ambar-suave);    color: var(--e-ambar); }
.emteck-badge--portal-concluido,
.emteck-badge--portal-aprovado  { background: var(--e-verde-suave);    color: var(--e-verde); }
.emteck-badge--portal-cancelado,
.emteck-badge--portal-faltou,
.emteck-badge--portal-recusado  { background: var(--e-vermelho-suave); color: var(--e-vermelho); }
.emteck-badge--portal-neutro    { background: var(--e-superficie-2);   color: var(--e-texto-3); }

/* Vitrine de serviços em cards + grade de horários (Fase 30 do Portal,
   v2.50.0) — cada card de public/js/emteck-portal.js::renderServicos() já
   leva pra "Solicitar Horário" com o serviço escolhido; a grade em
   montarFormSolicitar() mostra os horários que GET /portal/horarios-
   disponiveis devolveu como livres, um botão por horário. */

.emteck-portal-servicos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--e-esp-3);
	margin-bottom: var(--e-esp-4);
	/* v2.60.0: por padrão o Grid estica cada item pra acompanhar a altura
	   do vizinho mais alto na mesma linha — quando um card tem foto (mais
	   alto) e o vizinho não tem, o card sem foto ficava esticado, com um
	   vão vazio enorme entre o título (que fica no topo) e o preço
	   (empurrado lá pra baixo por causa do margin-top:auto do rodapé).
	   align-items:start faz cada card ficar só na altura do próprio
	   conteúdo, sem esticar. Reportado pelo usuário como "o título tá
	   saindo na lateral" — print mostrou exatamente esse vão. */
	align-items: start;
}

.emteck-portal-servico-card {
	display: flex;
	flex-direction: column;
	gap: var(--e-esp-2);
	text-align: left;
	background: var(--e-superficie-2);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio);
	padding: var(--e-esp-4);
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: transform var(--e-transicao), box-shadow var(--e-transicao), border-color var(--e-transicao), background var(--e-transicao);
}

.emteck-portal-servico-card:hover,
.emteck-portal-servico-card:focus-visible {
	background: var(--e-superficie);
	border-color: var(--e-azul);
	box-shadow: var(--e-sombra-md);
	transform: translateY(-2px);
	outline: none;
}

.emteck-portal-servico-card__nome {
	font-weight: 700;
	font-size: var(--e-txt-md);
	color: var(--e-texto);
	overflow-wrap: break-word;
}

/* Foto de capa na Vitrine (v2.57.0) — mesma técnica de margem negativa do
   card equivalente no painel da equipe (.emteck-cadastro-card__foto), pra
   ficar rente às bordas/topo do card. Só existe quando o serviço tem
   alguma foto cadastrada (.emteck-portal-servico-card--com-foto); sem
   foto, o card continua exatamente como antes. Ver
   [[project-catalogo-fotos-servicos]]. */
.emteck-portal-servico-card__foto {
	display: block;
	width: calc(100% + 2 * var(--e-esp-4));
	height: 130px;
	margin: calc(-1 * var(--e-esp-4)) calc(-1 * var(--e-esp-4)) 0;
	object-fit: cover;
	border-radius: var(--e-raio) var(--e-raio) 0 0;
}

.emteck-portal-servico-card__duracao {
	align-self: flex-start;
	background: var(--e-superficie-3);
	color: var(--e-texto-3);
	font-size: var(--e-txt-xs);
	font-weight: 600;
	padding: 2px 10px;
	border-radius: var(--e-raio-pill);
}

.emteck-portal-servico-card__rodape {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-esp-2);
	padding-top: var(--e-esp-2);
	border-top: 1px dashed var(--e-borda);
}

.emteck-portal-servico-card__preco {
	font-weight: 700;
	font-size: var(--e-txt-lg);
	color: var(--e-azul);
}

.emteck-portal-servico-card__cta {
	font-size: var(--e-txt-sm);
	font-weight: 600;
	color: var(--e-texto-3);
	transition: color var(--e-transicao), transform var(--e-transicao);
}

.emteck-portal-servico-card:hover .emteck-portal-servico-card__cta,
.emteck-portal-servico-card:focus-visible .emteck-portal-servico-card__cta {
	color: var(--e-azul);
}

.emteck-portal-servico-card:hover .emteck-portal-servico-card__cta span,
.emteck-portal-servico-card:focus-visible .emteck-portal-servico-card__cta span {
	display: inline-block;
	transform: translateX(3px);
}

/* Pacotes disponíveis pra COMPRA na Vitrine (v2.60.0) — distinto da aba
   "Meus Pacotes" (só o que já foi comprado). Reaproveita a mesma classe de
   card/grid de Serviço (.emteck-portal-servico-card/-servicos-grid) —
   clicar leva pra "Solicitar Horário" com o pacote já escolhido, igual um
   card de Serviço (ver abrirAgendarPacote() em emteck-portal.js). Só a
   linha de itens inclusos precisa de uma classe própria, porque não é uma
   duração (o pill .emteck-portal-servico-card__duracao não serve aqui). */
.emteck-portal-pacote-card__itens {
	font-size: var(--e-txt-sm);
	color: var(--e-texto-3);
}

/* Seletor de tom de pele na Vitrine (v2.58.0) — o cliente escolhe
   visualmente o tom mais parecido com o dele; renderServicos() em
   emteck-portal.js usa a escolha (guardada só no localStorage) pra
   priorizar, em cada card, a foto da galeria com esse tom (fallback pra
   foto_capa de sempre). Ver [[project-catalogo-fotos-servicos]]. */
.emteck-portal-tom-pele {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--e-esp-2);
	margin-bottom: var(--e-esp-4);
}

.emteck-portal-tom-pele__rotulo {
	font-size: var(--e-txt-sm);
	font-weight: 600;
	color: var(--e-texto-3);
}

.emteck-portal-tom-pele__opcoes {
	display: flex;
	gap: 6px;
}

.emteck-portal-tom-pele__swatch {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--e-borda);
	padding: 0;
	cursor: pointer;
	transition: transform var(--e-transicao), border-color var(--e-transicao), box-shadow var(--e-transicao);
}

.emteck-portal-tom-pele__swatch:hover,
.emteck-portal-tom-pele__swatch:focus-visible {
	transform: scale(1.12);
	outline: none;
}

.emteck-portal-tom-pele__swatch--ativo {
	border-color: var(--e-azul);
	box-shadow: 0 0 0 2px var(--e-superficie), 0 0 0 4px var(--e-azul);
}

.emteck-portal-tom-pele__limpar {
	background: none;
	border: none;
	padding: 0;
	font-size: var(--e-txt-xs);
	font-weight: 600;
	color: var(--e-texto-3);
	text-decoration: underline;
	cursor: pointer;
}

.emteck-portal-tom-pele__limpar:hover {
	color: var(--e-azul);
}

/* Cards de cadastro no painel do gestor — Serviços por enquanto (Fase 31,
   v2.51.0), mesmo visual da vitrine do Portal. O card inteiro abre a edição
   (ver ligarServicos() em emteck-dashboard.js); o ícone de excluir fica no
   canto e usa stopPropagation pra não abrir a edição junto. */
.emteck-cadastro-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--e-esp-3);
}

.emteck-cadastro-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--e-esp-2);
	text-align: left;
	background: var(--e-superficie-2);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio);
	padding: var(--e-esp-4);
	cursor: pointer;
	transition: transform var(--e-transicao), box-shadow var(--e-transicao), border-color var(--e-transicao), background var(--e-transicao);
}

.emteck-cadastro-card:hover,
.emteck-cadastro-card:focus-visible {
	background: var(--e-superficie);
	border-color: var(--e-azul);
	box-shadow: var(--e-sombra-md);
	transform: translateY(-2px);
	outline: none;
}

.emteck-cadastro-card__excluir {
	position: absolute;
	top: var(--e-esp-2);
	right: var(--e-esp-2);
}

/* Miniatura da capa em Serviço (v2.57.0) — "escapa" do padding do card
   pra ficar rente às bordas/topo (mesma técnica de margem negativa usada
   em preview de imagem em outras telas do sistema), ver
   [[project-catalogo-fotos-servicos]]. Com foto, o ícone de excluir ganha
   um fundo pra continuar legível em cima de qualquer imagem. */
.emteck-cadastro-card__foto {
	display: block;
	width: calc(100% + 2 * var(--e-esp-4));
	height: 110px;
	margin: calc(-1 * var(--e-esp-4)) calc(-1 * var(--e-esp-4)) 0;
	object-fit: cover;
	border-radius: var(--e-raio) var(--e-raio) 0 0;
}

.emteck-cadastro-card--com-foto .emteck-cadastro-card__excluir {
	background: rgba(0, 0, 0, .45);
	color: #fff;
	border-radius: 50%;
}

.emteck-cadastro-card__nome {
	display: block;
	font-weight: 700;
	font-size: var(--e-txt-md);
	color: var(--e-texto);
	padding-right: 28px;
	overflow-wrap: break-word;
}

.emteck-cadastro-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.emteck-cadastro-card__badge {
	background: var(--e-superficie-3);
	color: var(--e-texto-3);
	font-size: var(--e-txt-xs);
	font-weight: 600;
	padding: 2px 10px;
	border-radius: var(--e-raio-pill);
}

.emteck-cadastro-card__rodape {
	margin-top: auto;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--e-esp-2);
	padding-top: var(--e-esp-2);
	border-top: 1px dashed var(--e-borda);
}

.emteck-cadastro-card__preco {
	font-weight: 700;
	font-size: var(--e-txt-lg);
	color: var(--e-azul);
}

.emteck-cadastro-card__custo {
	font-size: var(--e-txt-xs);
	color: var(--e-texto-3);
}

/* Variações usadas ao estender o card pra Produtos, Clientes, Fichas de
   Anamnese, Profissionais, Acessos do Portal e Usuários (Fase 32,
   v2.52.0) — mesma base .emteck-cadastro-card de cima. */

/* Linha de texto secundária (telefone, e-mail, endereço) — mais simples
   que os badges, pra informação que não é uma "tag" categórica. */
.emteck-cadastro-card__linha {
	font-size: var(--e-txt-sm);
	color: var(--e-texto-3);
	overflow-wrap: break-word;
}

/* Badge de alerta (ex.: estoque no mínimo) — mesmo par de cores usado em
   ".emteck-badge--despesa" no resto do painel. */
.emteck-cadastro-card__badge--alerta {
	background: var(--e-vermelho-suave);
	color: var(--e-vermelho);
}

/* Profissional inativo — mesma ideia de ".emteck-linha-inativa" (opacidade
   reduzida), só que aplicada ao card inteiro. */
.emteck-cadastro-card--inativo {
	opacity: .6;
}

/* Rodapé com botões de ação (WhatsApp/Ficha/Excluir em Clientes,
   senha/redefinir/excluir em Usuários) em vez de preço — mesma linha
   pontilhada de cima, botões alinhados à direita. */
.emteck-cadastro-card__rodape--acao {
	justify-content: flex-end;
	gap: 4px;
}

/* Acessos do Portal: card só de exibição — a ação (criar/redefinir
   acesso) é sensível de propósito (gera senha nova), então o card não
   reage a clique nem a foco, só o botão de dentro dele. */
.emteck-cadastro-card--estatico {
	cursor: default;
}

.emteck-cadastro-card--estatico:hover,
.emteck-cadastro-card--estatico:focus-visible {
	transform: none;
	border-color: var(--e-borda);
	box-shadow: none;
	background: var(--e-superficie-2);
}

/* ---------------------------------------------------------------------
 * Galeria de fotos do modal de Serviço (v2.57.0) — ver
 * [[project-catalogo-fotos-servicos]] e renderizarFotosServico() em
 * emteck-dashboard.js.
 * ------------------------------------------------------------------- */

.emteck-servico-fotos {
	margin-top: var(--e-esp-2);
}

.emteck-servico-fotos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--e-esp-3);
	margin: var(--e-esp-2) 0;
}

.emteck-servico-foto {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--e-superficie-2);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio-sm);
	padding: var(--e-esp-2);
}

.emteck-servico-foto--capa {
	border-color: var(--e-azul);
}

.emteck-servico-foto img {
	display: block;
	width: 100%;
	height: 90px;
	object-fit: cover;
	border-radius: var(--e-raio-sm);
	background: var(--e-superficie-3);
}

.emteck-servico-foto__badge {
	position: absolute;
	top: calc(var(--e-esp-2) + 4px);
	left: calc(var(--e-esp-2) + 4px);
}

/* Badge de consentimento (v2.59.0) — fica no canto oposto ao de "Capa" pra
   nunca sobrepor os dois numa mesma foto. Ver
   [[project-catalogo-fotos-servicos]] e renderizarFotosServico(). */
.emteck-servico-foto__badge--direita {
	left: auto;
	right: calc(var(--e-esp-2) + 4px);
	font-size: var(--e-txt-xs);
}

.emteck-servico-foto__acoes {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.emteck-servico-foto__tom {
	width: 100%;
	font-size: var(--e-txt-xs);
	padding: 3px 4px;
}

.emteck-servico-foto__botoes {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2px;
}

/* "Meus Dados" do Portal (Fase 31, v2.51.0) — campos já preenchidos pelo
   gestor aparecem como texto fixo (não editável); só os vazios viram
   campo de formulário. Ver renderMeusDados() em emteck-portal.js. */
.emteck-portal-dados-fixos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--e-esp-3);
	margin-bottom: var(--e-esp-4);
}

.emteck-portal-dado-fixo {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.emteck-portal-dado-fixo__rotulo {
	font-size: var(--e-txt-xs);
	font-weight: 600;
	color: var(--e-texto-3);
}

.emteck-portal-dado-fixo__valor {
	font-size: var(--e-txt-md);
	color: var(--e-texto);
	overflow-wrap: break-word;
}

/* Resumo do serviço/pacote já escolhido (veio de um card, ou o cliente
   trocou pelo seletor) — substitui o <select> enquanto ele não clica em
   "Trocar". */
.emteck-portal-selecao {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--e-esp-3);
	background: var(--e-azul-suave);
	border: 1px solid var(--e-azul);
	border-radius: var(--e-raio);
	padding: var(--e-esp-3) var(--e-esp-4);
	margin-bottom: var(--e-esp-4);
}

.emteck-portal-selecao__nome {
	font-weight: 700;
	color: var(--e-texto);
}

.emteck-portal-horarios-bloco + .emteck-portal-horarios-bloco {
	margin-top: var(--e-esp-4);
}

.emteck-portal-horarios-profissional {
	font-weight: 700;
	font-size: var(--e-txt-sm);
	color: var(--e-texto-2);
	margin: 0 0 var(--e-esp-2);
}

.emteck-portal-horarios-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-esp-2);
	margin-bottom: var(--e-esp-4);
}

.emteck-portal-horario-btn {
	background: var(--e-superficie);
	border: 1px solid var(--e-borda-forte);
	border-radius: var(--e-raio-sm);
	padding: 8px 14px;
	font: inherit;
	font-weight: 600;
	font-size: var(--e-txt-sm);
	color: var(--e-texto);
	cursor: pointer;
	transition: background var(--e-transicao), border-color var(--e-transicao), color var(--e-transicao), transform var(--e-transicao);
}

.emteck-portal-horario-btn:hover,
.emteck-portal-horario-btn:focus-visible {
	border-color: var(--e-azul);
	color: var(--e-azul);
	outline: none;
}

.emteck-portal-horario-btn--selecionado,
.emteck-portal-horario-btn--selecionado:hover {
	background: var(--e-azul);
	border-color: var(--e-azul);
	color: #FFFFFF;
	transform: scale(1.04);
}

/* ==================================================================
 * 11. IDENTIDADE VISUAL (Tema) — v2.65.0 / redesenho v2.66.0
 *
 * Tela dentro de "Aparência" que deixa a cliente customizar as cores e
 * o formato dos cantos do painel. Só estilo desta tela — os tokens que
 * ela edita (--e-azul, --e-roxo, --e-nav-fundo, --e-raio*) continuam
 * declarados na seção 1/2, no topo do arquivo. Layout em 2 colunas:
 * controles à esquerda, pré-visualização ao vivo à direita — a prévia
 * usa os MESMOS componentes reais (.emteck-btn, .emteck-card...), então
 * ela já muda sozinha quando o JS altera as variáveis CSS, sem nenhuma
 * lógica própria de desenho.
 * ================================================================== */

.emteck-tema-grid {
	display: grid;
	grid-template-columns: minmax(280px, 380px) 1fr;
	gap: var(--e-esp-5);
	align-items: start;
}

@media (max-width: 1000px) {
	.emteck-tema-grid { grid-template-columns: 1fr; }
}

.emteck-tema-secao {
	background: var(--e-superficie-2);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio);
	padding: var(--e-esp-4);
	margin-bottom: var(--e-esp-3);
}

.emteck-tema-secao__titulo {
	margin: 0 0 var(--e-esp-3);
	font-size: var(--e-txt-sm);
	font-weight: 700;
	color: var(--e-texto);
}

.emteck-tema-presets {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--e-esp-2);
}

@media (max-width: 480px) {
	.emteck-tema-presets { grid-template-columns: 1fr; }
}

.emteck-tema-preset {
	display: flex;
	align-items: center;
	gap: var(--e-esp-2);
	padding: var(--e-esp-2) var(--e-esp-3);
	background: var(--e-superficie);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio-sm);
	font: inherit;
	font-size: var(--e-txt-xs);
	font-weight: 600;
	color: var(--e-texto-2);
	cursor: pointer;
	text-align: left;
	transition: border-color var(--e-transicao), background var(--e-transicao);
}

.emteck-tema-preset:hover { border-color: var(--e-borda-forte); }

.emteck-tema-preset--ativo,
.emteck-tema-preset--ativo:hover {
	border-color: var(--e-azul);
	background: var(--e-azul-suave);
	color: var(--e-texto);
	box-shadow: 0 0 0 1px var(--e-azul) inset;
}

.emteck-tema-preset__cores { display: flex; flex-shrink: 0; }

.emteck-tema-preset__cores span {
	width: 15px;
	height: 15px;
	border-radius: 999px;
	border: 2px solid var(--e-superficie);
	margin-left: -6px;
}

.emteck-tema-preset__cores span:first-child { margin-left: 0; }

.emteck-tema-cores { display: flex; flex-direction: column; gap: var(--e-esp-3); }

.emteck-tema-cor {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-esp-3);
}

.emteck-tema-cor__texto { display: flex; flex-direction: column; gap: 2px; }

.emteck-tema-cor__rotulo {
	font-size: var(--e-txt-sm);
	font-weight: 600;
	color: var(--e-texto);
}

.emteck-tema-cor__ajuda {
	font-size: var(--e-txt-xs);
	color: var(--e-texto-3);
}

.emteck-tema-cor input[type="color"] {
	flex-shrink: 0;
	width: 40px;
	height: 34px;
	padding: 2px;
	border: 1px solid var(--e-borda-forte);
	border-radius: var(--e-raio-sm);
	background: var(--e-superficie);
	cursor: pointer;
}

.emteck-tema-raio {
	display: flex;
	gap: var(--e-esp-2);
}

.emteck-tema-raio button { flex: 1; }

.emteck-tema-raio button[aria-pressed="true"] {
	background: var(--e-azul);
	border-color: var(--e-azul);
	color: #FFFFFF;
}

/* --- Coluna de pré-visualização ao vivo --- */

.emteck-tema-preview {
	position: sticky;
	top: var(--e-esp-4);
	background: var(--e-fundo);
	border: 1px solid var(--e-borda);
	border-radius: var(--e-raio);
	overflow: hidden;
	box-shadow: var(--e-sombra-md);
}

.emteck-tema-preview__legenda {
	padding: var(--e-esp-2) var(--e-esp-4);
	font-size: var(--e-txt-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--e-texto-3);
	background: var(--e-superficie-2);
	border-bottom: 1px solid var(--e-borda);
}

.emteck-tema-preview__corpo { display: flex; min-height: 300px; }

.emteck-tema-preview__sidebar {
	width: 150px;
	flex-shrink: 0;
	background: var(--e-nav-fundo);
	padding: var(--e-esp-3) var(--e-esp-2);
}

.emteck-tema-preview__marca {
	display: flex;
	align-items: center;
	gap: var(--e-esp-2);
	color: #FFFFFF;
	font-size: var(--e-txt-xs);
	font-weight: 700;
	padding: 0 var(--e-esp-2);
	margin-bottom: var(--e-esp-3);
}

.emteck-tema-preview__marca span {
	width: 22px;
	height: 22px;
	border-radius: var(--e-raio-sm);
	background: var(--e-azul);
	display: inline-block;
}

.emteck-tema-preview__nav-item {
	padding: 7px var(--e-esp-2);
	margin-bottom: 4px;
	border-radius: var(--e-raio-sm);
	font-size: var(--e-txt-xs);
	font-weight: 600;
	color: var(--e-nav-texto);
}

.emteck-tema-preview__nav-item--ativo {
	background: var(--e-azul);
	color: #FFFFFF;
}

.emteck-tema-preview__conteudo { flex: 1; padding: var(--e-esp-4); }

.emteck-tema-preview__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--e-esp-3);
	gap: var(--e-esp-2);
	flex-wrap: wrap;
}

.emteck-tema-preview__titulo {
	font-size: var(--e-txt-md);
	font-weight: 700;
	color: var(--e-texto);
}

.emteck-tema-preview__botao {
	background: var(--e-azul);
	color: #FFFFFF;
	border: none;
	border-radius: var(--e-raio-sm);
	padding: 7px 14px;
	font-size: var(--e-txt-xs);
	font-weight: 700;
	cursor: default;
}

.emteck-tema-preview__kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: var(--e-esp-2);
	margin-bottom: var(--e-esp-3);
}

.emteck-tema-preview__kpi {
	background: var(--e-superficie);
	border: 1px solid var(--e-borda);
	border-left: 3px solid var(--e-azul);
	border-radius: var(--e-raio-sm);
	padding: var(--e-esp-2) var(--e-esp-3);
}

.emteck-tema-preview__kpi--roxo { border-left-color: var(--e-roxo); }

.emteck-tema-preview__kpi-rotulo { font-size: 10px; color: var(--e-texto-3); font-weight: 600; }
.emteck-tema-preview__kpi-valor { font-size: var(--e-txt-md); color: var(--e-texto); font-weight: 700; }

.emteck-tema-preview__aviso {
	background: var(--e-roxo-suave);
	color: var(--e-roxo);
	border-radius: var(--e-raio-sm);
	padding: var(--e-esp-2) var(--e-esp-3);
	font-size: var(--e-txt-xs);
	font-weight: 600;
}