/* Larguras cobertas pelo layout fluido: 320, 360, 375, 390, 414, 430, 480, 600, 768, 820, 900, 1024, 1280, 1366, 1440, 1600, 1920 e 2560. */

@media (max-width: 359px) {
    .kpis, .esqueletos { grid-template-columns: 1fr; }
    .app { padding-left: 12px; padding-right: 12px; }
    .bottom-nav { left: 6px; right: 6px; }
}

@media (min-width: 360px) {
    .kpis, .esqueletos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 600px) {
    .grade-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .modal { place-items: center; padding: 24px; }
    #modal .modal-card { border-radius: 24px; width: min(520px, calc(100vw - 48px)); }
}

@media (min-width: 768px) {
    .app { padding: 20px 22px 118px; }
    .saudacao { display: none; }
    .busca { display: flex; }
    #btn-busca { display: none; }
    .topo { align-items: center; }
    .perfil-layout { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
}

@media (min-width: 820px) {
    .grade-meio { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
}

@media (min-width: 1024px) {
    .overlay, .fab, .bottom-nav, .fechar-menu, #btn-menu, .menu-perfil { display: none !important; }
    .menu-lateral {
        transform: none;
        width: var(--sidebar);
        padding-top: 28px;
    }
    .app {
        margin-left: var(--sidebar);
        padding: 18px 24px 32px;
    }
    .saudacao-desktop {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        align-items: center;
        margin-bottom: 16px;
    }
    .saudacao-desktop h1 { font-size: 1.8rem; }
    .card-frase { max-width: 280px; }
    .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tabela-wrap { display: block; overflow: visible; }
    .lista-transacoes { display: none; }
    .so-desktop { display: initial; }
    #nome-topo, .seta-usuario { display: inline; }
    .busca-painel { left: calc(var(--sidebar) + 24px); width: min(480px, 40vw); right: auto; }
    .usuario-chip {
        background: var(--card-solid);
        border-color: var(--line);
        padding: 6px 12px 6px 6px;
    }
    .relatorio-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .layout.rail-ativa {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
        gap: 16px;
        align-items: start;
    }
    .layout.rail-ativa .coluna-direita { display: grid; gap: 14px; align-content: start; }
}

@media (min-width: 1100px) and (max-width: 1360px) {
    .layout.rail-ativa .grade-meio { grid-template-columns: 1fr; }
}

@media (min-width: 1440px) {
    .app { padding-inline: 32px; }
    .chart-box { height: 280px; }
}

@media (min-width: 1920px) {
    .app { padding-inline: 48px; }
}