/* ==========================================================================
   RioGráfica · Área de Cliente
   Layout traduzido do frame «Área de cliente / Desktop» (Figma 1685:11899).
   Valores lidos das variáveis do ficheiro, não estimados do screenshot.
   Zero valores hardcoded: tudo sai das custom properties do tokens.css.
   ========================================================================== */

/* --- Medidas sem token no design system ----------------------------------
   Três medidas internas deste ecrã que não têm variável no Figma. Ficam
   agrupadas e nomeadas; se alguma passar a ser transversal, promove-se a
   token. Os 44px são requisito de acessibilidade, não decisão de estilo.
   -------------------------------------------------------------------------- */

.rgac {
  --rgac-coluna: 792px;      /* largura da coluna de conteúdo no frame */
  --rgac-avatar: 72px;       /* diâmetro do avatar */
  --rgac-linha: 64px;        /* altura de cada List Item */
  --rgac-entrada: 480px;     /* largura dos ecrãs de entrada e registo */
  --rgac-alvo-min: 44px;     /* alvo de toque mínimo (WCAG 2.5.5) */
  --rgac-campo-altura: 48px; /* altura de input, spec da Fase 1 */
  --rgac-dl-rotulo: 180px;   /* coluna do rotulo na lista de definicoes */
}

/* --- Esqueleto ----------------------------------------------------------- */

.rgac {
  position: relative;
  overflow-x: clip;
  background-color: var(--color-surface-base);
  padding-block: var(--space-layout-section-y);
  padding-inline: var(--space-layout-section-x);
}

.rgac__wrap {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  max-inline-size: var(--layout-content-width);
  margin-inline: auto;
}

.rgac__coluna {
  inline-size: 100%;
  max-inline-size: var(--rgac-coluna);
}

/* Entrada, registo, recuperação: coluna estreita e centrada. */
.rgac__wrap--estreito {
  max-inline-size: var(--rgac-entrada);
}

.rgac__wrap--estreito .rgac__coluna {
  max-inline-size: none;
}

/* Padrão de quadricromia. O posicionamento e a medida são deste componente,
   com os 613px do frame do Figma: depender da classe .rg-padrao-decor do
   design system não resultou — ela não se aplica nestas rotas e a imagem
   caía no fluxo, ocupava o ecrã todo e empurrava o conteúdo para baixo. */
.rgac-decor {
  position: absolute;
  z-index: 0;
  inset-block-start: 0;
  inset-inline-end: calc(-1 * var(--space-64));
  inset-inline-start: auto;
  inline-size: min(613px, 38vw);
  block-size: auto;
  pointer-events: none;
  user-select: none;
}

.rgac-decor img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* --- Utilitários de texto ------------------------------------------------ */

.rgac__titulo {
  margin-block: 0 var(--space-16);
  color: var(--color-text-primary);
}

.rgac-ajuda {
  margin-block: 0 var(--space-24);
  color: var(--color-text-secondary);
  max-inline-size: var(--layout-reading-width);
}

.rgac-nota {
  margin-block: var(--space-12) 0;
  color: var(--color-text-tertiary);
}

.rgac-link {
  color: var(--color-text-link);
  text-decoration: underline;
}

.rgac-sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Barra de conta ------------------------------------------------------
   NÃO está na maquete: o desenho da navbar mostra «Entrar» mesmo com sessão
   iniciada e não prevê sair nem chegar aos dados pessoais. Até o desenho
   resolver o estado autenticado, o portal precisa destas duas saídas.
   -------------------------------------------------------------------------- */

.rgac-conta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-16);
  margin-block-end: var(--space-24);
}

.rgac-conta-bar a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.rgac-conta-bar a:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}

/* Voltar, nos ecrãs interiores. */
.rgac-voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-inline);
  margin-block-end: var(--space-16);
  color: var(--color-text-link);
  text-decoration: none;
}

.rgac-voltar:hover {
  text-decoration: underline;
}

/* --- Saudação ------------------------------------------------------------ */

.rgac-bemvindo {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  margin-block-end: var(--space-48);
}

.rgac-avatar {
  flex: 0 0 var(--rgac-avatar);
  inline-size: var(--rgac-avatar);
  block-size: var(--rgac-avatar);
  border-radius: var(--radius-full);
  background-color: var(--color-surface-brand-subtle);
  color: var(--color-text-brand);
  display: grid;
  place-items: center;
  /* O avatar alinha pelo centro do bloco de texto, como no desenho. */
  margin-block-start: var(--space-20);
}

.rgac-bemvindo__titulo {
  margin: 0;
  color: var(--color-text-primary);
}

.rgac-bemvindo__sub {
  margin-block: var(--space-16) 0;
  color: var(--color-text-secondary);
}

