/* Telefone com código do país (js/telefone.js): botão do código + número + lista de países com busca.
   Usado pelo painel e pelo portal do aluno. Só tokens de cor; o portal troca --fone-r para o raio dele. */

/* Bandeiras: o Windows não desenha emoji de bandeira (mostra "BR"). A fonte abaixo só cobre esses caracteres. */
@font-face{
  font-family:"Twemoji Country Flags";
  src:url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1.10/dist/TwemojiCountryFlags.woff2") format("woff2");
  unicode-range:U+1F1E6-1F1FF,U+1F3F4,U+E0062-E0063,U+E0065,U+E0067,U+E006C,U+E006E,U+E0073-E0074,U+E0077,U+E007F;
  font-display:swap}
.fx-flag{font-family:"Twemoji Country Flags","Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-size:17px;line-height:1;flex-shrink:0}

.fx-tel{--fone-r:var(--radius);display:flex;align-items:stretch;min-width:0}
.fx-tel input.fx-tel-num{flex:1;min-width:0;border-top-left-radius:0!important;border-bottom-left-radius:0!important}
.fx-tel-ddi{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:92px;padding:0 10px;
  border:1px solid var(--border-strong);border-right:0;border-radius:var(--fone-r) 0 0 var(--fone-r);
  background:var(--surface-muted);color:var(--text);font-family:inherit;font-size:13.5px;font-weight:500;font-variant-numeric:tabular-nums;
  cursor:pointer;transition:background-color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)}
.fx-tel-ddi .ph-caret-down{font-size:12px;color:var(--text-muted)}
.fx-tel-ddi:active{background:var(--neutral-soft)}
.fx-tel-ddi:focus-visible{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring);position:relative;z-index:1}
.fx-tel-ddi[aria-expanded=true]{border-color:var(--primary)}
@media (hover:hover) and (pointer:fine){.fx-tel-ddi:hover{background:var(--neutral-soft)}}

/* lista de países */
.fone-fundo{position:fixed;inset:0;z-index:1190;background:transparent}
.fone-pop{position:fixed;z-index:1200;width:min(328px,calc(100vw - 16px));max-height:360px;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:14px;box-shadow:var(--shadow-pop);overflow:hidden;
  animation:fone-in .16s var(--ease-out)}
.fone-pop[hidden],.fone-fundo[hidden]{display:none}
.fone-busca{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--divider);flex-shrink:0}
.fone-busca i{font-size:17px;color:var(--text-muted);flex-shrink:0}
.fone-busca input{flex:1;min-width:0;height:34px;border:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;font-size:14px;color:var(--text);outline:none}
.fone-lista{overflow-y:auto;padding:6px;overscroll-behavior:contain}
.fone-it{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:6px 10px;border:0;border-radius:9px;background:transparent;color:var(--text);
  font-family:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.fone-it-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fone-it-c{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:12.5px}
.fone-it.sel .fone-it-n{font-weight:700}
.fone-it.sel .fone-it-c{color:var(--primary-ink);font-weight:500}
.fone-it.on{background:var(--primary-tint)}
@media (hover:hover) and (pointer:fine){.fone-it:hover{background:var(--primary-tint)}}
.fone-it:active{background:var(--primary-soft)}
.fone-vazio{padding:20px 12px;text-align:center;font-size:13px;color:var(--text-muted)}
@keyframes fone-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}

/* celular: folha de baixo */
@media (max-width:767px){
  .fone-fundo{background:var(--backdrop)}
  .fone-pop{left:0!important;right:0;bottom:0;top:auto!important;width:auto;max-height:72vh;border-radius:var(--r-sheet,20px) var(--r-sheet,20px) 0 0;border-bottom:0;animation:fone-sobe .22s var(--ease-out)}
  .fone-it{min-height:48px;font-size:15px}
  .fone-busca{padding:12px 16px}
  .fone-busca input{height:40px;font-size:16px}
  @keyframes fone-sobe{from{transform:translateY(100%)}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){.fone-pop{animation:none}}