/* ==========================================================================
   MINHA CONTA — painel em cards + tela "Meus dados"
   ==========================================================================
   Entradas [57] e [67] do HISTORICO-BACKUPS.txt.

   O QUE A [67] MUDOU AQUI
     1) a barra de acao (.gp-acoes) voltou para DENTRO do card "Meus dados":
        virou rodape' com uma linha em cima, em vez da faixa branca solta que
        ela era desde a [57]. O motivo esta' no comentario da propria regra;
     2) o cabecalho de "Meus Orcamentos" ganhou uma SEGUNDA acao — a busca por
        codigo (.gp-lista-acoes + .gp-busca), que nao existia;
     3) entrou a secao 4.2, a grade da tela "Meus Cupons" (rota nova);
     4) o container cinza do item 1 passou a valer tambem para as duas telas
        novas, e a regra `#gp-senha` saiu (o link para aquela ancora nao existe
        mais).

   Carregado SO' nas telas da conta (is_account_page()), DEPOIS de
   institucional.css e account-ux.css (a dependencia esta' declarada no
   wp_enqueue_style, entao a ordem e' deterministica, nao sorte).

   Por que este arquivo existe: o miolo da conta ja' tem CSS, mas ele desenha
   o container como UM CARTAO BRANCO (institucional.css:1157-1166) e formata
   qualquer <p> de dentro com !important (1168-1173). Card branco dentro de
   card branco nao funciona, entao nas DUAS rotas novas o container deixa de
   ser cartao e vira o fundo cinza-claro do painel; os cartoes brancos passam a
   ser os de dentro (.gp-card, .gp-dash-card).

   Onde as regras daqui vencem as de la', e' por ESPECIFICIDADE, nao por
   !important sozinho: todas as que disputam com o institucional.css repetem o
   caminho .woocommerce-account .woocommerce-MyAccount-content e ainda
   acrescentam uma classe, ficando um degrau acima.

   Nenhuma cor nova entra: todos os hex daqui ja' estavam em uso no
   institucional.css / account-ux.css (conferido por contagem antes de
   escrever). VERDE NAO ENTRA — a unica excecao da loja e' o botao do
   WhatsApp, que nao mora aqui.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) O container da conta deixa de ser cartao branco — so' nas rotas novas
   --------------------------------------------------------------------------
   Uma trava por rota, de proposito:
     - o painel: .gp-dash so' existe la', entao :has() e' a trava natural;
     - as DUAS telas de lista: "Minhas Artes" (entrada [60], .gp-artes) e
       "Meus Orcamentos" (entrada [64], .gp-orc) — cada classe so' existe na
       sua tela, entao o :has() e' a trava natural;
     - "Meus dados": a classe do body (body.woocommerce-edit-account, que o
       WooCommerce poe em toda tela de conta) MAIS o :has() do formulario. Se
       por algum motivo a classe do body mudar de nome, o :has() segura; se o
       :has() nao for suportado, a classe do body segura.
     - "Meus Cupons" (entrada [67], .gp-cupons) e "Alterar Senha" (entrada
       [67], form.gp-senha): pelo :has(), como as telas de lista. As duas sao
       NOVAS, entao nao ha' classe antiga para herdar — a tela de senha reusa a
       classe `gp-senha` do formulario de proposito: e' ela que diz "esta e' a
       tela da senha" para as regras que precisam saber (a marca do POST, o
       respiro do topo, a margem dos avisos).
   Qualquer uma das duas chegando la' ja' basta.

   As rotas ANTIGAS (Pedidos, Enderecos, Detalhes, Carteira) continuam com o
   cartao branco de sempre: elas nao foram repaginadas e nao e' para mudar.

   NAO encostamos em body.woocommerce-view-order: a tela de pedido tem o
   proprio tratamento (account-ux.css:1746-1755) e nao e' para mudar. */
.woocommerce-account .woocommerce-MyAccount-content:has(> .gp-dash),
.woocommerce-account .woocommerce-MyAccount-content:has(> .gp-artes),
.woocommerce-account .woocommerce-MyAccount-content:has(> .gp-orc),
.woocommerce-account .woocommerce-MyAccount-content:has(> .gp-cupons),
.woocommerce-account .woocommerce-MyAccount-content:has(> form.gp-dados),
.woocommerce-account .woocommerce-MyAccount-content:has(> form.gp-senha),
body.woocommerce-edit-account .woocommerce-MyAccount-content {
	background: #f1f5f9 !important;
	border: 0 !important;
	border-radius: 10px !important;
	padding: 18px !important;
	box-sizing: border-box !important;
}

/* Entrada [61]: o respiro de DENTRO da caixa, para a primeira linha de texto
   dela nascer na mesma linha que a primeira do menu lateral.
   --------------------------------------------------------------------------
   Medido com o navegador de verdade (CDP, 1482px), antes de escrever:
     tinta do "Painel" (menu)      y = 306
     tinta do "Ola, admin!" (caixa) y = 314   -> 8px mais baixa
   O que produz essa diferenca: os 18px de padding-top daqui mais os 2px de
   .gp-dash-head, contra os 10px de padding-top do <a> do menu. Zerar os dois,
   como o pedido sugeria, passaria 12px DO PONTO e jogaria o "Ola" para cima
   do "Painel" — o numero certo e' 10px, que tira exatamente os 8.
   As duas colunas continuam com o topo nivelado (296 = 296): o que sobe e' so'
   o texto de dentro, nao a caixa.

   Vale para o painel e para as DUAS telas de lista (artes e orcamentos), que
   pediram o mesmo alinhamento na [63] e na [64].
   NAO vale para "Meus dados": la' o primeiro filho e' um formulario, com
   rotulo em cima do campo, e o respiro de 18px esta' certo.

   [63] O ULTIMO PIXEL. A conta de 10px fechava a TINTA, mas nao a CAIXA DE
   LINHA, e a diferenca de 1px aparecia na medicao fina:
       caixa de linha do "Painel" (1o <a> do menu) .. y = 309
       caixa de linha do "Ola" (1o texto da caixa) .. y = 308
   A causa e' a borda de 1px do <ul> do menu, que empurra o primeiro item para
   baixo: 296 (topo) + 1 (borda) + 5 (margem da pilula) + 7 (padding) = 309,
   contra 296 + 11 + 2 (.gp-dash-head) = 308. Com 11px em vez de 10px os dois
   numeros batem exatamente — e as duas telas de lista, cujo primeiro filho e'
   o card branco, herdam o mesmo respiro. */
.woocommerce-account .woocommerce-MyAccount-content:has(> .gp-dash),
.woocommerce-account .woocommerce-MyAccount-content:has(> .gp-artes),
.woocommerce-account .woocommerce-MyAccount-content:has(> .gp-orc),
.woocommerce-account .woocommerce-MyAccount-content:has(> .gp-cupons) {
	padding-top: 11px !important;
}

/* [67] "Alterar Senha" NAO entra na lista acima, de proposito: o primeiro filho
   dela e' o <form class="gp-senha"> e nao um cartao de lista — a peca e' a mesma
   de "Meus dados" (form + .gp-card), entao o respiro de 18px do item 1 e' o
   certo. Por isso a tela aparece aqui embaixo, so' para dizer que ela foi
   pensada e nao esquecida. */

/* O aviso de "dados salvos" que o WooCommerce imprime acima do formulario
   fica DENTRO do container cinza. Sem isso ele encosta no canto. */
.woocommerce-account .woocommerce-MyAccount-content:has(> form.gp-dados) > .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content:has(> form.gp-dados) > .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content:has(> form.gp-dados) > .woocommerce-error,
.woocommerce-account .woocommerce-MyAccount-content:has(> form.gp-senha) > .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content:has(> form.gp-senha) > .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content:has(> form.gp-senha) > .woocommerce-error,
.woocommerce-account .woocommerce-MyAccount-content:has(> .gp-cupons) > .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content:has(> .gp-cupons) > .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content:has(> .gp-cupons) > .woocommerce-error,
.woocommerce-account .woocommerce-MyAccount-content:has(> .gp-dash) > .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content:has(> .gp-dash) > .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content:has(> .gp-dash) > .woocommerce-error {
	margin: 0 0 16px 0 !important;
}

/* --------------------------------------------------------------------------
   2) PAINEL — saudacao + grid de cards
   --------------------------------------------------------------------------
   O fundo cinza vem do container (item 1), entao .gp-dash e' so' o wrapper
   que empilha o cabecalho e o grid. */
.gp-dash-head {
	margin: 0 0 18px 0;
	padding: 2px 4px 0;
}

.gp-dash-ola {
	/* O <h2> da saudacao. Azul-escuro institucional: e' o tom mais forte da
	   paleta que nao vira "texto azul de link". */
	margin: 0 0 4px 0;
	padding: 0;
	font-size: 28px;
	line-height: 1.2;
	font-weight: 800;
	color: var(--gp-blue-dark, #0e2a4f);
}

/* O subtitulo e' <p>: o institucional.css:1168 formata todo <p> da area com
   !important (14px / #334155 / margem 14px). O caminho abaixo tem uma classe a
   mais que aquela regra, entao vence sem briga. */
.woocommerce-account .woocommerce-MyAccount-content p.gp-dash-sub {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #64748b !important;
}

.gp-dash-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	align-items: stretch;
}

/* O card. Vale para <a> e para <button> (o de Cupons e' botao), entao o
   reset do botao nativo vem junto. */
.gp-dash-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	position: relative;
	min-height: 152px;
	padding: 18px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
	box-sizing: border-box;
	text-decoration: none;
	color: inherit;
	text-align: left;
	font: inherit;
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.gp-dash-card:hover,
.gp-dash-card:focus-visible {
	border-color: #d4e2f0;
	box-shadow: 0 6px 16px rgba(20, 78, 130, 0.1);
	transform: translateY(-2px);
}

