/* puxa-telefone.css — o controle de país + número, e SÓ ele.

   POR QUE ARQUIVO PRÓPRIO, e não mais um bloco no puxa-base.css: `login.html` NÃO linka a
   base — tem cópia própria dos tokens, herança de quando cada tela carregava os seus. Quando
   o controle virou componente eu atualizei só a base, e a entrada ficou com a versão velha:
   o <select> não sumia, o botão aparecia sem estilo ao lado dele, e o campo do número virava
   uma tira de uns 40px. As outras duas telas ficaram certas, o que é o pior tipo de defeito
   — o que só acontece num lugar.

   É a mesma família do defeito das classes órfãs (`.aviso`), e a lição repetida: CSS de
   componente não pode morar numa folha que só ALGUMAS telas carregam.

   Agora quem linka é o PRÓPRIO parcial (`_telefone.html`). Onde o controle aparece, o estilo
   aparece junto — não há como uma tela nova esquecer, porque não há nada a lembrar. */

.tel-linha{display:flex;flex-direction:column;gap:8px}

/* SEM JAVASCRIPT: o <select> nativo, de linha inteira. Empilhado porque lado a lado ele
   ficava com 40% da largura e cortava "🇧🇷 Brasil +55" — a informação que ele existe para
   dar. Celular é o default aqui, não a exceção. */
.tel-linha select[name=pais]{width:100%;min-width:0;height:var(--alvo);background:#fff;
  border:1.5px solid var(--linha-forte);border-radius:12px;padding:0 28px 0 12px;
  font:400 16px var(--sans);color:var(--jet);appearance:none;
  /* a seta desenhada aqui: a nativa do Android come a última letra do nome do país. */
  background-image:linear-gradient(45deg,transparent 50%,var(--marrom) 50%),
    linear-gradient(135deg,var(--marrom) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.tel-linha select[name=pais]:focus-visible{border-color:var(--marrom);outline:var(--foco)}
.tel-linha input[type=tel]{flex:1 1 auto;min-width:0}

/* COM JAVASCRIPT: o campo vira botão curto — só bandeira e código. O nome inteiro não cabe
   ao lado do número, e quando não cabe o navegador corta o FIM, que é o código: justamente
   o que a pessoa precisa conferir antes de digitar.

   O <select> some por style INLINE no próprio script, não por classe daqui: se esta folha
   falhar ao carregar, o pior caso é ficar feio — nunca dois seletores na mesma tela. */
.tel-linha.com-js{flex-direction:row;align-items:start}
.pais-botao{flex:0 0 auto;height:var(--alvo);display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1.5px solid var(--linha-forte);border-radius:12px;padding:0 12px;
  font:600 16px var(--sans);color:var(--jet);cursor:pointer;white-space:nowrap}
.pais-botao::after{content:"";width:0;height:0;border:4px solid transparent;
  border-top-color:var(--marrom);margin-top:4px}
.pais-botao:focus-visible{border-color:var(--marrom);outline:var(--foco)}

/* A LISTA é folha na base da tela no celular: o polegar alcança o topo dela, e o campo de
   busca fica logo acima do teclado que vai abrir. */
dialog.paises{border:0;padding:0;background:var(--branco-osso);color:var(--jet);
  width:100%;max-width:100%;max-height:88dvh;margin:auto auto 0;
  border-radius:18px 18px 0 0;overflow:hidden}
/* Coluna SÓ quando aberta: `display` no <dialog> fechado o faria aparecer — o navegador
   esconde diálogo fechado justamente com display:none, e uma regra nossa venceria. */
dialog.paises[open]{display:flex;flex-direction:column}
dialog.paises::backdrop{background:rgba(43,32,26,.5)}
/* o form ocupa a folha inteira, seja qual for a altura que o script deu a ela quando o
   teclado subiu — nada de repetir 88dvh aqui e divergir do que a folha realmente tem. */
dialog.paises form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;width:100%}
dialog.paises .cabeca{display:flex;gap:8px;align-items:center;padding:12px;
  border-bottom:1px solid var(--linha);background:var(--branco-osso)}
dialog.paises .campo{flex:1 1 auto;min-width:0;height:var(--alvo);border-radius:12px;
  border:1.5px solid var(--linha-forte);padding:0 12px;font:400 16px var(--sans);background:#fff}
dialog.paises .campo:focus-visible{border-color:var(--marrom);outline:var(--foco)}
/* o "×" que zera a busca. Sem ele, ver a lista inteira de novo exige apagar letra por letra. */
dialog.paises .limpar{flex:0 0 auto;width:var(--alvo);height:var(--alvo);border:0;
  background:none;color:var(--marrom);font-size:26px;line-height:1;cursor:pointer;border-radius:12px}
dialog.paises .fechar{flex:0 0 auto;min-height:var(--alvo);border:0;background:none;padding:0 4px;
  color:var(--marrom);font:600 15px var(--sans);cursor:pointer}
dialog.paises ul{list-style:none;margin:0;padding:0 0 12px;overflow-y:auto;flex:1 1 auto;
  -webkit-overflow-scrolling:touch}
dialog.paises li[hidden]{display:none}
dialog.paises li button{width:100%;min-height:var(--alvo);border:0;background:none;
  text-align:left;padding:0 16px;font:400 16px var(--sans);color:var(--jet);cursor:pointer;
  border-bottom:1px solid var(--linha)}
dialog.paises li button[aria-current=true]{background:var(--areia);font-weight:600}
dialog.paises li button[aria-current=true]::after{content:" \2713";color:var(--marrom)}
dialog.paises li button:hover,dialog.paises li button:focus-visible{background:var(--areia)}
dialog.paises .nada{margin:0;padding:24px 16px;color:var(--muted);text-align:center}

/* 760px — o MESMO ponto de quebra do puxa-base.css. O número está escrito de novo porque CSS
   não aceita variável dentro de @media; a convenção é que só existe um valor. */
@media (min-width:760px){
  .tel-linha{flex-direction:row}
  .tel-linha select[name=pais]{flex:0 1 46%}
  dialog.paises{width:min(460px,92vw);margin:auto;border-radius:18px;max-height:80dvh}
}