/* --- Cartões ------------------------------------------------------------- */

.rgac-conta {
  display: grid;
  gap: var(--space-24);
}

.rgac-cartao {
  background-color: var(--color-surface-base);
  border: var(--border-width-sm) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-card-padding);
}

.rgac-cartao__titulo {
  margin: 0 0 var(--space-16);
  color: var(--color-text-primary);
}

.rgac-cartao__link {
  display: inline-block;
  margin-block-start: var(--space-16);
  color: var(--color-text-link);
  text-decoration: none;
}

.rgac-cartao__link:hover {
  text-decoration: underline;
}

.rgac-cartao__vazio {
  margin: 0;
  color: var(--color-text-secondary);
}

/* --- Lista (componente List Item) ---------------------------------------- */

.rgac-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.rgac-lista__item + .rgac-lista__item {
  border-block-start: var(--border-width-sm) solid var(--color-border-subtle);
}

.rgac-lista__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-block-size: var(--rgac-linha);
  padding-inline: var(--space-12);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
}

.rgac-lista__link:hover {
  background-color: var(--color-surface-brand-subtle);
}

.rgac-lista__texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-inline-size: 0;
}

.rgac-lista__meta {
  color: var(--color-text-tertiary);
}

.rgac-lista__seta {
  flex: 0 0 auto;
  color: var(--color-text-tertiary);
}

/* --- CTA Banner ---------------------------------------------------------- */

.rgac-cta {
  display: flex;
  /* O botão fica sempre à direita, na mesma linha, como no desenho.
     Só quebra em ecrãs estreitos (ver media query no fim). */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  margin-block-start: var(--space-48);
  padding: var(--space-24);
  border-radius: var(--radius-lg);
}

.rgac-cta--escuro {
  background-color: var(--color-surface-brand);
  color: var(--color-text-on-brand);
}

.rgac-cta--claro {
  background-color: var(--color-surface-brand-subtle);
  color: var(--color-text-primary);
}

.rgac-cta__texto {
  display: grid;
  gap: var(--space-8);
  flex: 1 1 auto;
  min-inline-size: 0;
  max-inline-size: var(--layout-reading-width);
}

.rgac-cta .rgac-botao {
  flex: 0 0 auto;
}

.rgac-cta__titulo,
.rgac-cta__sub {
  margin: 0;
  color: inherit;
}

.rgac-cta--claro .rgac-cta__sub {
  color: var(--color-text-secondary);
}

/* --- Avisos -------------------------------------------------------------- */

.rgac-aviso {
  margin-block: 0 var(--space-24);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-md);
  border-inline-start: var(--border-width-lg) solid transparent;
}

.rgac-aviso--erro {
  background-color: var(--color-feedback-error-bg);
  border-inline-start-color: var(--color-feedback-error-base);
  color: var(--color-feedback-error-fg);
}

.rgac-aviso--sucesso {
  background-color: var(--color-feedback-success-bg);
  border-inline-start-color: var(--color-feedback-success-base);
  color: var(--color-feedback-success-fg);
}

/* --- Secções ------------------------------------------------------------- */

.rgac-seccao {
  margin-block-start: var(--space-32);
}

.rgac-seccao--acao {
  background-color: var(--color-surface-brand-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
}

.rgac-seccao__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-inline);
  margin-block-end: var(--space-16);
}

.rgac-seccao h2 {
  margin: 0;
  color: var(--color-text-primary);
}

.rgac-migalhas {
  display: flex;
  gap: var(--space-inline);
  color: var(--color-text-tertiary);
  margin-block-end: var(--space-12);
}

/* --- Tabela -------------------------------------------------------------- */

.rgac-tabela__scroll {
  overflow-x: auto;
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-raised);
}

.rgac-tabela {
  inline-size: 100%;
  border-collapse: collapse;
}

.rgac-tabela__legenda {
  caption-side: top;
  text-align: start;
  padding: var(--space-16) var(--space-card-padding) 0;
  color: var(--color-text-secondary);
}

.rgac-tabela th,
.rgac-tabela td {
  text-align: start;
  padding: var(--space-12) var(--space-card-padding);
  border-block-end: var(--border-width-sm) solid var(--color-border-subtle);
  vertical-align: middle;
}

.rgac-tabela thead th {
  color: var(--color-text-secondary);
  background-color: var(--color-surface-subtle);
}

.rgac-tabela tbody tr:last-child th,
.rgac-tabela tbody tr:last-child td {
  border-block-end: 0;
}

.rgac-tabela__meta {
  display: block;
  color: var(--color-text-tertiary);
}

/* --- Lista de definições ------------------------------------------------- */

