/* Camada de sistema copiada de propostas/v4-compacta/site/app.html (kit v4-kit-2026.10.21, 86470be) */
.app-cab .conta { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--r-m); background: var(--fundo-2); border: 1px solid var(--linha); font-size: 14px; color: var(--tinta); }
.app-cab .conta b { font-weight: 600; }
.app-cab .ico-botao { width: 40px; height: 40px; border: 0; background: none; border-radius: var(--r-m); color: var(--texto); display: grid; place-items: center; position: relative; }
.app-cab .ico-botao:hover { background: var(--fundo-2); }
.app-cab .ico-botao .ponto { position: absolute; right: 10px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--contador); box-shadow: 0 0 0 2px #fff; }
.app-cab .sep { width: 1px; height: 20px; background: var(--linha); }
.desc, .desc-caixa .desc { color: var(--texto-2); font-size: 15px; max-width: 80ch; }
.desc-caixa { display: grid; justify-items: start; }
.desc-mais { display: none; align-items: center; min-height: 44px; margin-block: -10px -12px; padding: 0; border: 0; background: none; color: var(--link); font-size: 15px; font-weight: 600; }
.pecas { --vao: 16px; display: grid; gap: var(--vao); }
.peca { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; padding: 20px; border: 1px solid var(--linha); border-radius: var(--r-l); background: #fff; }
.peca.saindo { overflow: hidden; opacity: 0; padding-block: 0; border-color: transparent; margin-bottom: calc(-1 * var(--vao)); transition: height .2s var(--curva), opacity .16s linear, padding .2s var(--curva), margin .2s var(--curva); }
.peca.entrando { animation: peca-entra .24s var(--curva); }
@keyframes peca-entra { from { opacity: 0; transform: translateY(-6px); } }
.peca-texto { display: grid; gap: 10px; align-content: start; min-width: 0; }
.peca-cabeca { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.peca-tipo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.peca h3 { font-size: 20px; text-wrap: pretty; }
.peca-fonte { font-size: 13px; line-height: 1.4; color: var(--texto-2); }
.peca-legenda { padding: 12px 14px; border-radius: 10px; background: var(--fundo-2); border: 1px solid var(--linha); font-size: 14px; line-height: 1.5; color: var(--texto); display: grid; gap: 8px; }
.peca-meta { font-size: 13px; color: var(--texto-2); }
.peca-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.peca-mais { position: relative; }
.btn-icone { width: 44px; padding: 0; }
.peca-mais-lista { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 5; min-width: 196px; display: grid; padding: 6px; background: #fff; border: 1px solid var(--borda); border-radius: var(--r-m); box-shadow: var(--sombra-2); }
.peca-mais-lista button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-s); background: none; color: var(--tinta); font-size: 15px; text-align: left; white-space: nowrap; }
.peca-mais-lista button:hover { background: var(--fundo-2); }
.peca-mais-lista .perigo { color: var(--erro); }
.peca-ajuste { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-m); background: var(--fundo-2); border: 1px solid var(--linha); }
.peca-ajuste label { font-size: 14px; font-weight: 600; color: var(--tinta); }
.peca-ajuste textarea { width: 100%; min-height: 88px; padding: 10px 12px; border: 1px solid var(--borda-campo); border-radius: var(--r-m); background: #fff; color: var(--tinta); font: inherit; font-size: 16px; resize: vertical; }
.peca-ajuste textarea:focus { outline: 2px solid var(--foco); outline-offset: 0; border-color: var(--foco); }
.peca-ajuste textarea[aria-invalid="true"] { border-color: var(--erro); }
.peca-ajuste .erro-campo { font-size: 14px; font-weight: 600; color: var(--erro); }
.toggle { flex: none; width: 42px; height: 24px; border-radius: 12px; background: var(--borda); border: 0; position: relative; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .18s var(--curva); }
.toggle[aria-pressed="true"] { background: var(--marca); } .toggle[aria-pressed="true"]::after { transform: translateX(18px); }
/* interruptor: a linha inteira é o rótulo (toque em qualquer ponto liga e desliga); a caixa nativa fica por baixo do desenho */
.lin-toggle { position: relative; min-height: 56px; cursor: pointer; }
.lin-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.lin-toggle input:checked + .toggle { background: var(--marca); }
.lin-toggle input:checked + .toggle::after { transform: translateX(18px); }
.lin-toggle input:focus-visible + .toggle { outline: 2px solid var(--foco); outline-offset: 2px; }
/* avisos de seção que pedem ação: botão de texto de 44 px logo abaixo da frase */
.msg-corpo { display: grid; justify-items: start; min-width: 0; }
.msg-acao { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -10px; padding: 0; border: 0; background: none; color: var(--tinta); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ordenar-m { display: none; }
/* Tudo para aprovar: filtro por tipo, resumo que fecha a conta e selo removível do filtro */
.filtros-tabela { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.filtro { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texto-2); }
.filtro > span { white-space: nowrap; }
.filtro .campo-linha { width: auto; }
.tabela-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font-size: 15px; color: var(--tinta); }
.filtro-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--marca); border-radius: var(--r-pilula); background: var(--marca-suave); color: var(--marca-forte); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
/* números da Estratégia que pedem ação: o cartão inteiro leva à lista */
a.kpi { color: inherit; text-decoration: none; }
a.kpi:hover { border-color: var(--borda-forte); background: #fff; text-decoration: none; }
.kpi-ir { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--link); }
.filtro.ordenar-m { display: none; }
/* ---- toque: alvos de 44 px */
@media (pointer: coarse), (max-width: 719px) {
  .app-cab .ico-botao { width: 44px; height: 44px; }
  .app-cab .conta { height: 44px; }
  .app .btn-p { --btn-alt: 44px; }
  .toggle::before { content: ""; position: absolute; inset: -10px -2px; }
  .telas button { min-height: 44px; }
}
@media (max-width: 719px) {
  /* casca: 12 px de margem e 8 px de vão também no celular */
  .app { padding: 12px; gap: 8px; }
  .app-cab { gap: 4px; padding: 0 8px; min-height: 52px; }
  .app-cab h2 { font-size: 20px; }
  .app-cab .conta, .app-cab .sep { display: none; }
  .app-conteudo { padding: 12px 12px 24px; gap: 12px; }
  .desc-caixa:not(.aberta) .desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .desc-mais { display: inline-flex; }
  /* tabela vira lista de cartões: título, situação e "tipo · rede · data", com o Abrir à direita; ordenar pelo menu acima */
  .filtro.ordenar-m { display: flex; }
  .filtros-tabela { gap: 8px; }
  .app-painel, .app-conteudo, .tabela-caixa, .filtros-tabela, .filtro { min-width: 0; }
  .filtro .campo-linha { min-width: 0; max-width: none; }
  .filtro { flex: 1 1 100%; }
  .filtro > span { min-width: 84px; }
  .filtro .campo-linha { flex: 1; }
  .tabela-caixa { border: 0; border-radius: 0; overflow: visible; }
  .tabela, .tabela tbody { display: block; }
  .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela tr { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; padding: 12px 84px 12px 12px; margin-bottom: 8px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; }
  .tabela td { display: block; padding: 0; border: 0; text-align: left !important; }
  .tabela tbody tr:hover td { background: none; }
  .tabela td:nth-child(1) { flex: 0 0 100%; order: 0; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .tabela td:nth-child(3) { flex: 0 0 100%; order: 1; }
  .tabela td:nth-child(2), .tabela td:nth-child(4), .tabela td:nth-child(5) { order: 2; font-size: 13px; color: var(--texto-2); }
  .tabela tr { column-gap: 12px; } /* tipo, rede e data separados por espaço (sem ponto que abra a 2ª linha) */
  .tabela td:nth-child(2), .tabela td:nth-child(4), .tabela td:nth-child(5) { white-space: nowrap; }
  .tabela td:nth-child(6) { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
}
@media (max-width: 767px) {
  .doc-nota { font-size: 14px; }
  .tabela td:nth-child(2), .tabela td:nth-child(4), .tabela td:nth-child(5) { font-size: 14px; }
}