/* ============================================================================
   contaspagar.css — a tela de Contas a Pagar (lista | cadastro).

   Porte de D2PdvSmart\Web\wwwroot\cadastro\contaspagar.html (Tailwind inline +
   o <style> das linhas deslizantes) e de
   src/js/components/filtro-data-contaspagar.js (o painel de filtros, que la
   era um bottom sheet e aqui esta na propria tela).

   O FORMULARIO NAO ESTA AQUI: os campos usam o CSS `kcad` (../modals/
   cadastro.css), a mesma grade de seis colunas do modal de cadastro — mesma
   decisao da tela de Produto. Este arquivo cuida do cartao, dos filtros, da
   lista e do rodape.

   O GESTO DE SWIPE nao veio (ver o cabecalho de ScreenContasPagar.pas), entao
   nao ha aqui nada de .cp-swipe-*: as tres acoes que ele escondia estao
   visiveis na linha.

   Quem liga/desliga .hidden nos paineis e o runtime, por patch.
   ============================================================================ */

.cap-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.cap-card-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  background: var(--primary);
  color: var(--on-primary, #111);
  font-weight: 700;
}
.cap-card-titulo { flex: 1; font-size: .88rem; }

.cap-voltar {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: .4rem;
  background: rgba(255, 255, 255, .22);
  color: inherit;
  font-size: .74rem;
  font-weight: 600;
  cursor: pointer;
}
.cap-voltar:hover { background: rgba(0, 0, 0, .2); }

.cap-card-body { padding: 1.15rem; }

/* ---- cartoes do formulario --------------------------------------------- */
.cap-bloco {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  margin-bottom: .9rem;
  overflow: hidden;
}
.cap-bloco-titulo {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border-bottom: 1px solid var(--card-border);
  background: var(--surface-2, rgba(127, 127, 127, .08));
  color: var(--text);
  font-size: .74rem;
  font-weight: 800;
}
/* A lista de sugestoes do Cedente abre para fora do cartao — o overflow
   acima a decapitava. So enquanto ela esta aberta, para o recorte dos cantos
   arredondados do cabecalho continuar valendo o resto do tempo. */
.cap-bloco:has(.kcad-sugmenu:not(.hidden)),
.cap-card:has(.kcad-sugmenu:not(.hidden)) { overflow: visible; }

.cap-bloco-titulo i { color: var(--primary); }
.cap-bloco-body { padding: 1rem .9rem .9rem; }

/* ---- filtros da lista --------------------------------------------------- */
.cap-filtros {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  margin-bottom: .6rem;
}
.cap-busca {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.cap-busca i {
  position: absolute;
  top: 50%;
  left: .8rem;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: .82rem;
  pointer-events: none;
}
.cap-busca input {
  width: 100%;
  height: 100%;
  padding: .55rem .7rem .55rem 2.2rem;
  border: 1px solid var(--input-border, var(--card-border));
  /* canto direito reto: o "+" encosta aqui (ver .cap-novo) */
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--input-bg, var(--card-bg));
  color: var(--text);
  font: inherit;
  font-size: .84rem;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.cap-busca input:focus {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

.cap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .5rem .8rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.cap-btn:hover { border-color: var(--primary); }
.cap-btn--primario {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary, #111);
}
.cap-btn--primario:hover { background: var(--primary-hover); }

/* "Filtros" e "Ordenar": mesmo botao, so um pouco mais discretos. Eles e que
   trazem o respiro da linha — .cap-filtros nao tem `gap`, senao o "+" nao
   encostaria na busca. */
.cap-btn--filtro { color: var(--text-muted); margin-left: .4rem; }
.cap-btn--filtro:hover { color: var(--text); }

/* O "+" colado na busca — mesmo botao das telas de Produto e de Pedido. */
.cap-btn.cap-novo {
  flex: 0 0 auto;
  width: 2.75rem;
  padding: 0;
  font-size: .95rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-left: -1px;
}

@media (max-width: 640px) {
  /* A busca e o "+" continuam juntos na primeira linha (nao da para separar
     o par sem quebrar o botao colado); "Filtros" e "Ordenar" e que caem para
     a segunda. */
  .cap-filtros { flex-wrap: wrap; }
  /* busca + "+" ocupam a linha inteira; Filtros e Ordenar meio a meio embaixo */
  .cap-busca { flex: 1 1 calc(100% - 2.75rem); }
  .cap-btn.cap-novo { min-height: 2.6rem; }
  .cap-btn--filtro { flex: 1 1 0; margin: .5rem 0 0; }
  .cap-btn--filtro + .cap-btn--filtro { margin-left: .5rem; }
}

/* ---- os cinco "Registros" (eram radios num bottom sheet) ---------------- */
.cap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .7rem;
}
.cap-chip {
  padding: .3rem .8rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  cursor: pointer;
}
.cap-chip:hover { border-color: var(--primary); }
.cap-chip--on {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary, #111);
}

.cap-periodo { margin-bottom: .5rem; }

.cap-aviso {
  margin: 0 0 .7rem;
  font-size: .72rem;
  color: var(--text-muted);
}
.cap-aviso i { color: var(--primary); margin-right: .25rem; }

/* ---- os dois "checkbox" (botoes; o estado vive no runtime) -------------- */
.cap-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .6rem;
}
.cap-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  cursor: pointer;
}
.cap-toggle i { font-size: .7rem; }
.cap-toggle--on {
  border-color: var(--primary);
  color: var(--primary);
}
.cap-toggle--on i::before { content: "\f14a"; } /* fa-square-check */