.rgac-dl {
  margin: 0;
  display: grid;
  gap: var(--space-12);
  background-color: var(--color-surface-raised);
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-card-padding);
}

.rgac-dl__linha {
  display: grid;
  grid-template-columns: var(--rgac-dl-rotulo) minmax(0, 1fr);
  gap: var(--space-16);
}

.rgac-dl dt {
  color: var(--color-text-secondary);
  margin: 0;
}

.rgac-dl dd {
  margin: 0;
  color: var(--color-text-primary);
}

/* --- Estado -------------------------------------------------------------- */

.rgac-estado {
  display: inline-block;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-full);
  border: var(--border-width-sm) solid transparent;
  white-space: nowrap;
}

.rgac-estado--neutro {
  background-color: var(--color-surface-sunken);
  border-color: var(--color-border-default);
  color: var(--color-text-secondary);
}

.rgac-estado--info {
  background-color: var(--color-feedback-info-bg);
  border-color: var(--color-feedback-info-base);
  color: var(--color-feedback-info-fg);
}

.rgac-estado--sucesso {
  background-color: var(--color-feedback-success-bg);
  border-color: var(--color-feedback-success-base);
  color: var(--color-feedback-success-fg);
}

.rgac-estado--aviso {
  background-color: var(--color-feedback-warning-bg);
  border-color: var(--color-feedback-warning-base);
  color: var(--color-feedback-warning-fg);
}

.rgac-estado--erro {
  background-color: var(--color-feedback-error-bg);
  border-color: var(--color-feedback-error-base);
  color: var(--color-feedback-error-fg);
}

/* --- Botões -------------------------------------------------------------- */
/* O ciano é o botão primário; o verde é o secundário. O ciano nunca é
   usado em texto (1,3:1 sobre branco) — só como preenchimento. */

.rgac-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-inline);
  min-block-size: var(--rgac-alvo-min);
  padding: var(--space-12) var(--space-24);
  border: var(--border-width-sm) solid transparent;
  /* Pilula, como na maquete e como os restantes botoes do site. */
  border-radius: var(--radius-full);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
}

/* O text-decoration: none da regra base nao chega.

   O reset.css do tema (Hello Elementor) tem 'a, a:visited { text-decoration:
   underline }'. Numa lista de seletores cada um conta a sua especificidade:
   o 'a' vale (0,0,1) e perde para .rgac-botao (0,1,0), mas o 'a:visited'
   vale (0,1,1) e GANHA. Resultado: o botao so sublinhava depois de o
   visitante ter aberto a pagina de destino - o que faz o bug parecer
   intermitente e dependente de quem o ve.

   Dai o seletor de tipo + classe + pseudo-classe (0,2,1), que cobre os tres
   estados de link. Os estados de interacao vao juntos porque o theme.css
   tambem sublinha em :hover. */
a.rgac-botao,
a.rgac-botao:link,
a.rgac-botao:visited,
a.rgac-botao:hover,
a.rgac-botao:focus,
a.rgac-botao:focus-visible,
a.rgac-botao:active {
  text-decoration: none;
}

.rgac-botao--primario {
  background-color: var(--color-action-primary);
  /* Branco, para o portal falar a mesma lingua do resto do site (tokens.css
     12f poe texto inverso em todos os botoes primarios). Custo assumido: o
     branco sobre o cyan-500 da ~2,2:1 contra os ~6,5:1 do action-on-primary.
     Resolve-se escurecendo o token do ciano, nao aqui. */
  color: var(--color-text-inverse);
}

.rgac-botao--primario:hover {
  background-color: var(--color-action-primary-hover);
}

.rgac-botao--primario:active {
  background-color: var(--color-action-primary-pressed);
}

/* A cor do texto precisa da mesma especificidade que o text-decoration, e
   pela mesma razao: o .rgac-botao--primario vale (0,1,0) e o 'a:hover' do
   theme.css vale (0,1,1), por isso ganhava e repunha a cor de link azul por
   cima do botao. So se via em hover, o que fazia parecer um efeito
   intencional. Tipo + classe + pseudo-classe = (0,2,1) e o branco mantem-se
   nos cinco estados, como no botao 'Pedir orcamento' do header. */
a.rgac-botao--primario,
a.rgac-botao--primario:link,
a.rgac-botao--primario:visited,
a.rgac-botao--primario:hover,
a.rgac-botao--primario:focus,
a.rgac-botao--primario:focus-visible,
a.rgac-botao--primario:active {
  color: var(--color-text-inverse);
}

.rgac-botao--secundario {
  background-color: var(--color-brand-secondary);
  color: var(--color-action-on-primary);
}

.rgac-botao--secundario:hover {
  background-color: var(--color-brand-secondary-hover);
}