.gp-dash-card:focus-visible {
	outline: 2px solid var(--gp-blue, #144e82);
	outline-offset: 2px;
}

.gp-dash-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0 0 14px 0;
	border-radius: 10px;
	background: #f1f5f9;
	color: var(--gp-blue, #144e82);
	flex: 0 0 auto;
}

.gp-dash-ico svg {
	width: 22px;
	height: 22px;
	display: block;
}

.gp-dash-titulo {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #1f2a37;
}

.gp-dash-txt {
	/* margin-top:auto empurra o texto para a base do card: com titulos de
	   alturas diferentes na mesma linha, os textos ficam alinhados embaixo. */
	display: block;
	margin-top: auto;
	padding-top: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: #64748b;
}

/* --- Card de destaque: Meu Cashback -------------------------------------
   No mockup este card e' VERDE. A loja e' azul, entao ele vira o azul claro
   da casa (#eef4fb / #d4e2f0 — os mesmos do botao "voltar" em
   account-ux.css:1531-1533 e do hover da nav). */
.gp-dash-card--saldo {
	background: #eef4fb;
	border-color: #d4e2f0;
}

.gp-dash-card--saldo .gp-dash-ico {
	background: #dbeafe;
}

.gp-dash-saldo {
	display: block;
	margin: 6px 0 0 0;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--gp-blue-dark, #0e2a4f);
}

.gp-dash-saldo .woocommerce-Price-currencySymbol {
	font-size: 0.68em;
	font-weight: 700;
	vertical-align: 0.08em;
}

.gp-dash-indisponivel {
	font-size: 14px;
	font-weight: 600;
	color: #64748b;
}

/* O card do WhatsApp e' o unico que sai do site. O GLIFO fica no verde da
   marca — o mesmo #25d366 do botao, a unica excecao de verde da loja — mas a
   caixa atras dele continua NEUTRA: nenhum verde novo entra na loja por causa
   deste card. */
.gp-dash-card--zap .gp-dash-ico {
	background: #f1f5f9;
	color: #25d366;
}

/* --- Aviso de modulo sem tela (Meus Cupons) -----------------------------
   Visual do callout que a casa ja' usa para "Aguardando Arte"
   (account-ux.css:1365-1369). Injetado pelo minha-conta.js ao clique. */
.gp-aviso {
	display: block;
	width: 100%;
	margin: 12px 0 0 0;
	padding: 10px 12px;
	background: #fff8ea;
	border: 1px solid #f0d48a;
	border-left: 4px solid var(--gp-amber, #f0ad4e);
	border-radius: 6px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #5a3d00;
	box-sizing: border-box;
}

/* No menu lateral o <li> e' estreito: o aviso nao pode estourar. */
.woocommerce-MyAccount-navigation .gp-aviso {
	margin: 6px 12px 10px;
	width: auto;
}

/* --------------------------------------------------------------------------
   3) MEUS DADOS — card branco, grid de 2 colunas
   -------------------------------------------------------------------------- */
.gp-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 22px 24px;
	margin: 0 0 16px 0;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
	box-sizing: border-box;
}

.gp-card:last-of-type {
	margin-bottom: 0;
}

.gp-card-head {
	margin: 0 0 18px 0;
	padding: 0 0 14px 0;
	border-bottom: 1px solid #edf2f7;
}

.gp-card-titulo {
	margin: 0 0 4px 0;
	padding: 0;
	font-size: 20px;
	line-height: 1.25;
	font-weight: 800;
	color: var(--gp-blue-dark, #0e2a4f);
}

.woocommerce-account .woocommerce-MyAccount-content p.gp-card-sub {
	margin: 0 !important;
	font-size: 13.5px !important;
	line-height: 1.55 !important;
	color: #64748b !important;
}

/* --- O grid de campos ---------------------------------------------------- */
.gp-grid2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 24px;
}

.gp-campo {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.gp-campo--full {
	grid-column: 1 / -1;
}

/* O label vence o institucional.css:1563 (12px) por ter uma classe a mais. */
.woocommerce-account .woocommerce-EditAccountForm .gp-campo label {
	margin: 0 0 6px 0 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: #334155 !important;
}

.gp-req {
	color: var(--gp-red, #ef4444);
	font-weight: 700;
}

/* Ajuda sob o campo. NAO e' <p>: o institucional.css:1168 pega todo <p>. */
.gp-ajuda {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	line-height: 1.45;
	color: #64748b;
}

/* --- O input -------------------------------------------------------------
   Classe propria (nao usamos .input-text) para nao herdar o height:36px do
   institucional.css:1570, que e' baixo demais para o desenho do mockup. */
.gp-input {
	display: block;
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 14px;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 15px;
	line-height: normal;
	color: #334155;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	appearance: none;
	-webkit-appearance: none;
}

textarea.gp-input {
	height: auto;
	min-height: 90px;
	padding: 10px 14px;
	line-height: 1.5;
	resize: vertical;
}

.gp-input::placeholder {
	color: #94a3b8;
	opacity: 1;
}

/* Foco no azul institucional — pedido explicito do Bruno. */
.gp-input:focus,
.gp-input:focus-visible {
	border-color: var(--gp-blue, #144e82);
	box-shadow: 0 0 0 3px rgba(20, 78, 130, 0.12);
	outline: none;
}

/* O <select> precisa da seta desenhada: com appearance:none a nativa sai. */
select.gp-input {
	padding-right: 40px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px 18px;
	cursor: pointer;
}

/* Campo travado (Celular antes do "Editar"). O atributo readonly ja' impede a
   edicao; isto e' so' o recado visual. */
.gp-input.gp-travado {
	background: #f1f5f9;
	border-color: #e2e8f0;
	color: #64748b;
	cursor: not-allowed;
}

/* Campo com icone a' direita (data de nascimento). */
.gp-com-icone {
	position: relative;
	display: block;
}

.gp-com-icone .gp-input {
	padding-right: 46px;
}

.gp-icone-campo {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	color: #64748b;
	pointer-events: none;
}

.gp-icone-campo svg {
	width: 19px;
	height: 19px;
	display: block;
}

/* Campo com botao ao lado (Celular + "Editar"). */
.gp-com-botao {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.gp-com-botao .gp-input {
	/* min-width:0 e' o que permite o input encolher ao lado do botao. */
	flex: 1 1 auto;
	min-width: 0;
}

.gp-btn-editar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 0 16px;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--gp-blue, #144e82);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.gp-btn-editar svg {
	width: 16px;
	height: 16px;
	display: block;
}

.gp-btn-editar:hover {
	background: #eef4fb;
	border-color: #d4e2f0;
}

/* ARMADILHA: display:inline-flex acima venceria o [hidden] do HTML, e o botao
   apareceria mesmo escondido. Esta regra e' a que faz o hidden valer. */
.gp-btn-editar[hidden] {
	display: none !important;
}

/* Campo com prefixo fixo (Instagram: o "@" mora fora do input). */
.gp-prefixo {
	display: flex;
	align-items: stretch;
}

.gp-prefixo-sinal {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0 14px;
	background: #f8fafc;
	border: 1px solid #cbd5e1;
	border-right: 0;
	border-radius: 8px 0 0 8px;
	font-size: 15px;
	font-weight: 600;
	color: #64748b;
}

.gp-prefixo .gp-input {
	border-radius: 0 8px 8px 0;
}

/* O foco do input acende a caixa do "@" tambem — o conjunto e' um campo so'. */
.gp-prefixo:has(.gp-input:focus) .gp-prefixo-sinal {
	border-color: var(--gp-blue, #144e82);
	color: var(--gp-blue, #144e82);
}

/* --- Divisor "Perfil Grafico" -------------------------------------------- */
.gp-divisor {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 26px 0 20px;
}

.gp-divisor::before,
.gp-divisor::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: #edf2f7;
}

.gp-divisor span {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #64748b;
}

/* --- Barra de acao -------------------------------------------------------
   Entrada [67]. ATE' A [66] esta barra era uma FAIXA BRANCA SOLTA embaixo dos
   cards — o desenho nasceu quando a troca de senha era um segundo card dentro
   desta mesma tela, e um rodape' dentro do primeiro card nao fecharia mais o
   formulario. Com a [67] a senha saiu daqui, sobrou UM card so', e a barra
   voltou para dentro dele, como no mockup: agora ela e' o rodape' do card
   "Meus dados", logo abaixo do bloco "Perfil Grafico" (item 2 do pedido:
   "o botao SALVAR deve ficar posicionado diretamente abaixo do bloco PERFIL
   GRAFICO").

   O que mudou no desenho, e por que:
     - sai o fundo branco, a borda, o raio e a sombra: dentro do card eles
       desenhariam uma caixa dentro da outra;
     - entra uma linha de 1px em cima, que e' o que separa o rodape' do ultimo
       campo sem precisar de moldura;
     - o padding horizontal zera porque quem ja' da' o respiro lateral e' o
       padding do .gp-card (24px) — com 18px aqui, o botao ficaria 42px para
       dentro da borda do card e desalinhado de todos os campos acima.
   O alinhamento a' direita e o gap continuam os de antes.

   O link "Excluir minha conta" NAO existe (decisao do Bruno). */
.gp-acoes {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin: 22px 0 0 0;
	padding: 18px 0 0 0;
	background: none;
	border: 0;
	border-top: 1px solid #edf2f7;
	border-radius: 0;
	box-shadow: none;
	box-sizing: border-box;
}

/* O botao Salvar. O institucional.css:1594 ja' pinta este mesmo botao
   (button.woocommerce-Button[name="save_account_details"]) de #1b65a5, mas em
   caixa-alta, 12px e raio 4px — desenho antigo. Aqui ele volta ao azul
   institucional da paleta e ao desenho do mockup. Especificidade (0,3,1)
   contra (0,2,1) daquela regra: vence. */
.woocommerce-account .woocommerce-EditAccountForm button.gp-btn-salvar {
	padding: 13px 34px !important;
	background-color: var(--gp-blue, #144e82) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--gp-radius, 8px) !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer !important;
	margin: 0 !important;
	transition: background-color 0.18s ease !important;
}

.woocommerce-account .woocommerce-EditAccountForm button.gp-btn-salvar:hover,
.woocommerce-account .woocommerce-EditAccountForm button.gp-btn-salvar:focus-visible {
	background-color: var(--gp-blue-dark, #0e2a4f) !important;
}

.woocommerce-account .woocommerce-EditAccountForm button.gp-btn-salvar:focus-visible {
	outline: 2px solid var(--gp-blue-dark, #0e2a4f);
	outline-offset: 2px;
}

/* --- A nota de identificacao da tela da senha (entrada [67]) -------------
   "Alterando a senha da conta de Fulano." — fica abaixo do botao, alinhada a'
   direita como ele, para ler como legenda do proprio botao e nao como mais um
   campo do formulario. Cinza claro: e' identificacao, nao instrucao. Existe
   porque quem tem mais de um login precisa saber de QUE conta esta' trocando a
   senha antes de clicar — a tela nao tem mais nenhum outro campo de identidade
   para onde olhar. */
.woocommerce-account .woocommerce-MyAccount-content p.gp-senha-nota {
	margin: 14px 0 0 0 !important;
	padding: 0 !important;
	font-size: 12.5px !important;
	line-height: 1.5 !important;
	text-align: right;
	color: #94a3b8 !important;
}

/* --------------------------------------------------------------------------
   4) MENU LATERAL — bloco unico com os icones dos cards (entrada [62])
   --------------------------------------------------------------------------
   O DESENHO VIVO vinha do institucional.css (1108-1154), todo com !important:
   <ul> branca com borda de 1px e cada <li> com border-bottom. Aqui nao se
   troca uma folha pela outra — o caminho abaixo repete
   .woocommerce-account .woocommerce-MyAccount-navigation e ainda acrescenta o
   <li>/<a> por TIPO, ficando um degrau acima daquelas regras. E' a mesma
   tecnica do resto deste arquivo: vencer por especificidade, nao por forca.

   AS LINHAS DUPLAS que o pedido mandou eliminar eram minhas: a entrada [57]
   tinha posto border-TOP no primeiro extra ("--primeiro") e no "Sair" para
   separar o bloco, mas o <li> de cima JA' tinha border-bottom — as duas
   somavam. As duas regras sairam; agora existe UMA divisoria so', em cada
   <li>, e nenhum item tem tratamento de borda proprio.

   O <a> virou flex para o icone e o rotulo ficarem na mesma linha. Os
   desenhos vem de gpmc_icone(), no include, e nao de uma copia local: e' isso
   que faz o menu e os cards continuarem identicos depois da proxima mexida. */

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #fff !important;
	border: 1px solid #e9eef4 !important;
	border-radius: 10px !important;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
	overflow: hidden !important;
	display: block !important;
}

/* A UNICA divisoria do bloco. Nada de border-top em item nenhum. */
body.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid #f0f0f0 !important;
	background: none !important;
	height: auto !important;
	line-height: normal !important;
	display: block !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex !important;
	align-items: center !important;
	gap: 11px !important;
	padding: 12px 16px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 18px !important;
	color: #334155 !important;
	text-decoration: none !important;
	border-radius: 8px !important;
	transition: background-color 0.18s ease, color 0.18s ease !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation .gp-nav-ico {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 18px !important;
	height: 18px !important;
	flex: 0 0 18px !important;
	color: #94a3b8;
}

body.woocommerce-account .woocommerce-MyAccount-navigation .gp-nav-ico svg {
	display: block !important;
	width: 18px !important;
	height: 18px !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation .gp-nav-rotulo {
	display: block !important;
	min-width: 0 !important;
}

/* Inativo no hover: o cinza claro pedido. O icone herda a cor do <a>, entao
   ele e o rotulo mudam juntos. */
body.woocommerce-account .woocommerce-MyAccount-navigation li:not(.is-active) a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation li:not(.is-active) a:focus-visible {
	background-color: #f8f9fa !important;
	color: var(--gp-blue, #144e82) !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active .gp-nav-ico,
body.woocommerce-account .woocommerce-MyAccount-navigation li:not(.is-active) a:hover .gp-nav-ico {
	color: inherit !important;
}

/* Ativo: pilula azul com canto arredondado DENTRO do bloco branco.
   O recuo de 6px nas laterais e' o que faz o canto existir — sangrando de ponta
   a ponta nao haveria canto para arredondar. O padding cai na mesma medida em
   que o margin sobe, entao a linha NAO cresce: 5+7+18+7+5 = 42px, igual as
   outras (12+18+12). E 6+10 = 16 = o padding-left das outras, entao os icones
   ficam todos na mesma coluna. */
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background-color: var(--gp-blue, #144e82) !important;
	color: #fff !important;
	border-radius: 8px !important;
	margin: 5px 6px !important;
	padding: 7px 10px !important;
}

/* "Sair": vermelho da casa (--gp-red, account-ux.css:18). E' o unico item
   colorido do menu — o resto e' neutro, para nao competir com a pilula azul. */
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--gp-red, #ef4444) !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:focus-visible {
	background-color: rgba(239, 68, 68, 0.07) !important;
	color: var(--gp-red, #ef4444) !important;
}

/* O institucional.css aperta o menu em telas pequenas (1950-1953). Como as
   regras acima vencem por especificidade, o aperto tem de ser repetido aqui,
   senao o menu fica com o respiro de desktop no celular. */
@media (max-width: 768px) {
	body.woocommerce-account .woocommerce-MyAccount-navigation li a {
		padding: 11px 14px !important;
	}
}

/* --------------------------------------------------------------------------
   4.1) AS DUAS TELAS DE LISTA — "Minhas Artes" ([60]/[63]) e
        "Meus Orcamentos" ([64])
   --------------------------------------------------------------------------
   As duas telas sao a MESMA peca desenhada duas vezes: um card branco continuo,
   um cabecalho com titulo e subtitulo (e, nos orcamentos, o botao de pedir uma
   proposta nova), uma tabela e um rodape' de paginacao. Por isso tudo aqui e'
   uma classe so', compartilhada — .gp-lista, .gp-lista-head, .gp-tabela,
   .gp-pag — em vez de dois blocos quase iguais. Os dois wrappers (.gp-artes e
   .gp-orc) nao tem regra nenhuma de desenho: existem para o :has() do item 1
   saber em que tela esta' e para deixar o HTML legivel.

   A [63] substituiu o cartao provisorio da [60] (max-width 470px, centrado)
   por este card de largura cheia. O provisorio nao sobrou em lugar nenhum: as
   classes .gp-artes-card / .gp-artes-ico / .gp-artes-titulo / .gp-artes-txt /
   .gp-artes-btn foram REMOVIDAS junto, para nao ficar CSS morto no arquivo.

   Nenhuma cor nova entra: os hex daqui sao os que ja' estavam no arquivo e no
   institucional.css. O VERDE continua fora — inclusive no badge de status, que
   e' o unico lugar onde ele seria tentador ("Aprovado"): o aprovado e' AZUL
   cheio, o em aberto e' azul claro e o expirado e' cinza. */

/* O wrapper: bloco normal. O branco e' do card de dentro, nao dele. */
.gp-artes,
.gp-orc {
	display: block;
}

/* O card branco continuo: cantos arredondados e sombra suave, como os cards do
   painel. O overflow e' o que faz o cabecalho e o rodape' respeitarem o canto
   arredondado sem precisar de raio proprio.

   [67-d] A LARGURA DO CARD. O Bruno pediu para conferir se havia um max-width
   travando o card antes da hora. Nao havia: nenhuma folha do site poe max-width
   aqui. O card ja' ocupava os 100% da coluna direita — quem nao cabia era a
   TABELA dentro dele. O width/max-width abaixo ficam assim mesmo, explicitos,
   para que a pergunta nao precise ser refeita: e' documentacao, nao correcao.

   O overflow-x:auto e' o SEGURO, no lugar do overflow:hidden que existia. Com
   hidden, tudo o que passasse da borda direita simplesmente sumia — foi assim
   que o cabecalho "AÇÃO" virou "AÇ". Com auto nada e' cortado: se um dia a
   tabela nao couber (uma tela entre 783px e ~900px, um navegador com a fonte
   maior, um nome de arquivo absurdo), aparece a barra de rolagem em vez do
   corte silencioso. O overflow-y continua hidden para o clipping dos cantos
   arredondados nao se perder. */
.woocommerce-account .woocommerce-MyAccount-content .gp-lista {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #e9eef4;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
	overflow-x: auto;
	overflow-y: hidden;
}

/* ---- o cabecalho -------------------------------------------------------- */
.gp-lista-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 22px 17px;
	border-bottom: 1px solid #f0f0f0;
}

.gp-lista-txt {
	min-width: 0;
}

.woocommerce-account .woocommerce-MyAccount-content h2.gp-lista-titulo {
	margin: 0 0 5px 0 !important;
	padding: 0 !important;
	font-size: 20px !important;
	line-height: 1.25 !important;
	font-weight: 800 !important;
	color: var(--gp-blue-dark, #0e2a4f) !important;
}

.woocommerce-account .woocommerce-MyAccount-content p.gp-lista-sub {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13.5px !important;
	line-height: 1.55 !important;
	font-weight: 400 !important;
	color: #64748b !important;
}

/* ---- o botao azul da casa ----------------------------------------------- */
/* Mesmo azul, mesmo raio e mesmo peso do .gp-btn-salvar: dois botoes diferentes
   na mesma area pareceriam de sistemas diferentes. */
.woocommerce-account .woocommerce-MyAccount-content a.gp-lista-btn,
.woocommerce-account .woocommerce-MyAccount-content a.gp-lista-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0 !important;
	padding: 11px 20px !important;
	background-color: var(--gp-blue, #144e82) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--gp-radius, 8px) !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	white-space: nowrap;
	flex: 0 0 auto;
	transition: background-color 0.18s ease !important;
}

.woocommerce-account .woocommerce-MyAccount-content a.gp-lista-btn:hover,
.woocommerce-account .woocommerce-MyAccount-content a.gp-lista-btn:focus-visible {
	background-color: var(--gp-blue-dark, #0e2a4f) !important;
}

.gp-lista-btn-mais {
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	margin-top: -1px;
}

/* ---- as duas acoes do cabecalho (entrada [67], so' em "Meus Orcamentos") --
   Ate' a [66] o cabecalho tinha UM botao. A [67] acrescentou "Localizar
   Orcamento", entao os dois passam a viver nesta linha: o .gp-lista-btn azul
   (acao principal) e o .gp-busca (acao secundaria, contorno). Sem este
   wrapper, o `justify-content: space-between` do .gp-lista-head distribuiria o
   titulo e cada botao em tres pontos diferentes da linha. */
.gp-lista-acoes {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
	flex: 0 0 auto;
}

/* ---- a busca rapida por codigo (entrada [67]) ---------------------------
   O <details> e' o que faz o campo "abrir" sem uma linha de JavaScript: o
   <summary> e' o botao secundario e o <form> de dentro e' o campo, que so'
   existe quando o details esta' aberto.

   Por que um <details> e nao um campo sempre visivel: o cabecalho ja' tem o
   botao principal, e um campo de 6 digitos ocupando a mesma linha daria a ele
   o mesmo peso visual de "Solicitar Novo Orcamento". A busca e' o caminho de
   excecao — quem tem o codigo na mao procura por ele.

   Por que o formulario sai como POPOVER (position: absolute) e nao empurrando
   a tabela: abrir a busca nao pode reflowar a lista inteira. Ele flutua por
   cima do primeiro item da tabela e fecha quando o cliente clica de novo no
   summary. O `right: 0` prende a caixa pela direita, que e' o lado do botao —
   assim ela nao escapa do cartao. */
.gp-busca {
	position: relative;
	flex: 0 0 auto;
}

/* O <summary> desenhado como botao SECUNDARIO: mesmo raio, mesmo peso e mesma
   familia do .gp-lista-btn, mas sem preenchimento — so' o contorno. E' o que
   diz "isto e' o outro caminho, nao o principal". */
.woocommerce-account .woocommerce-MyAccount-content .gp-busca-btn {
	/* box-sizing explicito: o <summary> NAO esta' coberto pelo border-box do
	   tema. No desktop isso nao aparecia (a largura e' automatica), mas no
	   celular o `width:100%` do bloco mobile somava os 36px de padding e os 2px
	   de borda POR FORA dos 100% — medido, o botao "Localizar Orçamento" saia
	   448px dentro de uma coluna de 410 e passava 22px da borda do card.
	   Era um defeito antigo que o overflow:hidden escondia CORTANDO o botao;
	   quando o [67-d] trocou o hidden por overflow-x:auto, ele apareceu como
	   barra de rolagem. Com border-box os 100% passam a ser o total. */
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0 !important;
	padding: 10px 18px !important;
	background-color: transparent !important;
	color: var(--gp-blue, #144e82) !important;
	border: 1px solid #c7d6e5 !important;
	border-radius: var(--gp-radius, 8px) !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.18s ease, background-color 0.18s ease !important;

	/* A setinha do <details> nativa sai: o desenho e' de botao, e a seta
	   denunciaria que aquilo e' um acordeao. */
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-content .gp-busca-btn::-webkit-details-marker {
	display: none;
}

.woocommerce-account .woocommerce-MyAccount-content .gp-busca-btn:hover,
.woocommerce-account .woocommerce-MyAccount-content .gp-busca-btn:focus-visible {
	border-color: var(--gp-blue, #144e82) !important;
	background-color: #f8fafc !important;
}

.woocommerce-account .woocommerce-MyAccount-content .gp-busca-btn:focus-visible {
	outline: 2px solid var(--gp-blue-dark, #0e2a4f);
	outline-offset: 2px;
}

/* O campo. Largura de 6 digitos e nao "100%": o codigo e' curto e fixo, e um
   campo largo convidaria a digitar outra coisa. */
.woocommerce-account .woocommerce-MyAccount-content .gp-busca-form {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 12px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
	box-sizing: border-box;
}

.woocommerce-account .woocommerce-MyAccount-content .gp-busca-campo {
	width: 116px;
	margin: 0 !important;
	padding: 9px 10px !important;
	background: #fff !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center;
	letter-spacing: 0.08em;
	color: var(--gp-blue-dark, #0e2a4f) !important;
	box-sizing: border-box;
}

.woocommerce-account .woocommerce-MyAccount-content .gp-busca-campo::placeholder {
	font-weight: 400;
	letter-spacing: 0.06em;
	color: #94a3b8;
}

.woocommerce-account .woocommerce-MyAccount-content .gp-busca-campo:focus,
.woocommerce-account .woocommerce-MyAccount-content .gp-busca-campo:focus-visible {
	border-color: var(--gp-blue, #144e82) !important;
	outline: 2px solid rgba(20, 78, 130, 0.18);
	outline-offset: 0;
}

.woocommerce-account .woocommerce-MyAccount-content .gp-busca-ir {
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 9px 16px !important;
	background-color: var(--gp-blue, #144e82) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 8px !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
	transition: background-color 0.18s ease !important;
}

.woocommerce-account .woocommerce-MyAccount-content .gp-busca-ir:hover,
.woocommerce-account .woocommerce-MyAccount-content .gp-busca-ir:focus-visible {
	background-color: var(--gp-blue-dark, #0e2a4f) !important;
}

/* ---- a tabela -----------------------------------------------------------
   [67-d] O CORTE NA DIREITA — a causa de verdade, medida no navegador.

   O sintoma que o Bruno viu ("o cabecalho mostra so' AÇ") nao era o botao: era
   a TABELA INTEIRA passando da borda do card.

   A medicao que vale nao e' a de um arquivo de teste meu, e' a da PAGINA REAL:
   o HTML de /minha-conta/ baixado do site, os scripts fora, o fragmento da
   tabela no lugar da area da conta, e as 14 folhas de estilo do site — a
   cascata inteira. Com ela, a 1382px de janela, a PRODUCAO de hoje mede:

       .woocommerce ............ 1000px   <- o teto do tema, ver nota no fim
       card .gp-lista ..........  714px   (borda direita em x=830,5)
       tabela (MINHAS ARTES) ... 766,8px  <- 52,8px alem da borda do card
       tabela (ORCAMENTOS) ..... 864,0px  <- 150px alem, e sao 7 colunas

   E o que producao FAZIA com esses 52,8px era o pior possivel: o card tinha
   `overflow: hidden`, entao o excedente era cortado em silencio — a ultima
   coluna saia pela direita e sumia. Dai o "AÇ".

   Por que a tabela nao encolhe sozinha: com `table-layout: auto`, a largura
   MINIMA da tabela e' a soma das larguras minimas das colunas, e a tabela
   nunca encolhe abaixo disso — ela transborda o pai. E o que engordava esse
   minimo era uma linha so', do `th`:

       white-space: nowrap;

   Ele proibia o cabecalho de quebrar. Entao "IDENTIFICACAO E DESCRICAO",
   "DATA DE ENVIO" e "TAMANHO / FORMATO" exigiam, cada um, a largura da frase
   INTEIRA numa linha — e a soma disso estourava a coluna da conta.

   As tres correcoes, e por que cada uma:
     1) `white-space: nowrap` SAIU do th. O cabecalho volta a poder quebrar,
        e o minimo de cada coluna passa a ser a palavra mais longa, nao a
        frase. E' esta que resolve quase tudo: sozinha derruba o minimo das
        Artes de 766,8 para ~620px.
        O `nowrap` continua vivo na ULTIMA coluna, pela regra do [67-b] —
        la' ele e' proposital, para "AÇÃO" e o botao nunca quebrarem.
     2) padding lateral de 14px para 9px nas colunas do meio. E' o "respiro"
        que o pedido citou, e o numero nao saiu de gosto: com ele as ARTES
        ficam com 144px de folga e ORCAMENTOS — que tem SETE colunas e e' o
        caso apertado — fica com 9,5px. Com 12px a tabela de Orcamentos ainda
        media 712,5 contra 712 de card: meio pixel a mais, e com o
        overflow-x:auto isto viraria uma barra de rolagem de 1px no desktop,
        que e' justamente o que o pedido proibia. 9px e' o que compra a folga.
     3) A coluna da previa caiu de 80px para 70px — o quadrado do documento
        tem 48px, entao 70 e' 48 + 2 x 11 de respiro. A etiqueta da extensao
        (PDF, CDR...) nao conta para esse minimo: ela e' position:absolute.
        O ITEM 3 INTEIRO MORREU NA [67-e]: a coluna da previa saiu da tabela e
        o `.gp-td-prev` foi apagado na [68-i]. Fica o registro porque e' ele que
        explica a 1a coluna ter perdido o padding lateral proprio — ver a
        entrada [67-e] logo abaixo.

   `table-layout: auto` fica dito em voz alta, embora ja' fosse o padrao: e' a
   decisao que faz a sobra de largura ir para as colunas de TEXTO, e nao para a
   de acao — que e' a dona do `width: 1%` logo abaixo.

   UMA COISA QUE NAO FOI FEITA, de proposito: o `.woocommerce` para na 1000px
   (o wrapper do site tem 1200) porque o woocommerce-blocktheme.css traz
   `.woocommerce-account main .woocommerce { max-width: 1000px }`. Derrubar
   esse teto daria ~170px a mais de card e as tabelas respirariam sem aperto —
   mas alargaria TODAS as abas da conta, ou so' estas duas, deixando "Minhas
   Artes" mais larga que "Meus Pedidos". Ficou como esta' (o account-ux.css ja'
   derruba o teto, mas so' no view-order). Se o aperto voltar a incomodar, e'
   aqui que se mexe. */
.gp-tabela {
	width: 100%;
	max-width: 100%;
	table-layout: auto;
	border-collapse: collapse;
}

.woocommerce-account .woocommerce-MyAccount-content .gp-tabela th {
	padding: 11px 9px !important;
	margin: 0 !important;
	background: #f8fafc !important;
	border: 0 !important;
	border-bottom: 1px solid #eef2f6 !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	text-align: left !important;
	color: #64748b !important;
	/* Sem white-space:nowrap aqui de proposito — ver [67-d] acima. */
}

.woocommerce-account .woocommerce-MyAccount-content .gp-tabela td {
	padding: 13px 9px !important;
	margin: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid #f0f0f0 !important;
	font-size: 13.5px !important;
	line-height: 1.5 !important;
	color: #334155 !important;
	vertical-align: middle !important;
}

/* [67-e] A PREVIA SAIU DA TABELA — e com ela o padding proprio da 1a coluna.
   Aquela regra existia por um motivo so': o quadrado da previa (12 + 8 + 48).
   Sem previa, a primeira coluna das DUAS tabelas e' texto corrido, e o padding
   normal de 9px serve melhor do que um 12/8 assimetrico que ninguem mais
   explica. Efeito colateral bom: a tabela de Orcamentos perde 2px de minima.

   A regra `.gp-artes ... width: 1%` do [67-d] TAMBEM saiu, e e' preciso dizer
   por que, porque ela era a coisa CERTA ate' ontem: com `width: 1%` a coluna
   nao recebe a sobra da linha e cai no proprio minimo — o que prendia a previa
   em 70px e agora prenderia "Identificacao e Descricao" na largura da maior
   palavra do cabecalho, empurrando a sobra para as outras colunas. Inverter
   isto e' literalmente o ponto 1 do pedido: a largura que a previa ocupava tem
   de ir PARA a descricao, nao sair dela.
   (A coluna de ACAO continua com o `width: 1%` dela — la' o minimo e' o que se
   quer mesmo.) */

/* O ALINHAMENTO, coluna a coluna, na tabela de "Minhas Artes".
   O pedido e' SO' desta tela: a de Orcamentos fica como esta'. Por isso o
   .gp-artes no seletor, e nao uma regra solta no .gp-tabela.

   O cabecalho e a celula andam JUNTOS — a classe gp-col-centro vai nos DOIS.
   E' o "sincroniza o text-align do th com o do td" do pedido, e e' de proposito
   que nao exista um jeito de mudar um sem o outro: uma classe, dois lugares.

   Especificidade (0,5,1): ganha do `text-align: left !important` do th base,
   que e' (0,3,1) — sem o .gp-artes/.gp-col-centro no seletor, o `!important`
   daquele `left` venceria e o centro nao apareceria. */
.woocommerce-account .woocommerce-MyAccount-content .gp-artes .gp-tabela th.gp-col-centro,
.woocommerce-account .woocommerce-MyAccount-content .gp-artes .gp-tabela td.gp-col-centro {
	text-align: center !important;
}

/* A primeira coluna e' a unica de texto corrido: esquerda, dito em voz alta.
   Nao e' redundante com o `left` do th la' de cima — e' o que impede que uma
   mudanca futura naquela regra desalinhe a coluna sem ninguem notar. */
.woocommerce-account .woocommerce-MyAccount-content .gp-artes .gp-tabela th:first-child,
.woocommerce-account .woocommerce-MyAccount-content .gp-artes .gp-tabela td:first-child {
	text-align: left !important;
}

.gp-tabela tbody tr:last-child td {
	border-bottom: 0 !important;
}

.gp-tabela tbody tr:hover {
	background: #f8f9fa;
}

/* [68] item 2 — O INVO'LUCRO DO NOME + ESPECIFICACAO.
   Ele existe por causa do CELULAR, e no desktop e' INVISIVEL: display:block,
   sem margem, sem padding, sem largura declarada — o que os dois spans
   desenhavam soltos dentro da <td> (uma celula de tabela, onde eles ja' eram
   blocos empilhados) continua sendo desenhado igual, um pixel por um pixel.
   Ver a nota longa no includes/minhas-artes.php, onde ele nasce.
   O `min-width: 0` so' tem efeito quando ele vira ITEM DE FLEX (celular): e' o
   que permite a caixa encolher abaixo do conteudo, e sem ele um nome de arquivo
   sem espacos empurraria a linha inteira para fora do cartao. */
.gp-arq-info {
	display: block;
	min-width: 0;
}

.gp-arq-nome,
.gp-orc-num {
	display: block;
	font-weight: 700;
	color: #1f2a37;
	word-break: break-word;
}

.gp-arq-desc,
.gp-orc-resumo {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	line-height: 1.45;
	color: #64748b;
}

.gp-data {
	display: block;
	font-weight: 600;
	color: #334155;
}

.gp-data--off {
	font-weight: 400;
	color: #94a3b8;
}

.gp-hora {
	display: block;
	font-size: 12px;
	color: #94a3b8;
}

.gp-peso {
	display: block;
	font-weight: 600;
	color: #334155;
}

.gp-ext {
	display: inline-block;
	margin-top: 3px;
	padding: 1px 7px;
	border-radius: 4px;
	background: #f1f5f9;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #475569;
}

.gp-orc-total {
	display: block;
	font-weight: 700;
	color: var(--gp-blue-dark, #0e2a4f);
	white-space: nowrap;
}

/* ---- a coluna de acao (refeita na [67-b]) --------------------------------
   O QUE ESTAVA ERRADO — e nao era o botao. Era a COLUNA.
   O <th>Ação</th> e o botao moram na mesma celula, mas apontavam para lados
   diferentes: o cabecalho seguia o text-align:left do resto da tabela e o
   botao, por ser uma caixa com padding, terminava bem mais a' direita. Pior:
   com table-layout:auto a ultima coluna fica com a sobra de largura da linha,
   entao havia um vao grande entre o rotulo e o botao — o rotulo parecia
   "no meio" do cartao e o botao "jogado" na ponta.

   As tres correcoes, na ordem em que importam:
     1) width:1% — o truque do table-layout:auto. A coluna encolhe ate' o
        conteudo e devolve a sobra para as colunas de texto, que sao as que
        precisam dela. Sem isto a coluna de acao vira um deserto.
     2) text-align:right nos DOIS (th e td) — o "de forma consistente" do
        pedido: rotulo e botao passam a compartilhar a mesma borda direita.
     3) padding-right:20px no lugar dos 14px da tabela. O .gp-lista tem
        overflow:hidden, entao encostar no limite do cartao nao e' so' feio:
        e' onde o botao comeca a parecer cortado.
   O vertical-align:middle ja' vem do td base (linha 1080), mas e' reafirmado
   aqui de proposito: esta regra tem especificidade maior, e nao quero que um
   dia alguem mude a de baixo achando que muda esta.

   O seletor e' :last-child, e nao .gp-td-acao, porque a tabela de "Meus
   Orcamentos" tem a mesma coluna sem a classe — as duas telas ficam iguais.

   [67-d] O `min-width` e' novo, e e' o "espaco suficiente para o cabecalho
   AÇÃO inteiro e o botao, com margem de seguranca" que o pedido nomeou. Com
   width:1% a coluna encolhe ate' o conteudo — e o conteudo, hoje, e' o botao
   mais os 20px de respiro da direita. Medido na pagina real, o botao sai com
   104,9px em "Minhas Artes" e 127px em "Meus Orcamentos" (rotulo mais longo),
   entao a coluna fica com 164px nos dois casos e este piso de 132 nao chega a
   ser usado. Ele existe para o DIA em que for: se o rotulo do botao ficar mais
   curto que "AÇÃO", ou o botao sumir de uma linha (o .gp-indisponivel entra no
   lugar dele), a coluna encolheria junto e o cabecalho passaria a ser cortado.
   O `white-space: nowrap` continua aqui — e' o que garante que "AÇÃO" nunca
   vire "AÇ" / "ÃO" numa quebra de linha.

   [67-f] O PEDIDO, COM AS PALAVRAS DO BRUNO: "Aplique text-align: right
   explicito tanto no th da coluna quanto no td correspondente. Garanta que
   ambos compartilhem exatamente o mesmo padding-right para que a ultima letra
   do texto AÇÃO fique rigorosamente alinhada na vertical com a borda direita do
   botao Baixar Arte."

   As duas coisas ja' eram verdade antes desta entrada. Agora sao verdade por
   CONSTRUCAO, e a diferenca nao e' retorica:

   Antes, o th e o td chegavam ao mesmo resultado por DOIS CAMINHOS. O td nao
   tinha padding nenhum a vencer. O th tinha: herdava `padding: 11px 9px` da
   regra base (especificidade (0,3,1)) e dependia de o `padding-right: 20px`
   daqui, com (0,4,1), vencer aquela. Duas contas diferentes que por acaso
   davam o mesmo numero — e que um dia deixariam de dar, no dia em que alguem
   mexesse na regra base achando que mexia nas duas colunas.

   Agora as duas propriedades que o pedido nomeia estao declaradas lado a lado,
   no MESMO bloco, para o th e o td ao mesmo tempo. Nao ha' como um dos dois
   andar sem o outro: e' a mesma declaracao.

   A PROVA, medida na pagina REAL logada (bootstrap inteiro do WordPress em CLI,
   cookie do usuario 3, sem enxerto nenhum) em quatro larguras de janela —
   1400, 1200, 1000 e 900:
       tinta do "O" final de AÇÃO   x=1059.5
       borda direita do botao       x=1059.5
       diferenca                    0.0px
   "Tinta" e' medida com `Range` + `getClientRects()` — onde o navegador pintou
   o glifo — e nao pela conta `caixa - padding-right`, que mente calada se o
   padding computado nao for o que se pensa. Foi essa conta que a [67-e] usou.
   Ver medir67f.js, que roda dentro da pagina de verdade.

   O RESIDUO, nomeado porque existe: a regra base do th tem
   `letter-spacing: 0.04em` e o botao tem `letter-spacing: 0`. O espacamento
   entra DEPOIS de cada caractere, inclusive do ultimo, dentro da caixa de
   avanco — entao, num corpo de 11px, o "O" de AÇÃO termina 0,44px antes da
   borda do conteudo, enquanto o botao encosta nela. Sao 0,44px: menos de meio
   pixel, abaixo do que qualquer tela resolve. Nao vale mexer no padding-right
   para compensar — o pedido quer os dois padding IDENTICOS, e ficam. */
/* [67-g] CORRECAO — o Bruno pediu quatro vezes e nas quatro eu li errado.

   O que ele quer NAO e' alinhar a borda direita do rotulo com a borda direita
   do botao (o pedido da [67-f], palavra por palavra). E' o rotulo AÇÃO
   CENTRALIZADO, como os outros cabecalhos desta tabela, e centralizado SOBRE o
   botao. Palavras dele agora: "a palavra Ação nao esta' centralizada igual os
   outros nomes das colunas... ela precisa ficar centralizada sobre o botao
   Baixar arte". Alinhar a' direita e centralizar sao coisas DIFERENTES — a
   [67-f] entregou a primeira e estava certa sobre ela; o pedido e' a segunda.

   POR QUE CENTRALIZAR OS DOIS, e nao so' o rotulo: o botao tem 104,9px em
   "Minhas Artes" e 127px em "Meus Orcamentos" (la' o rotulo e' "Abrir
   Proposta"), e esta regra serve as DUAS tabelas. Para centralizar o rotulo
   sobre um botao que continuasse colado a' direita, o padding-left teria de ser
   um numero magico — a metade da largura do botao — que acertaria numa tabela e
   erraria na outra, e quebraria de novo no dia em que um rotulo de botao
   mudasse. Com `text-align: center` nos DOIS, o botao cai no centro da coluna e
   o rotulo cai no centro da MESMA coluna: ficam alinhados por construcao, em
   qualquer tabela e com qualquer texto de botao. E' o mesmo argumento da
   [67-f] — declarar junto para nao poder divergir — aplicado a' propriedade
   certa.

   O padding virou SIMETRICO (12/12, era 12/20): `text-align: center` centraliza
   na CAIXA DE CONTEUDO, entao com 12 de um lado e 20 do outro o "centro" cairia
   4px a' esquerda do centro de verdade da coluna. Os outros cabecalhos desta
   tabela tem padding simetrico (9/9), e "centralizada igual os outros" pede o
   mesmo aqui.

   O `min-width` subiu de 132 para 140 pelo mesmo motivo, e o que importa e' que
   a COLUNA continua com 164px: com width:1% ela cai no proprio min-content, que
   e' `min-width + os dois paddings` — 132+12+20 = 164 e 140+12+12 = 164. O valor
   declarado mudou, a largura nao: nenhum pixel e' redistribuido entre as
   colunas, e as larguras aprovadas na [67-e] seguem intactas. */
.woocommerce-account .woocommerce-MyAccount-content .gp-tabela th:last-child,
.woocommerce-account .woocommerce-MyAccount-content .gp-tabela td:last-child {
	width: 1% !important;
	min-width: 140px;
	vertical-align: middle !important;
	white-space: nowrap;
	/* [67-g] o rotulo e o botao no centro da MESMA coluna — os DOIS */
	text-align: center !important;
	padding-left: 12px !important;
	padding-right: 12px !important;
}

/* ---- o botao de acao da linha (travado na [67-b]) ------------------------
   A regra ja' existia desde a [66]; o que faltava era ela ficar IMUNE. Tres
   ajustes: display e line-height ganharam !important (eram as duas unicas
   propriedades daqui sem ele, e sao justamente as que decidem se o botao
   estica ou nao), o respiro lateral subiu de 16 para 18px, e entrou o
   flex:0 0 auto — que e' o que impede o botao de ser esticado quando a <td>
   vira uma linha de flex, no celular.
   flex:0 0 auto tambem e' a trava contra "largura excessiva": o botao tem a
   largura do proprio texto, sempre, em qualquer tela. */
.woocommerce-account .woocommerce-MyAccount-content a.gp-btn-azul,
.woocommerce-account .woocommerce-MyAccount-content a.gp-btn-azul:visited {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: auto !important;
	margin: 0 !important;
	padding: 8px 18px !important;
	background-color: var(--gp-blue, #144e82) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: normal !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	vertical-align: middle;
	white-space: nowrap;
	transition: background-color 0.18s ease !important;
}

.woocommerce-account .woocommerce-MyAccount-content a.gp-btn-azul:hover,
.woocommerce-account .woocommerce-MyAccount-content a.gp-btn-azul:focus-visible {
	background-color: var(--gp-blue-dark, #0e2a4f) !important;
}

.gp-indisponivel {
	font-size: 12.5px;
	font-weight: 600;
	color: #94a3b8;
}

/* ---- o badge de status -------------------------------------------------- */
/* Sem verde (decisao da loja): aprovado = azul cheio, em aberto = azul claro,
   expirado = cinza. O ponto antes do texto repete a cor do proprio badge. */
.gp-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.gp-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

.gp-badge--aberto {
	background: #eff4fa;
	border-color: #d8e4f0;
	color: var(--gp-blue, #144e82);
}

.gp-badge--aprovado {
	background: var(--gp-blue, #144e82);
	border-color: var(--gp-blue, #144e82);
	color: #fff;
}

.gp-badge--expirado {
	background: #f1f5f9;
	border-color: #e2e8f0;
	color: #64748b;
}

/* ---- a paginacao -------------------------------------------------------- */
.gp-pag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 15px 22px;
	border-top: 1px solid #f0f0f0;
	background: #fff;
}

.gp-pag-info {
	font-size: 12.5px;
	color: #94a3b8;
}

.gp-pag-nav {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}

.woocommerce-account .woocommerce-MyAccount-content .gp-pag-num,
.woocommerce-account .woocommerce-MyAccount-content .gp-pag-seta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 10px !important;
	margin: 0 !important;
	background: #fff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 7px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	color: #334155 !important;
	text-decoration: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-content a.gp-pag-num:hover,
.woocommerce-account .woocommerce-MyAccount-content a.gp-pag-seta:hover {
	background: #f8f9fa !important;
	border-color: #cbd5e1 !important;
	color: var(--gp-blue, #144e82) !important;
}

.woocommerce-account .woocommerce-MyAccount-content .gp-pag-num.is-atual {
	background: var(--gp-blue, #144e82) !important;
	border-color: var(--gp-blue, #144e82) !important;
	color: #fff !important;
}

.woocommerce-account .woocommerce-MyAccount-content .gp-pag-seta.is-off {
	opacity: 0.45;
}

.gp-pag-gap {
	padding: 0 2px;
	font-size: 13px;
	color: #94a3b8;
}

/* ---- o estado vazio ----------------------------------------------------- */
/* Um cartao so', centrado, com o mesmo icone da tela. E' o que o cliente ve'
   enquanto nao tem nada — entao ele tem de dizer o proximo passo, nao so' que
   nao ha' nada. */
.gp-vazio {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 44px 24px 46px;
	text-align: center;
}

.gp-vazio-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 0 16px 0;
	border-radius: 12px;
	background: #f1f5f9;
	color: var(--gp-blue, #144e82);
	flex: 0 0 auto;
}

.gp-vazio-ico svg {
	width: 26px;
	height: 26px;
	display: block;
}

.woocommerce-account .woocommerce-MyAccount-content p.gp-vazio-txt {
	margin: 0 0 18px 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: #475569 !important;
}

/* ---- a tabela no celular ------------------------------------------------
   A tabela tem 6 colunas em "Minhas Artes" e 7 em "Meus Orcamentos", e a area
   da conta tem ~750px no desktop e ~340px num celular. Rolar de lado esconde
   justamente a coluna de acao, que e' a razao de a tela existir. Por isso
   abaixo de 782px a tabela deixa de ser tabela: cada <tr> vira um cartao e cada
   <td> vira uma linha "ROTULO  valor". O rotulo sai do proprio HTML, do
   atributo data-rot — nao ha' texto duplicado no CSS.

   O `thead` some porque cada valor ja' carrega o proprio rotulo ao lado. */
@media (max-width: 782px) {
	.gp-lista-head {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 17px 16px 15px;
	}

	.woocommerce-account .woocommerce-MyAccount-content a.gp-lista-btn {
		justify-content: center;
	}

	/* [67] As duas acoes do cabecalho viram duas linhas de largura cheia, e a
	   busca deixa de ser popover: aqui nao ha' largura sobrando para uma caixa
	   flutuante, e empurrar a tabela para baixo e' melhor do que ela nascer
	   por cima do primeiro orcamento. */
	.gp-lista-acoes {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 8px;
	}

	.woocommerce-account .woocommerce-MyAccount-content .gp-busca {
		width: 100%;
	}

	.woocommerce-account .woocommerce-MyAccount-content .gp-busca-btn {
		width: 100%;
	}

	.woocommerce-account .woocommerce-MyAccount-content .gp-busca-form {
		position: static;
		width: 100%;
		margin-top: 8px;
		box-shadow: none;
	}

	.woocommerce-account .woocommerce-MyAccount-content .gp-busca-campo {
		flex: 1 1 auto;
		width: auto;
	}

	.gp-tabela thead {
		display: none;
	}

	.gp-tabela,
	.gp-tabela tbody,
	.gp-tabela tr,
	.gp-tabela td {
		display: block;
		width: 100%;
	}

	/* O box-sizing e' o que faz o `width: 100%` de cima valer para o <tr>.
	   Sem ele, o <tr> e' content-box: os 16px de padding de cada lado SOMAM aos
	   100%, e a linha fica 32px mais larga que o cartao. Esse transbordo sempre
	   existiu, mas ficava escondido pelo overflow:hidden do .gp-lista — nao
	   aparecia nada porque os 32px que passavam eram justamente o padding, que
	   e' vazio. Quando o [67-d] trocou o hidden por overflow-x:auto, o defeito
	   antigo virou uma barra de rolagem horizontal no celular. Medido: tr com
	   474px dentro de um cartao de 442px. Com border-box os dois batem. */
	.gp-tabela tr {
		box-sizing: border-box;
		padding: 13px 16px;
		border-bottom: 1px solid #f0f0f0;
	}

	.gp-tabela tbody tr:last-child {
		border-bottom: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-content .gp-tabela td {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		padding: 4px 0 !important;
		border: 0 !important;
	}

	.woocommerce-account .woocommerce-MyAccount-content .gp-tabela td::before {
		content: attr(data-rot);
		flex: 0 0 84px;
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		line-height: 1.9;
		color: #94a3b8;
	}

	/* ---- [68] item 2 — o nome do arquivo EM CIMA da especificacao ----------
	   O QUE ESTAVA ERRADO, medido em 360px antes de mexer: a <td> e' flex, e os
	   dois spans eram os dois itens dela — ficavam LADO A LADO. O nome do
	   arquivo recebia 65px de largura e quebrava em 4 linhas (com word-break,
	   ou seja, cortando palavra no meio), com a especificacao espremida nos 88px
	   ao lado, tambem em 4 linhas. Em 480px: 93px / 3 linhas. Em 600: 144 / 3.
	   O `flex: 1 1 auto` no invólucro faz a <td> ter DOIS itens — o rotulo de
	   84px e o bloco — e dentro do bloco os dois spans voltam a ser blocos
	   empilhados, cada um com a largura INTEIRA que sobra. E' o "empilhamento
	   elegante" do pedido, e o mesmo desenho que a tabela ja' tem no desktop.

	   A HIERARQUIA: o nome e' o TITULO da linha e sobe para 14px (herdava os
	   13,5 do td), com line-height 1.35 — mais justo, porque titulo nao precisa
	   do 1.5 de texto corrido. A especificacao desce para 12px e o respiro dela
	   sobe de 3 para 4px: empilhados, 3px deixava os dois colados, e o que
	   separa nome de especificacao agora e' o tamanho (14 contra 12) mais a cor,
	   ja' que os dois passam a ocupar a mesma coluna. */
	.woocommerce-account .woocommerce-MyAccount-content .gp-arq-info {
		flex: 1 1 auto;
		min-width: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-content .gp-arq-info .gp-arq-nome {
		font-size: 14px;
		line-height: 1.35;
	}

	.woocommerce-account .woocommerce-MyAccount-content .gp-arq-info .gp-arq-desc {
		margin-top: 4px;
		font-size: 12px;
		line-height: 1.4;
	}

	/* [67-e] O CENTRO DO DESKTOP NAO VALE AQUI, e este reset e' obrigatorio.
	   No celular cada <td> vira uma linha "ROTULO valor" (flex: o rotulo com
	   84px fixos, o valor ao lado). O `text-align: center` do desktop continuaria
	   valendo — a regra de la' e' (0,5,1) e nada a contradiz neste bloco — e o
	   resultado seria o valor flutuando no meio da linha, LONGE do proprio
	   rotulo, com um vao branco entre os dois. O centro e' uma decisao de tabela
	   larga; empilhada, a coluna nao existe mais. */
	.woocommerce-account .woocommerce-MyAccount-content .gp-artes .gp-tabela th.gp-col-centro,
	.woocommerce-account .woocommerce-MyAccount-content .gp-artes .gp-tabela td.gp-col-centro {
		text-align: left !important;
	}

	/* Aqui a tabela ja' virou cartao e cada <td> e' uma linha "ROTULO valor":
	   nao existe mais borda direita para o botao encostar. As tres regras da
	   coluna de acao (20px de respiro, width:1% e text-align:right) vem de la'
	   de cima com !important e com a MESMA especificidade desta — entao quem
	   decide e' a ordem, e esta vem depois.
	   O width:auto e' o que mais importa: sem ele o width:1% de cima
	   espremeria a <td> inteira no celular, e a linha viraria um risco. */
	.woocommerce-account .woocommerce-MyAccount-content .gp-tabela th:last-child,
	.woocommerce-account .woocommerce-MyAccount-content .gp-tabela td:last-child {
		width: auto !important;
		min-width: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		text-align: left !important;
	}

	/* [67-d] Havia aqui um reset da PRIMEIRA coluna (padding 0 nos dois lados +
	   width:auto). Ele existia para desfazer duas regras de desktop que a [67-e]
	   apagou: o padding 12/8 do quadrado da previa e o `width: 1%` que prendia
	   aquela coluna. Sem as duas, nao ha' o que desfazer — o padding do td do
	   celular ja' e' 4px 0 e nao existe mais nenhum width na primeira coluna.
	   Fica o registro porque foi esta a regra que, na [67-d], salvou o cartao
	   mobile de encolher para 1%: se um dia alguem reintroduzir um width na
	   primeira coluna, o reset tem de voltar junto. */

	/* Havia aqui um `a.gp-btn-azul { flex: 1 1 auto }` que esticava o botao por
	   toda a largura da linha do celular. Ele saiu na [67-b]: o botao agora tem
	   a largura do proprio texto em qualquer tela, e quem garante isso e' o
	   flex:0 0 auto do bloco do botao. */

	.gp-pag {
		justify-content: center;
		padding: 13px 16px;
	}

	.gp-vazio {
		padding: 34px 18px 36px;
	}
}

/* --------------------------------------------------------------------------
   4.2) A TELA DE CUPONS — "Meus Cupons" (entrada [67])
   --------------------------------------------------------------------------
   O cartao (.gp-lista), o cabecalho e o estado vazio (.gp-vazio) sao os MESMOS
   das telas de lista — nenhuma dessas pecas foi redesenhada aqui. O que esta
   secao acrescenta e' so' a GRADE DE CUPONS, que nao existia em lugar nenhum:
   as outras telas mostram tabela, e cupom nao e' linha de tabela — e' um
   cartao com um valor grande, um codigo e uma validade.

   SEM VERDE, como o resto da loja: o valor do desconto e' azul-escuro, o mesmo
   tom do titulo dos cards. Um cupom e' a unica coisa nesta area que poderia
   pedir verde ("desconto!"), e ele nao entra.

   O fundo do cartao de cupom e' BRANCO COM CONTORNO, e nao branco liso: ele
   mora DENTRO do cartao branco da lista, e sem a borda sumiria. A barra azul
   de 4px na esquerda e' o que faz a peca ler como cupom sem precisar de icone
   nem de imagem.

   HOJE A GRADE NAO APARECE NA LOJA, e isso e' o esperado: nao existe um unico
   cupom cadastrado (conferido antes de escrever). Quem abrir a tela ve' o
   estado vazio. A grade foi conferida com um cupom descartavel criado e
   apagado na mesma sessao de teste. */
.gp-cupons {
	display: block;
}

.woocommerce-account .woocommerce-MyAccount-content ul.gp-cupons-grade {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: 16px;
	margin: 0 !important;
	padding: 20px 22px 22px !important;
	list-style: none !important;
}

.gp-cupom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	padding: 17px 18px 16px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-left: 4px solid var(--gp-blue, #144e82);
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
	box-sizing: border-box;
}

/* O valor e' a primeira coisa que o olho tem de achar: e' o que o cliente veio
   ver. Por isso e' o unico texto grande do cartao. */
.gp-cupom-valor {
	display: block;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--gp-blue-dark, #0e2a4f);
}

.gp-cupom-tipo {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.4;
	color: #64748b;
}

/* A faixa do codigo: o codigo a' esquerda, o botao de copiar a' direita. */
.gp-cupom-codigo {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin-top: 14px;
}

/* O desenho de "vale": moldura tracejada, fundo levemente cinza e fonte mono,
   como o codigo impresso de um cupom de verdade. */
.woocommerce-account .woocommerce-MyAccount-content .gp-cupom-code {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	padding: 7px 12px !important;
	background: #f8fafc !important;
	border: 1px dashed #c7d6e5 !important;
	border-radius: 8px !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.05em !important;
	text-align: center;
	color: var(--gp-blue-dark, #0e2a4f) !important;
	overflow-wrap: anywhere;
	box-sizing: border-box;
}

.woocommerce-account .woocommerce-MyAccount-content .gp-cupom-copiar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 7px 10px !important;
	background-color: #fff !important;
	color: var(--gp-blue, #144e82) !important;
	border: 1px solid #c7d6e5 !important;
	border-radius: 8px !important;
	font-family: inherit !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
}

.woocommerce-account .woocommerce-MyAccount-content .gp-cupom-copiar svg {
	width: 13px;
	height: 13px;
	display: block;
}

.woocommerce-account .woocommerce-MyAccount-content .gp-cupom-copiar:hover,
.woocommerce-account .woocommerce-MyAccount-content .gp-cupom-copiar:focus-visible {
	border-color: var(--gp-blue, #144e82) !important;
	background-color: #f8fafc !important;
}

/* O estado "copiado", que o minha-conta.js poe por ~2s. Azul cheio, para o
   retorno ser visivel de relance — e' a unica confirmacao que o cliente tem de
   que o codigo foi para a area de transferencia. */
.woocommerce-account .woocommerce-MyAccount-content .gp-cupom-copiar.gp-copiado {
	background-color: var(--gp-blue, #144e82) !important;
	border-color: var(--gp-blue, #144e82) !important;
	color: #fff !important;
}

.gp-cupom-desc {
	margin: 11px 0 0 0;
	padding: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #64748b;
}

/* `margin-top: auto` e' o que alinha as validades de todos os cartoes da linha,
   mesmo quando um cupom tem descricao e o vizinho nao tem. */
.gp-cupom-validade {
	display: block;
	margin-top: auto;
	padding-top: 12px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: #94a3b8;
}

@media (max-width: 782px) {
	.woocommerce-account .woocommerce-MyAccount-content ul.gp-cupons-grade {
		grid-template-columns: 1fr;
		padding: 16px !important;
	}

	.gp-cupom {
		padding: 15px 15px 14px;
	}
}

/* --------------------------------------------------------------------------
   5) RESPONSIVO
   --------------------------------------------------------------------------
   O tema limitava .woocommerce-account main .woocommerce a 1000px; com 220px de
   menu + 30px de vao sobravam ~750px de conteudo, e o grid de cards fechava 3
   colunas sozinho no desktop. (O teto caiu na [68]: ver a nota no
   account-ux.css. O conteudo de desktop passou a 920px, e o auto-fit continua
   resolvendo o grid sozinho.) Aqui so' tratamos o que o auto-fit nao resolve:
   o grid do formulario, que e' fixo em 2 colunas — e a FAIXA 783-1199 abaixo.

   ---------------------------------------------------------------------------
   [68] A FAIXA 783-1199 — "Ajuste de Transbordo"
   ---------------------------------------------------------------------------
   O PEDIDO: "Trate a quebra de layout nessa faixa intermediaria de resolucao
   (tablets em modo retrato / janelas medias) ... para que as tabelas de Artes e
   Orcamentos caibam confortavelmente sem disparar a barra de rolagem horizontal
   antes da hora."

   O SINTOMA, medido na pagina real logada antes de mexer, aba por aba:
   em 790px de viewport o cartao media 395px e a tabela 500,4px — o excedente
   de 107px virava barra de rolagem horizontal dentro do .gp-lista. Em 850px o
   excedente era 53px; em 900, 8px; e so' em 915px a barra zerava. Ou seja: a
   faixa 783-914 tinha barra, e a 782 (o bloco de celular logo abaixo) nao —
   era o pior arranjo possivel, porque o celular estava CERTO e o tablet errado.

   A CAUSA, e' uma conta so': a tabela de "Minhas Artes" nao encolhe abaixo de
   500,4px (a soma das larguras minimas das 5 colunas — ver a nota do [67-d] la'
   em cima, que e' quem derrubou essa minima de 766,8 para os 500,4 de hoje).
   E o cartao recebia `largura do conteudo - 36px`, com o conteudo valendo:

       largura do conteudo = wrap - 220 (menu) - 30 (vao) - 30 (recuo do .woo)

   Em 790px de viewport o wrap tem 711px, entao o conteudo ficava com 431 e o
   cartao com 395 — 105px abaixo do que a tabela exige.

   A CORRECAO E' UMA SO': o menu lateral deixa de ser lateral, e vira uma faixa
   de largura cheia acima do conteudo, de 783 a 940px. E' a MESMA solucao que o
   institucional.css ja' aplicava <=768px (bloco de 1933, "MINHA CONTA — MOBILE
   (<=768px): empilhar menu + conteudo"); o que muda e' so' ate' ONDE ela vale.
   Com o menu fora do caminho o conteudo passa a ter `wrap - 30`:

       viewport 790 ....... cartao 645px  (tabela 500,4 -> 145px de folga)
       viewport 850 ....... cartao 705px
       viewport 940 ....... cartao 795px

   Nenhuma coluna, padding ou fonte da tabela foi tocada — a tabela que o Bruno
   aprovou na [67-e] e ajustou na [67-g] e' exatamente a mesma; ela so' parou de
   ser espremida. Era isto que o pedido queria dizer com "caibam": as tabelas
   continuam TABELAS nesta faixa. (O caminho alternativo — deixar a tabela virar
   cartao ja' em 783px, como no celular — foi descartado: transformaria a tabela
   na faixa em que ela ainda cabe.)

   POR QUE NAO 915 (e depois POR QUE 1199 — o numero mudou DUAS vezes no mesmo
   dia, e vale registrar as duas):

   (1) Por que nao 915, que e' onde a barra da tabela de ARTES zerava: porque a
   faixa tem DOIS lados. Abaixo do corte o menu esta' fora e sobra espaco de
   sobra. ACIMA dele o menu volta a ocupar 220 + 30, e o cartao cai para
   `wrap - 316`:

       viewport 915 ....... cartao 520px  (7px de folga sobre os 500,4)
       viewport 940 ....... cartao 545px
       viewport 1000 ...... cartao 605px

   915 seria o corte mais economico possivel, com 7px de margem — margem fina
   demais para uma medida que depende de fonte. 940 comprava 45px de folga no
   lado apertado e mantinha o menu empilhado por apenas 25px a mais. Este e' o
   numero que subiu na primeira medicao — e ele esta' CERTO para a tabela de
   Artes. So' para ela. Ver o [68-b] logo abaixo: a tabela de Orcamentos tem
   234px a mais de minima, e por causa dela o corte subiu para 1199.

   (2) Por que 1199, e nao 940: o corte nao e' sobre a tabela de Artes, e' sobre
   a MAIOR das duas. Com o menu fora do caminho o cartao vale `0,9 x viewport -
   66` (medido: 900 -> 744, 940 -> 780, 783 -> 638,7 — a relacao fecha nas
   tres). Com o menu AO LADO o cartao vale `viewport - 416` (medido: 941 ->
   530,9, 1000 -> 584, 1200 -> 784). A tabela de Orcamentos exige 734,4:
   empilhado ela serve a partir de ~890px; ao lado, so' a partir de ~1151px.
   Entre esses dois numeros o menu NAO PODE ser lateral. 1199 e' o maior valor
   redondo abaixo do teto do wrapper (1200), com 49px de folga no lado apertado.

   Nada mais e' declarado aqui de proposito. O padding do conteudo, o respiro
   dos itens do menu e o `min-height` continuam sendo os do institucional.css —
   este bloco so' mexe em LARGURA, FLUTUACAO e MARGEM, que sao as tres
   propriedades que decidem se a tabela cabe. Assim, <=768px, onde os dois
   blocos valem ao mesmo tempo, o desenho de hoje nao muda em nada: as
   declaracoes sao identicas e a minha vence pela especificidade (o `body` a
   mais). */
@media (max-width: 1199px) {
	body.woocommerce-account .woocommerce-MyAccount-navigation,
	body.woocommerce-account .woocommerce-MyAccount-content {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin: 0 0 18px 0 !important;
		box-sizing: border-box !important;
	}
}

/* --------------------------------------------------------------------------
   [68-b] TABELA DE ORCAMENTOS — 234px DE MINIMA A MAIS, E DUAS FAIXAS QUEBRADAS
   --------------------------------------------------------------------------
   O [68] acima foi calibrado contra a tabela de "Minhas Artes", e so' contra
   ela, porque era a unica que DAVA PARA MEDIR: o usuario de teste (3,
   egiallon23) nao tem orcamento nenhum, entao a tabela de Orcamentos nunca
   entrava no DOM — e a "mais apertada das duas", como o proprio [67-d] ja'
   registrava, ficou sendo suposicao em vez de medida.

   COMO ELA FOI MEDIDA AGORA: injetando o markup LITERAL do include
   (includes/orcamentos.php: 7 colunas — Nº da Proposta / Produtos / Resumo /
   Data / Validade / Valor Total / Status / Ação) dentro do .gp-lista da pagina
   real logada, com dados REAIS colhidos do banco: o pedido #1166, que tem o
   resumo mais longo que existe hoje na loja ("Cartao de Visita Verniz UV Total
   Frente (Couche 250g) . Flyers e Folhetos"), e o #1168, curto. Ver
   medir-orc68.js. O "R$" leva NBSP, como o gporc_dinheiro() emite.

   O RESULTADO, em 15 larguras de viewport: a tabela NAO ENCOLHE ABAIXO DE
   734,4px — e esse numero saiu IDENTICO em toda largura em que o cartao era
   menor que ela (783, 800, 850, 941, 960, 1000, 1050, 1100, 1150). A conta,
   coluna a coluna no minimo:
       80,4 + 102,8 + 92,3 + 93,9 + 90,5 + 110,5 + 164 = 734,4
   Sao 234px mais larga que a de Artes (500,4). Duas colunas de data com o ano
   inteiro (92,3 e 93,9), um total com `white-space: nowrap` (90,5) e um botao
   de 127px com piso de 140px (164) explicam quase toda a diferenca.

   COM O CORTE EM 940, O QUE FICAVA QUEBRADO — e nao era pouco:

       viewport 783 ....... cartao 638,7   barra de 97px
       viewport 800 ....... cartao 654     barra de 82px
       viewport 850 ....... cartao 699     barra de 37px
       viewport 941 ....... cartao 530,9   barra de 205px
       viewport 1000 ...... cartao 584     barra de 152px
       viewport 1100 ...... cartao 684     barra de 53px
       viewport 1150 ...... cartao 734     barra de 2px
       viewport 1200 ...... cartao 784     OK

   Ou seja: o corte de 940 consertou a tabela de Artes e deixou a de Orcamentos
   quebrada em DUAS faixas — uma logo abaixo dele (783 a ~880) e outra logo
   acima (941 a ~1150), esta com 205px de barra. O pior arranjo possivel:
   justamente a faixa que o pedido nomeou.

   AS DUAS CORRECOES, e por que cada uma:

   1) O CORTE DO MENU SOBE DE 940 PARA 1199 (bloco logo acima). Empilhado, o
      cartao vale `0,9 x viewport - 66`; ao lado, `viewport - 416`. A tabela
      exige 734,4 — entao empilhado ela serve a partir de ~890px e ao lado so'
      a partir de ~1151px. 1199 e' o maior redondo abaixo do teto do wrapper.

   2) DE 783 A 919 A TABELA DE ORCAMENTOS VIRA LISTA — so' ela. Abaixo de 890
      nem empilhando o menu a tabela cabe (em 783 o cartao tem 638,7: faltariam
      96px); a partir de 920 o cartao empilhado tem 762, ou seja 27px de folga.
      Entre esses dois numeros vale o MESMO desenho de cartao que o celular ja'
      usa (o bloco de <=782 logo acima): thead escondido, cada <tr> um cartao,
      cada <td> uma linha "ROTULO valor" com o rotulo vindo do data-rot.

      ESCOPADO EM .gp-orc DE PROPOSITO. A tabela de Artes nao entra aqui: com
      500,4px de minima ela cabe como TABELA desde 783px, e virar cartao nessa
      faixa seria desfazer o trabalho da [67-e], da [67-f] e da [67-g] — que foi
      todo sobre as COLUNAS dela. Cada tabela recebe o que ela precisa: a regra
      e' "a tabela so' e' tabela quando cabe", aplicada por tabela, e nao por
      tela.

   O QUE ISSO CUSTA, dito em voz alta: entre 783 e 919px a aba de Orcamentos
   mostra lista em cartao enquanto a de Artes mostra tabela. E' de proposito —
   sao 7 colunas contra 5, e 734,4px de minima contra 500,4.

   Nada aqui mexe em cor, fonte, padding ou ordem de coluna: e' o mesmo desenho
   ja' aprovado no celular, aplicado na faixa em que a tabela nao cabe. */
@media (min-width: 783px) and (max-width: 919px) {
	.gp-orc .gp-tabela thead {
		display: none;
	}

	.gp-orc .gp-tabela,
	.gp-orc .gp-tabela tbody,
	.gp-orc .gp-tabela tr,
	.gp-orc .gp-tabela td {
		display: block;
		width: 100%;
	}

	/* O box-sizing e' o que faz o `width: 100%` do <tr> valer. Sem ele o <tr> e'
	   content-box: os 16px de padding de cada lado SOMAM aos 100% e a linha fica
	   32px mais larga que o cartao. Mesma nota do bloco de celular. */
	.gp-orc .gp-tabela tr {
		box-sizing: border-box;
		padding: 13px 16px;
		border-bottom: 1px solid #f0f0f0;
	}

	.gp-orc .gp-tabela tbody tr:last-child {
		border-bottom: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-content .gp-orc .gp-tabela td {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		padding: 4px 0 !important;
		border: 0 !important;
	}

	.woocommerce-account .woocommerce-MyAccount-content .gp-orc .gp-tabela td::before {
		content: attr(data-rot);
		flex: 0 0 84px;
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		line-height: 1.9;
		color: #94a3b8;
	}

	/* A coluna de acao do desktop — `width: 1%`, piso de 140px, `nowrap`, centro
	   e padding 12/12, quase tudo com !important — tem de ser desarmada aqui, e
	   so' aqui. Nesta faixa nao existe coluna: cada <td> e' uma linha de flex, e
	   o `width: 1%` espremeria a linha inteira num risco. O `.gp-orc` a mais no
	   seletor e' o que faz esta regra (0,5,1) vencer aquela (0,4,1) mesmo com as
	   duas marcadas !important. */
	.woocommerce-account .woocommerce-MyAccount-content .gp-orc .gp-tabela th:last-child,
	.woocommerce-account .woocommerce-MyAccount-content .gp-orc .gp-tabela td:last-child {
		width: auto !important;
		min-width: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		text-align: left !important;
	}
}

@media (max-width: 782px) {
	.gp-grid2 {
		grid-template-columns: 1fr;
	}

	.gp-dash-ola {
		font-size: 24px;
	}

	.gp-card {
		padding: 18px 16px;
	}

	/* O tema zera o padding do container nesta faixa
	   (institucional.css:1944-1948); a regra do item 1 tem especificidade maior
	   e sobrevive, mas o valor de desktop e' folgado demais aqui. */
	.woocommerce-account .woocommerce-MyAccount-content:has(> .gp-dash),
	.woocommerce-account .woocommerce-MyAccount-content:has(> .gp-artes),
	.woocommerce-account .woocommerce-MyAccount-content:has(> .gp-orc),
	.woocommerce-account .woocommerce-MyAccount-content:has(> .gp-cupons),
	.woocommerce-account .woocommerce-MyAccount-content:has(> form.gp-dados),
	.woocommerce-account .woocommerce-MyAccount-content:has(> form.gp-senha),
	body.woocommerce-edit-account .woocommerce-MyAccount-content {
		padding: 14px !important;
		border-radius: 8px !important;
	}
}

@media (max-width: 600px) {
	.gp-dash-grid {
		grid-template-columns: 1fr;
	}

	.gp-dash-card {
		min-height: 0;
	}

	.gp-dash-txt {
		margin-top: 0;
	}

	/* O botao Salvar ocupa a largura toda: e' o alvo principal no celular. O
	   padding de cima repete o de desktop (era 12px quando a barra ainda era
	   uma faixa branca solta, com padding nos quatro lados; agora ela e' rodape'
	   de dentro do card e o lado horizontal tem de continuar zerado, senao o
	   botao deixa de bater com os campos de cima). */
	.gp-acoes {
		padding: 16px 0 0 0;
	}

	.woocommerce-account .woocommerce-EditAccountForm button.gp-btn-salvar {
		width: 100%;
	}

	/* Celular travado + botao Editar nao cabem lado a lado com folga: o botao
	   desce para a linha de baixo sem perder a altura. */
	.gp-com-botao {
		flex-wrap: wrap;
	}

	.gp-btn-editar {
		height: 42px;
	}
}

/* A regra `#gp-senha { scroll-margin-top: 90px }` que morava aqui foi REMOVIDA
   na entrada [67], junto com o proprio #gp-senha: o card "Alterar Senha" do
   painel e do menu lateral nao aponta mais para uma ancora dentro de "Meus
   Dados" — ele leva para a rota /minha-conta/alterar-senha/. Nao sobrou nenhum
   link no site com o fragmento #gp-senha (conferido por busca no tema e nos
   plugins antes de apagar). */

/* =========================================================================
   O VAO DO TOPO NAS TELAS DA CONTA — entrada [59]
   -------------------------------------------------------------------------
   Pedido do Bruno em 18/09/2026: "temos um excesso de respiro vertical no
   topo [...] mantenha apenas um respiro sutil (cerca de 20px a 24px) entre a
   barra azul e o breadcrumb".

   O vao NAO e' um so', mas hoje sobra UMA parcela. Medido no Chrome (CDP) em
   18/09/2026, numa tela de 1482px, em /minha-conta/, /minha-conta/orders/ e
   /minha-conta/edit-account/ — as tres deram exatamente o mesmo numero:

     margin-top  do <main> ............................. 0px   <- ja' zerado
     padding-top do .entry-content ..................... 0px   <- ja' zerado
     padding-top do grupo do tema (filho do main) ...... 70px  <- spacing--60
     padding-top do .gp-institucional-wrapper .......... 15px
                                                        -----
                                                          85px  <- o que ele viu

   As duas primeiras parcelas nao aparecem aqui porque o institucional.css
   (linhas 386-393, "Zera o espacamento entre o header injetado e o container
   principal") ja' as matou com `!important` — inclusive o `margin-top` INLINE
   que o tema escreve no <main>. Sobrou so' o `padding-top` inline do grupo do
   tema, que ninguem tinha tocado. 70 + 15 = 85px, exatamente o medido; por
   isso a correcao mexe em UMA parcela e nao em tres.

   POR QUE 7px CRAVADO, E NAO `calc(spacing--60 / 3)`: aqui e' o inverso da
   tela do pedido (account-ux.css, entrada [55]). La' as duas parcelas do tema
   estavam vivas e valiam `clamp(30px,7vw,70px)`, entao dividir preservava a
   proporcao em qualquer largura. Aqui a parcela que sobra e' a UNICA e o alvo
   e' um numero fixo. Com 7px o vao fica 7 + 15 = 22px em QUALQUER largura — e
   numa tela estreita, onde o clamp hoje vale 30px, o vao DIMINUI (45px ->
   22px) em vez de crescer. Nao existe largura em que isto piore.

   O `!important` e' obrigatorio: o `padding-top` do grupo e' estilo INLINE
   (`style="padding-top:var(--wp--preset--spacing--60)"` no HTML do tema), e so'
   um `!important` de folha vence um inline que nao seja `!important`.

   ESCOPO — o detalhe que quase quebrou a tela do pedido: `view-order` TAMBEM
   carrega a classe `woocommerce-account` no body (e' um endpoint da conta), e
   a regra da [55] usa `calc(spacing--60 / 3)` = 23,33px mirando o MESMO grupo.
   Esta regra tem ID na frente (`main#wp--skip-link--target`), ou seja, vence
   por especificidade — sem o `:not()` abaixo ela sobrescreveria a tela do
   pedido que o Bruno afinou hoje. O `:not(.woocommerce-view-order)` e' o que
   mantem as duas convivendo.
   ========================================================================= */
body.woocommerce-account:not(.woocommerce-view-order) main#wp--skip-link--target > .wp-block-group {
	padding-top: 7px !important;
}