/* ============================================================================
   Pontos de quebra
   ----------------------------------------------------------------------------
   Todas as regras de largura ficam aqui, na ordem do maior para o menor, para
   caber a resposta inteira de uma tela em um lugar só.
   ========================================================================== */

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; gap: 44px; min-height: 0; padding-top: 44px; }
  .section-intro { grid-template-columns: 1fr; row-gap: 14px; }
  .steps, .source-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .app-frame { grid-template-columns: 1fr; }
  /* A lateral vira gaveta: sem isso o conteúdo perde metade da largura útil. */
  .sidebar {
    position: fixed;
    left: -260px;
    width: 236px;
    transition: left .2s ease;
  }
  .sidebar.is-open { left: 0; box-shadow: 14px 0 44px rgba(0, 0, 0, .28); }
  .mobile-only { display: block; }
  .crumb span { display: none; }
  .topbar { padding-inline: 16px; }
  .page-wrap { padding: 20px 16px 52px; }
  .split-grid, .ops-grid { grid-template-columns: 1fr; }
  .page-heading { align-items: flex-start; }
  .sync-note { display: none; }
  .site-header nav > a:not(.button) { display: none; }
  .admin-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (max-width: 760px) {
  .kpi-grid, .kpi-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-bar { flex-wrap: wrap; align-items: stretch; }
  .filter-bar label { width: calc(50% - 5px); }
  .filter-bar input[type=date] { width: 100%; }
  .filter-spacer { display: none; }
  .table-search { width: 100%; }
  .top-actions > form .button { padding-inline: 11px; }
  .segmented { display: flex; width: 100%; }
  .segmented a { flex: 1; text-align: center; }
  .member-actions { width: 100%; }
}

/* ----------------------------------------------------------------------------
   Tabela vira cartão. Rolagem horizontal em tabela de 11 colunas é inutilizável
   no telefone: cada linha passa a ser um bloco, com o rótulo da coluna ao lado
   do valor. Só vale para tabela marcada como ordenável, que é onde há colunas
   demais; a de apoio continua tabela.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  /* Sem isto a tabela mantém display:table e dimensiona pelo conteúdo das
     colunas, empurrando a página inteira para fora da viewport. */
  .table-wrap { overflow-x: hidden; }
  .table-wrap table[data-sortable],
  .table-wrap table[data-sortable] tbody { display: block; width: 100%; }
  .table-wrap table[data-sortable] { white-space: normal; }
  .table-wrap table[data-sortable] thead { display: none; }
  .table-wrap table[data-sortable] tbody tr {
    display: block;
    padding: 13px 15px;
    border-top: 1px solid var(--line);
  }
  .table-wrap table[data-sortable] tbody tr:first-child { border-top: 0; }
  .table-wrap table[data-sortable] td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 4px 0;
    border: 0;
    text-align: right;
  }
  .table-wrap table[data-sortable] td > * { min-width: 0; }
  .table-wrap table[data-sortable] td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .table-wrap table[data-sortable] td[data-search] {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    text-align: left;
  }
  .table-wrap table[data-sortable] td[data-search]::before { content: none; }
  .table-wrap table[data-sortable] td small { display: block; text-align: right; }
  .table-wrap table[data-sortable] td[data-search] small { text-align: left; }
}

@media (max-width: 640px) {
  .shell { width: min(100% - 28px, 1180px); }
  .site-header { height: 70px; }
  .site-header nav { gap: 8px; }
  .hero-copy h1 { font-size: 38px; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .product-preview { padding: 7px; border-radius: 18px; }
  .preview-body { grid-template-columns: 38px; min-height: 340px; }
  .preview-main { padding: 18px 14px; }
  .preview-kpis { grid-template-columns: 1fr; }
  .preview-kpis > div { padding: 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .preview-kpis > div:nth-child(n+2) { display: none; }
  .signal-strip .shell span:nth-child(n+4) { display: none; }
  .section { padding-block: 66px; }
  .section-intro h2, .cta h2 { font-size: 29px; }
  .steps, .source-grid { grid-template-columns: 1fr; }
  .steps { margin-top: 34px; }
  .steps h3 { margin-top: 18px; }
  .cta { margin-block: 60px; padding: 42px 20px; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: 13px; padding-block: 26px; }
  .site-footer p { margin: 0; }
  .top-actions .user-chip { display: none; }
  .page-heading h1 { font-size: 21px; }
  .panel { padding: 16px; }
  .panel header { flex-direction: column; align-items: flex-start; }
  .legend { margin-top: 10px; }
  .chart { height: 220px; }
  .integration-row { flex-wrap: wrap; align-items: flex-start; }
  .integration-copy { min-width: calc(100% - 66px); }
  .integration-actions { width: 100%; justify-content: flex-end; }
  .auth-card { padding: 24px 20px; }
  .auth-brand { left: 20px; }
  .source-breakdown dl { grid-template-columns: repeat(2, 1fr); }
  .onboarding-progress { text-align: left; }
  .toast-stack { right: 12px; left: 12px; bottom: 12px; }
  .toast { max-width: none; }
}

@media (max-width: 460px) {
  .kpi-grid, .kpi-grid--three { grid-template-columns: minmax(0, 1fr); }
  .status-list > div { grid-template-columns: 1fr auto; row-gap: 3px; }
  .status-list small { grid-column: 1 / -1; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}