.cap-selects {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: .75rem;
}
.cap-campo { flex: 1 1 12rem; min-width: 0; }

/* ---- linha de informacao ------------------------------------------------ */
.cap-info-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .5rem;
  font-size: .76rem;
}
.cap-info { color: var(--text-muted); }
.cap-status { flex: 1; color: var(--warning, #b45309); font-weight: 600; }
.cap-status.erro { color: var(--danger, #b91c1c); }

/* ---- a lista ------------------------------------------------------------ */
.cap-lista { display: flex; flex-direction: column; gap: .5rem; }

.cap-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .8rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.cap-avatar {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
}

.cap-item-main { flex: 1; min-width: 0; }
.cap-item-titulo {
  margin-bottom: .3rem;
  font-size: .84rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cap-item-sub { font-weight: 400; color: var(--text-muted); }

.cap-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.cap-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1rem .45rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--surface-2, rgba(127, 127, 127, .1));
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 600;
  white-space: nowrap;
}
.cap-tag--ok {
  border-color: rgba(21, 128, 61, .35);
  background: rgba(21, 128, 61, .12);
  color: var(--success, #15803d);
}
.cap-tag--erro {
  border-color: rgba(185, 28, 28, .35);
  background: rgba(185, 28, 28, .12);
  color: var(--danger, #b91c1c);
}
.cap-tag--aviso {
  border-color: rgba(180, 83, 9, .35);
  background: rgba(180, 83, 9, .12);
  color: var(--warning, #b45309);
}

.cap-item-meta { flex: 0 0 auto; text-align: right; }
.cap-item-valor {
  font-size: .88rem;
  font-weight: 700;
  color: var(--primary);
}
.cap-item-data {
  margin-top: .2rem;
  font-size: .68rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.cap-item-acoes { display: flex; gap: .25rem; }
.cap-item-acoes button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.cap-item-acoes button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ---- paginacao e rodape ------------------------------------------------- */
.cap-pager {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
}
.cap-pager button {
  padding: .3rem .7rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: .74rem;
  cursor: pointer;
}
.cap-pager button:hover { border-color: var(--primary); }
.cap-pager-info {
  flex: 1;
  text-align: right;
  font-size: .74rem;
  color: var(--text-muted);
}

.cap-totalizador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--card-border);
  font-size: .76rem;
  color: var(--text-muted);
}
.cap-totalizador strong { color: var(--text); font-size: .95rem; }

/* ---- rodape do cadastro -------------------------------------------------- */
.cap-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--card-border);
}

@media (max-width: 640px) {
  .cap-card-body { padding: .8rem; }
  /* No celular o flex espremia tudo numa linha so (nome cortado, tag por
     cima do valor). Vira grade de duas linhas: nome | valor+data em cima,
     tags | acoes embaixo. O .cap-item-main sai da caixa (display: contents)
     para o titulo e as tags irem cada um para a sua linha da grade. */
  .cap-item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    grid-template-areas:
      "av tit meta"
      "av tags acoes";
    align-items: center;
    column-gap: .6rem;
    row-gap: .45rem;
    padding: .6rem .7rem;
  }
  .cap-avatar { grid-area: av; align-self: start; width: 2rem; height: 2rem; font-size: .7rem; }
  .cap-item-main { display: contents; }
  .cap-item-titulo { grid-area: tit; margin-bottom: 0; }
  .cap-item-tags { grid-area: tags; }
  .cap-item-meta { grid-area: meta; text-align: right; }
  .cap-item-acoes { grid-area: acoes; justify-content: flex-end; }
  .cap-doc { display: none; }
  .cap-pager { flex-wrap: wrap; }
}

/* ============================================================================
   MODAIS "FILTROS" (mcfp) e "ORDENAR" (mcor)

   O desenho dos dois bottom sheets do filtro-data-contaspagar.js, portado para
   dentro dos modais do projeto. A estrutura (overlay/dialog/head/body/acoes)
   esta em css/modals/modais.css; aqui so o miolo.
   ============================================================================ */

.mcfp-secao { margin-bottom: 1rem; }
.mcfp-secao-titulo {
  display: block;
  margin-bottom: .5rem;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}

/* Registros: "Todas"/"Registros" em meia linha, os outros tres em um terco. */
.mcfp-registros {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .35rem;
}
.mcfp-radio {
  grid-column: span 3;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .55rem;
  border: 0;
  border-radius: .45rem;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.mcfp-radio:nth-child(n+3) { grid-column: span 2; }
.mcfp-radio:hover { background: var(--surface-2, rgba(127, 127, 127, .08)); }
.mcfp-radio--on { color: var(--primary); }

.mcfp-radio-out {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--card-border);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mcfp-radio--on .mcfp-radio-out { border-color: var(--primary); }
.mcfp-radio-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
  transform: scale(0);
  transition: transform .15s ease;
}
.mcfp-radio--on .mcfp-radio-dot { transform: scale(1); }

/* Caixa dos dois checkboxes + select de empresa. */
.mcfp-caixa {
  padding: .65rem;
  margin-bottom: .85rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}
.mcfp-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
.mcfp-check {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.mcfp-check-box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--card-border);
  border-radius: .25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-primary, #111);
  font-size: .6rem;
}
.mcfp-check-box i { opacity: 0; }
.mcfp-check--on .mcfp-check-box {
  background: var(--primary);
  border-color: var(--primary);
}
.mcfp-check--on .mcfp-check-box i { opacity: 1; }

.mcfp-empresa { margin-top: .7rem; }
.mcfp-campo { margin-bottom: .85rem; }

.mcfp-datas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-bottom: .6rem;
}

