/* Ajustes proprios do faturamento, aplicados DEPOIS do portal.css canonico.
   Nada aqui redefine cor ou tipografia: o portal.css continua sendo a fonte
   da identidade. Isto resolve so o que e especifico destas telas. */

/* O campo de arquivo tem largura intrinseca (nome do arquivo + botao do
   navegador) e estourava a coluna do grid no desktop e a tela no celular.
   min-width:0 e o que permite o item do grid encolher abaixo do conteudo. */
.form-grid { display: grid; gap: var(--space-4);
             grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.form-grid > * { min-width: 0; }

/* Cada campo e rotulo em cima, controle embaixo, com o controle ancorado no
   fim: assim os quatro controles ficam na MESMA linha mesmo que um rotulo
   quebre em duas linhas. Sem isso a fileira fica serrilhada. */
.campo { display: flex; flex-direction: column; justify-content: end; min-width: 0; }
.campo > label { margin-bottom: .35rem; }
.campo input, .campo select { width: 100%; max-width: 100%; box-sizing: border-box; }

/* Arquivo: o input nativo fica escondido e quem aparece e um rotulo que se
   comporta como campo, com o nome do arquivo truncado por reticencias em vez
   de empurrar a largura. */
.campo-arquivo input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Mesma altura e mesma moldura dos selects ao lado: o portal.css usa
   padding 11px 14px, borda 1.5px e fonte .96rem nos controles do .form.
   Fora desses valores o campo de arquivo fica mais alto e desalinha a fileira. */
.arquivo-caixa {
  display: flex; align-items: center; gap: .6rem; width: 100%; min-width: 0;
  box-sizing: border-box; padding: 11px 14px; cursor: pointer;
  font-size: .96rem; line-height: 1.2;
  border: 1.5px solid var(--borda-forte); border-radius: var(--radius);
  background: var(--bg-elev);
}
.arquivo-caixa:hover { border-color: var(--azul-claro); }
.arquivo-caixa:focus-within { outline: 2px solid var(--foco, #1351b4); outline-offset: 2px; }
.arquivo-botao {
  flex: 0 0 auto; font-size: .8rem; font-weight: 600; padding: .15rem .55rem;
  border-radius: var(--raio, 8px); background: var(--azul-semus, #003a70); color: #fff;
}
.arquivo-nome {
  flex: 1 1 auto; min-width: 0; font-size: .9rem; color: var(--texto-suave, #5b6b7c);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dica-rodape { font-size: .8rem; color: var(--texto-suave); margin: 0; max-width: 78ch; }

@media (max-width: 480px) {
  .form-grid { grid-template-columns: 1fr; }
  .arquivo-nome { font-size: .85rem; }
}

/* O `.form` do portal.css ja e um cartao completo: fundo, borda, sombra e
   max-width de 540px. Posto dentro de um `.card-shell`, viravam dois cartoes
   um dentro do outro e o formulario ficava preso em 540px no meio de uma
   pagina de 1180px. Dentro do card-shell o form volta a ser so layout, e o
   cartao de fora e o unico cartao. Fora dele o portal.css segue mandando. */
.card-shell > .form {
  max-width: none; width: 100%;
  background: none; border: 0; box-shadow: none; padding: 0;
}

/* Mes e ano lado a lado, ocupando a largura do campo. */
.par-mes-ano { display: flex; gap: .5rem; min-width: 0; }
.par-mes-ano > select { flex: 1 1 0; min-width: 0; }
.par-mes-ano > select:last-child { flex: 0 0 6.5rem; }

@media (max-width: 480px) {
  .par-mes-ano > select:last-child { flex: 0 0 5.5rem; }
}

/* Acoes dentro da tabela de convites pendentes: dois botoes pequenos lado a
   lado, sem esticar a linha. */
.acoes-convite { display: flex; gap: .4rem; flex-wrap: wrap; }
.acoes-convite form { margin: 0; }
.btn-mini { font-size: .8rem; padding: .35rem .7rem; white-space: nowrap; }
.btn-secundario {
  background: transparent; color: var(--azul-claro);
  border: 1.5px solid var(--azul-claro);
}
.btn-secundario:hover { background: rgba(21, 101, 192, 0.1); }