.ap-tela { min-width: 0; color: var(--ink); }
.ap-tela h1 { margin-bottom: 8px; }
.ap-tela p { line-height: 1.5; }
.ap-tela small { display: block; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.ap-tela a { color: var(--ink-accent); }
.ap-tela button, .ap-tela select, .ap-tela input, .ap-tela summary { min-height: 44px; font: inherit; }
.ap-tela button, .ap-tela select, .ap-tela input { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; max-width: 100%; }
.ap-tela button, .ap-tela summary { cursor: pointer; }
.ap-tela :focus-visible { outline: 2px solid var(--ink-accent); outline-offset: 2px; }
.ap-tela label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ap-filtros { display: grid; grid-template-columns: 2fr repeat(4, 1fr) auto; align-items: end; gap: 12px; margin: 20px 0; }
.ap-bloco, .ap-skeleton { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 16px 0; }
.ap-skeleton { min-height: 180px; background: linear-gradient(var(--panel), var(--panel-2)); }
.ap-resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ap-resumo strong { display: block; font-size: 28px; font-variant-numeric: tabular-nums; }
.ap-pacotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.ap-pacotes article { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.ap-pacotes button { margin-top: 12px; }
.ap-pacotes dd { margin: 0 0 12px; overflow-wrap: anywhere; }
.ap-tela table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ap-tela th { position: sticky; top: 0; background: var(--panel); text-align: left; z-index: 1; }
.ap-tela th button { width: 100%; text-align: inherit; border: 0; }
.ap-tela th:nth-child(3), .ap-tela th:nth-child(4), .ap-tela th:nth-child(5) { text-align: right; }
.ap-tela td { padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.ap-tela tr:hover td { background: var(--panel-2); }
.ap-tela .ap-num { text-align: right; font-variant-numeric: tabular-nums; }
.ap-estado { color: var(--muted); }
.ap-estado.divergencia { color: var(--ink-warn); }
.ap-estado.ok { color: var(--ink-ok); }
@media (max-width: 1100px) {
  .ap-filtros { grid-template-columns: repeat(3, 1fr); }
  .ap-tela table { font-size: 13px; }
}
@media (max-width: 820px) {
  .ap-filtros { grid-template-columns: 1fr 1fr; }
  .ap-pacotes { grid-template-columns: 1fr; }
  .ap-tela table, .ap-tela tbody, .ap-tela tr { display: block; }
  .ap-tela thead { display: block; }
  .ap-tela thead tr { display: flex; flex-wrap: wrap; }
  .ap-tela th { position: static; flex: 1 0 30%; }
  .ap-tela tbody tr { margin: 12px 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
  .ap-tela td { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 8px; text-align: left; }
  .ap-tela td::before { content: attr(data-label); color: var(--muted); grid-column: 1; grid-row: 1 / span 4; }
  .ap-tela td > * { grid-column: 2; }
  .ap-tela .ap-num { text-align: left; }
}
@media (max-width: 480px) {
  .ap-filtros, .ap-resumo { grid-template-columns: 1fr; }
  .ap-bloco { padding: 12px; }
  .ap-tela td { grid-template-columns: 96px minmax(0, 1fr); }
}