/* Componentes do painel que já nascem em arquivo. Carregado depois do <style>
   do base.html, que ainda guarda o resto da base (tokens, casca, campos). */

/* Números do topo no celular: a fonte encolhe um pouco antes de cortar o
   valor com reticências (R$ 14.267,40 não cabia em 375px). */
@media (max-width: 480px) {
  .stat { padding: 12px 14px 14px; }
  .stat .v { font-size: clamp(1rem, 4.6vw, 1.3rem); }
}

/* "Limpar filtros" fecha a barra de filtros pela direita; quando não cabe na
   linha, desce e continua à direita, em vez de ficar solto no começo. */
.filtros > .btn-ghost, .filtro-linha > .btn-ghost { margin-left: auto; }

/* Largura calculada no servidor chega como variável (style="--pct: 40%"),
   nunca como regra solta no HTML. Quem ainda manda style="width" continua
   valendo: o inline vence. */
.progress > span, .hbar .preenche, .etapa-barra span, .barrinha > span { width: var(--pct, 0%); }

/* Vazio com o botão do próximo passo embaixo do texto. */
.empty-acao { margin-top: 14px; }

/* Cor de botão do Telegram (macro cores_botao): a escolha é o próprio botão.
   Plano e botão do disparo. */
.cores { display: flex; flex-wrap: wrap; gap: 8px; }
.cores label { position: relative; margin: 0; }
.cores input { position: absolute; opacity: 0; pointer-events: none; }
.cores .tg-btn { min-width: 96px; min-height: 34px; cursor: pointer; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .12s; }
.cores .tg-btn.sem { background: var(--surface); color: var(--ink-body); box-shadow: inset 0 0 0 1px var(--border-strong); }
.cores input:checked + .tg-btn { outline-color: var(--ink); }
.cores input:focus-visible + .tg-btn { outline-color: var(--brand); }

/* Prévia do Telegram: botão que abre um link leva a setinha no canto, como
   no app (novo disparo e detalhe do disparo). */
.tg-btn.link { position: relative; padding-inline: 22px; }
.tg-btn.link::after { content: "↗"; position: absolute; top: 3px; right: 7px; font-size: .68rem; line-height: 1; opacity: .9; }

/* ===================== IDIOMAS DO BOT =====================
   Bandeira desenhada em CSS: o Windows não tem emoji de bandeira, e o 🇧🇷
   sairia como as letras "BR". As cores são as das próprias bandeiras. */
:root {
  --bandeira-branco: #FFFFFF;
  --bandeira-br-verde: #009B3A;
  --bandeira-br-amarelo: #FEDF00;
  --bandeira-br-azul: #002776;
  --bandeira-us-vermelho: #B22234;
  --bandeira-us-azul: #3C3B6E;
  --bandeira-es-vermelho: #C60B1E;
  --bandeira-es-amarelo: #FFC400;
  --bandeira-it-verde: #009246;
  --bandeira-it-vermelho: #CE2B37;
}
.bandeira { position: relative; display: inline-block; flex: none; width: 18px; height: 12px; overflow: hidden; border-radius: 2px; vertical-align: -1px; box-shadow: 0 0 0 1px var(--border); }
.bandeira.pt { background: var(--bandeira-br-verde); }
.bandeira.pt::before, .bandeira.pt::after { content: ""; position: absolute; }
.bandeira.pt::before { inset: 1.5px 2px; background: var(--bandeira-br-amarelo); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.bandeira.pt::after { top: 3.5px; left: 6.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--bandeira-br-azul); }
.bandeira.en {
  background:
    linear-gradient(var(--bandeira-us-azul), var(--bandeira-us-azul)) 0 0 / 44% 58% no-repeat,
    repeating-linear-gradient(var(--bandeira-us-vermelho) 0 14.29%, var(--bandeira-branco) 0 28.57%);
}
.bandeira.es { background: linear-gradient(var(--bandeira-es-vermelho) 0 25%, var(--bandeira-es-amarelo) 0 75%, var(--bandeira-es-vermelho) 0); }
.bandeira.it { background: linear-gradient(90deg, var(--bandeira-it-verde) 0 33.4%, var(--bandeira-branco) 0 66.6%, var(--bandeira-it-vermelho) 0); }

/* ===================== LISTA DO SELECT =====================
   A lista aberta de todo <select> (filtros, duração do plano, rateio) com a
   cara do painel. Navegador que não entende `appearance: base-select` segue
   com a lista nativa: o campo fechado é o mesmo nos dois casos. */
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }

  /* a seta do campo fechado é a do base.html */
  select::picker-icon { display: none; }
  /* o escolhido numa linha só, como no nativo, cortado antes da seta */
  select { white-space: nowrap; text-overflow: ellipsis; overflow: clip; overflow-clip-margin: content-box; }

  ::picker(select) {
    margin-block: 6px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow);
    max-block-size: min(320px, 60vh);
    overflow-y: auto;
    opacity: 0;
    translate: 0 -4px;
    transition: opacity .12s, translate .12s, overlay .12s allow-discrete, display .12s allow-discrete;
  }
  ::picker(select):popover-open { opacity: 1; translate: 0 0; }
  @starting-style {
    ::picker(select):popover-open { opacity: 0; translate: 0 -4px; }
  }

  option {
    gap: 12px;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--ink-body);
    cursor: pointer;
  }
  option:hover, option:focus-visible { outline: none; background: var(--surface-2); color: var(--ink); }
  option:checked { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
  option:disabled { color: var(--faint); cursor: default; }
  /* o ✓ da opção escolhida vai para a direita, longe do texto */
  option::checkmark { order: 1; margin-inline-start: auto; }
}