/*
 * Portal do afiliado — paleta da loja.
 *
 * DESENHO: um QUADRO por aba, dividido por LINHA.
 *
 * Nada de uma caixa com borda e fundo por assunto. Aquilo empilhava molduras
 * e, pior, deixava buraco embaixo da coluna mais curta quando duas caixas
 * ficavam lado a lado. Aqui a moldura é uma só e as divisões são traços de
 * 1px; colunas vizinhas dividem a altura do quadro, então o traço vertical
 * desce inteiro e não sobra vazio.
 *
 * Tudo escopado em .gcp-af-portal de propósito: isto roda dentro de uma
 * página do Woodmart, e regra solta aqui vaza para o tema inteiro.
 *
 * Mobile-first. A tabela vira cartões abaixo de 620px usando o data-rot de
 * cada célula como rótulo — o afiliado abre isso no celular na maior parte
 * das vezes, e tabela de seis colunas em tela de 360px não se lê.
 */

.gcp-af-portal {
	--bg:        #12161B;
	--sup:       #181E25;
	--sup2:      #1F2630;
	--linha:     #2C3643;
	--txt:       #F2F5F9;
	--txt2:      #B3BDCC;
	--txt3:      #8592A6;
	--ac:        #F59E03;
	--ac2:       #FEC600;
	--ac3:       #EC7106;
	--ok:        #4ADE80;
	--ok-bg:     rgba(34,197,94,.15);
	--ok-li:     rgba(34,197,94,.3);
	--at:        #FBBF24;
	--at-bg:     rgba(234,179,8,.12);
	--at-li:     rgba(234,179,8,.3);
	--no:        #F87171;
	--no-bg:     rgba(239,68,68,.12);
	--no-li:     rgba(239,68,68,.3);
	--r:         14px;
	--pad:       24px;

	box-sizing: border-box;
	max-width: 1400px;
	margin: 0 auto;
	padding: 4px 0 48px;
	color: var(--txt);
	font-size: 15px;
	line-height: 1.6;
}
.gcp-af-portal *,
.gcp-af-portal *::before,
.gcp-af-portal *::after { box-sizing: border-box; }

.gcp-af-portal a { color: var(--ac); text-decoration: none; }
.gcp-af-portal a:hover { color: var(--ac2); text-decoration: underline; }
.gcp-af-portal :focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; border-radius: 6px; }

/* ---------------------------------------------------------------- topo -- */

.gcp-af-topo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 22px;
}
.gcp-af-sobre {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--ac);
}
.gcp-af-portal .gcp-af-ola {
	margin: 4px 0 0;
	font-size: 26px;
	line-height: 1.15;
	font-weight: 700;
	color: var(--txt);
	text-wrap: balance;
}
.gcp-af-pill {
	padding: 8px 15px;
	border: 1px solid var(--at-li);
	border-radius: 999px;
	background: var(--at-bg);
	font-size: 13px;
	color: var(--txt2);
	white-space: nowrap;
}
.gcp-af-pill strong { color: var(--ac2); }

/* ---------------------------------------------------------------- abas -- */

.gcp-af-abas {
	display: flex;
	gap: 2px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--linha);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.gcp-af-abas::-webkit-scrollbar { display: none; }
.gcp-af-portal .gcp-af-aba {
	flex: 0 0 auto;
	padding: 13px 18px;
	border-bottom: 2px solid transparent;
	color: var(--txt3);
	font-size: 14.5px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}
.gcp-af-portal .gcp-af-aba:hover { color: var(--txt); text-decoration: none; }
.gcp-af-portal .gcp-af-aba-on { color: var(--txt); border-bottom-color: var(--ac); }

/* ------------------------------------------------------------ painéis -- */

/* Prefixado de propósito: tema pode ter `section { display: block }` com
   especificidade maior que a do `[hidden]` do navegador, e aí as cinco abas
   apareceriam empilhadas de uma vez. */
.gcp-af-portal .gcp-af-painel[hidden] { display: none; }

/* ------------------------------------------------ o quadro e as divisões */

.gcp-af-quadro {
	border: 1px solid var(--linha);
	border-radius: var(--r);
	background: var(--sup);
	/* corta as bordas internas no canto arredondado */
	overflow: hidden;
}

.gcp-af-sec { padding: var(--pad); border-top: 1px solid var(--linha); }
.gcp-af-sec:first-child { border-top: 0; }
.gcp-af-sec-limpa { padding: 0; }

.gcp-af-sec-topo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}
.gcp-af-portal .gcp-af-sec-topo h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--txt);
}

