/* ==========================================================================
   A CONTA DO CLIENTE

   Folha própria, como as outras páginas grandes do site. As variáveis
   (--tinta, --papel, --amarelo, --raio, --sombra) vêm de `estilo.css`, que
   carrega antes desta: aqui não se declara cor nenhuma à mão, senão o dia em
   que a marca mudar de tom esta página fica para trás.
   ========================================================================== */

/* --------------------------------------------------------------------------
   O BOTÃO DA CONTA NO CABEÇALHO

   Ao pé do comutador de língua. Some o texto no telemóvel e fica só o ícone:
   num ecrã estreito o cabeçalho já tem o comutador, o botão principal e o
   menu, e mais duas palavras faziam a linha quebrar.
   -------------------------------------------------------------------------- */

.cabecalho__conta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .75rem;
  border-radius: var(--raio, 10px);
  color: inherit;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease;
}

.cabecalho__conta:hover,
.cabecalho__conta:focus-visible {
  background-color: rgba(0, 0, 0, .06);
}

.cabecalho__conta[aria-current="page"] {
  background-color: rgba(0, 0, 0, .08);
}

@media (max-width: 900px) {
  .cabecalho__conta span {
    /* O nome sai, o ícone fica. `clip` e não `display:none` para o leitor de
       ecrã continuar a anunciar "A minha conta" em vez de um link mudo. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   OS FORMULÁRIOS (email e código)
   -------------------------------------------------------------------------- */

/* ==========================================================================
   A LARGURA ESTREITA DOS FORMULARIOS TEM CLASSE PROPRIA.

   Isto era `.envelope--estreito`, a classe do site inteiro — e como esta
   folha e a ULTIMA que o molde carrega, a redefinicao ganhava em todas as
   paginas. O site tem `--larg-estreita: 880px`, largura de leitura; aqui
   passava a 544px, e ficavam apertados tres sitios que nao tem nada a ver
   com a conta:

     "Cinco coisas que pode verificar antes de pagar"
     "O seu telemovel aceita eSIM?"
     "O que nos perguntam antes de comprar"

   Medido num ecra de 1280: o envelope normal dava 1203px e estes davam
   544, com o texto dentro a 430. Foi o dono a dar por isso, nos tres.

   Uma folha de uma area nao redefine uma classe do site. Se precisar de
   outra largura, pede uma classe sua — que e o que esta aqui.
   ========================================================================== */
.envelope--forma {
  max-width: 34rem;
}

.conta-forma {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.conta-forma__rotulo {
  font-weight: 600;
  font-size: .95rem;
}

.conta-forma__campo {
  padding: .85rem 1rem;
  border: 1.5px solid rgba(0, 0, 0, .18);
  border-radius: var(--raio, 10px);
  background: #fff;
  font: inherit;
  font-size: 1.05rem;
}

.conta-forma__campo:focus-visible {
  outline: 3px solid var(--amarelo, #FFD400);
  outline-offset: 1px;
  border-color: rgba(0, 0, 0, .45);
}

/* O CAMPO DO CÓDIGO É GRANDE E ESPAÇADO.
   São seis dígitos que a pessoa está a copiar de outro ecrã, olhando para
   trás e para a frente — e um deles vai ser um 0 ou um 8. Letra grande e
   espaçamento largo é o que torna isso legível de relance. */
.conta-forma__campo--codigo {
  font-size: 1.9rem;
  letter-spacing: .35em;
  text-align: center;
  padding-left: .35em;
}

.conta-forma__ajuda {
  font-size: .88rem;
  opacity: .72;
  margin: 0;
}

.conta-forma__erro {
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  color: #b3261e;
}

.conta-forma .botao {
  margin-top: .6rem;
  align-self: flex-start;
}

.conta-alternativas {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.ligacao-nua {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .92rem;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

.conta-nota {
  margin-top: 2.5rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--raio, 10px);
  background: rgba(0, 0, 0, .04);
}

.conta-nota__titulo {
  margin: 0 0 .5rem;
  font-size: 1rem;
}

.conta-nota p {
  margin: 0 0 1rem;
  font-size: .94rem;
  line-height: 1.55;
}

.conta-nota p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   O PAINEL
   -------------------------------------------------------------------------- */

.conta-sair {
  margin-top: 1rem;
}

.conta-resumo {
  padding: 1.25rem 1.5rem;
  border-radius: var(--raio, 10px);
  background: rgba(0, 0, 0, .04);
  margin-bottom: 2.5rem;
}

.conta-resumo__rotulo {
  margin: 0;
  font-size: .9rem;
  opacity: .72;
}

.conta-resumo__valor {
  margin: .15rem 0 0;
  font-size: 2rem;
  font-weight: 700;
}

.conta-resumo__nota {
  margin: .5rem 0 0;
  font-size: .85rem;
  opacity: .65;
}

.conta-vazio {
  padding: 2.5rem 1.5rem;
  text-align: center;
  border: 1.5px dashed rgba(0, 0, 0, .18);
  border-radius: var(--raio, 10px);
}

.conta-vazio p {
  margin: 0 0 1.25rem;
  opacity: .8;
}

.conta-esims {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  /* Uma coluna no telemóvel, duas a partir do tablet. Três eram cartões
     estreitos de mais para o nome de um destino longo caber numa linha. */
  grid-template-columns: 1fr;
}

@media (min-width: 46rem) {
  .conta-esims {
    grid-template-columns: repeat(2, 1fr);
  }
}

.conta-esim {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.25rem 1.4rem;
  border: 1.5px solid rgba(0, 0, 0, .12);
  border-radius: var(--raio, 10px);
  background: #fff;
  color: inherit;
  text-decoration: none;
  height: 100%;
  transition: border-color .15s ease, transform .15s ease;
}

.conta-esim:hover,
.conta-esim:focus-visible {
  border-color: rgba(0, 0, 0, .38);
  transform: translateY(-2px);
}

.conta-esim__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}

.conta-esim__destino {
  font-size: 1.15rem;
  font-weight: 700;
}

.conta-esim__estado {
  font-size: .78rem;
  font-weight: 600;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .07);
  white-space: nowrap;
}

/* PRONTA A USAR É A ÚNICA QUE GANHA COR.
   É a resposta à pergunta que trouxe a pessoa aqui — já posso usar? — e as
   outras quatro são degraus a caminho dela. Dar cor a todas era não dar cor
   a nenhuma. */
.conta-esim__estado--pronta {
  background: var(--amarelo, #FFD400);
}

.conta-esim__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}

.conta-esim__dados {
  font-size: 1rem;
  font-weight: 600;
}

.conta-esim__dias {
  font-size: .88rem;
  opacity: .7;
}

.conta-esim__pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: auto;
  padding-top: .35rem;
}

.conta-esim__referencia {
  font-size: .78rem;
  opacity: .55;
}

/* --------------------------------------------------------------------------
   A BARRA DOS DADOS

   Enche-se da esquerda e mostra O QUE RESTA, não o que foi gasto. Uma barra
   que cresce à medida que se gasta dá a leitura errada de relance: parece
   progresso e é o contrário.
   -------------------------------------------------------------------------- */

.conta-barra {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .1);
  overflow: hidden;
}

.conta-barra__cheia {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--amarelo, #FFD400);
}

.conta-barra--grande {
  height: 10px;
  margin: 1.25rem 0 .75rem;
}

/* --------------------------------------------------------------------------
   UMA eSIM
   -------------------------------------------------------------------------- */

.conta-medidor {
  padding: 2rem 1.5rem;
  border-radius: var(--raio, 10px);
  background: rgba(0, 0, 0, .04);
  text-align: center;
}

.conta-medidor__numero {
  margin: 0;
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  font-weight: 700;
  line-height: 1.05;
}

.conta-medidor__rotulo {
  margin: .4rem 0 0;
  font-size: .95rem;
  opacity: .75;
}

.conta-medidor__nota {
  margin: .35rem 0 0;
  font-size: .88rem;
  opacity: .65;
}

.conta-detalhe {
  display: grid;
  gap: 0;
  margin: 2rem 0 0;
}

.conta-detalhe > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, .09);
}

