/* Ecila Planos — estilos do frontend (tabela comparativa)
   Construída com <div> + Flexbox (não utiliza <table>).
   A semântica tabular é preservada via atributos ARIA no HTML
   (role="table", role="row", role="columnheader", role="cell" etc.). */

.ecila-planos {
	--ecila-color-bg: #ffffff;
	--ecila-color-text: #2b2f33;
	--ecila-color-muted: #767c82;
	--ecila-color-border: #edeef0;
	--ecila-color-group-bg: #E7E7E7;
	--ecila-color-plan-bg: #13B6CB;
	--ecila-color-plan-text: #ffffff;
	--ecila-color-featured-bg: #253443;
	--ecila-color-featured-text: #ffffff;
	--ecila-color-row-bg: #f6f6f6;
	--ecila-radius: 6px;

	/* Larguras usadas pelas células, mantidas consistentes entre
	   o cabeçalho e as linhas de funcionalidades para que as colunas alinhem. */
	--ecila-label-width: 220px;
	--ecila-plan-min-width: 130px;

	box-sizing: border-box;
	background: var(--ecila-color-bg);
	color: var(--ecila-color-text);
	font-size: 15px;
	line-height: 1.4;
}

.ecila-planos *,
.ecila-planos *::before,
.ecila-planos *::after {
	box-sizing: border-box;
}

/* O scroll horizontal deve existir SOMENTE dentro deste container,
   nunca afetando o restante da página. */
.ecila-planos__wrapper {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}

/* Tabela (role="table") — empilha as linhas verticalmente. */
.ecila-planos__table {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	min-width: calc(var(--ecila-label-width) + (var(--ecila-plan-count) * var(--ecila-plan-min-width)));
}

/* Linha (role="row") — cada linha é um flex container horizontal. */
.ecila-planos__row {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

/* Célula "rótulo" — primeira coluna (Planos / nome da funcionalidade).
   Largura fixa e consistente entre o cabeçalho e as linhas de funcionalidades,
   para que as colunas de planos permaneçam alinhadas verticalmente. */
.ecila-planos__cell-label {
	flex: 0 0 var(--ecila-label-width);
	width: var(--ecila-label-width);
	max-width: var(--ecila-label-width);
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--ecila-color-bg);
	display: flex;
	align-items: center;
}

/* Célula de plano — distribuída igualmente entre as colunas restantes,
   sem encolher abaixo do mínimo (isso é o que provoca o scroll horizontal
   quando há muitos planos cadastrados). */
.ecila-planos__cell-plan {
	flex: 1 1 0;
	min-width: var(--ecila-plan-min-width);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Cabeçalho */
.ecila-planos__header-row {
	align-items: flex-end;
}

.ecila-planos__corner {
	font-size: 20px;
	font-weight: 700;
	color: var(--ecila-color-text);
	align-items: flex-end;
	padding-bottom: 10px;
}

.ecila-planos__plan {
	background: var(--ecila-color-plan-bg);
	color: var(--ecila-color-plan-text);
	border-radius: var(--ecila-radius);
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 1px;
	font-size: 15px;
	flex-direction: column;
	padding: 14px 10px;
	text-align: center;
	font-family: "mundial", Sans-serif !important;
}

.ecila-planos__plan--featured {
	background: var(--ecila-color-featured-bg);
	color: var(--ecila-color-featured-text);
	position: relative;
}

.ecila-planos__plan-icon {
	display: block;
	margin: 0 auto 6px;
	width: 28px;
	height: 28px;
}

.ecila-planos__plan-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ecila-planos__plan-name {
	display: block;
}

/* Grupos — barra ocupando toda a largura da linha. */
.ecila-planos__group-row {
	margin-top: 4px;
}

.ecila-planos__group-title {
	width: 100%;
	background: var(--ecila-color-group-bg);
	text-align: left;
	padding: 12px 16px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--e-global-color-primary);
	border-radius: 8px;
	display: flex;
	align-items: center;
	font-family: "mundial", Sans-serif !important;
}

/* Funcionalidades */
.ecila-planos__feature-row {
	background: var(--ecila-color-row-bg);
	border-radius: 8px;
}

.ecila-planos__feature-name {
	font-weight: 400;
	padding: 14px 16px;
	background: var(--ecila-color-row-bg);
	border-radius: 8px 0 0 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ecila-planos__cell {
	padding: 14px 8px;
}

.ecila-planos__feature-row .ecila-planos__cell-plan:last-child {
	border-radius: 0 8px 8px 0;
}

.ecila-planos__status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
}

/* Necessário explicitamente: como .ecila-planos__status já define display:inline-flex,
   isso teria prioridade sobre o "display:none" padrão do navegador para [hidden]
   (regras do autor sempre vencem as regras padrão do user agent, mesmo com
   especificidade igual). Sem esta regra, os dois ícones (incluído/não incluído)
   ficam visíveis ao mesmo tempo na visualização mobile ao trocar de aba. */
