/* Layout responsivo do Painel (docs/design/prompt-claude-code-responsivo.md; referências em
   docs/design/MobileA|MobileB|Tablet.dc.html). Carregado depois dos outros estilos.
   - Celular: até 639px (barra superior + barra inferior + folhas)
   - Tablet: 640 a 1023px (trilho de ícones de 80px + gaveta com o menu completo)
   - Computador: 1024px ou mais — fica como estava; fora das media queries este arquivo só
     esconde os elementos que existem para os outros tamanhos.
   A troca é só CSS: os três menus ficam sempre no HTML (MainLayout) e cada faixa mostra um. */

/* ---------- Computador: esconde o que é de celular/tablet ---------- */
.nav-trilho,
.nav-inf,
.folha--nav,
.folha-fundo--mais,
.folha-fundo--criar,
.abas-canal,
.topbar__titulo,
.topbar__marca,
.topbar__voltar {
    display: none;
}

/* Ícone de marca por máscara (Shopee/TikTok Shop) fora da sidebar: cor de currentColor. */
.nav-marca {
    display: inline-block;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--marca) center / contain no-repeat;
    mask: var(--marca) center / contain no-repeat;
}

.nav-marca--shopee { --marca: url("/icones/shopee.svg"); }
.nav-marca--tiktok { --marca: url("/icones/tiktok.svg"); }
.nav-marca--amazon { --marca: url("/icones/amazon.svg"); }

/* ---------- Celular e tablet (< 1024px) ---------- */
@media (max-width: 1023.98px) {
    .page--app .topbar .crumbs,
    .page--app .topbar .topbar__menu {
        display: none;
    }

    .topbar__titulo {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--text);
    }

    .topbar__voltar {
        width: 44px;
        height: 44px;
        margin-left: -12px;
        margin-right: -6px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text);
    }

    /* O título da página já está na barra superior; a seta de voltar também. */
    .page--app .ui-header__title,
    .page--app .ui-header__icon,
    .page--app .ui-header__main > a.btn-icon {
        display: none !important;
    }

    /* Abas de canal: no tablet só a linha das subpáginas do Instagram (os canais estão no trilho). */
    .abas-canal {
        display: block;
        padding: 12px 16px 0;
    }

    .abas-canal__linha {
        display: none;
    }

    .abas-canal:not(:has(.abas-canal__sub)) {
        display: none;
    }

    .abas-canal__sub {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        scrollbar-width: none;
        border-bottom: 1px solid var(--border);
    }

    .abas-canal__sub::-webkit-scrollbar { display: none; }

    .abas-canal__sub a {
        display: flex;
        align-items: center;
        min-height: 44px;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-subtle);
        text-decoration: none;
    }

    .abas-canal__sub a.is-ativo {
        color: var(--brand-600);
        font-weight: 600;
        box-shadow: inset 0 -2px 0 var(--brand-600);
    }
}

/* ---------- Tablet (640 a 1023px) ---------- */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .nav-trilho {
        width: 80px;
        flex-shrink: 0;
        box-sizing: border-box;
        height: 100vh;
        height: 100dvh;
        position: sticky;
        top: 0;
        z-index: 1031;
        overflow-y: auto;
        scrollbar-width: none;
        padding: 14px 8px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        background: var(--sidebar-bg);
    }

    .nav-trilho::-webkit-scrollbar { display: none; }

    .nav-trilho__marca {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        margin: 0 auto 12px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #d946ef 100%);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-trilho__item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 56px;
        margin: 0;
        padding: 6px 2px;
        border-radius: 10px;
        color: #b9b8d6;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.1;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
    }

    .nav-trilho__item:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.05);
    }

    .nav-trilho__item.is-ativo {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.1);
    }

    .nav-trilho__item .menu-contador {
        position: absolute;
        top: 4px;
        right: 12px;
        margin: 0;
    }

    /* Barra de seleção centralizada no conteúdo (o trilho tem 80px, não 248). */
    .page--app .ui-selbar {
        left: calc(50% + 40px);
    }
}