.rgac-botao--secundario:active {
  background-color: var(--color-brand-secondary-active);
}

.rgac-botao--discreto {
  background-color: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.rgac-botao--discreto:hover {
  background-color: var(--color-surface-sunken);
}

.rgac-botao[disabled] {
  background-color: var(--color-action-disabled);
  color: var(--color-action-on-disabled);
  cursor: not-allowed;
}

/* --- Formulários --------------------------------------------------------- */

.rgac-form {
  display: grid;
  gap: var(--space-16);
  background-color: var(--color-surface-raised);
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  justify-items: start;
}

.rgac-form__campo {
  display: grid;
  gap: var(--space-4);
  inline-size: 100%;
}

.rgac-form__campo label {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.rgac-form__ajuda {
  margin: 0;
  color: var(--color-text-tertiary);
}

.rgac-form__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  inline-size: 100%;
}

.rgac-input {
  inline-size: 100%;
  min-block-size: var(--rgac-campo-altura);
  padding: var(--space-12) var(--space-16);
  /* border/default, que e o estado Default do Text Field (553:2324). O
     border/strong que se ve no ecra de editar contacto e o estado Filled do
     mesmo componente - so la, porque os campos tem valor. Faze-lo so em CSS
     obrigava a por um placeholder em todos os campos para usar o
     :placeholder-shown, e um placeholder falso custa mais em acessibilidade
     do que um degrau de cinzento vale. Fica o Default. */
  border: var(--border-width-sm) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
}

.rgac-input::placeholder {
  color: var(--color-text-tertiary);
}

.rgac-input:focus {
  border-color: var(--color-border-focus);
}

.rgac-input[readonly] {
  background-color: var(--color-surface-sunken);
  color: var(--color-text-secondary);
}

.rgac-input[aria-invalid="true"] {
  border-color: var(--color-feedback-error-base);
}

.rgac-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-inline);
  color: var(--color-text-secondary);
}

/* --- Estado vazio -------------------------------------------------------- */

.rgac-vazio {
  background-color: var(--color-surface-raised);
  border: var(--border-width-sm) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-32) var(--space-24);
  text-align: center;
  display: grid;
  gap: var(--space-12);
  justify-items: center;
}

.rgac-vazio__titulo {
  margin: 0;
  color: var(--color-text-primary);
}

.rgac-vazio__texto {
  margin: 0;
  color: var(--color-text-secondary);
  max-inline-size: var(--layout-reading-width);
}

/* --- Paginação ----------------------------------------------------------- */

.rgac-paginacao {
  margin-block-start: var(--space-24);
}

.rgac-paginacao__lista {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-inline);
  margin: 0;
  padding: 0;
}

.rgac-paginacao__item a,
.rgac-paginacao__item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--rgac-alvo-min);
  min-block-size: var(--rgac-alvo-min);
  padding-inline: var(--space-12);
  border-radius: var(--radius-md);
  border: var(--border-width-sm) solid var(--color-border-default);
  color: var(--color-text-primary);
  text-decoration: none;
}

.rgac-paginacao__item .current {
  background-color: var(--color-surface-brand-subtle);
  border-color: var(--color-border-brand);
  color: var(--color-text-brand);
  font-weight: var(--font-weight-medium);
}

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 1023px) {
  .rgac-decor {
    display: none;
  }

  .rgac__wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "cabecalho"
      "nav"
      "painel";
  }

  
  .rgac-dl__linha {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

/* Aviso de e-mail por confirmar: bloco, não linha — tem título e ação. */
.rgac-aviso--atencao {
  background-color: var(--color-feedback-warning-bg);
  border-inline-start-color: var(--color-feedback-warning-base);
  color: var(--color-feedback-warning-fg);
  display: grid;
  gap: var(--space-8);
  justify-items: start;
}

.rgac-aviso--atencao p {
  margin: 0;
}

.rgac-aviso__titulo {
  color: inherit;
}

/* --- Página de suporte do portal ----------------------------------------
   O portal assenta numa página real, e o tema imprime o título dela por
   cima do conteúdo — «Área de cliente» a duplicar o H1 do próprio ecrã.
   Esconde-se o título do tema, não o nosso: cada ecrã do portal tem o seu.
   -------------------------------------------------------------------------- */

.rg-portal .page-header,
.rg-portal .entry-title,
.rg-portal .elementor-widget-theme-page-title {
  display: none;
}

/* O tema já dá margem à área de conteúdo; sem isto o portal fica com o
   dobro do espaço em cima. */
.rg-portal .rgac {
  padding-block-start: var(--space-48);
}

/* A página de suporte não deve aparecer em pesquisas nem em listagens. */
.rg-portal .entry-header {
  display: none;
}

/* Campo de texto livre: a unica caixa do portal que cresce. */
.rgac-input--area {
	min-block-size: 120px;
	resize: vertical;
	font-family: inherit;
	line-height: 1.5;
}

/* --- Barra lateral -------------------------------------------------------
   Componente Sidebar do frame "Area de cliente / Desktop" (Figma 2332:4300):
   264px, divisoria a direita, e tres blocos separados por linhas - quem e o
   cliente, onde pode ir, e como sai.

   Com barra, o .rgac deixa de ser o contentor com padding e passa a ser a
   linha: a barra encosta a margem e vai ate ao fundo, e o padding muda-se
   para o .rgac__wrap. Os 48px entre a barra e o conteudo sao os do frame.
   -------------------------------------------------------------------------- */

.rgac--barra {
  --rgac-barra: 264px;
  display: flex;
  align-items: stretch;
  padding-block: 0;
  padding-inline: 0;
}

.rgac--barra .rgac__wrap {
  flex: 1 1 auto;
  min-inline-size: 0;
  max-inline-size: none;
  margin-inline: 0;
  padding-block: var(--space-layout-section-y);
  padding-inline: var(--space-48) var(--space-layout-section-x);
}

.rgac-sidebar {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--rgac-barra);
  inline-size: var(--rgac-barra);
  border-inline-end: var(--border-width-sm) solid var(--color-border-subtle);
  background-color: var(--color-surface-base);
}