.conta-detalhe dt {
  font-size: .9rem;
  opacity: .7;
}

.conta-detalhe dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

/* --------------------------------------------------------------------------
   AS ENTREGAS — PASSAR UM eSIM A OUTRA PESSOA

   ==========================================================================
   O DESENHO DESTE BLOCO TEM UMA REGRA SÓ, E É DE PRODUTO E NÃO DE ESTILO:
   O QUE SE ESTÁ A DAR TEM DE SE LER ANTES DO BOTÃO QUE O DÁ.

   Por isso o resumo (`.entrega-resumo`) fica SEMPRE por cima do formulário, o
   aviso do código de instalação tem borda e fundo próprios para não se ler
   como texto de rodapé, e a caixa de escolha da entrega em lote leva o resumo
   dentro da própria linha. Numa lista de dez, uma tabela de números longe da
   caixa que se marca é uma lista onde se marca a linha errada.

   Não há aqui cor nenhuma declarada à mão: as variáveis (--tinta, --papel,
   --amarelo, --raio) vêm de `estilo.css`. O vermelho do erro é o mesmo do
   `.conta-forma__erro` que já cá estava.
   ========================================================================== */

.entrega-caixa {
  margin-top: 2.5rem;
  padding: 1.4rem 1.5rem;
  border: 1.5px solid rgba(0, 0, 0, .14);
  border-radius: var(--raio, 10px);
}