/* ---------- Celular (até 639px) ---------- */
@media (max-width: 639.98px) {
    .abas-canal:not(:has(.abas-canal__sub)) {
        display: block;
    }

    .page--app .sidebar,
    .page--app .nav-drawer-backdrop {
        display: none !important;
    }

    /* Barra superior: símbolo (ou voltar) + título + sino. Tema e conta vão para a folha "Mais". */
    .page--app .topbar {
        height: 56px;
        padding: 0 8px 0 16px;
    }

    .page--app .topbar__left {
        flex: 1 1 auto;
        gap: 10px;
    }

    .page--app .topbar__right {
        gap: 0;
    }

    .page--app .topbar__right > [data-tema-toggle],
    .page--app .topbar__right > .user-menu {
        display: none;
    }

    .topbar .sino__btn {
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
    }

    .topbar__marca {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        border-radius: 50%;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #d946ef 100%);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ui-page {
        padding: 16px;
    }

    .page--app .ui-page {
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }

    /* Barra inferior: Ofertas · Fila · [+] · Canais · Mais. Não some ao rolar. */
    .nav-inf {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1035;
        box-sizing: content-box;
        height: 64px;
        padding-bottom: env(safe-area-inset-bottom);
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
        background: var(--surface);
        border-top: 1px solid var(--border);
    }

    .nav-inf__item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        height: 100%;
        margin: 0;
        color: var(--text-subtle);
        font-size: 11px;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .nav-inf__item.is-ativo {
        color: var(--brand-600);
        font-weight: 600;
    }

    .nav-inf__item .menu-contador {
        position: absolute;
        top: 6px;
        left: calc(50% + 6px);
        margin: 0;
    }

    .nav-inf__criar {
        justify-self: center;
        width: 56px;
        height: 56px;
        margin: -24px 0 0;
        border-radius: 50%;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #d946ef 100%);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 0 4px var(--surface), 0 8px 20px rgba(139, 92, 246, 0.45);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* Folhas de baixo da navegação ("+" e "Mais"). */
    .folha--nav {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1070;
        box-sizing: border-box;
        max-height: 90vh;
        max-height: 90dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 16px calc(16px + env(safe-area-inset-bottom));
        background: var(--surface);
        color: var(--text);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 40px rgba(16, 16, 32, 0.2);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform 0.22s ease, visibility 0s linear 0.22s;
    }

    #nav-mais:checked ~ .folha-mais,
    #nav-criar:checked ~ .folha-criar {
        transform: none;
        visibility: visible;
        transition: transform 0.22s ease, visibility 0s;
    }

    #nav-mais:checked ~ .folha-fundo--mais,
    #nav-criar:checked ~ .folha-fundo--criar {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1065;
        margin: 0;
        background: rgba(20, 19, 43, 0.55);
    }

    .folha-criar__titulo {
        font-size: 17px;
        font-weight: 700;
        margin: 0 4px 8px;
    }

    .folha-criar__item {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 56px;
        padding: 0 8px;
        border-radius: 12px;
        color: var(--text);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
    }

    .folha-criar__item:active {
        background: var(--surface-3);
    }

    .folha-criar__icone {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 12px;
        background: var(--brand-50);
        color: var(--brand-600);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .folha-mais__conta {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 14px;
        background: var(--surface-3);
        color: var(--text);
        text-decoration: none;
    }

    .folha-mais__conta > svg {
        flex-shrink: 0;
        color: var(--text-subtle);
    }

    .folha-mais__avatar {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 50%;
        object-fit: cover;
    }

    .folha-mais__avatar--iniciais {
        background: linear-gradient(135deg, #6366f1, #d946ef);
        color: #ffffff;
        font-size: 14px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .folha-mais__conta-texto {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .folha-mais__conta-texto strong {
        font-size: 15px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .folha-mais__plano {
        font-size: 12px;
        color: var(--text-subtle);
    }

    .folha-mais__secao {
        margin: 18px 4px 8px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-subtle);
    }

    .folha-mais__grade {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px 4px;
    }

    .folha-mais__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 2px 0;
        color: var(--text-2);
        font-size: 12px;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .folha-mais__icone {
        position: relative;
        width: 52px;
        height: 52px;
        border-radius: 14px;
        border: 1px solid var(--border);
        background: var(--surface-2);
        color: var(--brand-600);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .folha-mais__item.is-ativo .folha-mais__icone {
        background: var(--brand-50);
        border-color: var(--brand-200);
    }

    .folha-mais__item.is-ativo {
        color: var(--brand-600);
        font-weight: 600;
    }

    .folha-mais__icone .menu-contador {
        position: absolute;
        top: -6px;
        right: -6px;
        margin: 0;
    }

    .folha-mais__rodape {
        display: flex;
        gap: 8px;
        margin-top: 20px;
        padding-top: 14px;
        border-top: 1px solid var(--border-soft);
    }

    .folha-mais__rodape form {
        margin: 0;
    }

    .folha-mais__acao {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        margin: 0;
        padding: 0 16px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
        color: var(--text);
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }

    /* Troca de canal no topo das páginas de canal (a barra inferior tem um "Canais" só). */
    .abas-canal__linha {
        display: flex;
        gap: 2px;
        padding: 4px;
        border-radius: 12px;
        background: var(--segment-bg);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .abas-canal__linha::-webkit-scrollbar { display: none; }

    .abas-canal__aba {
        flex: 1 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 0 12px;
        border-radius: 9px;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-2);
        text-decoration: none;
        white-space: nowrap;
    }

    .abas-canal__aba.is-ativo {
        background: var(--surface);
        color: var(--text);
        font-weight: 700;
        box-shadow: 0 1px 3px rgba(16, 16, 32, 0.12);
    }

    .abas-canal__sub {
        margin-top: 8px;
    }

    /* O que fica fixo embaixo sobe para não ficar atrás da barra inferior. */
    .page--app ~ * .ui-toast,
    .page--app .ui-toast {
        left: 12px;
        right: 12px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        min-width: 0;
        max-width: none;
    }

    .page--app .ui-selbar {
        bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .page--app ~ #blazor-error-ui {
        bottom: calc(64px + env(safe-area-inset-bottom));
    }
}

/* Alça das folhas de baixo: barrinha com área de toque de 44px. */
.folha__alca {
    display: block;
    height: 28px;
    margin: 0 -16px 4px;
    cursor: grab;
    position: relative;
}

.folha__alca::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 10px;
    width: 40px;
    height: 5px;
    margin-left: -20px;
    border-radius: 3px;
    background: var(--border-strong);
}

/* =====================================================================
   Componentes base (Folha, Dica, Etapas, barra de ação, tabelas em cartões)
   ===================================================================== */

/* No computador: alça da folha, "i" da dica e os controles de etapa não existem. */
.folha-alca,
.dica__i,
.etapas__progresso,
.etapas__acoes,
.so-celular {
    display: none;
}

.dica,
.etapas {
    display: contents;
}

/* Balão escuro das dicas no toque (um só, criado por js/responsivo.js). */
.dica-balao {
    position: fixed;
    z-index: 1100;
    box-sizing: border-box;
    max-width: min(300px, calc(100vw - 24px));
    padding: 10px 12px;
    border-radius: 10px;
    background: #0f1020;
    color: #ffffff;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    box-shadow: 0 10px 30px rgba(16, 16, 32, 0.3);
}

/* ---------- Toque (sem hover): dicas viram "i" + balão, alvos de 44px ---------- */
@media (hover: none) {
    /* No toque o rótulo e o "i" andam juntos. */
    .dica {
        display: inline-flex;
        align-items: center;
        min-width: 0;
    }

    .dica__i {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        margin: 0 0 0 6px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--surface-3);
        color: var(--text-subtle);
        font-family: Georgia, serif;
        font-style: italic;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        vertical-align: middle;
        cursor: pointer;
    }

    /* Área de toque de 44px sem mudar o desenho. */
    .dica__i::after,
    .ui-hint::before {
        content: "";
        position: absolute;
        inset: -13px;
    }

    /* O balão do InfoHint é o mesmo das dicas (posicionado por JS, nunca sai da tela). */
    .ui-hint[data-tip]:hover::after,
    .ui-hint[data-tip]:focus::after {
        display: none;
    }

    .btn,
    .ui-tab,
    .ui-seg__btn,
    .ui-periodo__chip {
        min-height: 44px;
    }

    .btn-icon,
    .btn-icon.btn-sm {
        min-width: 44px;
        min-height: 44px;
    }

    .ui-switch::before {
        content: "";
        position: absolute;
        inset: -10px -4px;
    }

    /* Ações que só apareciam no hover ficam sempre visíveis. */
    .so-hover {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Linha extra que só o tablet mostra (o que a coluna secundária escondeu). */
.so-tablet {
    display: none;
}

/* ---------- Tablet ---------- */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .so-tablet {
        display: block;
        margin-top: 2px;
        font-size: 12px;
        font-weight: 400;
        color: var(--text-subtle);
    }

    .ui-modal--lg {
        max-width: 640px;
    }

    /* Tabela enxuta: colunas secundárias somem (aparecem ao abrir a linha). */
    .col-sec {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .ui-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---------- Celular ---------- */
@media (max-width: 639.98px) {
    .so-celular {
        display: revert;
    }

    .so-computador {
        display: none !important;
    }

    /* Campos com 16px: abaixo disso o iPhone dá zoom ao focar. */
    .form-control,
    .form-select,
    .ui-input > input,
    .ui-input > select,
    textarea,
    select,
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        font-size: 16px !important;
    }

    /* Abas: uma linha só com rolagem (js/responsivo.js mantém a ativa visível). */
    .ui-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        max-width: 100%;
    }

    .ui-tabs::-webkit-scrollbar { display: none; }

    .ui-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .ui-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    /* Modal vira folha de baixo: alça, até 90% da altura, botões fixos no rodapé. */
    .ui-backdrop {
        align-items: flex-end;
        padding: 0;
    }

    .ui-modal,
    .ui-dialog {
        max-width: none;
        max-height: 90vh;
        max-height: 90dvh;
        border: 0;
        border-radius: 20px 20px 0 0;
        animation: folha-sobe 0.22s ease-out;
    }

    .ui-dialog {
        padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
    }

    .ui-modal:not(.ui-modal--folha)::before,
    .ui-dialog::before {
        content: "";
        display: block;
        flex-shrink: 0;
        width: 40px;
        height: 5px;
        margin: 10px auto 4px;
        border-radius: 3px;
        background: var(--border-strong);
    }

    .folha-alca {
        display: block;
        flex-shrink: 0;
        width: 100%;
        height: 26px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        position: relative;
        cursor: grab;
    }

    .folha-alca::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 10px;
        width: 40px;
        height: 5px;
        margin-left: -20px;
        border-radius: 3px;
        background: var(--border-strong);
    }

    .ui-modal__head {
        padding: 4px 16px 14px;
    }

    .ui-modal__icon {
        display: none;
    }

    .ui-modal__title {
        font-size: 18px;
    }

    .ui-modal__body {
        padding: 0 16px 16px;
        gap: 18px;
    }

    .ui-modal__foot {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: var(--surface);
    }

    .ui-modal__foot > .ui-row,
    .ui-dialog__actions {
        flex-wrap: nowrap;
        width: 100%;
    }

    /* Botão principal com 2/3 da largura. */
    .ui-modal__foot > .ui-row > .btn,
    .ui-dialog__actions > .btn {
        flex: 1 1 0;
        height: 48px;
    }

    .ui-modal__foot > .ui-row > .btn-primary,
    .ui-modal__foot > .ui-row > .btn-danger,
    .ui-dialog__actions > .btn-primary,
    .ui-dialog__actions > .btn-danger {
        flex: 2 1 0;
    }

    /* Barra de ação fixa embaixo (formulários): no lugar da barra inferior. */
    .barra-acao {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1036;
        box-sizing: border-box;
        display: flex;
        gap: 10px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: var(--surface);
        border-top: 1px solid var(--border);
    }

    .barra-acao > .btn {
        flex: 1 1 0;
        height: 48px;
    }

    .barra-acao > .btn-primary {
        flex: 2 1 0;
    }

    body:has(.barra-acao:not([data-ativa="false"])) .nav-inf {
        display: none;
    }

    .barra-acao[data-ativa="false"] {
        display: none !important;
    }

    /* Etapas: progresso no topo, só a seção da etapa atual, Voltar/Próximo embaixo. */
    .etapas__progresso {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 6px;
        position: sticky;
        top: 56px;
        z-index: 5;
        margin: -16px -16px 0;
        padding: 12px 16px 10px;
        background: var(--bg);
    }

    .etapas__passo {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        min-height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--text-subtle);
        font: inherit;
        font-size: 12px;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
    }

    .etapas__barra {
        display: block;
        width: 100%;
        height: 4px;
        border-radius: 2px;
        background: var(--border);
    }

    .etapas__passo.is-feito {
        color: var(--brand-600);
    }

    .etapas__passo.is-atual {
        font-weight: 700;
    }

    .etapas__passo.is-feito .etapas__barra {
        background: var(--brand-600);
    }

    .etapas__acoes {
        display: flex;
    }

    .etapas[data-etapa="1"] [data-passo]:not([data-passo~="1"]),
    .etapas[data-etapa="2"] [data-passo]:not([data-passo~="2"]),
    .etapas[data-etapa="3"] [data-passo]:not([data-passo~="3"]),
    .etapas[data-etapa="4"] [data-passo]:not([data-passo~="4"]),
    .etapas[data-etapa="5"] [data-passo]:not([data-passo~="5"]),
    .etapas[data-etapa="6"] [data-passo]:not([data-passo~="6"]) {
        display: none !important;
    }

    /* Tabela que vira lista de cartões: cada linha é um cartão; células com data-rotulo
       ganham o rótulo da coluna em cima. O desenho de cada cartão fica na página. */
    .tabela-cartoes,
    .tabela-cartoes tbody {
        display: block;
        width: 100%;
    }

    .tabela-cartoes thead {
        display: none;
    }

    .tabela-cartoes tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 12px;
        align-items: center;
        margin: 0 0 10px;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface);
    }

    .tabela-cartoes td {
        display: block;
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .tabela-cartoes td[data-rotulo]::before {
        content: attr(data-rotulo);
        display: block;
        margin-bottom: 2px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-subtle);
    }

    /* No cartão cabe tudo: as colunas secundárias do tablet voltam, com rótulo. */
    .tabela-cartoes .col-sec {
        display: block !important;
    }

    /* Título do cartão (produto, nome da lista…) em cima, na largura toda; ações embaixo. */
    .tabela-cartoes td.cel-titulo {
        grid-column: 1 / -1;
        order: -1;
        max-width: none !important;
        font-size: 15px;
    }

    .tabela-cartoes td {
        width: auto !important;
        max-width: none !important;
        height: auto !important;
    }

    .tabela-cartoes td.col-actions {
        grid-column: 1 / -1;
        text-align: left !important;
    }

    .tabela-cartoes td.col-actions > .ui-row {
        justify-content: flex-end !important;
    }

    .tabela-cartoes td.text-end {
        text-align: left !important;
    }

    .tabela-cartoes .so-tablet {
        display: none !important;
    }

    .ui-table-wrap:has(> .tabela-cartoes) {
        overflow: visible;
    }
}