.rgac-sidebar__id {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-24);
  border-block-end: var(--border-width-sm) solid var(--color-border-subtle);
}

.rgac-sidebar__avatar {
  flex: 0 0 40px;
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-brand-subtle);
  color: var(--color-text-brand);
  font-size: var(--font-size-body-s);
  font-weight: var(--font-weight-medium);
  line-height: 1;
}

.rgac-sidebar__utilizador {
  display: grid;
  gap: var(--space-4);
  min-inline-size: 0;
}

.rgac-sidebar__nome {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  overflow-wrap: anywhere;
}

.rgac-sidebar__empresa {
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--font-letter-spacing-wide);
  overflow-wrap: anywhere;
}

.rgac-sidebar__nav {
  padding: var(--space-16) var(--space-12);
  border-block-end: var(--border-width-sm) solid var(--color-border-subtle);
}

.rgac-sidebar__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.rgac-sidebar__sessao {
  padding: var(--space-12);
}

/* A barra de 3px da entrada ativa esta sempre la, transparente: sem isso o
   item saltava 3px ao ficar ativo. */
.rgac-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-block-size: var(--rgac-alvo-min);
  padding: var(--space-12);
  border-radius: var(--radius-md);
  border-inline-start: var(--border-width-lg) solid transparent;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
}

.rgac-sidebar__item:hover {
  background-color: var(--color-surface-subtle);
}

.rgac-sidebar__item.esta-ativo {
  background-color: var(--color-surface-green-subtle);
  border-inline-start-color: var(--color-brand-secondary);
  font-weight: var(--font-weight-medium);
}

.rgac-sidebar__item .rgac-icone {
  flex: 0 0 20px;
  color: var(--color-text-tertiary);
}

.rgac-sidebar__item.esta-ativo .rgac-icone {
  color: var(--color-brand-secondary);
}

/* Tipo + classe + pseudo-classe = (0,2,1). O reset do Hello sublinha com
   'a:visited' (0,1,1) e o theme.css repoe a cor em 'a:hover' (0,1,1): uma
   classe sozinha (0,1,0) perde para ambos. Mesma armadilha dos botoes. */
a.rgac-sidebar__item,
a.rgac-sidebar__item:link,
a.rgac-sidebar__item:visited,
a.rgac-sidebar__item:hover,
a.rgac-sidebar__item:focus,
a.rgac-sidebar__item:focus-visible,
a.rgac-sidebar__item:active {
  text-decoration: none;
  color: var(--color-text-secondary);
}

a.rgac-sidebar__item:hover,
a.rgac-sidebar__item:focus-visible {
  color: var(--color-text-primary);
}

a.rgac-sidebar__item.esta-ativo,
a.rgac-sidebar__item.esta-ativo:link,
a.rgac-sidebar__item.esta-ativo:visited,
a.rgac-sidebar__item.esta-ativo:hover,
a.rgac-sidebar__item.esta-ativo:focus,
a.rgac-sidebar__item.esta-ativo:focus-visible,
a.rgac-sidebar__item.esta-ativo:active {
  color: var(--color-text-brand);
}

/* Abaixo de 900px a barra passa a faixa: identificacao por cima e as
   seccoes numa tira horizontal. Nao ha menu de hamburguer porque sao cinco
   entradas - escondê-las atras de um clique so adiciona um passo. */
