/* ============================================================================
   Módulo Despesas — estilos específicos (o que o brascamp-ui.css não cobre).
   Só componentes locais: radios/checks do formulário, separador, painel.
   ============================================================================ */

/* util do shell autônomo */
.oculto{ display:none !important; }

/* FOLHA SOBREPOSTA DE LANÇAMENTO (08/09/2026 — era painel lateral).
   Cabeçalho e rodapé ficam parados, o corpo rola. `.modal` já traz
   `display:flex;flex-direction:column`; aqui só se tira o padding e o gap
   dele, porque as três faixas trazem o próprio acolchoamento.
   `max-height` no CORPO, e não na folha: assim o botão "Salvar despesa" fica
   sempre à vista, sem precisar rolar o formulário inteiro até o fim. */
#despPainel{ background:var(--bg); }
/* A ALTURA E' DA FOLHA, NAO DO CORPO (10/09/2026). A versao anterior media o
   corpo em `calc(100vh - 210px)`: no iPhone `100vh` inclui a barra de endereco,
   a conta passava da tela visivel e o "Salvar despesa" ficava fora dela —
   pior ainda depois de anexar o comprovante, que acrescenta a previa. Agora a
   folha cabe na tela (`dvh` = altura realmente visivel), o corpo leva o resto
   e o rodape' nunca sai da vista. */
.fab-confirma .desp-folha{ max-width:min(940px, 96vw); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px);
  padding:0; gap:0; overflow:hidden }
#despPainel .painel-cab,
#despPainel .painel-rodape{ flex-shrink:0; }
#despPainel .painel-corpo{ flex:1; min-height:0; }
/* OS QUADROS NAO ENCOLHEM. O corpo e' flex-column com altura limitada; abaixo
   de 1023px o `.card` ganha `overflow-x:auto`, e filho de flex com overflow
   diferente de `visible` PODE encolher abaixo do proprio conteudo. Resultado
   no celular: os quadros "Compra parcelada" e "Despesa pre-aprovada" apareciam
   com metade da altura, texto cortado ao meio. Medido em 10/09/2026. */
#despPainel .painel-corpo > *{ flex-shrink:0; }
/* Na tela pequena a folha e' a tela inteira: com 20 campos, um quadro estreito
   no meio da tela e' pior que a lateral que ele substituiu. */
@media (max-width:767px){
  .fab-confirma:has(> .desp-folha){ padding:0; }
  .fab-confirma .desp-folha{ max-width:100%; width:100%; height:100vh; height:100dvh; max-height:none; border-radius:0; }
}

/* separador leve entre grupos do formulário */
.linha-sep{ height:1px; background:var(--borda); margin:2px 0; }

/* opções de rádio/checkbox padronizadas */
.opt-radio,.opt-check{
  display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink);
  font-weight:600; cursor:pointer; padding:8px 12px; border:1px solid var(--borda-forte);
  border-radius:var(--r-sm); background:var(--superficie); user-select:none;
}
.opt-radio input,.opt-check input{ width:16px; height:16px; accent-color:var(--azul-logo); cursor:pointer; }
.opt-check{ border:none; padding:0; background:transparent; }

/* arquivo (comprovante) */
.fld input[type=file]{ padding:8px; font-size:12.5px; }

/* no celular, o painel ocupa a tela toda e os botões ficam grandes */
@media (max-width:767px){
  #despPainel .btn{ height:44px; }
  .opt-radio{ width:100%; }

  /* -------- tabelas viram CARTÕES empilhados (sem rolar pro lado) -------- */
  .tabela-scroll{ overflow-x:visible; }
  table.tab-cards{ border:0; background:transparent; }
  table.tab-cards thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } /* esconde cabeçalho */
  table.tab-cards tbody, table.tab-cards td{ display:block; width:auto; }
  table.tab-cards tr{
    display:flex; flex-direction:column; width:auto;
    background:var(--superficie); border:1px solid var(--borda); border-radius:12px;
    padding:11px 13px; margin:0 0 10px; box-shadow:0 1px 4px rgba(20,30,50,.06); cursor:pointer;
  }
  table.tab-cards td{
    border:0; padding:6px 0; text-align:right; font-size:13.5px;
    overflow:hidden; overflow-wrap:anywhere; min-height:22px;
  }
  table.tab-cards td::before{
    content:attr(data-label); float:left; max-width:44%; margin-right:12px;
    color:var(--ink-2); font-weight:700; font-size:11px; text-transform:uppercase;
    letter-spacing:.02em; text-align:left;
  }
  table.tab-cards td[data-label=""]::before{ content:none; }
  /* célula-título do cartão (estabelecimento) */
  table.tab-cards td.card-titulo{
    order:-1; text-align:left; font-size:15px; font-weight:700;
    padding:0 0 7px; margin-bottom:5px; border-bottom:1px solid var(--linha);
  }
  table.tab-cards td.card-titulo::before{ content:none; }
  /* selects/ações dentro do cartão ficam confortáveis */
  table.tab-cards td select{ max-width:100%; }
  table.tab-cards td.acoes-cartao{ text-align:right; padding-top:8px; }
  table.tab-cards td.acoes-cartao .btn{ display:inline-flex; }
  /* linha "vazio" ocupa o cartão inteiro */
  table.tab-cards td .vazio{ text-align:center; }
}