@keyframes folha-sobe {
    from { transform: translateY(40%); opacity: 0.4; }
    to { transform: none; opacity: 1; }
}

/* =====================================================================
   Ajustes globais de páginas (celular e tablet)
   ===================================================================== */
@media (max-width: 1023.98px) {
    /* Faixa de saúde das conexões (BannerSaudeConexoes): no fluxo, no topo do conteúdo, em vez de
       flutuar por cima das abas e dos botões. */
    .ui-page .banner-saude-pilha {
        position: static;
        transform: none;
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    .ui-page .banner-saude {
        box-shadow: none;
    }
}

@media (max-width: 639.98px) {
    .ui-page .banner-saude {
        flex-wrap: wrap;
        font-size: 13px;
    }

    .ui-page .banner-saude__texto {
        flex: 1 1 200px;
    }
}

/* ---------- FiltrosCelular: filtros numa folha só no celular ---------- */
.filtros-cel__botao,
.filtros-cel__chips,
.filtros-cel__fundo,
.filtros-cel__titulo,
.filtros-cel__ok {
    display: none;
}

.filtros-cel,
.filtros-cel__painel {
    display: contents;
}

@media (max-width: 639.98px) {
    .filtros-cel__botao {
        display: inline-flex;
        flex-shrink: 0;
    }

    .filtros-cel__botao.is-ativo {
        border-color: var(--brand-300);
        background: var(--brand-50);
        color: var(--brand-700);
    }

    .filtros-cel__chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
    }

    .filtros-cel:not(.is-aberta) {
        display: none;
    }

    .filtros-cel.is-aberta {
        display: block;
    }

    .filtros-cel__fundo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1065;
        background: rgba(20, 19, 43, 0.55);
    }

    .filtros-cel__painel {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1070;
        box-sizing: border-box;
        max-height: 90vh;
        max-height: 90dvh;
        overflow-y: auto;
        padding: 0 16px calc(16px + env(safe-area-inset-bottom));
        background: var(--surface);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 40px rgba(16, 16, 32, 0.2);
        animation: folha-sobe 0.22s ease-out;
    }

    .filtros-cel__painel > :not(.folha-alca) {
        width: 100% !important;
        max-width: none !important;
    }

    .filtros-cel__painel .ui-periodo__chip {
        width: 100%;
    }

    .filtros-cel__titulo {
        display: block;
        font-size: 17px;
        font-weight: 700;
    }

    .filtros-cel__ok {
        display: inline-flex;
        height: 48px;
        margin-top: 4px;
    }
}