.ecila-planos__status[hidden] {
	display: none;
}

.ecila-planos__status img {
	max-width: 100%;
	max-height: 100%;
	display: block;
}

.ecila-planos__status-fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
}

.ecila-planos__status--included .ecila-planos__status-fallback {
	background: rgba(47, 184, 198, 0.15);
	color: #1a8f9c;
}

.ecila-planos__status--excluded .ecila-planos__status-fallback {
	background: rgba(0, 0, 0, 0.06);
	color: var(--ecila-color-muted);
}

/* Utilitário de acessibilidade — oculta visualmente mas mantém para leitores de tela */
.ecila-planos .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.ecila-planos__empty {
	width: 100%;
	text-align: center;
	padding: 24px;
	color: var(--ecila-color-muted);
	justify-content: center;
}

.ecila-planos__admin-notice {
	padding: 12px 16px;
	background: #fff8e5;
	border-left: 4px solid #dba617;
	color: #5a4200;
}

/* =====================================================================
   VISUALIZAÇÃO MOBILE — abas de plano + lista de grupos/funcionalidades.
   Por padrão (desktop/tablet) fica oculta; a tabela em Flexbox é exibida.
   Abaixo do breakpoint, invertemos: a tabela some e as abas aparecem.
   ===================================================================== */

.ecila-planos__mobile {
	display: none;
}

/* Abas de plano */
.ecila-planos__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.ecila-planos__tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	margin: 0;
	cursor: pointer;
	background: #f0f1f2;
	color: var(--ecila-color-text);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
	line-height: 1;
	padding: 10px 14px;
	border-radius: var(--ecila-radius);
	transition: background-color 0.15s ease, color 0.15s ease;
	position: relative;
}

.ecila-planos__tab.is-active {
	background: var(--ecila-color-plan-bg);
	color: var(--ecila-color-plan-text);
}

.ecila-planos__tab--featured.is-active {
	background: var(--ecila-color-featured-bg);
	color: var(--ecila-color-featured-text);
}

.ecila-planos__tab-icon {
    display: inline-flex;
    width: 25px;
    height: 25px;
    position: absolute;
    top: -16px;
    left: 12%;
}

.ecila-planos__tab-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Lista de grupos e funcionalidades (sem acordeão — sempre visível) */
.ecila-planos__mobile-list {
	/*background: var(--ecila-color-group-bg);
	border-radius: var(--ecila-radius);*/
	overflow: hidden;
	padding: 0px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ecila-planos__mobile-group {
	/*background: var(--ecila-color-bg);*/
	border-radius: 0px;
	overflow: hidden;
}

.ecila-planos__mobile-group-title {
	padding: 14px 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ecila-color-text);
	background: var(--ecila-color-group-bg);
	border-radius: 8px;
}

.ecila-planos__mobile-feature {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 14px;
	/*border-top: 1px solid var(--ecila-color-border);*/
	background:var(--ecila-color-row-bg);
	border-radius: 8px;
	    margin: 4px 0;
}

.ecila-planos__mobile-feature:first-of-type {
	border-top: 0;
}

.ecila-planos__mobile-feature-name {
	flex: 1 1 auto;
}

.ecila-planos__mobile-feature-status {
	flex: 0 0 auto;
}

/* Responsivo — abaixo do breakpoint, troca a tabela pelas abas + acordeão. */
@media (max-width: 782px) {
	.ecila-planos {
		font-size: 13px;
	}

	.ecila-planos__wrapper {
		display: none;
	}

	.ecila-planos__mobile {
		display: block;
	}
}




.ecila-planos__corner {
    min-width: 400px;
}
.ecila-planos__feature-name {
    min-width: 400px;
}

.ecila-planos__plan-icon {
    margin: 0px !important;
    width: 36px !important;
    height: 36px !important;
    position: absolute !important;
    top: -25px !important;
    left: 38px !important;
}
.ecila-planos__wrapper {
    padding: 30px 0 4px !important;
}
.ecila-planos__feature-name {
    padding: 8px 16px !important;
    border-radius: 8px !important;
}
.ecila-planos__corner {
    padding: 40px 0px 30px 0px !important;
}
.ecila-planos__table {
    gap: 0px!important;
}
.ecila-planos__feature-row {
    background: #f7f8f900 !important;
	    border-radius: 0px !important;
}
.ecila-planos__cell {
    padding: 14px 8px;
    background: var(--ecila-color-row-bg);
}
.ecila-planos__group-row {
    margin-top: 0px !important;
}
.ecila-planos__plan {
    padding: 10px 10px!important;
}
.ecila-planos__feature-row .ecila-planos__cell-plan:last-child {
    border-radius: 0 !important;
}

.ecila-planos__cell {
    z-index: 1;
}
.ecila-planos__row {
    gap: 20px !important;
}

.ecila-planos__group-title {
    border-radius: 8px 0 0 8px !important;
}
.ecila-planos__plan {
    z-index: 1;
    position: relative;
}