@media (max-width: 900px) {
  .rgac--barra {
    display: block;
  }

  .rgac--barra .rgac__wrap {
    padding-inline: var(--space-layout-section-x);
  }

  .rgac-sidebar {
    inline-size: 100%;
    border-inline-end: 0;
    border-block-end: var(--border-width-sm) solid var(--color-border-subtle);
  }

  .rgac-sidebar__id {
    padding-inline: var(--space-layout-section-x);
  }

  .rgac-sidebar__nav {
    padding-inline: var(--space-layout-section-x);
    border-block-end: 0;
  }

  .rgac-sidebar__lista {
    flex-direction: row;
    gap: var(--space-8);
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .rgac-sidebar__item {
    white-space: nowrap;
    border-inline-start: 0;
    border-block-end: var(--border-width-lg) solid transparent;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }

  .rgac-sidebar__item.esta-ativo {
    border-block-end-color: var(--color-brand-secondary);
  }

  .rgac-sidebar__sessao {
    padding-inline: var(--space-layout-section-x);
  }
}
/* --- CTA Banner em mobile -------------------------------------------------
   A regra base tem flex-wrap: nowrap de proposito: no desenho o botao fica
   sempre na mesma linha do texto. Em ecra estreito isso espremia o texto
   numa coluna de meia duzia de palavras por linha, com o botao a ocupar
   metade da largura. Abaixo de 768px passa a coluna - texto primeiro, botao
   a seguir e a toda a largura, que e tambem o alvo de toque mais generoso.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .rgac-cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
  }

  .rgac-cta__texto {
    max-inline-size: none;
  }
}

/* --- Detalhe de projeto -------------------------------------------------
   Maquete: Figma «Projeto 1 / Desktop» (1685:11951). Os blocos sao secoes
   soltas na coluna, nao cartoes: o unico cartao do ecra e o da
   pre-visualizacao, e e isso que lhe da o peso que a maquete lhe quer dar.
   -------------------------------------------------------------------------- */

.rgac-sobrescrito {
  margin: 0 0 var(--space-8);
  color: var(--color-text-secondary);
}

.rgac-bloco {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack);
  margin-block-start: var(--space-48);
}

.rgac-bloco__titulo {
  margin: 0;
  color: var(--color-text-primary);
}

/* Cartao de pre-visualizacao (componente «Preview», Figma 904:1669). */
.rgac-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-card-gap-lg);
  padding: var(--space-card-padding);
  border: var(--border-width-sm) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-base);
}

.rgac-preview + .rgac-preview {
  margin-block-start: var(--space-16);
}

.rgac-preview__ficheiro {
  margin: 0;
  color: var(--color-text-primary);
  word-break: break-word;
}

.rgac-preview__media {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-sunken);
}

/* Duas alturas: a arte pede espaco para se ver, a fatura so pede confirmacao
   de que e a fatura certa. Sao as duas alturas da maquete. */
.rgac-preview__media--alto {
  block-size: 334px;
}

.rgac-preview__media--baixo {
  block-size: 200px;
}

.rgac-preview__doc,
.rgac-preview__imagem {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

.rgac-preview__imagem {
  object-fit: contain;
}

.rgac-preview__sem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-text-tertiary);
}

.rgac-preview__sem .rgac-icone {
  inline-size: 40px;
  block-size: 40px;
}

.rgac-preview__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-inline);
}

.rgac-preview__acao {
  flex: 1 1 auto;
}

/* Linhas de especificacao (componente «Spec Row», Figma 849:2237). */
.rgac-specs {
  margin: 0;
}

.rgac-specs__linha {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  min-block-size: 48px;
  padding-block: 13px;
  border-block-end: var(--border-width-sm) solid var(--color-border-subtle);
}

.rgac-specs__rotulo {
  flex: 1 1 0;
  min-inline-size: 0;
  margin: 0;
  color: var(--color-text-secondary);
}

.rgac-specs__valor {
  margin: 0;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  text-align: end;
}

/* A linha de valor e a unica que muda de peso e de cor: e o numero que o
   cliente procura na tabela toda. */
.rgac-specs__linha--destaque .rgac-specs__rotulo {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.rgac-specs__linha--destaque .rgac-specs__valor {
  color: var(--color-text-brand);
  font-weight: var(--font-weight-bold);
}

.rgac-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-inline);
  margin-block-start: var(--space-48);
}

.rgac-acoes__item {
  flex: 1 1 200px;
}

.rgac-acoes__item .rgac-botao {
  inline-size: 100%;
}

/* Terciario: botao-link da maquete. Sem fundo e sem borda - so o rotulo em
   teal, o mesmo registo do «Visualizar arte». */