/* Duas colunas dentro do quadro.
   Empilhadas no estreito, com traço horizontal; lado a lado no largo, com
   traço vertical que desce a altura inteira — daí não sobrar buraco embaixo
   da coluna mais curta. */
.gcp-af-sec-2 { padding: 0; display: grid; grid-template-columns: 1fr; }
.gcp-af-col { padding: var(--pad); min-width: 0; container-type: inline-size; }
.gcp-af-col + .gcp-af-col { border-top: 1px solid var(--linha); }

.gcp-af-col-forte { background: linear-gradient(150deg, rgba(245,158,3,.13), transparent 70%); }
.gcp-af-col-forte .gcp-af-rot { color: var(--ac2); }
.gcp-af-col-forte .gcp-af-num { color: var(--ac); }

.gcp-af-mais { font-size: 13px; font-weight: 600; }
.gcp-af-nota { margin: 6px 0 0; font-size: 13px; color: var(--txt3); }
.gcp-af-nota strong { color: var(--txt2); }
.gcp-af-vazio {
	margin: 0;
	padding: 22px 0;
	color: var(--txt3);
	font-size: 14px;
	text-align: center;
}
.gcp-af-intro { color: var(--txt2); max-width: 62ch; }

/* -------------------------------------------------------------- avisos -- */

.gcp-af-aviso {
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid var(--linha);
	border-left-width: 3px;
	border-radius: 10px;
	background: var(--bg);
	font-size: 14px;
	color: var(--txt2);
}
.gcp-af-aviso strong { color: var(--txt); }
.gcp-af-ok      { border-left-color: var(--ok); background: var(--ok-bg); }
.gcp-af-atencao { border-left-color: var(--at); background: var(--at-bg); }
.gcp-af-erro    { border-left-color: var(--no); background: var(--no-bg); }
/* dentro de uma coluna o aviso é o último elemento, não precisa de margem */
.gcp-af-col > .gcp-af-aviso:last-child { margin: 16px 0 0; }

/* --------------------------------------------------------------- cards -- */

/* Sem borda por cartão: o gap de 1px deixa a cor do quadro passar e vira o
   traço divisor. Uma linha, não quatro molduras. */
.gcp-af-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--linha);
}
.gcp-af-card {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 18px var(--pad);
	background: var(--sup);
}
.gcp-af-rot {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--txt3);
}
.gcp-af-num {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.6px;
	font-variant-numeric: tabular-nums;
	color: var(--txt);
}
.gcp-af-num-grande { font-size: 38px; }
.gcp-af-sub { font-size: 12.5px; color: var(--txt3); }

.gcp-af-card-aguarda .gcp-af-num { color: var(--at); }
.gcp-af-card-forte {
	background: linear-gradient(150deg, rgba(245,158,3,.13), var(--sup) 75%);
}
.gcp-af-card-forte .gcp-af-rot { color: var(--ac2); }
.gcp-af-card-forte .gcp-af-num { color: var(--ac); }

/* --------------------------------------------------------------- links -- */

.gcp-af-link { margin-top: 12px; }
.gcp-af-link input,
.gcp-af-gerador input {
	width: 100%;
	height: 52px;
	padding: 0 16px;
	border: 1px solid var(--linha);
	border-radius: 11px;
	background: var(--bg);
	font-size: 14.5px;
	font-family: inherit;
}
/* O Woodmart apaga campo readonly. Aqui ele é para LER, então tem que ler. */
.gcp-af-portal input[readonly] {
	color: var(--txt);
	-webkit-text-fill-color: var(--txt);
	opacity: 1;
	cursor: text;
}
.gcp-af-link-antigo input { border-style: dashed; color: var(--txt2); -webkit-text-fill-color: var(--txt2); }