/* ---------- Ofertas ---------- */
@media (min-width: 640px) and (max-width: 1023.98px) {
    /* Tablet: tabela enxuta (a lista de cartões fica para o celular). Canais saem da linha. */
    .ui-page .ui-table-wrap:has(> .ofertas-tabela) {
        display: block !important;
    }

    .ui-page .ui-list:has(> .ofertas-card) {
        display: none !important;
    }

    .ofertas-tabela > thead > tr > th:nth-child(4),
    .ofertas-tabela > tbody > tr:not(.ui-table__detail) > td:nth-child(4) {
        display: none;
    }

    .ui-page .ofertas-tabela > tbody > tr > td:nth-child(2) {
        max-width: 280px !important;
    }
}

@media (max-width: 639.98px) {
    .ui-page .ofertas-toolbar {
        padding: 12px;
        gap: 10px;
    }

    .ui-page .ofertas-toolbar > .ui-tabs {
        width: 100%;
    }

    .ui-page .ofertas-filtros {
        width: 100%;
        flex-wrap: wrap;
    }

    .ui-page .ofertas-busca {
        width: auto;
        flex: 1 1 0;
    }

    /* Nova oferta está no "+" da barra inferior. */
    .cab-ofertas .ui-header__actions {
        display: none;
    }

    /* Dentro da folha de filtros, ordem natural (no computador o período vem antes da busca). */
    .ui-page .filtros-cel__painel .ui-periodo {
        order: 0;
    }

    .ui-page .ofertas-card {
        gap: 12px;
        align-items: flex-start;
        -webkit-touch-callout: none;
        user-select: none;
    }

    .ui-page .ofertas-card > .form-check-input {
        width: 22px;
        height: 22px;
        margin-top: 2px;
    }

    .ui-page .ofertas-card .ui-product__title {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .ui-page .ofertas-detalhe {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Celular: nada mais largo que a tela ---------- */
@media (max-width: 639.98px) {
    .ui-header {
        gap: 10px;
    }

    .ui-header__main {
        max-width: 100%;
    }

    .ui-header__actions {
        min-width: 0;
        max-width: 100%;
    }

    .ui-header__actions > * {
        max-width: 100%;
    }

    /* Chip com texto longo quebra linha em vez de empurrar a página. */
    .ui-page .ui-chip {
        max-width: 100%;
        white-space: normal;
        height: auto;
        min-height: 24px;
    }

    .ui-page .ui-chip--lg {
        min-height: 28px;
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

/* ---------- Post programado ---------- */
.pp-voltar {
    display: none;
}

@media (max-width: 639.98px) {
    .ui-page .pp:not(.pp--editor) .pp-editor,
    .ui-page .pp.pp--editor .pp-lista {
        display: none;
    }

    .ui-page:has(.pp--editor) .ui-header {
        display: none;
    }

    .ui-page .pp-voltar {
        display: inline-flex;
        align-self: flex-start;
        margin: 4px 0 0 4px;
    }

    .ui-page .pp-editor {
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .ui-page .pp-editor .etapas__progresso {
        margin: 0 -16px;
    }

    .ui-page .pp-editor__corpo {
        display: block;
        padding-left: 0;
        padding-right: 0;
    }

    .ui-page .pp-editor__topo,
    .ui-page .pp-editor__acoes {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ---------- Fila: resumo em 3 números, filtros em linha e cartões com progresso ---------- */
@media (max-width: 639.98px) {
    .ui-page .fila-resumo {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
    }

    .fila-resumo__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 12px 6px;
        text-align: center;
    }

    .fila-resumo__item + .fila-resumo__item {
        border-left: 1px solid var(--border-soft);
    }

    .fila-resumo__item strong {
        font-size: 22px;
        font-weight: 700;
        color: var(--text);
    }

    .fila-resumo__item span {
        font-size: 12px;
        color: var(--text-muted);
    }

    /* Os 4 cards de status viram uma linha com rolagem (continuam filtrando). */
    .ui-page .fila-filtros {
        display: flex;
        gap: 8px !important;
        overflow-x: auto;
        scrollbar-width: none;
        margin: 0 -16px;
        padding: 0 16px;
    }

    .ui-page .fila-filtros::-webkit-scrollbar {
        display: none;
    }

    .ui-page .fila-filtros > * {
        flex: 0 0 auto;
        min-width: 128px;
    }

    .ui-page .fila-lote__progresso {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-top: 6px;
        font-size: 12px;
        color: var(--text-muted);
    }

    .fila-lote__barra {
        height: 6px;
        border-radius: 3px;
        background: var(--surface-3);
        overflow: hidden;
    }

    .fila-lote__barra > span {
        display: block;
        height: 100%;
        border-radius: 3px;
        background: linear-gradient(90deg, #6366f1, #8b5cf6);
    }

    .ui-page .fila-lote__pausa {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
}

/* ---------- WhatsApp: grupos de disparo em cartões ---------- */
@media (max-width: 639.98px) {
    .ui-page .wa-tabela.tabela-cartoes {
        padding: 0 12px 4px;
    }

    .ui-page .wa-tabela.tabela-cartoes tr {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "grupo grupo acoes"
            "apelido apelido apelido"
            "ordem ativo padrao";
        gap: 10px 12px;
    }

    .ui-page .wa-tabela.tabela-cartoes td:nth-child(1) { grid-area: ordem; }
    .ui-page .wa-tabela.tabela-cartoes td:nth-child(2) { grid-area: grupo; }
    .ui-page .wa-tabela.tabela-cartoes td:nth-child(3) { grid-area: apelido; }
    .ui-page .wa-tabela.tabela-cartoes td:nth-child(4) { grid-area: ativo; }
    .ui-page .wa-tabela.tabela-cartoes td:nth-child(5) { grid-area: padrao; }
    .ui-page .wa-tabela.tabela-cartoes td:nth-child(6) { grid-area: acoes; justify-self: end; }

    .ui-page .wa-tabela.tabela-cartoes .wa-ordem {
        width: 72px;
    }
}

/* ---------- Suporte (cliente e admin) ---------- */
.sup-voltar {
    display: none;
}

@media (max-width: 639.98px) {
    .ui-page .sup-painel {
        display: block;
        height: auto;
        min-height: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .ui-page .sup-lista {
        max-height: none;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--surface);
        overflow: hidden;
    }

    .ui-page .sup-painel:not(.sup-painel--detalhe) .sup-conteudo,
    .ui-page .sup-painel--detalhe .sup-lista {
        display: none;
    }

    .ui-page:has(.sup-painel--detalhe) .ui-header {
        display: none;
    }

    .ui-page .sup-voltar {
        display: inline-flex;
        margin: 0 0 8px -8px;
    }

    .ui-page .sup-painel--detalhe .sup-conteudo {
        display: flex;
        flex-direction: column;
        background: transparent;
    }

    .ui-page .sup-conversa {
        min-height: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* Campo da conversa fixo embaixo, no lugar da barra inferior. */
    .ui-page .sup-painel--detalhe .sup-resposta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1036;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
        background: var(--surface);
        border-top: 1px solid var(--border);
    }

    body:has(.sup-painel--detalhe .sup-resposta) .nav-inf {
        display: none;
    }

    .ui-page:has(.sup-painel--detalhe .sup-resposta) {
        padding-bottom: 160px;
    }
}

/* ---------- Plano e uso: "Mudar plano" vira carrossel no celular ---------- */
@media (max-width: 639.98px) {
    .ui-page .plano-mudar__grade {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding: 0 16px 16px;
    }

    .ui-page .plano-mudar__grade::-webkit-scrollbar { display: none; }

    .ui-page .plano-mudar__grade > .plano-opcao {
        flex: 0 0 82%;
        scroll-snap-align: center;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
    }
}

/* ---------- Shopee / TikTok Shop (Descobrir): grade de 3 no tablet e 2 no celular ---------- */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .ui-page .dsc-grade {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 639.98px) {
    .ui-page .dsc-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .ui-page .dsc > .filtros-cel__botao {
        justify-self: start;
    }
}

/* ---------- Análise / Comissões: indicadores 2×2 no celular ---------- */
@media (max-width: 639.98px) {
    .ui-page .an-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .ui-page .com-fluxo {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-page .com-fluxo__celula {
        padding: 14px 16px;
        gap: 6px;
    }

    .ui-page .com-fluxo__celula + .com-fluxo__celula {
        border-left: 0;
        border-top: 0;
    }

    .ui-page .com-fluxo__celula:nth-child(even) {
        border-left: 1px solid var(--border-soft);
    }

    .ui-page .com-fluxo__celula:nth-child(n+3) {
        border-top: 1px solid var(--border-soft);
    }

    .ui-page .com-fluxo__valor {
        font-size: 20px;
    }

    .ui-page .com-fluxo__seta {
        display: none;
    }
}

/* ---------- Cupons: editor em folha de baixo no celular ---------- */
.cupom-editor__fundo {
    display: none;
}

@media (max-width: 639.98px) {
    .ui-page .cupom-editor__fundo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1065;
        background: rgba(20, 19, 43, 0.55);
    }

    .ui-page .cupom-editor {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 1070;
        max-height: 90vh;
        max-height: 90dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 0;
        border-radius: 20px 20px 0 0;
        animation: folha-sobe 0.22s ease-out;
    }

    .ui-page .cupom-editor::before {
        content: "";
        display: block;
        flex-shrink: 0;
        width: 40px;
        height: 5px;
        margin: 10px auto 0;
        border-radius: 3px;
        background: var(--border-strong);
    }

    .ui-page .cupom-editor .ui-grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .ui-page .cupom-editor__rodape {
        position: sticky;
        bottom: 0;
        background: var(--surface);
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }

    .ui-page .cupom-editor__rodape > .btn {
        flex: 1 1 0;
        height: 48px;
    }

    .ui-page .cupom-editor__rodape > .btn-primary {
        flex: 2 1 0;
    }
}

/* ---------- Tutoriais: trilha empilhada, grade 3/2, player em tela cheia ---------- */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .ui-page .tut-grade {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (max-width: 639.98px) {
    /* nowrap: coluna com wrap fazia a linha ter a largura do conteúdo (títulos dos passos
       somados) e a página inteira rolava de lado. */
    .ui-page .tut-trilha {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 16px;
        padding: 16px;
    }

    .ui-page .tut-trilha__passos {
        flex-direction: column;
        align-items: stretch;
    }

    .ui-page .tut-passo {
        height: auto;
        min-height: 30px;
        padding: 5px 12px 5px 6px;
        border-radius: 15px;
        text-align: left;
        line-height: 1.3;
    }

    .ui-page .tut-passo__marca {
        flex-shrink: 0;
    }

    .ui-page .tut-trilha__progresso {
        width: auto;
    }

    .ui-page .tut-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    /* Player: tela cheia (no lugar da folha de baixo dos outros modais). */
    .ui-backdrop:has(> .tutorial-player) {
        align-items: stretch;
        background: #000000;
    }

    .ui-modal.tutorial-player,
    .ui-modal.tutorial-player--vertical {
        width: 100%;
        max-height: none;
        height: 100%;
        border-radius: 0;
        animation: none;
        overflow-y: auto;
    }

    .ui-modal.tutorial-player::before {
        display: none;
    }

    .tutorial-player__video {
        border-radius: 0;
    }

    .tutorial-player__acoes {
        padding-bottom: calc(18px + env(safe-area-inset-bottom));
    }
}

/* ---------- Configurações: seções em lista no celular ---------- */
.cfg-celular {
    display: contents;
}

.cfg-menu,
.cfg-voltar {
    display: none;
}

@media (max-width: 639.98px) {
    .cfg-celular[data-secao="0"] > section,
    .cfg-celular[data-secao="1"] > section:not([data-cfg="1"]),
    .cfg-celular[data-secao="2"] > section:not([data-cfg="2"]),
    .cfg-celular[data-secao="3"] > section:not([data-cfg="3"]) {
        display: none;
    }

    .cfg-celular[data-secao="0"] > .cfg-menu {
        display: flex;
        flex-direction: column;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }

    .cfg-celular:not([data-secao="0"]) > .cfg-voltar {
        display: inline-flex;
        align-self: flex-start;
        margin: -8px 0 -8px -8px;
    }

    .ui-page:has(.cfg-celular:not([data-secao="0"])) .ui-header {
        display: none;
    }

    .cfg-menu__item {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 64px;
        margin: 0;
        padding: 10px 14px;
        border: 0;
        background: transparent;
        color: var(--text-subtle);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .cfg-menu__item + .cfg-menu__item {
        border-top: 1px solid var(--border-soft);
    }

    .cfg-menu__icone {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 12px;
        background: var(--brand-50);
        color: var(--brand-600);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cfg-menu__texto {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-size: 13px;
    }

    .cfg-menu__texto strong {
        font-size: 15px;
        font-weight: 600;
        color: var(--text);
    }
}

/* ---------- Admin ---------- */
.chaves-aviso-celular {
    display: none;
}

@media (max-width: 639.98px) {
    /* Chaves e integrações: só leitura no celular. */
    .ui-page .chaves-aviso-celular {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        border-radius: var(--radius);
        background: var(--info-bg);
        color: var(--info);
        font-size: 14px;
        font-weight: 600;
    }

    .ui-page .chaves-grid :is(input, textarea, select) {
        pointer-events: none;
        background: var(--surface-3);
    }

    .ui-page .chaves-grid .btn {
        display: none;
    }

    /* Usuários (Visão geral) e pagamentos (Financeiro): cada linha vira um cartão com tudo. */
    .ui-page .av-linha--cab,
    .ui-page .af-tlinha--cab {
        display: none !important;
    }

    .ui-page .av-linha,
    .ui-page .af-tlinha {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px 12px;
        padding: 14px 16px;
    }

    .ui-page .av-linha > *,
    .ui-page .af-tlinha > * {
        display: block !important;
        min-width: 0;
    }

    .ui-page .av-linha > :first-child,
    .ui-page .af-tlinha > :first-child {
        grid-column: 1 / -1;
    }

    .ui-page .av-linha > .av-canais {
        display: flex !important;
    }

    .ui-page .av-linha > :nth-child(4)::before { content: "Posts 7d · "; color: var(--text-subtle); }
    .ui-page .av-linha > :nth-child(5)::before { content: "Disco · "; color: var(--text-subtle); }
    .ui-page .af-tlinha > :nth-child(3)::before { content: "Método · "; color: var(--text-subtle); }
    .ui-page .af-tlinha > :nth-child(4)::before { content: "Bruto · "; color: var(--text-subtle); }
    .ui-page .af-tlinha > :nth-child(5)::before { content: "Taxa · "; color: var(--text-subtle); }
    .ui-page .af-tlinha > :nth-child(6)::before { content: "Líquido · "; color: var(--text-subtle); }
}

/* Setas ↑ ↓ para reordenar no toque (arrastar não funciona em tela de toque). */
.ordem-setas {
    display: none;
}

@media (hover: none) {
    .ordem-setas {
        display: inline-flex;
        flex-direction: column;
    }

    .ordem-setas__cima {
        transform: rotate(180deg);
    }
}

/* ---------- Reconexão do Blazor: faixa fina no topo (todas as larguras) ---------- */
#components-reconnect-modal.reconexao {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    padding: 8px 16px calc(8px);
    padding-top: calc(8px + env(safe-area-inset-top));
    background: #0f1020;
    color: #ffffff;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 4px 16px rgba(16, 16, 32, 0.25);
}

#components-reconnect-modal.reconexao a {
    color: #c7d2fe;
}

.reconexao__tentando,
.reconexao__falhou {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: block;
}

#components-reconnect-modal.components-reconnect-show .reconexao__tentando,
#components-reconnect-modal.components-reconnect-failed .reconexao__falhou,
#components-reconnect-modal.components-reconnect-rejected .reconexao__falhou {
    display: inline-flex;
}

/* ---------- Aviso "Instale o IA Max Flow na tela inicial" (celular) ---------- */
.instalar-aviso {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 14px;
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(16, 16, 32, 0.18);
    font-size: 14px;
    font-weight: 600;
    animation: folha-sobe 0.22s ease-out;
}

.instalar-aviso__texto {
    flex: 1 1 auto;
    min-width: 0;
}

.instalar-aviso__acoes {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ---------- Tablet a partir de 768px: lista e detalhe lado a lado ---------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .ui-page .sup-painel,
    .ui-page .sup-painel--admin {
        grid-template-columns: 280px minmax(0, 1fr);
        height: calc(100vh - 170px);
        min-height: 480px;
    }

    .ui-page .sup-lista {
        max-height: none;
        border-bottom: 0;
        border-right: 1px solid var(--border-soft);
    }

    .ui-page .pp {
        grid-template-columns: 260px minmax(0, 1fr);
    }

    .ui-page .pp-editor__corpo {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Tablet abaixo de 768px: Suporte igual ao celular (lista, depois a conversa em tela cheia). */
@media (min-width: 640px) and (max-width: 767.98px) {
    .ui-page .sup-painel {
        display: block;
        height: auto;
        min-height: 0;
    }

    .ui-page .sup-lista {
        max-height: none;
    }

    .ui-page .sup-painel:not(.sup-painel--detalhe) .sup-conteudo,
    .ui-page .sup-painel--detalhe .sup-lista {
        display: none;
    }

    .ui-page .sup-painel--detalhe .sup-voltar {
        display: inline-flex;
        margin: 12px 0 0 12px;
    }
}