.rgac-botao--terciario {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-text-link);
}

.rgac-botao--terciario:hover {
  background-color: var(--color-surface-brand-subtle);
}

a.rgac-botao--terciario,
a.rgac-botao--terciario:link,
a.rgac-botao--terciario:visited,
a.rgac-botao--terciario:hover,
a.rgac-botao--terciario:focus,
a.rgac-botao--terciario:focus-visible,
a.rgac-botao--terciario:active {
  color: var(--color-text-link);
}

@media (max-width: 767px) {
  .rgac-preview__media--alto {
    block-size: 240px;
  }

  .rgac-specs__linha {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-4);
  }

  .rgac-specs__valor {
    text-align: start;
  }
}

/* --- Dados da conta -----------------------------------------------------
   Maquete: Figma «Dados da conta / Desktop» (2431:5597).
   Leitura primeiro, edicao por bloco. O bloco em edicao troca as linhas por
   campos no mesmo sitio, sem cartao a volta - a mudanca ja se ve pelos
   proprios campos, e um cartao so empurrava o resto da pagina para baixo.
   -------------------------------------------------------------------------- */

.rgac-lead {
  margin: 0;
  color: var(--color-text-secondary);
  max-inline-size: 60ch;
}

.rgac-bloco__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

/* O botao Editar e um link-botao: sem o padding do botao ficava colado ao
   titulo, com ele ficava desalinhado a direita. Recolhe-se a margem. */
.rgac-bloco__cabecalho .rgac-botao {
  margin-inline-end: calc(-1 * var(--space-24));
}

.rgac-specs__valor--vazio {
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-regular);
}

/* Variante empilhada da linha (Spec Row / Empilhado). A 792px uma morada
   ainda cabe ao lado do rotulo; a 358px esmagava-o e ficava a toca-lo. Usa-se
   nas moradas em qualquer largura, para a linha nao mudar de forma a meio. */
.rgac-specs__linha--empilhado {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-12);
}

.rgac-specs__linha--empilhado .rgac-specs__valor {
  text-align: start;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
}

/* Dentro de um bloco o formulario nao e um cartao: sao os campos no lugar
   das linhas. */
.rgac-bloco .rgac-form {
  padding: 0;
  border: 0;
  background-color: transparent;
  gap: var(--space-16);
  justify-items: stretch;
}

/* Pares lado a lado (Email + Telefone, Empresa + NIF): duas colunas iguais,
   alinhadas pelo topo porque um dos campos tem texto de ajuda por baixo e o
   outro nao. */
.rgac-bloco .rgac-form__linha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  justify-content: stretch;
  gap: var(--space-16);
}

.rgac-form__campo--visto {
  padding-block-end: var(--space-4);
}

.rgac-form__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-inline);
  margin-block-start: var(--space-8);
}

@media (max-width: 767px) {
  /* Sem pares lado a lado: 171px nao chega para um numero de telefone. */
  .rgac-bloco .rgac-form__linha {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Botoes empilhados a largura total, Guardar em cima. */
  .rgac-form__acoes {
    flex-direction: column;
    align-items: stretch;
  }

  .rgac-form__acoes .rgac-botao {
    inline-size: 100%;
  }

  .rgac-bloco__cabecalho .rgac-botao {
    margin-inline-end: 0;
  }
}

/* O bloco em edicao respira mais: 24px entre cabecalho, campos e accoes,
   contra os 16px das linhas de leitura. E o que a maquete do ecra de edicao
   (2432:5719) faz, e faz sentido - inputs precisam de mais ar do que linhas
   de texto. */
.rgac-bloco--editar {
  gap: var(--space-24);
}

/* --- Botoes <button>: recuperar o botao do design system ----------------
   O Site Settings do Elementor publica isto no post-7.css:

     .elementor-kit-7 button, ... { background-color:#00B996;
                                    color:#FFFFFF;
                                    border-radius:2px 2px 2px 2px; }

   `.elementor-kit-7 button` vale (0,1,1) e a classe `.rgac-botao` vale
   (0,1,0): o kit ganha. Resultado - todo o <button type="submit"> do portal
   saia verde e quase quadrado, enquanto os <a class="rgac-botao"> saiam
   certos. Era por isso que so os botoes de guardar pareciam de outro site.

   Nao se resolve no Elementor: aquele verde e o botao global do site e os
   widgets dele contam com ele. Resolve-se aqui, subindo a especificidade
   para (0,2,1) com a classe repetida - o mesmo truque que ja se usou para
   ganhar ao `a:visited` do reset.css do Hello. A classe repetida nao muda o
   markup nem depende de um contentor, por isso funciona tambem nos
   formularios que vivem fora do `.rgac`.
   -------------------------------------------------------------------------- */

button.rgac-botao.rgac-botao,
input[type="submit"].rgac-botao.rgac-botao {
  border-radius: var(--radius-full);
  border: var(--border-width-sm) solid transparent;
}

button.rgac-botao--primario.rgac-botao--primario,
input[type="submit"].rgac-botao--primario.rgac-botao--primario {
  background-color: var(--color-action-primary);
  color: var(--color-text-inverse);
}

button.rgac-botao--primario.rgac-botao--primario:hover,
button.rgac-botao--primario.rgac-botao--primario:focus,
button.rgac-botao--primario.rgac-botao--primario:focus-visible {
  background-color: var(--color-action-primary-hover);
  color: var(--color-text-inverse);
}

button.rgac-botao--primario.rgac-botao--primario:active {
  background-color: var(--color-action-primary-pressed);
  color: var(--color-text-inverse);
}

button.rgac-botao--secundario.rgac-botao--secundario {
  background-color: var(--color-brand-secondary);
  color: var(--color-action-on-primary);
}

button.rgac-botao--secundario.rgac-botao--secundario:hover,
button.rgac-botao--secundario.rgac-botao--secundario:focus,
button.rgac-botao--secundario.rgac-botao--secundario:focus-visible {
  background-color: var(--color-brand-secondary-hover);
  color: var(--color-action-on-primary);
}

/* Terciario e discreto nao tem fundo. Sem isto o `color:#FFFFFF` do kit
   deixava-os brancos sobre branco - texto invisivel, nao so mal pintado. */
button.rgac-botao--terciario.rgac-botao--terciario {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-text-link);
}