.gcp-af-gerador { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.gcp-af-gerador input { flex: 1 1 260px; width: auto; color: var(--txt); }
.gcp-af-gerador input::placeholder { color: var(--txt3); }

/* --------------------------------------------------- copiar no campo ---- */

/* O botão mora DENTRO do campo, encostado à direita, e o input abre espaço
   para ele com padding — sem isso o texto do link passa por baixo do botão.
   No estreito ele desce para a linha de baixo e ocupa a largura: dedo em
   tela de celular não acerta alvo pequeno no canto. */
.gcp-af-link { position: relative; }

/* TRES classes de propósito. Com `.gcp-af-portal .gcp-af-copiar` o tema
   ganhava e impunha height: 42px — o botão encostava nas duas bordas do campo
   e parecia pendurado para fora. Medido: 42px onde a regra pedia 36. */
.gcp-af-portal .gcp-af-link .gcp-af-copiar {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	/* min-height ANTES de height, e por isso ela precisa ser zerada aqui:
	   o tema manda `min-height: 42px` nos botões e min-height vence height.
	   Medido: 42px onde a regra pedia 36, o botão colado nas duas bordas do
	   campo — era isso que parecia "pendurado para fora". */
	min-height: 0;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	border: 1px solid var(--linha);
	border-radius: 9px;
	background: var(--sup2);
	color: var(--txt2);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
}
.gcp-af-portal .gcp-af-link .gcp-af-copiar:hover { border-color: var(--ac); color: var(--ac); }
.gcp-af-portal .gcp-af-link .gcp-af-copiar.gcp-af-copiado {
	border-color: rgba(74,222,128,.5);
	background: var(--ok-bg);
	color: var(--ok);
}
/* Espaço para o botão não cobrir o fim do link.
   Também com três classes: `.gcp-af-link input` perdia para o tema e o
   padding-right ficava em 15px — o endereço passava por baixo do botão. */
.gcp-af-portal .gcp-af-link input { padding-right: 100px; }

/* ------------------------------------------------------------- botões --- */

.gcp-af-portal .gcp-af-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 26px;
	border: none;
	border-radius: 11px;
	background: linear-gradient(135deg, var(--ac2), var(--ac3));
	color: #12161B;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
.gcp-af-portal .gcp-af-btn:hover { filter: brightness(1.07); color: #12161B; text-decoration: none; }
.gcp-af-portal .gcp-af-btn-fraco {
	background: transparent;
	border: 1px solid var(--linha);
	color: var(--txt2);
	font-weight: 600;
	height: 42px;
	padding: 0 18px;
	font-size: 13px;
}
.gcp-af-portal .gcp-af-btn-fraco:hover { border-color: var(--ac); color: var(--ac); }

/* Botão apagado e botão de espera.
   Não usa <button disabled>: um span aria-disabled não entra na ordem de
   tabulação nem promete uma ação que não existe, e o estado fica só no visual
   onde ele é — o servidor recusa de qualquer jeito. */
.gcp-af-portal .gcp-af-btn-apagado,
.gcp-af-portal .gcp-af-btn-espera {
	background: transparent;
	border: 1px dashed var(--linha);
	color: var(--txt3);
	cursor: default;
	font-weight: 600;
}
.gcp-af-portal .gcp-af-btn-apagado:hover,
.gcp-af-portal .gcp-af-btn-espera:hover { filter: none; color: var(--txt3); }
.gcp-af-portal .gcp-af-btn-espera { border-style: solid; border-color: var(--at-li); color: var(--at); background: var(--at-bg); }

.gcp-af-pedido { margin-top: 18px; display: flex; flex-direction: column; gap: 0; }
.gcp-af-pedido .gcp-af-btn { align-self: flex-start; }
.gcp-af-pedido .gcp-af-nota { margin-top: 9px; max-width: 46ch; }

/* Tipo + chave lado a lado, o TIPO primeiro: escolher o tipo diz o que
   digitar no campo ao lado.

   O `width` do select é obrigatório e não é enfeite: o tema manda
   `select { width: 100% }`, e com `flex: 0 0 auto` a base vem desse width —
   o seletor tomava a linha inteira e o campo de digitar ficava com ~30px,
   um risco na tela. Foi o que o Daniel viu em 03/09/2026. */
.gcp-af-dupla { display: flex; gap: 8px; align-items: stretch; }
.gcp-af-dupla input { flex: 1 1 auto; min-width: 0; width: auto; }
.gcp-af-portal .gcp-af-dupla select {
	flex: 0 0 auto;
	width: 168px;
	height: 52px;
	padding: 0 12px;
	border: 1px solid var(--linha);
	border-radius: 11px;
	background: var(--bg);
	color: var(--txt);
	font-family: inherit;
	font-size: 13.5px;
	cursor: pointer;
}
.gcp-af-portal .gcp-af-dupla select:focus { border-color: rgba(245,158,3,.55); }

/* ------------------------------------------------------------ filtros --- */

.gcp-af-barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.gcp-af-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.gcp-af-portal .gcp-af-filtro {
	padding: 8px 15px;
	border: 1px solid var(--linha);
	border-radius: 999px;
	color: var(--txt2);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.gcp-af-portal .gcp-af-filtro:hover { border-color: var(--txt3); color: var(--txt); text-decoration: none; }
.gcp-af-portal .gcp-af-filtro-on {
	border-color: rgba(245,158,3,.45);
	background: rgba(245,158,3,.12);
	color: var(--ac);
}

/* ------------------------------------------------------------- tabela --- */

.gcp-af-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gcp-af-portal .gcp-af-tabela {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	background: none;
}
.gcp-af-portal .gcp-af-tabela th {
	padding: 10px 12px;
	border-bottom: 1px solid var(--linha);
	background: none;
	color: var(--txt3);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
}
.gcp-af-portal .gcp-af-tabela td {
	padding: 13px 12px;
	border-bottom: 1px solid var(--linha);
	background: none;
	color: var(--txt2);
	vertical-align: middle;
}
.gcp-af-portal .gcp-af-tabela tr:last-child td { border-bottom: 0; }
.gcp-af-portal .gcp-af-tabela td strong { color: var(--txt); font-variant-numeric: tabular-nums; }
/* td.gcp-af-dir precisa vencer o .gcp-af-dir puro por especificidade. */
.gcp-af-portal .gcp-af-tabela th.gcp-af-dir,
.gcp-af-portal .gcp-af-tabela td.gcp-af-dir { text-align: right; font-variant-numeric: tabular-nums; }
.gcp-af-rodape-tab { margin-top: 14px; }

.gcp-af-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border: 1px solid var(--linha);
	border-radius: 999px;
	background: var(--sup2);
	color: var(--txt3);
	font-size: 10.5px;
	font-weight: 600;
	white-space: nowrap;
}
.gcp-af-sit {
	display: inline-block;
	padding: 4px 11px;
	border: 1px solid var(--linha);
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
}
.gcp-af-sit-ok      { background: var(--ok-bg); border-color: var(--ok-li); color: var(--ok); }
.gcp-af-sit-aguarda { background: var(--at-bg); border-color: var(--at-li); color: var(--at); }
.gcp-af-sit-nao     { background: var(--no-bg); border-color: var(--no-li); color: var(--no); }
.gcp-af-sit-neutro  { background: var(--sup2); color: var(--txt3); }

/* ------------------------------------------------------------ gráfico --- */

.gcp-af-gr {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 190px;
	margin-top: 6px;
}
.gcp-af-gr-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	height: 100%;
	min-width: 0;
}
.gcp-af-gr-val {
	font-size: 10.5px;
	color: var(--txt3);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.gcp-af-gr-barra {
	width: 100%;
	/* min de 3px: mês com valor pequeno mas real não pode sumir e virar zero */
	height: max(3px, var(--h, 0%));
	border-radius: 7px 7px 3px 3px;
	background: linear-gradient(180deg, var(--ac2), rgba(236,113,6,.35));
}
.gcp-af-gr-mes { font-size: 11.5px; color: var(--txt3); }

/* -------------------------------------------------------- top produtos -- */

.gcp-af-portal .gcp-af-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.gcp-af-portal .gcp-af-top li { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.gcp-af-top-l { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.gcp-af-top-nome { color: var(--txt); min-width: 0; overflow-wrap: anywhere; }
.gcp-af-top-n { color: var(--txt2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gcp-af-top-tr { display: block; height: 6px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.gcp-af-top-fill { display: block; height: 100%; width: var(--w, 0%); border-radius: 999px; background: linear-gradient(90deg, var(--ac2), var(--ac3)); }

/* -------------------------------------------------------------- regras -- */

.gcp-af-portal .gcp-af-regras { margin: 0; display: flex; flex-direction: column; }
.gcp-af-portal .gcp-af-regras > div {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 0;
	border-bottom: 1px dashed var(--linha);
}
.gcp-af-portal .gcp-af-regras > div:last-child { border-bottom: 0; }
.gcp-af-portal .gcp-af-regras dt { margin: 0; color: var(--txt3); font-size: 14px; font-weight: 400; }
.gcp-af-portal .gcp-af-regras dd { margin: 0; color: var(--txt); font-size: 14px; font-weight: 600; text-align: right; }

/* ------------------------------------------------------------ formulário */

.gcp-af-form { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.gcp-af-portal .gcp-af-campo { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.gcp-af-portal .gcp-af-campo label { color: var(--txt3); font-size: 11.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }
.gcp-af-portal .gcp-af-campo input {
	width: 100%;
	height: 52px;
	padding: 0 16px;
	border: 1px solid var(--linha);
	border-radius: 11px;
	background: var(--bg);
	color: var(--txt);
	font-family: inherit;
	font-size: 14.5px;
}
.gcp-af-portal .gcp-af-campo input::placeholder { color: var(--txt3); }
.gcp-af-portal .gcp-af-campo input:focus { border-color: rgba(245,158,3,.55); }
.gcp-af-portal .gcp-af-campo .gcp-af-nota { margin: 0; }
.gcp-af-pede {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--at-bg);
	border: 1px solid var(--at-li);
	color: var(--at);
	font-size: 10px;
	letter-spacing: .6px;
}

/* caixa de estado (deslogado, cadastro em análise) */
.gcp-af-caixa {
	padding: 26px;
	border: 1px solid var(--linha);
	border-radius: var(--r);
	background: var(--sup);
	color: var(--txt2);
}
.gcp-af-caixa p { margin: 0 0 14px; }
.gcp-af-caixa p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- cadastro publico ----- */

/* As duas portas da tela deslogada. Lado a lado no largo, empilhadas no
   estreito. Mesma altura pelo grid, para nenhuma parecer a principal: as duas
   sao portas de verdade. */
.gcp-af-portas { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) {
	.gcp-af-portas { grid-template-columns: 1fr 1fr; }
}
.gcp-af-porta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: var(--pad);
	border: 1px solid var(--linha);
	border-radius: var(--r);
	background: var(--sup);
}
.gcp-af-portal .gcp-af-porta h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--txt); }
.gcp-af-portal .gcp-af-porta p { margin: 0; color: var(--txt2); font-size: 14.5px; }
.gcp-af-portal .gcp-af-porta .gcp-af-btn { margin-top: auto; }

/* Campo-armadilha: fora da tela, sem display:none — alguns preenchedores
   automaticos pulam o que esta com display:none e cairiam fora da armadilha. */
.gcp-af-fora-da-tela {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gcp-af-portal textarea {
	width: 100%;
	min-height: 132px;
	padding: 13px 16px;
	border: 1px solid var(--linha);
	border-radius: 11px;
	background: var(--bg);
	color: var(--txt);
	font-family: inherit;
	font-size: 14.5px;
	line-height: 1.5;
	resize: vertical;
}
.gcp-af-portal textarea:focus { border-color: rgba(245,158,3,.55); }
/* --no e a cor de recusa do portal; nao inventar variavel nova. */
.gcp-af-portal [aria-invalid="true"] { border-color: var(--no); }

.gcp-af-aceite { margin: 4px 0 0; }
.gcp-af-portal .gcp-af-aceite label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--txt2);
	font-size: 14.5px;
	cursor: pointer;
}
.gcp-af-portal .gcp-af-aceite input {
	width: 18px; height: 18px; min-height: 0;
	margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--ac);
}
.gcp-af-envio { margin: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.gcp-af-portal .gcp-af-btn[disabled] { cursor: not-allowed; }

/* Os termos.
   No HTML sao um <details> FECHADO: a pagina de cadastro abre limpa e quem
   quiser ler clica — o navegador abre sozinho, sem JavaScript. Com JS, marcar
   o aceite abre o mesmo <details> como sobreposicao
   (.gcp-af-modal-aberto). O texto e UMA copia so nos dois casos: ninguem
   aceita o que nao pode ler. */
/* <details> fechado por padrao: a pagina de cadastro abre limpa e quem quiser
   ler clica. A seta do marker padrao sai; a nossa gira com [open]. */
.gcp-af-termos { border: 1px solid var(--linha); border-radius: var(--r); background: var(--sup2); }
.gcp-af-portal .gcp-af-termos-resumo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 14px var(--pad);
	color: var(--txt);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.gcp-af-portal .gcp-af-termos-resumo::-webkit-details-marker { display: none; }
.gcp-af-portal .gcp-af-termos-resumo > span:first-child::before {
	content: "\25B8";              /* triangulo para a direita */
	display: inline-block;
	margin-right: 9px;
	color: var(--ac);
	transition: transform .15s ease;
}
.gcp-af-portal .gcp-af-termos[open] .gcp-af-termos-resumo > span:first-child::before { transform: rotate(90deg); }
.gcp-af-portal .gcp-af-termos-resumo:hover { color: var(--ac); }
.gcp-af-termos-versao { color: var(--txt3); font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; font-weight: 600; }
.gcp-af-termos-texto { padding: 0 var(--pad) 12px; }
.gcp-af-portal .gcp-af-termos-texto p { margin: 0 0 11px; color: var(--txt2); font-size: 14px; line-height: 1.55; }
.gcp-af-portal .gcp-af-termos-texto p:last-child { margin-bottom: 0; }
.gcp-af-portal .gcp-af-termos-texto strong { color: var(--ac); }
.gcp-af-termos-acoes { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 var(--pad) var(--pad); }

/* Com JS: sobreposicao, escondida ate abrir. */
/* Sobreposicao: so quando o JS marca .gcp-af-modal-aberto. Sem JS a classe
   nunca entra e o <details> segue sendo um <details> comum. */
.gcp-af-termos.gcp-af-modal-aberto {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	border: 0;
	border-radius: 0;
	background: rgba(6,9,12,.82);
}
.gcp-af-termos.gcp-af-modal-aberto .gcp-af-termos-resumo { display: none; }
.gcp-af-termos.gcp-af-modal-aberto .gcp-af-termos-corpo {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 620px;
	max-height: 100%;
	border: 1px solid var(--linha);
	border-radius: var(--r);
	background: var(--sup);
}
.gcp-af-termos.gcp-af-modal-aberto .gcp-af-termos-texto { overflow-y: auto; padding-top: 16px; }
body.gcp-af-travado { overflow: hidden; }

/* ----------------------------------------------------------- responsivo -- */

@media (max-width: 620px) {
	.gcp-af-portal { font-size: 14.5px; --pad: 16px; }
	.gcp-af-portal .gcp-af-ola { font-size: 22px; }
	.gcp-af-num { font-size: 27px; }
	.gcp-af-num-grande { font-size: 32px; }

	/* Tabela vira cartão. O data-rot de cada td faz o papel do cabeçalho. */
	.gcp-af-rolagem { overflow-x: visible; }
	.gcp-af-portal .gcp-af-tabela,
	.gcp-af-portal .gcp-af-tabela tbody,
	.gcp-af-portal .gcp-af-tabela tr,
	.gcp-af-portal .gcp-af-tabela td { display: block; width: 100%; }
	.gcp-af-portal .gcp-af-tabela thead { display: none; }
	.gcp-af-portal .gcp-af-tabela tr {
		margin-bottom: 10px;
		border: 1px solid var(--linha);
		border-radius: 11px;
		background: var(--sup2);
		padding: 4px 14px;
	}
	.gcp-af-portal .gcp-af-tabela td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 14px;
		padding: 9px 0;
		border-bottom: 1px solid var(--linha);
		text-align: right;
	}
	.gcp-af-portal .gcp-af-tabela tr td:last-child { border-bottom: 0; }
	.gcp-af-portal .gcp-af-tabela td::before {
		content: attr(data-rot);
		flex: 0 0 auto;
		color: var(--txt3);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 1px;
		text-transform: uppercase;
		text-align: left;
	}
	.gcp-af-portal .gcp-af-tabela th.gcp-af-dir,
	.gcp-af-portal .gcp-af-tabela td.gcp-af-dir { text-align: right; }
	.gcp-af-gr { height: 150px; gap: 5px; }
	.gcp-af-gr-val { font-size: 9.5px; }
	.gcp-af-portal .gcp-af-btn { width: 100%; }

	/* Botão de copiar embaixo do campo, largura inteira. */
	.gcp-af-portal .gcp-af-link .gcp-af-copiar {
		position: static;
		transform: none;
		display: flex;
		width: 100%;
		margin-top: 8px;
		/* 44px e o alvo minimo de dedo; aqui o min-height do tema ajuda. */
		min-height: 44px;
		height: 44px;
	}
	.gcp-af-portal .gcp-af-link input { padding-right: 16px; }

	/* Tipo e chave empilhados: lado a lado em 360px não cabem os dois. */
	.gcp-af-dupla { flex-direction: column; }
	.gcp-af-termos-acoes { flex-direction: column; }
	.gcp-af-portal .gcp-af-termos-acoes .gcp-af-btn,
	.gcp-af-portal .gcp-af-envio .gcp-af-btn { width: 100%; }
	.gcp-af-portal .gcp-af-dupla select { width: 100%; }
	.gcp-af-portal .gcp-af-btn-fraco { width: auto; }
	.gcp-af-pedido .gcp-af-btn { align-self: stretch; }
}

@media (min-width: 621px) {
	.gcp-af-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
	.gcp-af-cards { grid-template-columns: repeat(4, 1fr); }

	/* Lado a lado, com o traço vertical no lugar do horizontal.
	   1000px e não 900: abaixo disso cada coluna fica com menos de 450px, e
	   duas colunas espremidas leem pior do que duas empilhadas. */
	.gcp-af-sec-2 { grid-template-columns: 1fr 1fr; }
	.gcp-af-col + .gcp-af-col { border-top: 0; border-left: 1px solid var(--linha); }
}

@media (prefers-reduced-motion: reduce) {
	.gcp-af-portal * { transition: none !important; animation: none !important; }
}

/* Aviso preso a um campo: menor e sem a margem de bloco solto. */
.gcp-af-portal .gcp-af-aviso-campo { display: block; margin: 4px 0 0; padding: 10px 12px; font-size: 13px; }

/* Link de ação dentro de um aviso: precisa parecer o próximo passo. */
.gcp-af-portal .gcp-af-corrigir {
	display: inline-block;
	margin-left: 8px;
	padding: 4px 12px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}
.gcp-af-portal .gcp-af-corrigir:hover { text-decoration: none; background: rgba(255,255,255,.06); }
/* O campo que a pessoa veio corrigir tem que se anunciar. */
.gcp-af-portal .gcp-af-campo input:focus { border-color: var(--ac); box-shadow: 0 0 0 3px rgba(245,158,3,.18); }

/* ------------------------------------------------------------- níveis -- */
.gcp-af-nivel {
	padding: var(--pad);
	border: 1px solid var(--linha);
	border-radius: var(--r);
	background: var(--sup);
	margin-bottom: var(--pad);
}
.gcp-af-nivel-agora { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.gcp-af-portal .gcp-af-nivel-agora strong { font-size: 22px; font-weight: 700; color: var(--txt); }
.gcp-af-nivel-pct {
	padding: 3px 11px; border-radius: 999px;
	background: rgba(245,158,3,.14); border: 1px solid rgba(245,158,3,.4);
	color: var(--ac); font-size: 13px; font-weight: 700;
}
/* A barra mede o caminho ATÉ O PRÓXIMO degrau, não o total do programa:
   é a distância que a pessoa consegue percorrer, não a que já andou. */
.gcp-af-nivel-barra-fora {
	display: block; height: 8px; margin: 13px 0 10px;
	border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden;
}
.gcp-af-nivel-barra {
	display: block; height: 100%; border-radius: 999px;
	background: linear-gradient(90deg, var(--ac2), var(--ac3));
}
.gcp-af-portal .gcp-af-degrau-atual td { background: rgba(245,158,3,.07); }

.gcp-af-portal .gcp-af-lista { margin: 0; padding-left: 20px; color: var(--txt2); font-size: 14.5px; line-height: 1.65; }
.gcp-af-portal .gcp-af-lista li { margin-bottom: 9px; }
.gcp-af-portal .gcp-af-lista li:last-child { margin-bottom: 0; }
.gcp-af-portal .gcp-af-lista strong { color: var(--txt); }

/* --------------------------------------------------------- produtos --- */
.gcp-af-produtos { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
@media (min-width: 760px) { .gcp-af-produtos { grid-template-columns: 1fr 1fr; } }
.gcp-af-produto {
	display: flex; align-items: center; gap: 13px;
	padding: 12px; border: 1px solid var(--linha); border-radius: var(--r);
	background: var(--bg);
}
.gcp-af-produto img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.gcp-af-produto-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gcp-af-portal .gcp-af-produto-txt strong { color: var(--txt); font-size: 14px; overflow-wrap: anywhere; }
.gcp-af-produto .gcp-af-btn { flex: 0 0 auto; }
@media (max-width: 620px) {
	.gcp-af-produto { flex-wrap: wrap; }
	.gcp-af-produto .gcp-af-btn { width: 100%; }
}

/* Segundo cabeçalho dentro da mesma coluna. Estava em style="" no template. */
.gcp-af-sec-topo-2 { margin-top: 22px; }

/* ------------------------------------------- material de divulgação --- */
/*
 * GRID DE MINIATURAS, não uma pilha de imagens em tamanho natural.
 *
 * As peças vêm do SharePoint no tamanho em que foram feitas — 1536x2752 é
 * comum. Sem altura fixa na capa, o navegador desenha cada uma inteira e a
 * aba vira um rolo de banners gigantes: foi exatamente o que apareceu na
 * tela do Daniel. A capa tem proporção fixa e `object-fit: cover`; o tamanho
 * real fica a um clique, na própria capa.
 */
.gcp-af-portal .gcp-af-criativo-grupo {
	margin: 20px 0 10px; font-size: 12px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; color: var(--txt2);
	display: flex; align-items: center; gap: 8px;
}
.gcp-af-portal .gcp-af-criativo-grupo:first-of-type { margin-top: 14px; }
.gcp-af-portal .gcp-af-criativo-grupo .gcp-af-nota {
	font-size: 11px; padding: 1px 7px; border-radius: 999px;
	border: 1px solid var(--linha); letter-spacing: 0;
}

/*
 * Miniatura pequena e QUADRADA. O cartão não é para apreciar a peça — é para
 * reconhecer e clicar em Baixar. Preview grande só empurrava o resto da
 * grade para fora da tela.
 *
 * `auto-fill` com um mínimo em px, e não um número fixo de colunas: assim a
 * quantidade de colunas segue a largura disponível em vez de eu chutar um
 * número por faixa de tela.
 */
.gcp-af-criativos {
	display: grid; gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}
@media (min-width: 620px) {
	.gcp-af-criativos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

.gcp-af-criativo {
	display: flex; flex-direction: column; min-width: 0;
	border: 1px solid var(--linha); border-radius: var(--r);
	background: var(--sup); overflow: hidden;
}

/* A capa: quadrada, para o grid não dançar conforme a peça. */
.gcp-af-criativo-capa {
	display: block; aspect-ratio: 1 / 1; background: var(--sup2);
	border-bottom: 1px solid var(--linha); overflow: hidden;
}
.gcp-af-portal .gcp-af-criativo-img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .18s ease;
}
.gcp-af-criativo-capa:hover .gcp-af-criativo-img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
	.gcp-af-portal .gcp-af-criativo-img { transition: none; }
	.gcp-af-criativo-capa:hover .gcp-af-criativo-img { transform: none; }
}
.gcp-af-criativo-video {
	display: flex; align-items: center; justify-content: center; height: 100%;
	font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--txt2);
}

/* Texto de divulgação: o corpo é o conteúdo, então ele ocupa a capa. */
.gcp-af-criativo-texto {
	aspect-ratio: 1 / 1; overflow: auto; padding: 10px;
	background: var(--sup2); border-bottom: 1px solid var(--linha);
	color: var(--txt2); font-size: 13px; line-height: 1.55;
	white-space: pre-wrap; overflow-wrap: anywhere;
}

/*
 * O rodapé é só o botão. O nome do arquivo saiu da tela: vem do SharePoint
 * com nome de máquina, não diz nada a quem divulga e ainda roubava a largura
 * do cartão. Continua no `title`, no `alt` e no arquivo baixado.
 */
.gcp-af-criativo-pe {
	display: flex; padding: 7px; margin-top: auto;
}
.gcp-af-criativo-pe .gcp-af-btn {
	flex: 1 1 auto; text-align: center; padding: 5px 8px; font-size: 12px;
}

/* ------------------------------------------------- filtro por grupo --- */
.gcp-af-filtro-grupos {
	display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 4px;
}
.gcp-af-portal .gcp-af-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 12px; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--linha); background: transparent;
	color: var(--txt2); font-size: 12px; font-weight: 600; line-height: 1.4;
	font-family: inherit;
}
.gcp-af-portal .gcp-af-chip span {
	font-size: 11px; font-weight: 500; opacity: .7;
}
.gcp-af-portal .gcp-af-chip:hover { border-color: var(--txt2); color: var(--txt); }
.gcp-af-portal .gcp-af-chip-on {
	border-color: var(--ac2); color: var(--ac2); background: rgba(245,158,3,.10);
}
.gcp-af-portal .gcp-af-chip:focus-visible { outline: 2px solid var(--ac2); outline-offset: 2px; }

/* Filtrado num grupo só, o título do grupo repete o chip aceso. */
.gcp-af-bloco-sozinho .gcp-af-criativo-grupo { display: none; }
.gcp-af-bloco-sozinho .gcp-af-criativos { margin-top: 12px; }

/* A legenda que acompanha o banner, fechada por padrão. */
.gcp-af-criativo-legenda { border-top: 1px solid var(--linha); }
.gcp-af-portal .gcp-af-criativo-legenda > summary {
	cursor: pointer; list-style: none; padding: 7px 9px;
	font-size: 11px; font-weight: 600; color: var(--txt2);
}
.gcp-af-criativo-legenda > summary::-webkit-details-marker { display: none; }
.gcp-af-portal .gcp-af-criativo-legenda > summary:hover { color: var(--txt); }
.gcp-af-criativo-legenda > summary:focus-visible { outline: 2px solid var(--ac2); outline-offset: -2px; }
.gcp-af-criativo-legenda .gcp-af-criativo-texto {
	aspect-ratio: auto; max-height: 190px; border-bottom: 0; border-top: 1px solid var(--linha);
}
.gcp-af-criativo-pe { flex-wrap: wrap; gap: 6px; }