.entrega-caixa__titulo {
  margin: 0 0 .6rem;
  font-size: 1.15rem;
}

.entrega-caixa__subtitulo {
  margin: 1.8rem 0 0;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .6;
}

.entrega-caixa__pe {
  margin: 1.6rem 0 0;
  font-size: .92rem;
}

/* O RESUMO: destino, número do cartão, dados que restam, tempo que falta.
   Herda a mesma grelha do detalhe de uma eSIM de propósito — é a mesma
   informação, e a pessoa acabou de a ler ali em cima. */
.entrega-resumo {
  display: grid;
  gap: 0;
  margin: .8rem 0 0;
}

.entrega-resumo > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, .09);
}

.entrega-resumo dt {
  font-size: .88rem;
  opacity: .7;
}

.entrega-resumo dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  /* O ICCID são dezanove dígitos e não cabe ao lado do rótulo num telemóvel.
     Quebra-se em vez de esticar a linha para fora do ecrã. */
  overflow-wrap: anywhere;
}

/* A NOTA. A variante `--aviso` é a do código de instalação que já saiu: leva
   uma barra amarela à esquerda para não se ler como texto de rodapé, que é
   exactamente o que aconteceria a uma frase longa dentro de um formulário. */
.entrega-nota {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  border-radius: var(--raio, 10px);
  background: rgba(0, 0, 0, .045);
}

.entrega-nota--aviso {
  border-left: 4px solid var(--amarelo, #FFD400);
}

.entrega-nota__titulo {
  margin: 0 0 .4rem;
  font-size: .98rem;
}

.entrega-nota p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
}

/* O QUE ACABOU DE ACONTECER. Uma entrega feita e uma entrega recusada não se
   distinguem pela cor — distinguem-se pelo texto —, mas a cor diz de relance
   qual das duas é, e uma lista de dez entregas precisa disso. */
.entrega-aviso {
  margin: 0 0 1.75rem;
  padding: 1rem 1.2rem;
  border-radius: var(--raio, 10px);
  background: rgba(0, 0, 0, .045);
  font-size: .95rem;
  line-height: 1.55;
}

.entrega-aviso--feito {
  border-left: 4px solid var(--amarelo, #FFD400);
}

.entrega-aviso--erro {
  border-left: 4px solid #b3261e;
}

.entrega-aviso__titulo {
  margin: 0 0 .5rem;
  font-size: 1rem;
}

.entrega-aviso ul {
  margin: .4rem 0 .8rem;
  padding-left: 1.1rem;
}

.entrega-aviso li {
  margin: .25rem 0;
}

.entrega-aviso p:last-child {
  margin-bottom: 0;
}

.entrega-vazio {
  margin: 0 0 2rem;
  opacity: .72;
}

.entrega-lead {
  margin: 0 0 1rem;
  max-width: 46rem;
}

.entrega-lista {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

.entrega-cartao {
  padding: 1.25rem 1.4rem;
  border: 1.5px solid rgba(0, 0, 0, .14);
  border-radius: var(--raio, 10px);
}

.entrega-cartao__destino {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.entrega-cartao__quem {
  margin: .2rem 0 0;
  font-size: .92rem;
  opacity: .75;
}

.entrega-cartao__referencia {
  margin: .35rem 0 0;
  font-size: .85rem;
  opacity: .7;
}

.entrega-cartao__prazo {
  margin: .35rem 0 .9rem;
  font-size: .88rem;
  opacity: .7;
}

/* A CAIXA DE ESCOLHA DA ENTREGA EM LOTE.
   Alvo grande: no telemóvel, um quadrado de 13 px ao lado de duas linhas de
   texto é um alvo que se falha, e falhar aqui é marcar o eSIM errado. */
.entrega-cartao__escolha {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.entrega-cartao__escolha input {
  width: 1.4rem;
  height: 1.4rem;
  margin: .15rem 0 0;
  flex: none;
  accent-color: var(--tinta, #111);
}

.entrega-cartao__escolha label {
  display: grid;
  gap: .2rem;
  cursor: pointer;
}

.entrega-forma {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: 1.5rem;
}

.entrega-forma__botoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: .6rem;
}

.entrega-lote .botao {
  margin-top: .6rem;
}