button.rgac-botao--terciario.rgac-botao--terciario:hover,
button.rgac-botao--terciario.rgac-botao--terciario:focus,
button.rgac-botao--terciario.rgac-botao--terciario:focus-visible {
  background-color: var(--color-surface-brand-subtle);
  color: var(--color-text-link);
}

button.rgac-botao--discreto.rgac-botao--discreto {
  background-color: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

button.rgac-botao--discreto.rgac-botao--discreto:hover,
button.rgac-botao--discreto.rgac-botao--discreto:focus,
button.rgac-botao--discreto.rgac-botao--discreto:focus-visible {
  background-color: var(--color-surface-sunken);
  color: var(--color-text-primary);
}

button.rgac-botao.rgac-botao[disabled] {
  background-color: var(--color-action-disabled);
  color: var(--color-action-on-disabled);
}

/* --- Sublinhados: fechar o a:visited do Hello ---------------------------
   O reset.css do tema declara `a,a:visited{text-decoration:underline}`. O
   `a:visited` vale (0,1,1) e ganha ao `.rgac-lista__link` (0,1,0), que ja
   pedia `text-decoration: none`. Por isso o sublinhado aparecia so depois de
   a linha ter sido aberta uma vez - o mesmo bug intermitente que ja tinha
   aparecido nos botoes e no footer.

   Tipo + classe + pseudo-classe = (0,2,1) fecha os cinco estados de link.
   -------------------------------------------------------------------------- */

/* Linhas de lista: o titulo e a meta nunca sublinham. A seta a direita e o
   fundo em hover ja dizem que a linha inteira e clicavel; o sublinhado so
   sujava a leitura da meta, que e texto de apoio e nao um link. */
a.rgac-lista__link:link,
a.rgac-lista__link:visited,
a.rgac-lista__link:hover,
a.rgac-lista__link:focus,
a.rgac-lista__link:focus-visible,
a.rgac-lista__link:active {
  text-decoration: none;
}

/* O «Ver todas as ...» e o contrario: sublinhado de proposito, em todos os
   estados. E um link de texto solto no fundo do cartao, sem seta nem fundo
   que o denuncie - o sublinhado e a unica afordancia que tem. Fica
   declarado, em vez de depender de o link ja ter sido visitado. */
a.rgac-cartao__link:link,
a.rgac-cartao__link:visited,
a.rgac-cartao__link:hover,
a.rgac-cartao__link:focus,
a.rgac-cartao__link:focus-visible,
a.rgac-cartao__link:active {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Migalhas, «voltar» e links dentro de texto: sem sublinhado em repouso,
   com sublinhado em hover e foco. E o mesmo contrato do resto do site. */
a.rgac-link:link,
a.rgac-link:visited,
a.rgac-voltar:link,
a.rgac-voltar:visited {
  text-decoration: none;
}

a.rgac-link:hover,
a.rgac-link:focus,
a.rgac-link:focus-visible,
a.rgac-voltar:hover,
a.rgac-voltar:focus,
a.rgac-voltar:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}