/**
 * EMTECK Dashboard — 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-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-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);
	overflow: hidden;
	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);
}

.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; }

.emteck-sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.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; }

.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;
}

.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); }

.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; }

.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__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; }

/* ==================================================================
 * 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; }

/* ==================================================================
 * 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);
		/* 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; }
}