/* ==========================================================================
   AnySolve Emprego, Guias

   Páginas para ler, não para varrer com os olhos. Coluna estreita, tipo
   maior, e tabelas que se lêem no telemóvel sem empurrar a página para o
   lado. Carregar depois de paginas.css.
   ========================================================================== */

.as-guia__cabeca,
.as-guias .as-sec__cabeca {
  max-width: 46rem;
  margin: var(--as-e-12) auto var(--as-e-8);
}

.as-guia__titulo {
  margin: var(--as-e-2) 0 var(--as-e-4);
  font-size: var(--as-t-2xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--as-texto);
}

.as-guia__entrada {
  margin: 0;
  font-size: var(--as-t-lead);
  line-height: 1.6;
  color: var(--as-texto-suave);
}

/* Corpo: 65 caracteres de largura, que é onde a leitura corre melhor. */
.as-guia__corpo {
  max-width: 46rem;
  margin-inline: auto;
  padding-bottom: var(--as-e-12);
  font-size: var(--as-t-lead);
  line-height: 1.7;
  color: var(--as-texto);
}

.as-guia__corpo h2 {
  margin: var(--as-e-12) 0 var(--as-e-3);
  padding-top: var(--as-e-5);
  border-top: 2px solid var(--as-borda-forte);
  font-size: var(--as-t-lg);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--as-texto);
}

.as-guia__corpo h3 {
  margin: var(--as-e-8) 0 var(--as-e-2);
  font-size: var(--as-t-md);
  font-weight: 700;
  color: var(--as-texto);
}

.as-guia__corpo p {
  margin: 0 0 var(--as-e-4);
}

/* --------------------------------------------------------------------------
   Tabelas

   Números alinhados à direita e com algarismos de largura fixa, para as
   colunas de meticais lerem como coluna e não como confusão.
   -------------------------------------------------------------------------- */
.as-tabela-rolo {
  overflow-x: auto;
  margin: var(--as-e-6) 0;
  -webkit-overflow-scrolling: touch;
}

.as-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--as-t-base);
}

.as-tabela th,
.as-tabela td {
  padding: var(--as-e-3) var(--as-e-3);
  text-align: left;
  border-bottom: 1px solid var(--as-borda);
}

.as-tabela thead th {
  font-size: var(--as-t-rotulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--as-texto-fraco);
  border-bottom: 2px solid var(--as-borda-forte);
  white-space: nowrap;
}

.as-tabela .as-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.as-tabela tbody tr:hover {
  background-color: var(--as-papel-fundo);
}

/* --------------------------------------------------------------------------
   Fórmula, passos da conta, prazos
   -------------------------------------------------------------------------- */
.as-formula {
  padding: var(--as-e-4) var(--as-e-5);
  font-size: var(--as-t-base);
  font-weight: 600;
  background-color: var(--as-papel-fundo);
  border-left: 3px solid var(--as-marca);
  border-radius: var(--as-r-papel);
}

.as-passos-conta {
  margin: 0 0 var(--as-e-6);
  padding-left: var(--as-e-6);
  font-variant-numeric: tabular-nums;
}

.as-passos-conta li {
  margin-bottom: var(--as-e-2);
}

.as-lista-prazos {
  margin: 0 0 var(--as-e-6);
  padding-left: var(--as-e-6);
}

.as-lista-prazos li {
  margin-bottom: var(--as-e-2);
}

/* A fonte de cada número, discreta mas sempre presente. */
.as-fonte {
  margin-top: var(--as-e-6);
  font-size: var(--as-t-meta);
  line-height: 1.55;
  color: var(--as-texto-fraco);
}

/* --------------------------------------------------------------------------
   Aviso do fim
   -------------------------------------------------------------------------- */
.as-guia__aviso {
  max-width: 46rem;
  margin: 0 auto var(--as-e-16);
  padding: var(--as-e-5) var(--as-e-6);
  font-size: var(--as-t-meta);
  line-height: 1.6;
  color: var(--as-texto-suave);
  background-color: var(--as-papel-fundo);
  border: 1px solid var(--as-borda);
  border-left: 3px solid var(--as-marca);
  border-radius: var(--as-r-papel);
}

.as-guia__aviso p {
  margin: 0 0 var(--as-e-2);
}

.as-guia__aviso p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Índice
   -------------------------------------------------------------------------- */
.as-guias__lista {
  max-width: 46rem;
  margin: 0 auto var(--as-e-12);
}

.as-guias__item {
  padding: var(--as-e-6) 0;
  border-bottom: 1px solid var(--as-borda);
}

.as-guias__titulo {
  margin: 0 0 var(--as-e-2);
  font-size: var(--as-t-md);
  font-weight: 700;
  line-height: 1.25;
}

.as-guias__titulo a {
  color: var(--as-texto);
  text-decoration: none;
}

.as-guias__titulo a:hover {
  color: var(--as-marca-tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.as-guias__entrada {
  margin: 0;
  font-size: var(--as-t-base);
  color: var(--as-texto-fraco);
}

@media print {
  .as-guia__aviso {
    border-left-width: 1px;
  }
}

/* --------------------------------------------------------------------------
   Tabelas no telemóvel

   Uma tabela de duas colunas num ecrã de 390 pixéis fica com a coluna dos
   meticais cortada ao meio: vê-se "7 0..." e a pessoa tem de arrastar de
   lado para ler um número. Num país onde quase toda a gente entra pelo
   telemóvel, isso não serve.

   Abaixo de 34rem cada linha passa a ser um bloco: o nome em cima, o valor
   por baixo e maior. O cabeçalho da tabela sai do ecrã mas fica para quem
   usa leitor de ecrã, e o rótulo de cada célula volta pelo data-rotulo.

   Apanhado a 29 de Agosto de 2026, a fotografar o guia do salário mínimo a
   390 pixéis de largura.
   -------------------------------------------------------------------------- */
@media (max-width: 34rem) {
  .as-tabela-rolo {
    overflow-x: visible;
  }

  .as-tabela thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .as-tabela tr {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--as-borda);
  }

  .as-tabela tbody tr:hover {
    background-color: transparent;
  }

  .as-tabela td {
    display: block;
    padding: 0;
    border: 0;
  }

  .as-tabela td[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    margin-bottom: 0.1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--as-texto-fraco);
  }

  /* O número é o que se procura, portanto é o que fica grande. */
  .as-tabela td.as-num {
    margin-top: 0.35rem;
    text-align: left;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--as-texto);
  }

  .as-guia__corpo h2 {
    margin-top: 2.5rem;
  }
}