.mcfp-ranges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .35rem;
  margin-bottom: .9rem;
}
.mcfp-range {
  padding: .4rem .25rem;
  border: 0;
  border-radius: .375rem;
  background: none;
  color: var(--primary);
  font: inherit;
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.mcfp-range:hover { background: var(--primary-soft); }
.mcfp-range--on { background: var(--primary); color: var(--on-primary, #111); }

.mcfp-dica {
  padding: .6rem .7rem;
  margin-bottom: .35rem;
  border: 1px solid var(--primary);
  border-left-width: 4px;
  border-radius: .375rem;
  background: var(--primary-soft);
  font-size: .72rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.mcfp-dica strong { color: var(--primary); }

.mcfp-status {
  margin: .2rem 0 0;
  font-size: .76rem;
  font-weight: 600;
  color: var(--danger);
}

/* Rodape dos dois modais. */
.mcfp-limpar,
.mcfp-aplicar,
.mcor-aplicar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 7rem;
  padding: .5rem 1rem;
  border-radius: var(--radius);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.mcfp-limpar {
  margin-right: auto;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-muted);
}
.mcfp-limpar:hover { color: var(--text); border-color: var(--text-muted); }
.mcfp-aplicar,
.mcor-aplicar {
  border: 1px solid transparent;
  background: var(--primary);
  color: var(--on-primary, #111);
}
.mcfp-aplicar:hover,
.mcor-aplicar:hover { background: var(--primary-hover); }

/* Opcoes de ordenacao (mesmo visual de radio do filtro). */
.mcor-opcoes {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.mcor-opcao {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .65rem;
  border: 0;
  border-radius: .45rem;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.mcor-opcao:hover { background: var(--surface-2, rgba(127, 127, 127, .08)); }
.mcor-opcao.mcfp-radio--on { color: var(--primary); }