/**
 * Qperto — folha de estilo do redesenho de 2026-09-22 (carrega DEPOIS dos CSS originais do tema).
 *
 * Regras desta camada:
 *   • Mantém a identidade de cor (índigo e âmbar); fonte, estrutura e componentes foram
 *     redesenhados por completo, a pedido do usuário, mantendo layout claro/branco.
 *   • Responsivo de verdade em desktop, iPad/tablet e celular.
 *
 * Organização:
 *   1. Base e tokens        5. Página inicial
 *   2. Componentes          6. Acesso (entrar / cadastro)
 *   3. Cabeçalho e rodapé   7. Busca e produto
 *   4. Páginas públicas     8. Painéis (menu, tabelas, formulários, chat)
 *                           9. Cor e legibilidade
 *                          10. Painel do admin: acessos em tempo real
 *                          11. Chamados (contato com o suporte)
 */

/* ==========================================================================
   1. BASE E TOKENS
   ========================================================================== */
:root {
    --m-indigo: #6259f8;
    --m-indigo-dark: #3331c8;
    --m-indigo-darker: #211f8f;
    --m-indigo-soft: #efeeff;
    --m-indigo-rgb: 98, 89, 248;
    --m-amber: #f59e0b;
    --m-amber-dark: #c2790a;
    --m-amber-soft: #fef3e0;
    --m-ink: #14121f;
    --m-ink-2: #1d1a30;
    --m-ink-rgb: 20, 18, 31;
    --m-on-ink: rgba(255, 255, 255, .92);
    --m-on-ink-muted: rgba(255, 255, 255, .56);
    --m-on-ink-line: rgba(255, 255, 255, .09);
    --m-text: #333;
    --m-muted: #656d76;
    --m-line: #e7e9ef;
    --m-field: #d9dde6;
    --m-bg: #f8f9fa;
    --m-surface: #fff;

    --m-radius-sm: 8px;
    --m-radius: 12px;
    --m-radius-lg: 16px;
    --m-radius-xl: 22px;

    --m-shadow-sm: 0 1px 2px rgba(20, 18, 31, .04);
    --m-shadow: 0 1px 1px rgba(20, 18, 31, .04), 0 6px 16px rgba(20, 18, 31, .05);
    --m-shadow-hover: 0 12px 28px -8px rgba(20, 18, 31, .16);
    --m-shadow-indigo: 0 10px 20px -8px rgba(var(--m-indigo-rgb), .45);

    --m-header-h: 74px;
    --m-safe-b: env(safe-area-inset-bottom, 0px);
    --font-display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--m-text);
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv05", "cv11";
}

img { max-width: 100%; height: auto; }
a { transition: color .15s ease; }
::selection { background: var(--m-indigo-soft); color: var(--m-indigo-dark); }
:focus-visible { outline: 2px solid var(--m-indigo); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus-visible { outline: 0; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.18; letter-spacing: -.01em; color: var(--m-ink); text-wrap: balance; }
h1, .h1 { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.65rem); font-weight: 800; }
h2, .h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2rem); font-weight: 800; }
h3, .h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.5rem); }
h4, .h4 { font-size: clamp(1.1rem, 1rem + .4vw, 1.25rem); }
.nav-header, .qm-panel .sidebar .nav > li.nav-header, label, dt, th { font-family: var(--font-display); }

/* Utilitários de tamanho do tema: títulos grandes ficam fluidos */





.container { padding-left: 20px; padding-right: 20px; }
@media (max-width: 575.98px) { .container { padding-left: 16px; padding-right: 16px; } }
@media (min-width: 1400px) { .container { max-width: 1280px; } }

/* Rótulo pequeno em maiúsculas com um traço âmbar — usado para introduzir seções */



/* ==========================================================================
   2. COMPONENTES
   ========================================================================== */

/* ---- Botões ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 46px;
    padding: .6rem 1.2rem;
    border-radius: var(--m-radius-sm);
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.005em;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.btn:hover:not(:disabled):not(.disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled):not(.disabled) { transform: translateY(0); }
.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: 36px; padding: .35rem .9rem; border-radius: 7px; }
.btn-lg { min-height: 54px; padding: .8rem 1.6rem; border-radius: var(--m-radius); }
.btn-indigo { box-shadow: 0 1px 0 rgba(255,255,255,.15) inset; }
.btn-indigo:hover { box-shadow: var(--m-shadow-indigo); }
.btn-warning:hover { box-shadow: 0 10px 20px -8px rgba(245, 158, 11, .45); }
.btn:disabled, .btn.disabled { opacity: .55; box-shadow: none !important; transform: none !important; }

/* ---- Formulários -------------------------------------------------------- */
label { font-weight: 700; color: var(--m-ink); }
.form-control {
    min-height: 46px;
    border-color: var(--m-field);
    border-radius: var(--m-radius);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus { border-color: var(--m-indigo); box-shadow: 0 0 0 4px var(--m-indigo-soft); }
.form-control-sm { min-height: 38px; border-radius: var(--m-radius-sm); }

textarea.form-control { min-height: 96px; }



.custom-control-label { cursor: pointer; }
/* O offset padrão do Bootstrap ("top: .25rem") presume uma linha mais baixa que a deste
   projeto (fonte/line-height maiores) — sem isto, o trilho/bolinha do switch fica visivelmente
   mais alto que o texto do label ao lado. Mesma técnica (top:50% + margin-top negativo) já usada
   em .q-opt para os checkboxes de filtro da busca. */
.custom-switch .custom-control-label::before,
.custom-switch .custom-control-label::after { top: 50%; }
.custom-switch .custom-control-label::before { margin-top: -8px; }
.custom-switch .custom-control-label::after { margin-top: -6px; }
/* Sem zoom automático do iOS/iPadOS ao focar um campo */
@media (max-width: 1024px), (pointer: coarse) {
    .form-control, .form-control-sm, select.form-control, textarea.form-control { font-size: 16px; }
}
@media (pointer: coarse) {
    .btn { min-height: 46px; }
    .btn-sm { min-height: 40px; }
}

/* ---- Cards, sombras e superfícies -------------------------------------- */
.card { border-radius: var(--m-radius); border-color: #eceef3; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }



.shadow { box-shadow: var(--m-shadow-hover) !important; }

.rounded { border-radius: var(--m-radius) !important; }


.img-thumbnail { border-radius: var(--m-radius-sm); }


/* ---- Selos, alertas, paginação, abas ----------------------------------- */
.badge, .label { border-radius: 999px; font-weight: 700; }
.alert { border-radius: var(--m-radius); }
.page-link { min-width: 38px; text-align: center; border-radius: var(--m-radius-sm) !important; margin: 0 2px; font-weight: 600; }
.pagination { flex-wrap: wrap; row-gap: 6px; }
.nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-item { flex: 0 0 auto; }
.nav-tabs .nav-link { font-weight: 600; }
.dropdown-menu { border-radius: var(--m-radius); box-shadow: var(--m-shadow-hover); border-color: var(--m-line); padding: .4rem; }
.dropdown-item { border-radius: var(--m-radius-sm); padding: .5rem .8rem; font-weight: 500; }
.modal-content { border: 0; border-radius: var(--m-radius-lg); box-shadow: 0 24px 60px rgba(16, 24, 40, .25); overflow: hidden; }
@media (max-width: 575.98px) { .modal-dialog { margin: .75rem; } }
.tooltip-inner { border-radius: 8px; }

/* ==========================================================================
   3. CABEÇALHO E RODAPÉ
   ========================================================================== */
body > header { position: sticky; top: 0; z-index: 1030; }
.header {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(1.5) blur(14px);
    backdrop-filter: saturate(1.5) blur(14px);
    border-bottom: 1px solid var(--m-line);
    box-shadow: none;
}
.header .navbar { min-height: var(--m-header-h); padding-top: 0; padding-bottom: 0; align-items: center; }

/* O tema força display:block nos links da navbar; botões dentro dela voltam a ser flex para centrar o texto */
.header .navbar-nav > li > a.btn { display: inline-flex !important; align-items: center; justify-content: center; text-align: center; line-height: 1.2; padding-top: 0 !important; padding-bottom: 0 !important; }


.header .btn-indigo { min-height: 40px; }
/* Dentro da navbar o Bootstrap deixa o menu "estático" (empurra o cabeçalho): mantém-no flutuando sob o botão */
.header .navbar-nav > li.dropdown { position: relative; }
.header .navbar-nav .dropdown-menu.dropdown-menu-right { position: absolute !important; top: 100% !important; right: 0 !important; left: auto !important; transform: none !important; float: none; min-width: 11rem; margin-top: .5rem; }




.footer { background: #fbfbfe; border-top: 1px solid var(--m-line); }
.footer a.text-muted:hover { color: var(--m-indigo) !important; }
.footer h6.f-w-600 { font-size: .75rem; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase; color: var(--m-muted); }
@media (max-width: 767.98px) { .footer .collapse.d-md-block:not(.show) { display: none; } }

/* ==========================================================================
   4. PÁGINAS PÚBLICAS  (sobre, anuncie, vantagens, como funciona, proteção, contato, legais)
   ========================================================================== */
/* Respiro vertical consistente nas seções (o tema usa p-t-10 / p-b-20 fixos) */
.qm-public main > section > .container > [class*="p-t-"],
.qm-public main > section > .container > [class*="p-b-"] {
    padding-top: clamp(8px, 1.3vw, 16px) !important;
    padding-bottom: clamp(8px, 1.3vw, 16px) !important;
}


.qm-public main h3 { font-weight: 600; }


/* Blocos de recurso: cartões limpos em vez de caixas sombreadas */






/* Perguntas frequentes e listas expansíveis */





/* Chamadas em faixa e blocos de destaque */



/* Textos legais: largura de leitura confortável */
.qm-page-terms main p, .qm-page-privacy main p { max-width: 72ch; font-size: 1.0125rem; line-height: 1.75; }

/* Contato */
.qm-page-contact form { max-width: 760px; margin-left: auto; margin-right: auto; }
.qm-page-contact form .btn-lg { width: 100%; }
@media (min-width: 576px) { .qm-page-contact form .btn-lg { width: auto; min-width: 260px; } }

/* ==========================================================================
   5. PÁGINA INICIAL
   ========================================================================== */

/* Home: margens internas menores entre os itens de "Como funciona" */
.qm-page-home .d-flex.mb-4 { margin-bottom: 1rem !important; }

/* Barra de busca (início e resultados): um campo contínuo. O pin fica entre os dois campos,
   sem caixa própria, sem borda e sem cantos arredondados — nada de "quebra" no meio. */




.qm-page-home #search-form .btn-warning, .qm-page-search #search-form .btn-warning { min-height: 52px; }
.qm-page-home .card.h-100 { transition: box-shadow .18s ease, transform .18s ease; }
.qm-page-home a:hover .card.h-100 { box-shadow: var(--m-shadow-hover) !important; transform: translateY(-2px); }


/* Radar (ilustração da busca por proximidade): anéis, pinos de lojas e distâncias direto sobre o
   fundo branco da página, nas cores da marca (índigo nos anéis, pinos e etiquetas; âmbar no centro) */











@keyframes q-radar-pulse { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }



/* Tablet retrato: "Como funciona" ocupa a largura toda em duas colunas (o radar vem abaixo) */


/* Busca em telas pequenas: campos empilhados, sem placeholder cortado */



/* ==========================================================================
   6. ACESSO  (entrar, cadastro, recuperar e redefinir senha)
   ========================================================================== */
.qm-page-signin .card.shadow, .qm-page-signup .card.shadow, .qm-page-auth .card.shadow {
    border: 1px solid #eceef3;
    border-radius: 18px;
    box-shadow: var(--m-shadow-hover) !important;
}
@media (max-width: 575.98px) {
    .qm-page-signin .card.py-4, .qm-page-signup .card.py-4, .qm-page-auth .card.py-4 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
    
}
.qm-page-signin .btn-block, .qm-page-signup .btn-block, .qm-page-auth .btn-block { min-height: 50px; }


/* ==========================================================================
   7. BUSCA E PRODUTO
   ========================================================================== */
/* Resultados: grade de cartões de produto — só a informação necessária para decidir e clicar */
.q-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.q-pcard { display: flex; flex-direction: column; position: relative; overflow: hidden; background: #fff; border: 1px solid #eceef3; border-radius: var(--m-radius-lg); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.q-pcard:hover { border-color: transparent; box-shadow: var(--m-shadow-hover); transform: translateY(-3px); }
.q-pcard__media { display: block; aspect-ratio: 4 / 3; background-color: var(--m-bg); background-position: center; background-size: cover; background-repeat: no-repeat; }
.q-pcard__tag { position: absolute; top: 12px; left: 12px; padding: .3em .7em; font-size: .6875rem; font-weight: 700; color: #fff; background: var(--m-amber-dark); border-radius: 999px; }
.q-pcard__fav { position: absolute; top: 10px; right: 10px; margin: 0; }
.q-pcard__fav button { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; font-size: 1.05rem; color: var(--m-text); background: rgba(255, 255, 255, .92); border: 0; border-radius: 50%; box-shadow: 0 2px 8px rgba(20, 18, 31, .16); transition: color .15s ease, transform .12s ease; }
.q-pcard__fav button:hover { transform: scale(1.08); }
.q-pcard__fav button.is-active { color: #e0245e; }
.q-pcard__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 14px 16px 16px; }
.q-pcard__store { min-width: 0; margin-bottom: .35rem; }
.q-pcard__store-row { display: flex; align-items: center; gap: .3rem; min-width: 0; font-size: .75rem; font-weight: 700; color: var(--m-indigo); }
.q-pcard__store-sub { display: block; margin-top: .15rem; font-size: .6875rem; font-weight: 400; color: var(--m-muted); }
.q-pcard__rating { flex: none; margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--m-muted); }
.q-pcard__title { margin: 0 0 .5rem; min-width: 0; font-size: .9375rem; font-weight: 700; line-height: 1.35; letter-spacing: -.005em; }
.q-pcard__title a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--m-ink); }
.q-pcard__title a:hover { color: var(--m-indigo); }
.q-pcard__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: auto; padding-bottom: .85rem; font-size: .75rem; color: var(--m-muted); }
.q-pcard__meta > span { display: inline-flex; align-items: center; gap: .25rem; min-width: 0; }
.q-pcard__meta .badge { margin-left: auto; }
.q-pcard__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: .85rem; border-top: 1px solid #f0f1f5; }
.q-pcard__price { min-width: 0; line-height: 1.25; }
.q-pcard__price strong { display: block; font-size: 1.1875rem; font-weight: 800; color: var(--m-ink); letter-spacing: -.01em; }
.q-pcard__price small { font-size: .6875rem; color: var(--m-muted); }
@media (max-width: 575.98px) { .q-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* Tablet retrato: filtros recolhidos atrás do botão "Filtros" */
@media (min-width: 768px) and (max-width: 991.98px) {
    .qm-page-search .row > .col-md-4.col-lg-3, .qm-page-search .row > .col-md-8.col-lg-9 { flex: 0 0 100%; max-width: 100%; }
    .qm-page-search button[data-target="#search-filters"] { display: flex !important; }
    .qm-page-search #search-filters:not(.show) { display: none !important; }
}
/* Filtros abertos em telas menores: o cartão é o próprio .q-filters */
@media (max-width: 991.98px) {
    .qm-page-search #search-filters.show { margin-bottom: 1rem; }
    .qm-page-search button[data-target="#search-filters"] { min-height: 44px; align-items: center; justify-content: center; }
}


/* Cabeçalho dos resultados: mesmo acabamento de cartão do menu de filtros ao lado (antes era só
   texto solto no fundo cinza) — título + contagem de um lado, critério de ordenação do outro */
.q-results-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; padding: 14px 18px; background: #fff; border: 1px solid #eceef3; border-radius: var(--m-radius-lg); }
.q-results-title { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--m-text); }


@media (max-width: 575.98px) {
    .q-results-head { flex-direction: column; gap: 6px; }
}

/* Menu de filtros: cartão branco (mesmo acabamento dos resultados), grupos separados por linhas
   leves, opções com contador à direita e área de toque confortável */
.q-filters { background: #fff; border: 1px solid #eceef3; border-radius: var(--m-radius-lg); padding: 2px 18px; }
.q-filters-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 12px; border-bottom: 1px solid #f0f1f5; }
.q-filters-title { font-size: 1rem; font-weight: 600; color: var(--m-text); }
.q-filters-tools { display: flex; align-items: center; gap: 10px; }
.q-filters-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: -6px -8px -6px 0; padding: 0; font-size: 1.35rem; line-height: 1; color: var(--m-text); background: transparent; border: 0; border-radius: 50%; }
.q-filters-close:hover { color: var(--m-indigo-dark); background: var(--m-indigo-soft); }
.q-filters-clear { font-size: .8125rem; font-weight: 500; color: var(--m-indigo); }
.q-filters-clear:hover { color: var(--m-indigo-dark); text-decoration: underline; }
.q-fg { padding: 14px 0 10px; }
.q-fg + .q-fg { border-top: 1px solid #f0f1f5; }
.q-fg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.q-fg-title { font-size: .875rem; font-weight: 600; color: var(--m-text); }
.q-fg-value { font-size: .8125rem; font-weight: 600; color: var(--m-indigo-dark); font-variant-numeric: tabular-nums; }
.q-fg-note { margin: 0 0 4px; font-size: .8125rem; color: var(--m-muted); }

/* Opções: a linha toda é clicável; nome à esquerda, contador alinhado à direita */
.q-opt { padding-left: 1.75rem; min-height: 0; }
.q-opt .custom-control-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 36px; padding: 5px 0; font-size: .9rem; line-height: 1.3; color: var(--m-text); cursor: pointer; }
.q-opt .custom-control-label::before, .q-opt .custom-control-label::after { top: 50%; left: -1.75rem; width: 1.125rem; height: 1.125rem; margin-top: -.5625rem; }
.q-opt-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.q-opt-count { flex: none; font-size: .8125rem; color: var(--m-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 991.98px), (pointer: coarse) {
    .q-opt .custom-control-label { min-height: 44px; }
}

/* Preço: prefixo "R$" dentro do campo (sem emenda nem canto quebrado) */
.q-price { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.q-money { position: relative; display: block; margin: 0; }
.q-money > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: .8125rem; font-weight: 500; color: var(--m-muted); pointer-events: none; }
.q-money > .form-control { height: 42px; padding-left: 34px; }

/* Aplicar (celular e iPad retrato): barra fixa no fim do painel */
.q-filters-apply { position: sticky; bottom: 0; z-index: 2; margin: 6px -18px 0; padding: 12px 18px calc(12px + var(--m-safe-b)); background: #fff; border-top: 1px solid #f0f1f5; border-radius: 0 0 var(--m-radius-lg) var(--m-radius-lg); }
.q-filters-apply .btn { min-height: 46px; font-weight: 600; }

/* Desktop: o menu acompanha a rolagem (com rolagem própria se passar da altura da tela) */
@media (min-width: 992px) {
    .qm-page-search #search-filters > .q-filters { position: sticky; top: calc(var(--m-header-h) + 24px); max-height: calc(100vh - var(--m-header-h) - 44px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}

/* Contador de filtros aplicados no botão "Filtros" (celular) */
.q-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: 8px; padding: 0 6px; font-size: .75rem; font-weight: 600; line-height: 1; color: #fff; background: var(--m-indigo); border-radius: 999px; }
.btn:hover > .q-count, .btn:focus > .q-count, .btn:active > .q-count { color: var(--m-indigo); background: #fff; }

/* Produto: galeria à esquerda + coluna de informações à direita, em um único cartão de compra
   sticky (desktop) seguido de blocos de informação (loja, descrição, especificações, comparar) */
.q-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-bottom: 14px; font-size: .8125rem; font-weight: 600; color: var(--m-muted); }
.q-crumbs i { color: #c7cad3; }
.q-crumbs .is-current { color: var(--m-ink); }

.q-gallery-card { background: #fff; border: 1px solid #eceef3; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); overflow: hidden; }
.q-gallery-card .carousel-inner { border-radius: 0; }
.product-gallery-main { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: #fbfbfd; overflow: hidden; }
.product-gallery-main img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.q-gallery-thumbs { display: flex; justify-content: center; gap: 8px; padding: 14px; overflow-x: auto; scrollbar-width: none; }
.q-gallery-thumbs::-webkit-scrollbar { display: none; }
.product-gallery-thumb { width: 64px; height: 64px; flex-shrink: 0; object-fit: cover; border: 2px solid #eceef3; border-radius: var(--m-radius-sm); cursor: pointer; transition: border-color .15s ease, opacity .15s ease; opacity: .7; }
.product-gallery-thumb:hover, .product-gallery-thumb.is-active { border-color: var(--m-indigo); opacity: 1; }
@media (max-width: 991.98px) { .gallery { margin-bottom: 1.25rem; } }

.q-ptitle h1 { margin: 0 0 .5rem; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 700; line-height: 1.25; }
.q-ptitle__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 1rem; }
.q-ptitle__rating { display: inline-flex; align-items: center; gap: .3rem; font-size: .8125rem; font-weight: 700; color: var(--m-ink); }

/* Cartão de compra: preço, ações (favoritar / compartilhar / reservar) — acompanha a rolagem no
   desktop; no celular a barra fixa (.q-buybar) resolve o mesmo problema por conta própria */
.q-buy-card { padding: 20px; margin-bottom: 16px; background: #fff; border: 1px solid #eceef3; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); }
@media (min-width: 992px) { .q-buy-card { position: sticky; top: calc(var(--m-header-h) + 16px); z-index: 2; } }
.q-buy-card__price { margin-bottom: 16px; }
.q-buy-card__label { display: block; margin-bottom: 2px; font-size: .8125rem; color: var(--m-muted); font-weight: 600; }
.q-buy-card__price strong { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -.015em; color: var(--m-ink); }
.q-buy-card__price small { display: block; margin-top: 2px; color: var(--m-muted); }
.q-buy-card__actions { display: flex; align-items: stretch; gap: 10px; }
.q-buy-card__actions > form:not([action*="reserve"]) { margin: 0 !important; }
.q-buy-card__actions .flex-fill, .q-buy-card__actions form:first-child { flex: 1 1 auto; min-width: 0; }
.q-buy-card .btn-block { min-height: 50px; font-size: 1rem; }
.q-buy-card .q-icon-btn { flex: 0 0 auto; width: 50px; min-height: 50px; padding: 0; }
.q-buy-card .q-icon-btn.is-active { color: #fff; background-color: #e0245e; border-color: #e0245e; }

.q-reserve-row { gap: 10px; width: 100%; }
.qty-stepper { display: inline-flex; align-items: stretch; flex: 0 0 auto; height: 50px; overflow: hidden; background: #fff; border: 1px solid var(--m-field); border-radius: var(--m-radius); }
.qty-stepper .qty-step { display: inline-flex; align-items: center; justify-content: center; width: 42px; padding: 0; font-size: 1.15rem; color: var(--m-text); background: transparent; border: 0; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.qty-stepper .qty-step:hover { color: var(--m-indigo-dark); background: var(--m-indigo-soft); }
.qty-stepper .qty-step:focus-visible { outline: 2px solid var(--m-indigo); outline-offset: -3px; }
.qty-stepper .qty-input { width: 44px; min-width: 0; padding: 0; font-size: 1rem; font-weight: 700; color: var(--m-text); text-align: center; background: transparent; border: 0; box-shadow: none; }

/* Avatar circular da loja no cartão "Sobre a loja" do produto — logo (qualquer formato/proporção) contido dentro de um círculo com uma margem visível, nunca esticado nem cortado nas bordas */
.q-store-mini__avatar { flex: 0 0 50px; width: 50px; height: 50px; box-sizing: border-box; background-color: var(--m-bg); background-position: center; background-size: contain; background-repeat: no-repeat; background-origin: content-box; background-clip: content-box; border: 1px solid #eceef3; border-radius: 50%; }

/* Blocos de informação: um único cartão pode conter várias seções (descrição, especificações...) */
.q-info-card { margin-bottom: 16px; padding: 4px 20px; background: #fff; border: 1px solid #eceef3; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow-sm); }
.q-info-block { padding: 16px 0; }
.q-info-block + .q-info-block { border-top: 1px solid #f0f1f5; }
.q-info-block h2 { margin: 0 0 .6rem; font-size: 1rem; font-weight: 700; }
.q-info-block p { margin: 0; font-size: .875rem; line-height: 1.65; color: var(--m-text); }
.q-specs { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 0; font-size: .875rem; }
.q-specs dt { color: var(--m-muted); font-weight: 600; }
.q-specs dd { margin: 0; font-weight: 600; }





/* Celular: barra fixa com preço e botão quando o cartão de reserva sai da tela */
.q-buybar { display: none; }
@media (max-width: 767.98px) {
    .q-buybar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1020; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + var(--m-safe-b)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--m-line); box-shadow: 0 -6px 20px rgba(16, 24, 40, .08); transition: transform .2s ease; }
    .q-buybar.is-hidden { transform: translateY(110%); }
    .q-buybar__price { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
    .q-buybar__price strong { font-size: 1.25rem; font-weight: 600; white-space: nowrap; }
    .q-buybar__price small { font-size: .75rem; color: var(--m-muted); }
    .q-buybar .btn { flex: 1 1 auto; min-height: 48px; }
    body.qm-has-buybar { padding-bottom: calc(72px + var(--m-safe-b)); }
}

/* ==========================================================================
   8. PAINÉIS  (lojista, cliente e administração)
   ========================================================================== */
.qm-panel main > section { padding-bottom: 1rem; }
.qm-panel main > section > .container > [class*="p-t-"] { padding-top: clamp(16px, 2.5vw, 28px) !important; padding-bottom: clamp(20px, 3vw, 40px) !important; }
.qm-panel .content .card { margin-bottom: 0; }
.qm-panel .content .alert { margin-bottom: 1rem; }
.qm-panel .form-control-sm { min-height: 42px; font-size: .9375rem; border-radius: var(--m-radius); }
.qm-panel .btn-sm { min-height: 36px; }

/* Menu lateral dos painéis: agora desenhado pelo "app shell" do template.php — ver a seção 12 (NOVO LAYOUT) no fim deste arquivo. */

/* Tabelas -> cartões no celular (cada linha vira um cartão; data-label vem do markup) */
@media (max-width: 767.98px) {
    .q-table-stack, .q-table-stack tbody, .q-table-stack tr, .q-table-stack td { display: block; width: 100% !important; }
    .q-table-stack { table-layout: auto !important; }
    .q-table-stack thead { display: none; }
    .q-table-stack tbody tr { padding: .85rem 1rem; margin-bottom: .75rem; background: #fff; border: 1px solid #eceef3; border-radius: var(--m-radius-lg); }
    .q-table-stack tbody tr:hover { background: #fff; }
    .q-table-stack td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem 0 !important; border: 0 !important; text-align: right; max-width: none !important; }
    .q-table-stack td::before { content: attr(data-label); flex: 0 0 34%; text-align: left; color: #8b94a3; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
    .q-table-stack td.q-cell-main { justify-content: flex-start; text-align: left; padding-bottom: .65rem !important; margin-bottom: .3rem; border-bottom: 1px solid #f0f1f5 !important; }
    .q-table-stack td.q-cell-main::before, .q-table-stack td.q-cell-actions::before { display: none; }
    .q-table-stack td.q-cell-actions { justify-content: flex-start; padding-top: .7rem !important; margin-top: .3rem; border-top: 1px solid #f0f1f5 !important; }
    
    .q-table-stack td.q-cell-main .text-truncate { max-width: none !important; overflow: visible; text-overflow: clip; white-space: normal; }
    
    
    .q-table-stack td.q-cell-actions .btn { margin: 0 !important; }
    .q-table-stack tfoot, .q-table-stack tfoot tr, .q-table-stack tfoot td { display: block; background: transparent; border: 0 !important; box-shadow: none; padding: .5rem 0 0 !important; }
    .q-table-stack tfoot td::before { display: none; }
}
/* Administração: tabelas largas viram cartões (2 colunas) até notebooks pequenos e iPad paisagem */

/* Tabelas dos painéis em telas médias: células compactas em vez de rolar para o lado */




/* Formulários dos painéis (loja, produto, perfil): blocos e pré-visualizações mais atuais */

.qm-panel #product-gallery-main { border-radius: var(--m-radius-lg) !important; }
@media (max-width: 767.98px) {
    .qm-panel #product-gallery-main { height: auto !important; aspect-ratio: 1 / 1; max-height: 320px !important; }
    #leaflet { height: 220px !important; }
    
}
.qm-panel #leaflet { border-radius: var(--m-radius) !important; overflow: hidden; }

/* Chat: bolhas e campos mais arredondados; alturas acompanham a tela real do aparelho.
   As bolhas usavam bg-primary do tema-base (azul #1c6ed0), fora da identidade índigo/âmbar
   do resto do site — .q-bubble-* substitui isso pelos tokens da marca. */

.qm-panel .chat-messages p.rounded { border-radius: 16px !important; max-width: 86%; margin-bottom: .25rem; }


.qm-panel .q-bubble { font-size: .9375rem; line-height: 1.5; box-shadow: var(--m-shadow-sm); }
.qm-panel .q-bubble--mine { background: var(--m-indigo); color: #fff; }
.qm-panel .q-bubble--theirs { background: #f1f2f7; color: var(--m-text); }


.qm-panel #chat-input-area .form-control { border-radius: 999px !important; padding-left: 1.1rem; border-color: var(--m-field); }
.qm-panel #chat-input-area .form-control:focus { border-color: var(--m-indigo); box-shadow: 0 0 0 .15rem var(--m-indigo-soft); }
.qm-panel #chat-input-area .btn { width: 46px; border-radius: 50% !important; padding: 0; }
.qm-panel #chat-input-area .btn.btn-indigo:hover { background: var(--m-indigo-dark); border-color: var(--m-indigo-dark); }
.qm-panel .back-to-list { width: 38px; height: 38px; padding: 0 !important; color: var(--m-text); background: #fff !important; border: 1px solid var(--m-field) !important; border-radius: 10px; }
.qm-panel .back-to-list:hover { color: var(--m-indigo-dark); background: var(--m-indigo-soft) !important; border-color: var(--m-indigo-soft) !important; }

/* Chat: lista de conversas (aside) */









/* Chat: cabeçalho da conversa aberta */



/* Chat: cartão de reserva embutido na linha do tempo */





/* ==========================================================================
   9. COR E LEGIBILIDADE
   As cores continuam as da marca. Aqui elas só saem do limite de leitura (contraste
   4,5:1), o azul padrão do tema (#1c6ed0) cede lugar ao índigo e os textos ganham um
   tamanho mínimo.
   ========================================================================== */

/* Texto secundário: o tema usa #a2a2a2 (2,5:1) */
.text-muted { color: var(--m-muted) !important; }

/* Piso de leitura: os utilitários de 8–11px do tema passam a 12px */

.badge { font-size: .75rem; }


/* Botão âmbar: texto escuro (o branco dava 2,2:1); no hover, o mesmo âmbar um tom abaixo */
.btn-warning, .btn-warning:hover, .btn-warning:focus, .btn-warning.disabled, .btn-warning:disabled,
.btn-warning:not(:disabled):not(.disabled):active { color: var(--m-text) !important; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:not(:disabled):not(.disabled):active { background-color: #e58e06 !important; border-color: #e58e06 !important; }

/* Selo "Aberto" (verde-água): um tom mais fundo para o texto branco passar de 4,5:1 */
.badge-green, .badge.badge-green { background: #0b807e; color: #fff; }

/* Índigo da marca */
.btn-indigo, .btn-indigo.disabled, .btn-indigo:disabled { background-color: var(--m-indigo); border-color: var(--m-indigo); }


.text-indigo { color: var(--m-indigo) !important; }
.btn-outline-indigo, .btn-outline-indigo.disabled, .btn-outline-indigo:disabled { color: var(--m-indigo); border-color: var(--m-indigo); }
.btn-outline-indigo:hover, .btn-outline-indigo:not(:disabled):not(.disabled).active, .btn-outline-indigo:not(:disabled):not(.disabled):active,
.show > .btn-outline-indigo.dropdown-toggle { color: #fff; background-color: var(--m-indigo); border-color: var(--m-indigo); }

/* O azul padrão do tema vira o índigo da marca: links, botões "primary", marcadores e foco */
a { color: var(--m-indigo); }
a:hover { color: var(--m-indigo-dark); }

.btn-primary, .btn-primary.disabled, .btn-primary:disabled { color: #fff; background-color: var(--m-indigo); border-color: var(--m-indigo); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle { color: #fff; background-color: var(--m-indigo-dark); border-color: var(--m-indigo-dark); }


.text-primary { color: var(--m-indigo) !important; }



.page-link { color: var(--m-indigo); }
.page-link:hover { color: var(--m-indigo-dark); }
.page-item.active .page-link { color: #fff; background-color: var(--m-indigo); border-color: var(--m-indigo); }
.dropdown-item.active, .dropdown-item:active, .list-group-item.active { background-color: var(--m-indigo); border-color: var(--m-indigo); }

.btn:focus, .btn.focus, .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem rgba(98, 89, 248, .25); }

.custom-control-input:checked ~ .custom-control-label::before, .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { border-color: var(--m-indigo); background-color: var(--m-indigo); }
.custom-range::-webkit-slider-thumb { background-color: var(--m-indigo); }
.custom-range::-moz-range-thumb { background-color: var(--m-indigo); }
.custom-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(98, 89, 248, .25); }
.custom-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(98, 89, 248, .25); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--m-indigo); }



/* Botão de remover foto (miniaturas do produto): círculo perfeito no canto da miniatura.
   Os botões trazem 20×20px inline; a altura mínima dos botões pequenos os esticava em oval.
   Fica DENTRO da própria miniatura (não pendurado metade para fora) — pendurado para fora
   dependia da miniatura vizinha para "ancorar" visualmente o botão a um canto; na última
   miniatura da fileira (vizinha do botão "Adicionar", mais apagado) isso sobrava sem nada
   ao lado para ancorar, e o X parecia flutuar solto em vez de ficar no canto.
   O "×" (caractere de texto) nunca ficava de fato centralizado dentro do círculo — a métrica
   da fonte para esse glifo não é simétrica, então mesmo com flexbox centralizando a LINHA, o
   próprio traço do × sobrava para um lado. Trocado por um ícone da fonte rmx (ri-close-line),
   desenhado para ocupar sua caixa de forma simétrica — mesmo problema resolvido de vez. */
.btn[data-toggle-remove], .btn[data-remove-persisted], .btn[data-remove-new] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px !important;
    height: 22px !important;
    min-width: 0;
    min-height: 0;
    padding: 0 !important;
    font-size: 13px;
    line-height: 1;
    border: 2px solid #fff;
    border-radius: 50% !important;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .3);
    top: 2px !important;
    right: 2px !important;
}

/* Faixa de totais do painel de produtos: quatro números lado a lado com divisórias; 2×2 no celular */



/* Avisos de canto: topo à direita no computador, embaixo no celular (acima da barra de reserva).
   Sucesso/informação somem sozinhos (barra de tempo embaixo); erro só fecha no ×. */
.qm-toasts { position: fixed; top: 88px; right: 24px; z-index: 2000; display: grid; gap: 10px; width: 380px; max-width: calc(100vw - 32px); pointer-events: none; }
.qm-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    overflow: hidden;
    padding: 12px 10px 12px 12px;
    border: 1px solid var(--m-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 40px -16px rgba(20, 18, 31, .3);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: auto;
    transition: opacity .2s ease, transform .2s ease;
}
.qm-toast.is-visible { opacity: 1; transform: none; }
.qm-toast__ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; font-size: 1.1rem; }
.qm-toast--success .qm-toast__ico { background: #e4f6ec; color: #0f9f5a; }
.qm-toast--info .qm-toast__ico { background: var(--m-indigo-soft); color: var(--m-indigo); }
.qm-toast--error { border-color: #fecdca; }
.qm-toast--error .qm-toast__ico { background: #fef3f2; color: #d92d20; }
.qm-toast__msg { flex: 1; min-width: 0; margin: 0; padding-top: 6px; color: var(--m-ink); font-size: .875rem; font-weight: 600; line-height: 1.4; }
.qm-toast__x { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-top: 2px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--m-muted); font-size: 1.1rem; cursor: pointer; }
.qm-toast__x:hover { background: #f2f3f8; color: var(--m-ink); }
.qm-toast__x:focus-visible { outline: 2px solid var(--m-indigo); outline-offset: 1px; }
.qm-toast--success::after, .qm-toast--info::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; animation: qm-toast-time 4.5s linear forwards; }
.qm-toast--success::after { background: #0f9f5a; }
.qm-toast--info::after { background: var(--m-indigo); }
.qm-toast.is-held::after { animation: none; }
@keyframes qm-toast-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 767.98px) {
    .qm-toasts { top: auto; right: 16px; left: 16px; bottom: calc(16px + var(--m-safe-b)); width: auto; max-width: none; }
    .qm-toast { transform: translateY(8px); }
    body.qm-has-buybar .qm-toasts { bottom: calc(88px + var(--m-safe-b)); }
    /* Painel: acima da barra de abas de baixo */
    body:has(.qx-tabbar) .qm-toasts { bottom: calc(var(--qx-tab-h, 64px) + 12px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .qm-toast { transition: none; } .qm-toast::after { animation: none !important; } }

/* Aviso da última ação que vira aviso de canto: com JavaScript não pisca como faixa antes */
.qm-js [data-flash-toast] { display: none; }

/* Resumo no topo do formulário (erro de campo, ou aviso das telas públicas) */
.qp-formsum { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px; padding: 13px 16px; border: 1px solid #fecdca; border-radius: 14px; background: #fef3f2; color: #7a271a; font-size: .875rem; line-height: 1.45; }
.qp-formsum > i { flex: none; margin-top: 1px; color: #d92d20; font-size: 1.15rem; }
.qp-formsum strong { display: block; color: #7a271a; font-family: var(--font-display); }
.qp-formsum--success { border-color: #b7e4cb; background: #ecfdf3; color: #05603a; }
.qp-formsum--success > i { color: #0f9f5a; }
.qp-formsum--info { border-color: rgba(var(--m-indigo-rgb), .25); background: var(--m-indigo-soft); color: var(--m-indigo-dark); }
.qp-formsum--info > i { color: var(--m-indigo); }

/* Campo com erro: borda vermelha e a mensagem embaixo */
.qp-invalid .qx-field__control,
.qp-invalid .form-control,
.qp-invalid .qp-affix em { border-color: #d92d20 !important; }
.qp-invalid .qx-field__control,
.qp-invalid .form-control:focus { box-shadow: 0 0 0 4px rgba(217, 45, 32, .1) !important; }
.qp-invalid .qx-field__control > i { color: #d92d20; }
.qp-invalid .qx-field__help { display: none; }
.qp-checks.qp-invalid .qp-check { border-color: #fda29b; }
.qp-gallery.qp-invalid .qp-gallery__add { border-color: #d92d20; color: #d92d20; }
.qx-check.qp-invalid input, .qp-check.qp-invalid input { outline: 2px solid #d92d20; outline-offset: 1px; }
.qx-check + .qp-ferr, .qp-check + .qp-ferr { margin: -2px 0 4px; }
.qp-week.qp-invalid .qp-week__day input { outline: 2px solid #d92d20; outline-offset: 1px; }
.qp-week__row + .qp-ferr, .qp-exc + .qp-ferr { margin: 0 0 6px; }
.qp-ferr { display: flex; align-items: flex-start; gap: 6px; margin-top: 7px; color: #b42318; font-family: var(--font-body); font-size: .8rem; font-weight: 600; line-height: 1.35; }
.qp-ferr i { flex: none; margin-top: 1px; font-size: .95rem; }

/* ==========================================================================
   10. PAINEL DO ADMIN: ACESSOS EM TEMPO REAL
   Mapa vetorial do Brasil (SVG) com bolhas por estado que viram cidades no zoom.
   ========================================================================== */





.q-live__status { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--m-muted); }
.q-live__pulse { flex: none; width: 8px; height: 8px; background: #9aa1ab; border-radius: 50%; }
.q-live__status.is-live .q-live__pulse { background: #12b76a; animation: q-live-ping 2s ease-out infinite; }
.q-live__status.is-error .q-live__pulse { background: #d92d20; }
@keyframes q-live-ping { 0% { box-shadow: 0 0 0 0 rgba(18, 183, 106, .55); } 100% { box-shadow: 0 0 0 9px rgba(18, 183, 106, 0); } }

.q-live__mapbox { position: relative; overflow: hidden; background: #f8f9fc; border: 1px solid #eceef3; border-radius: var(--m-radius-lg); }
.q-live__svg { display: block; width: 100%; height: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.q-live__svg.is-drag { cursor: grabbing; }
.q-live__state { fill: #e9ecf6; stroke: #fff; stroke-width: 1px; vector-effect: non-scaling-stroke; transition: fill .5s ease; }
.q-live__state:hover { stroke: var(--m-indigo); stroke-width: 1.6px; }
.q-live__lbl { fill: #6b7280; font-family: inherit; font-weight: 600; pointer-events: none; }
.q-live__captxt { fill: #4b5563; font-family: inherit; pointer-events: none; }
.q-live__capdot { fill: #9aa1ab; pointer-events: none; }
.q-live__caps { display: none; }
.q-live__svg.is-deep .q-live__caps { display: inline; }
.q-live__lvl-city { display: none; }
.q-live__svg.is-city .q-live__lvl-city { display: inline; }
.q-live__svg.is-city .q-live__lvl-state { display: none; }
.q-live__dot { fill: var(--m-amber); stroke: #fff; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.q-live__halo { fill: rgba(245, 158, 11, .35); transform-box: fill-box; transform-origin: center; animation: q-live-pulse 2.4s ease-out infinite; pointer-events: none; }
.q-live__bubble text { fill: #333; font-family: inherit; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
@keyframes q-live-pulse { 0% { opacity: .6; transform: scale(.7); } 100% { opacity: 0; transform: scale(2.1); } }
@media (prefers-reduced-motion: reduce) {
    .q-live__halo, .q-live__status.is-live .q-live__pulse { animation: none; }
}

.q-live__ctrl { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; }
.q-live__ctrl button { width: 36px; height: 36px; padding: 0; font-size: 1.15rem; line-height: 1; color: var(--m-text); cursor: pointer; background: #fff; border: 1px solid var(--m-line); border-radius: 10px; box-shadow: var(--m-shadow); }
.q-live__ctrl button:hover { color: var(--m-indigo-dark); background: var(--m-indigo-soft); }
.q-live__tip { position: absolute; z-index: 3; max-width: 240px; padding: .35rem .65rem; font-size: .8125rem; line-height: 1.3; color: #fff; pointer-events: none; background: var(--m-text); border-radius: 8px; box-shadow: var(--m-shadow-hover); }
.q-live__empty { position: absolute; bottom: 14px; left: 50%; padding: .4rem .9rem; font-size: .8125rem; color: var(--m-muted); white-space: nowrap; pointer-events: none; background: rgba(255, 255, 255, .92); border: 1px solid var(--m-line); border-radius: 999px; transform: translateX(-50%); }


.q-live__list { margin: 0 0 1.25rem; padding: 0; list-style: none; }
.q-live__row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: .5rem .6rem .6rem; overflow: hidden; font-size: .875rem; color: var(--m-text); text-align: left; cursor: pointer; background: transparent; border: 0; border-radius: 8px; }
.q-live__row:hover { background: var(--m-indigo-soft); }
.q-live__row small { margin-left: .35rem; color: var(--m-muted); }
.q-live__row strong { font-variant-numeric: tabular-nums; }
.q-live__bar { position: absolute; bottom: 0; left: 0; height: 3px; background: rgba(98, 89, 248, .45); border-radius: 0 3px 3px 0; }
.q-live__none { padding: .45rem .6rem; font-size: .875rem; color: var(--m-muted); }




/* ==========================================================================
   11. CHAMADOS  (contato do lojista/cliente com o suporte + formulário do site)
   Mesma estrutura de e-mail do tema (.inbox, .list-email, .nav-inbox, .email-*), mas com o
   acabamento do resto do redesenho 2026-09-22: cartão branco arredondado, pastas como pílulas
   (mesma linguagem do menu lateral dos painéis), sem cinza — só branco, linhas suaves e índigo.
   ========================================================================== */





















/* coluna de pastas: mesma pílula índigo do menu lateral dos painéis */









/* Sem box-shadow aqui pelo mesmo motivo do .sidebar .nav (acima): blur de 30px borrando
   por cima da pasta vizinha com só 2px de espaço entre elas. */




/* lista: por padrão duas linhas por chamado (remetente + situação / assunto / prévia); quando a
   caixa é larga o bastante, uma linha só, como no modelo */







/* avatar maior e mais forte que o padrão do tema (30px) — mais perto do modelo original */



/* não lido = negrito (como num e-mail de verdade); lido fica no peso normal acima */






/* ==========================================================================
   11b. SUPORTE (lojista/cliente/administração) — chamados simplificados
   2026-09-29: o modelo "caixa de e-mail" (pastas/checkbox em lote/paginação) fazia sentido
   pro Formulário do site (seção 11 acima, continua igual — volume real, sem conta de usuário
   pra abrir um painel próprio), mas era chrome demais pra uma conta que abre 1-3 chamados na
   vida inteira. Reaproveita a casca .q-desk (borda/raio/sombra) e as bolhas .q-bubble* já
   usadas em Mensagens (seção 8) — mesma identidade visual, sem inventar cor nova.
   ========================================================================== */


















.q-support-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .6875rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; }
.q-support-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.q-support-pill--open { background: var(--m-amber-soft); color: #a3660a; }
.q-support-pill--answered { background: #e5f6f5; color: #0b807e; }
.q-support-pill--closed { background: #f0f1f5; color: var(--m-muted); }



.q-support-thread-body { flex: 1; min-height: 0; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.q-support-msg { max-width: 78%; }
.q-support-msg.is-mine { align-self: flex-end; text-align: right; }
.q-support-msg__who { font-size: .75rem; font-weight: 700; color: var(--m-muted); margin-bottom: 3px; }
.q-support-msg__time { font-size: .6875rem; color: var(--m-muted); margin-top: 4px; }
.q-support-thread-input { display: flex; align-items: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid #f0f1f5; }
.q-support-thread-input textarea { flex: 1; border: 1px solid var(--m-field); border-radius: var(--m-radius); padding: .7rem 1.1rem; font-size: .9375rem; font-family: inherit; resize: none; max-height: 140px; }
.q-support-thread-input textarea:focus { outline: none; border-color: var(--m-indigo); }
.q-support-thread-input .btn { width: 46px; height: 46px; border-radius: 50% !important; padding: 0; flex: 0 0 auto; }
.q-support-thread-input .btn:hover { background: var(--m-indigo-dark); border-color: var(--m-indigo-dark); }




.q-support-back { width: 38px; height: 38px; padding: 0 !important; color: var(--m-text); background: #fff !important; border: 1px solid var(--m-field) !important; border-radius: 10px; }
.q-support-back:hover { color: var(--m-indigo-dark); background: var(--m-indigo-soft) !important; border-color: var(--m-indigo-soft) !important; }


/* ==========================================================================
   12. AÇÕES EM LISTA SEM RECARREGAR A PÁGINA
   Caixa de confirmação própria (substitui o confirm() nativo do navegador nos botões
   "Excluir"/"Cancelar reserva") usada pelo script de ações AJAX (zkygfoeegi.js, 5ª parte).
   ========================================================================== */
.qm-confirm-overlay { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 18, 31, .45); }
.qm-confirm-box { width: 100%; max-width: 360px; padding: 20px; background: #fff; border-radius: var(--m-radius-lg); box-shadow: 0 24px 60px rgba(16, 24, 40, .25); }
.qm-confirm-msg { margin: 0 0 16px; color: var(--m-ink); font-size: .9375rem; line-height: 1.5; }
.qm-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }






@container qdesk (min-width: 660px) {
    .q-desk .list-email > li.list-group-item { align-items: center; }
    .q-desk .list-email > li.list-group-item .email-info > a { flex-wrap: nowrap; align-items: center; margin: -10px -16px; padding: 10px 16px; }
    .q-desk .list-email > li.list-group-item .email-sender { order: 0; flex: 0 0 150px; padding-right: 12px; }
    .q-desk .list-email > li.list-group-item .email-title { order: 0; flex: 0 1 auto; max-width: 44%; padding-right: 10px; }
    .q-desk__status { order: 0; margin-right: 0; }
    .q-desk .list-email > li.list-group-item .email-desc { order: 0; position: relative; flex: 1 1 0; min-width: 0; padding: 0 82px 0 20px; }
    .q-desk .list-email > li.list-group-item .email-desc:before { display: block; content: ''; position: absolute; left: 6px; top: 8px; width: 4px; height: 4px; background: #c7cad3; border-radius: 6px; }
    .q-desk .list-email > li.list-group-item .email-time { top: 50%; transform: translateY(-50%); }
}





/* chamado aberto: cabeçalho de e-mail (avatar, De, data, Para) e o texto de cada mensagem */






















/* escrever chamado: "Para", tipo, assunto e mensagem */











/* barra de baixo (Descartar / Enviar) */



/* @@APPEND@@ */


/* ==========================================================================
   12. NOVO LAYOUT (2026-09-30)
   App shell dos painéis (menu lateral fixo, barra superior, barra de abas no celular)
   + cabeçalho e rodapé novos do site público. Marcação em application/views/template.php.
   ========================================================================== */
:root {
    --qx-side-w: 264px;
    --qx-top-h: 68px;
    --qx-tab-h: 64px;
    --qx-canvas: #f4f5f9;
    --qx-card-line: #e9ebf2;
}

/* ---- Botão de ícone ---------------------------------------------------- */
.qx-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--m-line);
    border-radius: 11px;
    background: #fff;
    color: var(--m-text);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.qx-iconbtn:hover { background: var(--m-indigo-soft); color: var(--m-indigo-dark); border-color: transparent; }

/* ---- App shell --------------------------------------------------------- */
body.qx-shell { background: var(--qx-canvas); }
.qx-app { min-height: 100vh; }

.qx-side {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    width: var(--qx-side-w);
    padding: 20px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .15) transparent;
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(var(--m-indigo-rgb), .28), transparent 60%),
        linear-gradient(180deg, var(--m-ink-2) 0%, var(--m-ink) 55%);
    color: var(--m-on-ink);
}
.qx-side__brand { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px 20px; }
.qx-side__logo img { display: block; height: 30px; width: auto; filter: brightness(0) invert(1); }
.qx-side__close { display: none; background: transparent; border-color: var(--m-on-ink-line); color: var(--m-on-ink); }
.qx-side__close:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.qx-side__area {
    align-self: flex-start;
    margin: 0 8px 14px;
    padding: 5px 11px;
    border: 1px solid var(--m-on-ink-line);
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--m-on-ink-muted);
}

/* O tema-base estiliza ".sidebar" (fundo branco, translateZ, left:-220px no celular) — neutraliza tudo aqui. */
.qx-side .sidebar {
    position: static !important;
    left: auto !important;
    flex: 1 1 auto;
    height: auto !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}
.qx-side .sidebar::after { display: none !important; }
.qx-side .nav { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 3px; padding: 0; margin: 0; }
.qx-side .nav > li { margin: 0 !important; }
.qx-side .nav > li > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 11px;
    background: transparent;
    color: var(--m-on-ink-muted);
    font-family: var(--font-display);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.qx-side .nav > li > a i.rmx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 20px;
    height: 20px;
    font-size: 1.15rem;
    color: inherit;
    background: none !important;
}
.qx-side .nav > li > a span:not(.badge) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* O tema-base dá flex:1 a todo <span> dentro dos links do menu — o selo também é <span>. */
.qx-side .nav > li > a .badge { flex: none !important; width: auto !important; }
.qx-side .nav > li > a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.qx-side .nav > li > a.active {
    background: linear-gradient(135deg, var(--m-indigo), #7a72ff);
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(var(--m-indigo-rgb), .9), 0 1px 0 rgba(255, 255, 255, .18) inset;
}
.qx-side .nav .badge,
.qx-tabbar .badge {
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--m-amber) !important;
    color: #1d1400 !important;
    font-size: .6875rem;
    font-weight: 800;
    line-height: 1;
}

.qx-side__foot { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--m-on-ink-line); }
.qx-side__site { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 11px; color: var(--m-on-ink-muted); font-weight: 600; font-size: .875rem; text-decoration: none !important; }
.qx-side__site i { font-size: 1.1rem; }
.qx-side__site:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.qx-side__user { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--m-on-ink-line); }
.qx-side__user img { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #fff; }
.qx-side__who { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.qx-side__who strong { overflow: hidden; color: #fff; font-size: .8125rem; white-space: nowrap; text-overflow: ellipsis; }
.qx-side__who small { color: var(--m-on-ink-muted); font-size: .7rem; }
.qx-side__user .qx-iconbtn { width: 34px; height: 34px; border-color: var(--m-on-ink-line); background: transparent; color: var(--m-on-ink-muted); font-size: 1rem; }
.qx-side__user .qx-iconbtn:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.qx-scrim { display: none; }

.qx-main { display: flex; flex-direction: column; min-height: 100vh; margin-left: var(--qx-side-w); }
.qx-top {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 14px;
    height: var(--qx-top-h);
    padding: 0 clamp(16px, 3vw, 36px);
    background: rgba(244, 245, 249, .86);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--m-line);
}
.qx-top__menu { display: none; }
.qx-top__title { flex: 1 1 auto; min-width: 0; line-height: 1.15; }
.qx-top__title small { display: block; margin-bottom: 3px; font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--m-muted); }
.qx-top__title h1 { margin: 0; overflow: hidden; font-size: 1.35rem; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.qx-top__actions { display: flex; align-items: center; gap: 10px; }
.qx-top__user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border: 1px solid var(--m-line);
    border-radius: 999px;
    background: #fff;
    color: var(--m-ink) !important;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.qx-top__user:hover { border-color: var(--m-field); box-shadow: var(--m-shadow-sm); }
.qx-top__user img { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.qx-top__user span { max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }


.qx-content { flex: 1 1 auto; padding: clamp(16px, 2.6vw, 32px) clamp(16px, 3vw, 36px) 48px; }

/* As views dos painéis ainda vêm embrulhadas em section > container > row > col-md-9
   (herança do layout antigo com menu por página) — aqui esse invólucro fica neutro e o
   conteúdo usa toda a área disponível do shell. */
body.qx-shell .qx-content > section { padding: 0 !important; background: transparent !important; }
body.qx-shell .qx-content > section > .container { max-width: 1320px; margin: 0 auto; padding: 0; }
body.qx-shell .qx-content > section > .container > [class*="p-t-"] { padding: 0 !important; }
body.qx-shell .qx-content > section > .container > div > .row { margin: 0; }
body.qx-shell .qx-content > section > .container > div > .row > [class*="col-md-9"] { flex: 0 0 100%; max-width: 100%; padding: 0; }

/* Superfícies dentro do shell: cartões brancos com borda fina e sombra mínima */
body.qx-shell .qx-content .card { border: 1px solid var(--qx-card-line) !important; border-radius: 16px; box-shadow: 0 1px 2px rgba(20, 18, 31, .04) !important; }



/* Abas: controle segmentado em vez de sublinhado */
body.qx-shell .qx-content .nav-tabs {
    gap: 4px;
    max-width: 100%;
    padding: 4px;
    border: 0;
    border-radius: 12px;
    background: #eaecf3;
}
body.qx-shell .qx-content .nav-tabs:not(.d-flex) { display: inline-flex; }
body.qx-shell .qx-content .nav-tabs .nav-item { margin: 0; }
body.qx-shell .qx-content .nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    padding: .5rem .95rem !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--m-muted);
    font-family: var(--font-display);
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}
body.qx-shell .qx-content .nav-tabs .nav-link:hover { color: var(--m-ink); }
body.qx-shell .qx-content .nav-tabs .nav-link.active { background: #fff !important; color: var(--m-ink); box-shadow: 0 1px 3px rgba(20, 18, 31, .12); }

/* Tabelas */
body.qx-shell .qx-content .table thead th { background: #f7f8fb; border-top: 0; border-bottom: 1px solid var(--m-line); color: var(--m-muted); font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
body.qx-shell .qx-content .table td { border-color: #f0f1f6; vertical-align: middle; }

/* Números de destaque dos cartões de estatística */



/* ---- Barra de abas (celular) ------------------------------------------- */
.qx-tabbar { display: none; }

/* Tablet e iPad em retrato: menu lateral vira gaveta */
@media (max-width: 991.98px) {
    .qx-side {
        width: min(300px, 86vw);
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease;
        box-shadow: none;
    }
    body.qx-drawer-open .qx-side { transform: translateX(0); box-shadow: 24px 0 60px rgba(0, 0, 0, .35); }
    body.qx-drawer-open { overflow: hidden; }
    .qx-side__close { display: inline-flex; }
    .qx-scrim {
        position: fixed;
        inset: 0;
        z-index: 1035;
        display: block;
        background: rgba(20, 18, 31, .45);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }
    body.qx-drawer-open .qx-scrim { opacity: 1; pointer-events: auto; }
    .qx-main { margin-left: 0; }
    .qx-top__menu { display: inline-flex; }
}

/* Celular / iPhone: barra de abas fixa embaixo, estilo aplicativo */
@media (max-width: 767.98px) {
    .qx-top { height: 60px; padding: 0 16px; }
    .qx-top__menu { display: none; }
    .qx-top__title small { font-size: .625rem; }
    .qx-top__title h1 { font-size: 1.125rem; }
    .qx-top__user { padding: 3px; }
    .qx-content { padding: 16px 16px calc(var(--qx-tab-h) + 28px + env(safe-area-inset-bottom, 0px)); }

    .qx-tabbar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
        display: flex;
        height: calc(var(--qx-tab-h) + env(safe-area-inset-bottom, 0px));
        padding: 0 4px env(safe-area-inset-bottom, 0px);
        background: rgba(255, 255, 255, .94);
        -webkit-backdrop-filter: saturate(1.6) blur(16px);
        backdrop-filter: saturate(1.6) blur(16px);
        border-top: 1px solid var(--m-line);
    }
    .qx-tab {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        padding: 6px 2px 2px;
        border: 0;
        background: none;
        color: var(--m-muted);
        font-family: var(--font-display);
        font-size: .65rem;
        font-weight: 600;
        text-decoration: none !important;
        cursor: pointer;
    }
    .qx-tab:focus { outline: 0; }
    .qx-tab__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 30px; border-radius: 999px; font-size: 1.25rem; transition: background-color .15s ease, color .15s ease; }
    .qx-tab__label { max-width: 100%; overflow: hidden; padding: 0 2px; white-space: nowrap; text-overflow: ellipsis; }
    .qx-tab.active { color: var(--m-indigo-dark); }
    .qx-tab.active .qx-tab__icon { background: var(--m-indigo-soft); color: var(--m-indigo); }
    .qx-tabbar .badge { position: absolute !important; top: -3px !important; right: 4px !important; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid #fff; font-size: .625rem; }
}

/* ---- Cabeçalho público ------------------------------------------------- */
.qx-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    backdrop-filter: saturate(1.6) blur(16px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.qx-header.is-scrolled { border-bottom-color: var(--m-line); box-shadow: 0 8px 28px -18px rgba(20, 18, 31, .28); }
.qx-header__inner { display: flex; align-items: center; gap: 24px; height: 74px; }
.qx-logo { flex: none; }
.qx-logo img { display: block; height: 34px; width: auto; }
.qx-nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.qx-nav a { padding: 8px 15px; border-radius: 999px; color: var(--m-text); font-size: .9rem; font-weight: 600; text-decoration: none !important; transition: background-color .15s ease, color .15s ease; }
.qx-nav a:hover { background: #f1f2f7; color: var(--m-ink); }
.qx-nav a.active { background: var(--m-indigo-soft); color: var(--m-indigo-dark); }
.qx-header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.qx-header__ghost { align-items: center; padding: 9px 15px; border-radius: 11px; color: var(--m-ink) !important; font-size: .9rem; font-weight: 600; text-decoration: none !important; }
.qx-header__ghost:hover { background: #f1f2f7; }
.qx-header__cta { min-height: 42px; padding: .5rem 1.15rem; }
.qx-burger { display: none; }
.qx-mnav { background: #fff; border-top: 1px solid var(--m-line); box-shadow: 0 24px 40px -24px rgba(20, 18, 31, .3); padding: 6px 0 18px; }
.qx-mnav a:not(.btn) { display: flex; align-items: center; justify-content: space-between; padding: 15px 2px; border-bottom: 1px solid #f0f1f5; color: var(--m-ink); font-family: var(--font-display); font-size: 1rem; font-weight: 600; text-decoration: none !important; }
.qx-mnav a:not(.btn) i { color: var(--m-muted); font-size: 1.2rem; }
.qx-mnav__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.qx-mnav__cta > :only-child { grid-column: 1 / -1; }
@media (max-width: 991.98px) {
    .qx-nav { display: none; }
    .qx-burger { display: inline-flex; }
    .qx-header__inner { height: 64px; gap: 12px; }
    .qx-logo img { height: 30px; }
}

/* ---- Rodapé público ---------------------------------------------------- */
.qx-footer { padding: 56px 0 28px; background: var(--m-ink); color: var(--m-on-ink-muted); }
.qx-footer__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 52px;
    padding: 30px 34px;
    border-radius: 22px;
    background:
        radial-gradient(80% 140% at 100% 0%, rgba(245, 158, 11, .28), transparent 55%),
        linear-gradient(120deg, var(--m-indigo-dark), var(--m-indigo) 65%);
    box-shadow: 0 30px 60px -30px rgba(var(--m-indigo-rgb), .9);
}
.qx-footer__cta h2 { margin: 0 0 6px; color: #fff; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.qx-footer__cta p { margin: 0; color: rgba(255, 255, 255, .82); }
.qx-footer__cta .btn { flex: none; }
.qm-page-signup .qx-footer__cta, .qm-page-advertise .qx-footer__cta, .qm-page-signin .qx-footer__cta { display: none; }
.qx-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px; border-bottom: 1px solid var(--m-on-ink-line); }
.qx-footer__brand img { display: block; height: 32px; width: auto; margin-bottom: 16px; filter: brightness(0) invert(1); }
.qx-footer__brand p { max-width: 34ch; margin: 0; line-height: 1.65; }
.qx-footer__col { display: flex; flex-direction: column; gap: 11px; }
.qx-footer__col h6 { margin-bottom: 4px; color: #fff; font-family: var(--font-display); font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.qx-footer__col a { color: var(--m-on-ink-muted); font-size: .9rem; text-decoration: none !important; transition: color .15s ease; }
.qx-footer__col a:hover { color: #fff; }
.qx-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 22px; font-size: .8rem; }
@media (max-width: 991.98px) {
    .qx-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
    .qx-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .qx-footer { padding-top: 40px; }
    .qx-footer__cta { flex-direction: column; align-items: flex-start; margin-bottom: 40px; padding: 24px; }
    .qx-footer__cta .btn { width: 100%; }
    .qx-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
}


/* ---- Blocos públicos compartilhados (novo layout) ----------------------- */
.qx-page { display: block; }
.qx-chip { display: inline-flex; align-items: center; gap: .45rem; padding: 6px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--m-indigo-soft); color: var(--m-indigo-dark); }
.qx-chip--dark { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .86); border: 1px solid rgba(255, 255, 255, .12); }
.qx-chip--dark i { color: var(--m-amber); }









/* ---- Página inicial: hero -------------------------------------------- */
.qx-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 9vw, 112px) 0 clamp(48px, 7vw, 84px);
    background:
        radial-gradient(60% 80% at 85% 10%, rgba(var(--m-indigo-rgb), .45), transparent 60%),
        radial-gradient(40% 60% at 10% 100%, rgba(245, 158, 11, .18), transparent 60%),
        linear-gradient(180deg, var(--m-ink-2), var(--m-ink));
    color: #fff;
}
.qx-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
    mask-image: linear-gradient(180deg, #000, transparent 85%);
    pointer-events: none;
}
.qx-hero .container { position: relative; z-index: 1; }
.qx-hero__inner { max-width: 880px; margin: 0 auto; text-align: center; }
.qx-hero__title { margin: 22px 0 16px; color: #fff; font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.9rem) !important; font-weight: 800; line-height: 1.06; letter-spacing: -.03em; }
.qx-hero__title span { background: linear-gradient(90deg, #a9a4ff, var(--m-amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qx-hero__lead { max-width: 60ch; margin: 0 auto 32px; color: rgba(255, 255, 255, .72); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.6; }

.qx-search {
    display: flex;
    align-items: stretch;
    gap: 8px;
    max-width: 820px;
    margin: 0 auto;
    padding: 8px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
    text-align: left;
}
.qx-search__field { position: relative; display: flex; align-items: center; margin: 0; font-weight: 400; cursor: text; }
.qx-search__field--q { flex: 6 1 0; }
.qx-search__field--c { flex: 4 1 0; border-left: 1px solid var(--m-line); }
.qx-search__field > i { position: absolute; left: 16px; color: var(--m-muted); font-size: 1.2rem; pointer-events: none; }
.qx-search__field--c > i { color: var(--m-indigo); }
.qx-search__field input { width: 100%; height: 56px; padding: 0 14px 0 46px; border: 0; border-radius: 14px; background: transparent; color: var(--m-ink); font-size: 16px; font-weight: 500; outline: 0; }
.qx-search__field input::placeholder { color: #9aa0ab; }
.qx-search__field:focus-within { background: #f6f7fb; border-radius: 14px; }
.qx-search__btn { flex: none; min-height: 56px; padding: 0 28px; border-radius: 14px; font-size: 1rem; }






@media (max-width: 767.98px) {
    .qx-search { flex-direction: column; padding: 8px; border-radius: 18px; }
    .qx-search__field--c { border-left: 0; border-top: 1px solid var(--m-line); }
    .qx-search__btn { width: 100%; }
    .qx-hero__inner { text-align: left; }
    .qx-hero__lead { margin-left: 0; }
    
    
    
}

/* ---- Página inicial: em alta ----------------------------------------- */









/* ---- Página inicial: como funciona ----------------------------------- */











/* ---- Página inicial: por que o Qperto -------------------------------- */














/* ---- Busca: faixa superior e resultados (novo layout) ------------------ */
.qx-searchbar {
    padding: 22px 0;
    background:
        radial-gradient(50% 120% at 90% 0%, rgba(var(--m-indigo-rgb), .4), transparent 60%),
        linear-gradient(180deg, var(--m-ink-2), var(--m-ink));
}
.qx-search--compact { max-width: none; padding: 6px; border-radius: 16px; box-shadow: 0 20px 44px -24px rgba(0, 0, 0, .6); }
.qx-search--compact .qx-search__field input { height: 50px; }
.qx-search--compact .qx-search__btn { min-height: 50px; }
.qx-results { padding: 28px 0 64px; background: #f6f7fb; }
.qx-results .row { margin-left: -12px; margin-right: -12px; }
.qx-results .row > [class*="col-"] { padding-left: 12px; padding-right: 12px; }

.qm-page-search .q-results-head { align-items: center; margin-bottom: 18px; padding: 0; background: transparent; border: 0; border-radius: 0; }
.qm-page-search .q-results-title { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 800; color: var(--m-ink); }
.qx-sort { display: inline-flex; flex: none; gap: 4px; padding: 4px; border-radius: 12px; background: #e9ebf2; }
.qx-sort__opt { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 13px; border-radius: 9px; color: var(--m-muted); font-family: var(--font-display); font-size: .8125rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.qx-sort__opt input { position: absolute; opacity: 0; pointer-events: none; }
.qx-sort__opt:hover { color: var(--m-ink); }
.qx-sort__opt.is-active, .qx-sort__opt:has(input:checked) { background: #fff; color: var(--m-ink); box-shadow: 0 1px 3px rgba(20, 18, 31, .12); }
.qx-sort__opt:has(input:focus-visible) { outline: 2px solid var(--m-indigo); outline-offset: 1px; }

.qm-page-search .q-filters { padding: 4px 20px; border: 1px solid var(--qx-card-line); border-radius: 18px; box-shadow: 0 1px 2px rgba(20, 18, 31, .04); }
.qm-page-search .q-filters-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--m-ink); }
.qm-page-search .q-fg-title { font-family: var(--font-display); font-size: .8125rem; font-weight: 700; color: var(--m-ink); }
.qm-page-search #search-filters > .q-filters { top: calc(var(--m-header-h) + 20px); }

/* Cartão de produto */
.q-grid { gap: 16px; }
.q-pcard { border: 1px solid var(--qx-card-line); border-radius: 18px; box-shadow: 0 1px 2px rgba(20, 18, 31, .04); }
.q-pcard:hover { border-color: rgba(var(--m-indigo-rgb), .3); box-shadow: 0 22px 44px -22px rgba(20, 18, 31, .3); transform: translateY(-4px); }
.q-pcard__media {
    margin: 8px 8px 0;
    padding: 16px;
    border-radius: 13px;
    background-color: #f5f6fa;
    background-origin: content-box;
    background-size: contain;
    /* Fotos de catálogo vêm com fundo branco: multiply funde esse branco com o cinza do bloco. */
    background-blend-mode: multiply;
}
.q-pcard__tag { top: 18px; left: 18px; background: var(--m-ink); letter-spacing: .02em; }
.q-pcard__fav { top: 16px; right: 16px; }
.q-pcard__body { padding: 14px 16px 16px; }
.q-pcard__store-row { color: var(--m-indigo-dark); font-family: var(--font-display); font-size: .72rem; }
.q-pcard__title { font-family: var(--font-display); font-size: .92rem; font-weight: 700; }
.q-pcard__foot { padding-top: 12px; border-top-color: #f0f1f6; }
.q-pcard__price strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

@media (max-width: 767.98px) {
    .qx-searchbar { padding: 14px 0; }
    .qm-page-search .q-results-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 575.98px) {
    .q-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .q-pcard__media { margin: 6px 6px 0; padding: 10px; }
    .q-pcard__body { padding: 10px 12px 12px; }
    .q-pcard__price strong { font-size: 1.05rem; }
}


/* ---- Página de produto (novo layout) ----------------------------------- */
.qx-product { padding: 8px 0 72px; background: #f6f7fb; }
.qx-product .q-crumbs { margin-bottom: 18px; }
.qx-product .row { margin-left: -14px; margin-right: -14px; }
.qx-product .row > [class*="col-"] { padding-left: 14px; padding-right: 14px; }

.qx-product .q-gallery-card { padding: 10px; border: 1px solid var(--qx-card-line); border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(20, 18, 31, .04); }
.qx-product .product-gallery-main { border-radius: 18px !important; background: #f5f6fa; }
.qx-product .product-gallery-main img { mix-blend-mode: multiply; padding: 6%; }
.qx-product .q-gallery-thumbs { gap: 8px; padding: 10px 2px 2px; }
.qx-product .product-gallery-thumb { border-radius: 12px; background: #f5f6fa; mix-blend-mode: multiply; }

.qx-pstore { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; padding: 5px 12px 5px 5px; border: 1px solid var(--qx-card-line); border-radius: 999px; background: #fff; color: var(--m-text) !important; font-size: .8125rem; text-decoration: none !important; transition: border-color .15s ease, box-shadow .15s ease; }
.qx-pstore:hover { border-color: rgba(var(--m-indigo-rgb), .35); box-shadow: 0 6px 16px -10px rgba(20, 18, 31, .3); }
.qx-pstore__logo { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fff center / cover no-repeat; box-shadow: 0 0 0 1px var(--m-line); }
.qx-pstore__name { color: var(--m-ink); font-family: var(--font-display); font-weight: 700; }
.qx-pstore__check { color: var(--m-indigo); }
.qx-pstore__sep { color: var(--m-field); }
.qx-pstore__where { color: var(--m-muted); }
.qx-pstore__open { margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: #f0f1f5; color: var(--m-muted); font-size: .7rem; font-weight: 700; }
.qx-pstore__open.is-open { background: #e5f7ee; color: #127a45; }

.qx-product .q-ptitle h1 { margin-bottom: 10px; font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; }

.qx-product .q-buy-card { padding: 24px; border: 1px solid var(--qx-card-line); border-radius: 22px; background: #fff; box-shadow: 0 24px 48px -32px rgba(20, 18, 31, .35); }
.qx-product .q-buy-card__label { color: var(--m-muted); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.qx-product .q-buy-card__price strong { font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.qx-product .q-buy-card .btn-indigo { min-height: 52px; font-size: 1rem; }
.qx-perks { display: grid; gap: 8px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid #f0f1f6; list-style: none; }
.qx-perks li { display: flex; align-items: center; gap: 10px; color: var(--m-text); font-size: .875rem; }
.qx-perks i { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--m-indigo-soft); color: var(--m-indigo); font-size: .95rem; }

.qx-product .q-info-card { margin-top: 16px; padding: 22px 24px; border: 1px solid var(--qx-card-line); border-radius: 22px; background: #fff; box-shadow: none; }
.qx-product .q-info-block h2 { margin-bottom: 10px; font-size: 1rem; font-weight: 800; }
.qx-product .q-info-block + .q-info-block { margin-top: 18px; padding-top: 18px; border-top: 1px solid #f0f1f6; }
.qx-product .q-store-mini__avatar { border-radius: 14px; box-shadow: 0 0 0 1px var(--m-line); }


/* ---- Telas de acesso: entrar, cadastro, senha, 2FA (novo layout) ------- */
.qm-page-auth .qx-footer__cta { display: none; }
.qx-auth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: calc(100vh - 74px); background: #fff; }
.qx-auth__aside {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: clamp(40px, 6vw, 88px) clamp(28px, 5vw, 72px);
    background:
        radial-gradient(70% 60% at 100% 0%, rgba(var(--m-indigo-rgb), .5), transparent 60%),
        radial-gradient(50% 50% at 0% 100%, rgba(245, 158, 11, .22), transparent 60%),
        linear-gradient(180deg, var(--m-ink-2), var(--m-ink));
    color: #fff;
}
.qx-auth__aside::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; }
.qx-auth__aside-inner { position: relative; z-index: 1; max-width: 440px; }
.qx-auth__aside h2 { margin: 22px 0 30px; color: #fff; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; }
.qx-auth__points { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.qx-auth__points li { display: flex; gap: 14px; }
.qx-auth__points i { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); color: var(--m-amber); font-size: 1.15rem; }
.qx-auth__points strong { display: block; color: #fff; font-family: var(--font-display); font-size: .95rem; }
.qx-auth__points span { color: rgba(255, 255, 255, .62); font-size: .875rem; }

.qx-auth__main { display: flex; align-items: center; justify-content: center; padding: clamp(32px, 5vw, 72px) 20px; }
.qx-auth__card { width: 100%; max-width: 440px; }
.qx-auth__card h1 { margin: 0 0 8px; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: 800; letter-spacing: -.025em; }
.qx-auth__lead { margin: 0 0 26px; color: var(--m-muted); font-size: .95rem; line-height: 1.55; }
.qx-auth__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 16px; background: var(--m-indigo-soft); color: var(--m-indigo); font-size: 1.5rem; }
.qx-auth__foot { margin: 22px 0 0; color: var(--m-muted); font-size: .9rem; text-align: center; }
.qx-auth__foot a { font-weight: 700; }
.qx-auth__note { margin: 0 0 6px; color: var(--m-muted); font-size: .85rem; text-align: center; }

.qx-auth__switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 26px; padding: 4px; border-radius: 13px; background: #eef0f5; }
.qx-auth__switch a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 10px; color: var(--m-muted); font-family: var(--font-display); font-size: .875rem; font-weight: 700; text-decoration: none !important; }
.qx-auth__switch a.is-active { background: #fff; color: var(--m-ink); box-shadow: 0 1px 3px rgba(20, 18, 31, .12); }

.qx-auth__divider { display: flex; align-items: center; gap: 12px; margin: 26px 0 14px; color: var(--m-muted); font-size: .8125rem; }
.qx-auth__divider::before, .qx-auth__divider::after { content: ''; flex: 1; height: 1px; background: var(--m-line); }
.qx-auth__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qx-choice { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--m-line); border-radius: 14px; color: var(--m-ink) !important; text-decoration: none !important; transition: border-color .15s ease, background-color .15s ease; }
.qx-choice:hover { border-color: rgba(var(--m-indigo-rgb), .4); background: var(--m-indigo-soft); }
.qx-choice i { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: #f2f3f8; color: var(--m-indigo); font-size: 1.15rem; }
.qx-choice strong { display: block; font-family: var(--font-display); font-size: .875rem; }
.qx-choice small { color: var(--m-muted); font-size: .75rem; }

/* Campos do novo layout */
.qx-form { display: grid; gap: 16px; }
.qx-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qx-field { display: block; margin: 0; }
.qx-field__label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; color: var(--m-ink); font-family: var(--font-display); font-size: .8125rem; font-weight: 700; }
.qx-field__aside { font-family: var(--font-body); font-size: .8125rem; font-weight: 600; }
.qx-field__hint { color: var(--m-muted); font-family: var(--font-body); font-size: .72rem; font-weight: 500; }
.qx-field__help { display: block; margin-top: 6px; color: var(--m-muted); font-size: .78rem; }
.qx-field__control { position: relative; display: flex; align-items: center; min-height: 50px; border: 1px solid var(--m-field); border-radius: 13px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.qx-field__control:focus-within { border-color: var(--m-indigo); box-shadow: 0 0 0 4px var(--m-indigo-soft); }
.qx-field__control > i { flex: none; margin-left: 15px; color: var(--m-muted); font-size: 1.1rem; }
.qx-field__control input { flex: 1 1 auto; width: 100%; min-width: 0; height: 48px; padding: 0 14px 0 11px; border: 0; border-radius: 13px; background: transparent; color: var(--m-ink); font-size: 16px; outline: 0; }
.qx-field__control input:first-child { padding-left: 15px; }
.qx-check { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 4px; color: var(--m-text); font-size: .875rem; font-weight: 400; line-height: 1.45; cursor: pointer; }
.qx-check input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--m-indigo); }
.qx-otp { width: 100%; height: 64px; border: 1px solid var(--m-field); border-radius: 14px; color: var(--m-ink); font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; letter-spacing: .5em; text-align: center; text-indent: .5em; outline: 0; transition: border-color .15s ease, box-shadow .15s ease; }
.qx-otp:focus { border-color: var(--m-indigo); box-shadow: 0 0 0 4px var(--m-indigo-soft); }
.qx-qr { display: flex; justify-content: center; margin: 4px 0 18px; padding: 18px; border: 1px solid var(--m-line); border-radius: 18px; background: #fff; }
.qx-secret { margin: 0 0 22px; text-align: center; }
.qx-secret code { display: inline-block; padding: 8px 12px; border-radius: 10px; background: #f3f4f8; color: var(--m-ink); font-size: .95rem; letter-spacing: .06em; }

@media (max-width: 991.98px) {
    .qx-auth { grid-template-columns: 1fr; min-height: 0; }
    .qx-auth__aside { display: none; }
    .qx-auth__main { padding: 32px 20px 56px; }
}
@media (max-width: 400px) {
    .qx-form__row, .qx-auth__choices { grid-template-columns: 1fr; }
}


/* ---- Páginas institucionais (sobre, anuncie, vantagens, como funciona, proteção,
        contato, termos, privacidade): faixa de título escura + blocos em cartões ---- */















.qm-public main.qx-page > section:last-of-type { padding-bottom: clamp(40px, 6vw, 80px); }
.qm-public main.qx-page h3 { font-weight: 800; letter-spacing: -.015em; }

/* Blocos de valor/recurso viram cartões */







/* ---- Painéis: botões de ação só com ícone (listas, cartões) ----------
   ":only-child" ignora texto solto ("Adicionar <i>"), então botões com rótulo ficam de fora
   pela classe (btn-yellow) — os de ação da lista não têm texto e usam as cores abaixo. */
.qx-shell .qx-content .btn-sm:not(.btn-yellow):not(.btn-block):is([data-toggle="tooltip"], [aria-label]):has(> i.rmx:only-child) {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: none !important;
    font-size: 1rem;
    transform: none !important;
}
.qx-shell .qx-content .btn-sm.btn-warning:is([data-toggle="tooltip"], [aria-label]):has(> i.rmx:only-child) { background: var(--m-amber-soft); color: var(--m-amber-dark); }
.qx-shell .qx-content .btn-sm.btn-primary:is([data-toggle="tooltip"], [aria-label]):has(> i.rmx:only-child),
.qx-shell .qx-content .btn-sm.btn-indigo:is([data-toggle="tooltip"], [aria-label]):has(> i.rmx:only-child) { background: var(--m-indigo-soft); color: var(--m-indigo); }
.qx-shell .qx-content .btn-sm.btn-danger:is([data-toggle="tooltip"], [aria-label]):has(> i.rmx:only-child) { background: #fdecef; color: #d92d4a; }
.qx-shell .qx-content .btn-sm.btn-success:is([data-toggle="tooltip"], [aria-label]):has(> i.rmx:only-child) { background: #e3f6ec; color: #148a4f; }
.qx-shell .qx-content .btn-sm.btn-warning:is([data-toggle="tooltip"], [aria-label]):has(> i.rmx:only-child):hover:not(:disabled) { background: var(--m-amber); color: #fff; }
.qx-shell .qx-content .btn-sm.btn-primary:is([data-toggle="tooltip"], [aria-label]):has(> i.rmx:only-child):hover:not(:disabled),
.qx-shell .qx-content .btn-sm.btn-indigo:is([data-toggle="tooltip"], [aria-label]):has(> i.rmx:only-child):hover:not(:disabled) { background: var(--m-indigo); color: #fff; }
.qx-shell .qx-content .btn-sm.btn-danger:is([data-toggle="tooltip"], [aria-label]):has(> i.rmx:only-child):hover:not(:disabled) { background: #e5364f; color: #fff; }
.qx-shell .qx-content .btn-sm.btn-success:is([data-toggle="tooltip"], [aria-label]):has(> i.rmx:only-child):hover:not(:disabled) { background: #1aa060; color: #fff; }

/* Selects e campos pequenos do painel */
.qx-shell .qx-content select.form-control-sm { padding-right: 2rem; border-radius: 11px; font-weight: 600; color: var(--m-ink); }
.qx-shell .qx-content .form-control { border-radius: 12px; }
.qx-shell .qx-content .form-control:focus { border-color: var(--m-indigo); box-shadow: 0 0 0 4px var(--m-indigo-soft); }
.qx-shell .qx-content label { font-family: var(--font-display); font-size: .8125rem; }

/* Alertas mais discretos no painel */
.qx-shell .qx-content .alert { border: 1px solid transparent; border-radius: 14px; }
.qx-shell .qx-content .alert-green { border-color: #bfe9d2; background: #eefaf3; color: #13663b; }
.qx-shell .qx-content .alert-warning { border-color: #f6dcaa; background: #fff8eb; color: #8a5a06; }

/* Paginação */
.qx-shell .qx-content .page-link { border-color: var(--qx-card-line); color: var(--m-ink); }
.qx-shell .qx-content .page-item.active .page-link { border-color: var(--m-ink); background: var(--m-ink); color: #fff; }


/* ==========================================================================
   13. TEMA CLARO (2026-09-30) — visual final: claro e limpo, com as cores originais
   (índigo #6259f8, âmbar #f59e0b, superfícies brancas e #f8f9fa). Sobrepõe as
   superfícies escuras das seções 12.x; a estrutura (shell, grids) continua a mesma.
   ========================================================================== */

/* ---- Painéis: menu lateral branco -------------------------------------- */
body.qx-shell { background: var(--m-bg); }
.qx-side {
    background: #fff;
    border-right: 1px solid var(--m-line);
    color: var(--m-text);
    scrollbar-color: var(--m-field) transparent;
}
.qx-side__logo img { filter: none; height: 32px; }
.qx-side__close { background: #fff; border-color: var(--m-line); color: var(--m-text); }
.qx-side__close:hover { background: var(--m-indigo-soft); color: var(--m-indigo-dark); }
.qx-side__area { border-color: var(--m-line); background: var(--m-bg); color: var(--m-muted); }
.qx-side .nav > li > a { color: var(--m-text); }
.qx-side .nav > li > a i.rmx {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #eef0f6 !important;
    color: var(--m-muted);
    font-size: 1.05rem;
}
.qx-side .nav > li > a:hover { background: var(--m-indigo-soft); color: var(--m-indigo-dark); }
.qx-side .nav > li > a:hover i.rmx { background: #fff !important; color: var(--m-indigo); }
.qx-side .nav > li > a.active { background: var(--m-indigo); color: #fff; box-shadow: 0 8px 18px -10px rgba(var(--m-indigo-rgb), .8); }
.qx-side .nav > li > a.active i.rmx { background: rgba(255, 255, 255, .18) !important; color: #fff; }
.qx-side .nav .badge { color: #fff !important; }
.qx-side .nav > li > a.active .badge { background: rgba(255, 255, 255, .25) !important; }
.qx-side__foot { border-top-color: var(--m-line); }
.qx-side__site { color: var(--m-muted); }
.qx-side__site:hover { background: var(--m-indigo-soft); color: var(--m-indigo-dark); }
.qx-side__user { border-color: var(--m-line); background: var(--m-bg); }
.qx-side__who strong { color: var(--m-ink); }
.qx-side__who small { color: var(--m-muted); }
.qx-side__user img { box-shadow: 0 0 0 1px var(--m-line); }
.qx-side__user .qx-iconbtn { border-color: var(--m-line); background: #fff; color: var(--m-muted); }
.qx-side__user .qx-iconbtn:hover { background: #fdecef; border-color: transparent; color: #d92d4a; }
.qx-top { background: rgba(255, 255, 255, .92); }
.qx-tabbar .badge { color: #fff !important; }

/* ---- Site público: cabeçalho e topo da home ---------------------------- */
.qx-chip--dark { border: 0; background: var(--m-indigo-soft); color: var(--m-indigo-dark); }
.qx-chip--dark i, .qx-chip i { color: var(--m-indigo); }
.qx-hero {
    background:
        radial-gradient(55% 70% at 85% 0%, rgba(var(--m-indigo-rgb), .10), transparent 65%),
        radial-gradient(45% 60% at 5% 100%, rgba(245, 158, 11, .08), transparent 65%),
        var(--m-bg);
    border-bottom: 1px solid var(--m-line);
    color: var(--m-text);
}
.qx-hero::after { display: none; }
.qx-hero__title { color: var(--m-ink); }
.qx-hero__title span { background: none; color: var(--m-indigo); -webkit-text-fill-color: currentColor; }
.qx-hero__lead { color: var(--m-muted); }
.qx-search { border: 1px solid var(--m-line); box-shadow: 0 20px 44px -28px rgba(20, 18, 31, .35); }


.qx-searchbar { background: var(--m-bg); border-bottom: 1px solid var(--m-line); }
.qx-search--compact { box-shadow: 0 10px 24px -18px rgba(20, 18, 31, .3); }







/* ---- Rodapé claro ------------------------------------------------------ */
.qx-footer { background: #fbfbfe; border-top: 1px solid var(--m-line); color: var(--m-muted); }
.qx-footer__cta { background: var(--m-indigo-soft); box-shadow: none; }
.qx-footer__cta h2 { color: var(--m-ink); }
.qx-footer__cta p { color: var(--m-text); }
.qx-footer__grid { border-bottom-color: var(--m-line); }
.qx-footer__brand img { filter: none; }
.qx-footer__col h6 { color: var(--m-muted); }
.qx-footer__col a { color: var(--m-text); }
.qx-footer__col a:hover { color: var(--m-indigo); }

/* ---- Telas de acesso: lateral clara ------------------------------------ */
.qx-auth__aside {
    background:
        radial-gradient(70% 60% at 100% 0%, rgba(var(--m-indigo-rgb), .12), transparent 60%),
        var(--m-bg);
    border-right: 1px solid var(--m-line);
    color: var(--m-text);
}
.qx-auth__aside::after { display: none; }
.qx-auth__aside h2 { color: var(--m-ink); }
.qx-auth__points i { background: #fff; border-color: var(--m-line); color: var(--m-indigo); }
.qx-auth__points strong { color: var(--m-ink); }
.qx-auth__points span { color: var(--m-muted); }
/* Mesma largura do cabeçalho: as duas colunas ficam dentro da faixa central do site
   (texto alinhado com o logo, formulário com o botão Entrar); o fundo cinza da lateral
   continua indo até a borda da tela pelo ::before. */
@media (min-width: 992px) {
    .qx-auth { --qx-wrap: 960px; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); padding-inline: max(0px, (100% - var(--qx-wrap)) / 2); overflow: hidden; }
    .qx-auth__aside { isolation: isolate; overflow: visible; justify-content: flex-start; padding-left: 20px; padding-right: clamp(24px, 4vw, 64px); background: none; }
    .qx-auth__aside::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: -100vw; z-index: -1; background: radial-gradient(70% 60% at 100% 0%, rgba(var(--m-indigo-rgb), .12), transparent 60%), var(--m-bg); border-right: 1px solid var(--m-line); }
    .qx-auth__main { justify-content: flex-end; padding-left: clamp(24px, 4vw, 64px); padding-right: 20px; }
}
@media (min-width: 1200px) {
    .qx-auth { --qx-wrap: 1170px; }
}
.qx-auth__aside-inner { width: 100%; max-width: 540px; }
.qx-auth__aside h2 { margin: 24px 0 36px; text-wrap: pretty; line-height: 1.12; }
.qx-auth__points { gap: 24px; }
.qx-auth__points li { align-items: flex-start; gap: 16px; }
.qx-auth__points strong { margin-bottom: 3px; font-size: 1rem; }
.qx-auth__points span { font-size: .9rem; line-height: 1.5; }

/* ---- Páginas institucionais: faixa de título clara --------------------- */









/* ==========================================================================
   14. COMPONENTES DO CONTEÚDO DOS PAINÉIS (qp-*) — usados pelas views reescritas
   ========================================================================== */
.qp { display: grid; gap: 20px; }
.qp-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.qp-intro p { max-width: 64ch; margin: 0; color: var(--m-muted); font-size: .9375rem; }
.qp-intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.qp-card { border: 1px solid var(--qx-card-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(20, 18, 31, .04); }
.qp-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; padding: 20px 24px 16px; border-bottom: 1px solid #f0f1f6; }
.qp-card__head h2 { margin: 0; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; }
.qp-card__head p { margin: 4px 0 0; color: var(--m-muted); font-size: .875rem; }
.qp-card__body { padding: 22px 24px; }

.qp-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid #f0f1f6; background: #fcfcfe; border-radius: 0 0 16px 16px; }
.qp-card__foot--split { justify-content: space-between; }

.qp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.qp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qp-grid > .qp-span-2 { grid-column: 1 / -1; }
.qp-field { display: block; margin: 0; }
.qp-field > span:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-bottom: 7px; color: var(--m-ink); font-family: var(--font-display); font-size: .8125rem; font-weight: 700; }
.qp-field > span:first-child small { color: var(--m-muted); font-family: var(--font-body); font-size: .75rem; font-weight: 500; }
.qp-field .form-control, .qp-field select { min-height: 46px; border-color: var(--m-field); border-radius: 12px; font-size: .9375rem; }
.qp-field textarea.form-control { min-height: 110px; }
.qp-field .form-control:disabled, .qp-field .form-control[readonly] { background: #f5f6fa; color: var(--m-muted); }
.qp-help { display: block; margin-top: 6px; color: var(--m-muted); font-size: .78rem; line-height: 1.45; }

.qp-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.qp-split > .qp-aside { position: sticky; top: calc(var(--qx-top-h) + 20px); display: grid; gap: 20px; }
.qp-split > .qp-main { display: grid; gap: 20px; min-width: 0; }

.qp-profile { padding: 28px 24px 24px; text-align: center; }
.qp-avatar { position: relative; display: inline-block; margin-bottom: 14px; }
.qp-avatar img { display: block; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--m-line); }
.qp-avatar__edit { position: absolute; right: -2px; bottom: 2px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; border: 3px solid #fff; border-radius: 50%; background: var(--m-indigo); color: #fff; font-size: .95rem; cursor: pointer; transition: background-color .15s ease; }
.qp-avatar__edit:hover { background: var(--m-indigo-dark); }
.qp-profile h2 { margin: 0 0 4px; font-size: 1.15rem; font-weight: 800; }
.qp-profile__mail { margin: 0; color: var(--m-muted); font-size: .875rem; overflow-wrap: anywhere; }
.qp-meta { display: grid; gap: 0; margin: 18px 0 0; padding: 0; list-style: none; text-align: left; }
.qp-meta li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid #f0f1f6; font-size: .8125rem; }
.qp-meta li span { color: var(--m-muted); }
.qp-meta li strong { color: var(--m-ink); font-weight: 600; text-align: right; }

.qp-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.qp-pill--indigo { background: var(--m-indigo-soft); color: var(--m-indigo-dark); }
.qp-pill--amber { background: var(--m-amber-soft); color: var(--m-amber-dark); }
.qp-pill--green { background: #e5f7ee; color: #127a45; }
.qp-pill--red { background: #fdecef; color: #c42a44; }
.qp-pill--gray { background: #f0f1f5; color: var(--m-muted); }

.qp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.qp-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qp-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qp-stat { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border: 1px solid var(--qx-card-line); border-radius: 16px; background: #fff; color: inherit !important; text-decoration: none !important; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a.qp-stat:hover { transform: translateY(-2px); border-color: rgba(var(--m-indigo-rgb), .35); box-shadow: 0 16px 32px -20px rgba(20, 18, 31, .3); }
.qp-stat__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qp-stat__label { color: var(--m-muted); font-size: .8125rem; font-weight: 600; }
.qp-stat__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--m-indigo-soft); color: var(--m-indigo); font-size: 1.1rem; }
.qp-stat__icon--amber { background: var(--m-amber-soft); color: var(--m-amber-dark); }
.qp-stat__icon--green { background: #e5f7ee; color: #148a4f; }
.qp-stat__icon--red { background: #fdecef; color: #d92d4a; }
.qp-stat__icon--gray { background: #f0f1f5; color: var(--m-muted); }
.qp-stat__value { color: var(--m-ink); font-family: var(--font-display); font-size: 1.85rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.qp-stat__foot { color: var(--m-muted); font-size: .78rem; }

.qp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; }
.qp-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 16px; border-radius: 18px; background: var(--m-indigo-soft); color: var(--m-indigo); font-size: 1.6rem; }
.qp-empty h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 800; }
.qp-empty p { max-width: 42ch; margin: 0 0 18px; color: var(--m-muted); font-size: .9rem; }

.qp-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.qp-toolbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.qp-select { display: inline-flex; align-items: center; gap: 8px; }
.qp-select > span { color: var(--m-muted); font-size: .8125rem; font-weight: 600; }
.qp-select select { min-height: 40px; min-width: 190px; padding: 0 2rem 0 12px; border: 1px solid var(--m-field); border-radius: 11px; background-color: #fff; color: var(--m-ink); font-weight: 600; font-size: .875rem; }

.qp-rows { display: grid; }
.qp-row { display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-top: 1px solid #f0f1f6; }
.qp-row:first-child { border-top: 0; }
.qp-row__main { flex: 1 1 auto; min-width: 0; }
.qp-row__title { display: block; overflow: hidden; color: var(--m-ink); font-family: var(--font-display); font-size: .9rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.qp-row__sub { display: block; overflow: hidden; color: var(--m-muted); font-size: .8rem; white-space: nowrap; text-overflow: ellipsis; }

.qp-switch { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid #f0f1f6; }
.qp-switch:first-child { border-top: 0; padding-top: 0; }
.qp-switch strong { display: block; color: var(--m-ink); font-family: var(--font-display); font-size: .9rem; }
.qp-switch small { color: var(--m-muted); font-size: .8rem; }

@media (max-width: 1199.98px) {
    .qp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .qp-split { grid-template-columns: 1fr; }
    .qp-split > .qp-aside { position: static; }
}
@media (max-width: 767.98px) {
    .qp-grid, .qp-grid--3 { grid-template-columns: 1fr; }
    .qp-card__head, .qp-card__body, .qp-card__foot { padding-left: 18px; padding-right: 18px; }
    .qp-row { padding-left: 18px; padding-right: 18px; }
    .qp-stats--3 { grid-template-columns: 1fr 1fr; }
    .qp-card__foot .btn { flex: 1 1 auto; }
}
@media (max-width: 400px) {
    .qp-stats, .qp-stats--3, .qp-stats--2 { grid-template-columns: 1fr 1fr; gap: 10px; }
    .qp-stat { padding: 14px; }
    .qp-stat__value { font-size: 1.5rem; }
}


/* ---- Reservas (cliente e lojista), avaliação por estrelas --------------- */
.qx-tabcount { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--m-indigo-soft); color: var(--m-indigo-dark); font-size: .6875rem; font-weight: 800; }
.nav-link.active .qx-tabcount { background: var(--m-indigo); color: #fff; }
.qp-res { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-top: 1px solid #f0f1f6; }
.qp-rows > .qp-res:first-child { border-top: 0; }
.qp-res__img { flex: none; width: 64px; height: 64px; border-radius: 13px; background: #f5f6fa center / contain no-repeat; background-blend-mode: multiply; background-origin: content-box; padding: 6px; }
.qp-res__main { flex: 1 1 auto; min-width: 0; }
.qp-res__main .qp-row__sub i { color: var(--m-muted); }
.qp-res__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.qp-res__qty, .qp-res__note { color: var(--m-muted); font-size: .78rem; }
.qp-res__note { color: var(--m-amber-dark); font-weight: 600; }
.qp-res__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.qp-res__price { color: var(--m-ink); font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qp-res__actions { display: flex; align-items: center; gap: 8px; }
.qp-res__actions form { margin: 0; }
.qp-response { display: inline-flex; align-items: center; gap: 6px; align-self: center; color: var(--m-muted); font-size: .8125rem; }
.qp-response strong { color: var(--m-ink); }
.qp-res__review { margin: -4px 24px 14px 104px; padding: 12px 14px; border-radius: 12px; background: #fafafc; border: 1px dashed var(--m-line); }
.qp-res__review form { gap: 6px 10px; }
.qp-res__review .form-control-sm { max-width: 260px !important; min-height: 38px; }
@media (max-width: 575.98px) {
    .qp-res { flex-wrap: wrap; padding: 14px 18px; }
    .qp-res__img { width: 54px; height: 54px; }
    .qp-res__main { flex-basis: calc(100% - 70px); }
    .qp-res__side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
    .qp-res__review { margin: 0 18px 14px; }
}

.star-rating { display: inline-flex; flex-direction: row-reverse; }
.star-rating input { display: none; }
.star-rating label { display: inline-block; padding: 0 1px; color: #dee2e6; font-size: 22px; cursor: pointer; transition: transform .1s ease, color .1s ease; }
.star-rating input:checked ~ label, .star-rating label:hover, .star-rating label:hover ~ label { color: #ffc107; }
.star-rating label:hover { transform: scale(1.2); }
.star-rating__label { min-width: 64px; }


/* ---- Chat (lojista e cliente) ------------------------------------------ */
.qp-chat { position: relative; display: grid; grid-template-columns: 320px minmax(0, 1fr); height: calc(100vh - var(--qx-top-h) - 64px); min-height: 480px; max-height: 860px; overflow: hidden; border: 1px solid var(--qx-card-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(20, 18, 31, .04); }
.qp-chat__list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--m-line); background: #fcfcfe; }
.qp-chat__list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 18px 12px; }
.qp-chat__list-head h2 { margin: 0; font-size: 1rem; font-weight: 800; }
.qp-chat__filter { margin: 0; }
.qp-chat__filter select { max-width: 170px; min-height: 34px; padding: 0 8px; border: 1px solid var(--m-field); border-radius: 9px; background: #fff; color: var(--m-ink); font-size: .8rem; font-weight: 600; }
.qp-chat__list-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 10px 12px; }
.qp-chat__conv { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; padding: 10px; border-radius: 12px; color: inherit !important; text-decoration: none !important; transition: background-color .15s ease; }
.qp-chat__conv:hover { background: #f2f3f8; }
.qp-chat__conv.is-active { background: var(--m-indigo-soft); }
.qp-chat__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--m-line); }
.qp-chat__avatar--initial { display: inline-flex; align-items: center; justify-content: center; box-shadow: none; color: #fff; font-size: 1rem; font-weight: 700; }
.qp-chat__who { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.3; }
.qp-chat__who strong { overflow: hidden; color: var(--m-ink); font-family: var(--font-display); font-size: .875rem; white-space: nowrap; text-overflow: ellipsis; }
.qp-chat__who small { overflow: hidden; color: var(--m-muted); font-size: .75rem; white-space: nowrap; text-overflow: ellipsis; }
.qp-chat__conv.is-active .qp-chat__who strong { color: var(--m-indigo-dark); }
.qp-chat__unread { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--m-indigo); color: #fff; font-size: .6875rem; font-weight: 800; }
.qp-chat__pane { position: relative; min-width: 0; min-height: 0; background: #fff; }
.qp-chat__inner { display: flex; flex-direction: column; height: 100%; }
.qp-chat__head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #f0f1f6; }
.qp-chat__head .back-to-list { display: none; }
.qp-chat__msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px; background: #fafbfd; }
.qp-chat__input { padding: 12px 16px; border-top: 1px solid #f0f1f6; }
.qp-chat__input form { display: flex; align-items: center; gap: 8px; margin: 0; }
.qp-chat__input input[name="body"] { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 18px; border: 1px solid var(--m-field); border-radius: 999px; color: var(--m-ink); font-size: .9375rem; outline: 0; transition: border-color .15s ease, box-shadow .15s ease; }
.qp-chat__input input[name="body"]:focus { border-color: var(--m-indigo); box-shadow: 0 0 0 4px var(--m-indigo-soft); }
.qp-chat__input .btn { flex: none; width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 50%; }
@media (max-width: 991.98px) {
    .qp-chat { grid-template-columns: 1fr; }
    .qp-chat__list, .qp-chat__pane { position: absolute; inset: 0; transition: transform .3s ease; }
    .qp-chat__list { z-index: 2; border-right: 0; transform: translateX(0); }
    .qp-chat__pane { z-index: 1; transform: translateX(100%); }
    body.chat-open .qp-chat__list { transform: translateX(-100%); }
    body.chat-open .qp-chat__pane { transform: translateX(0); }
    .qp-chat__head .back-to-list { display: inline-flex; }
}
@media (max-width: 767.98px) {
    .qp-chat { height: calc(100vh - 60px - var(--qx-tab-h) - 40px - env(safe-area-inset-bottom, 0px)); min-height: 420px; }
    .qp-chat__input input[name="body"] { font-size: 16px; }
}


/* ---- Dashboards ------------------------------------------------------- */
.qp-hello { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 20px 24px; }
.qp-hello__logo { flex: none; width: 56px; height: 56px; border-radius: 16px; object-fit: cover; box-shadow: 0 0 0 1px var(--m-line); }
.qp-hello__text { display: flex; flex: 1 1 220px; flex-direction: column; gap: 4px; min-width: 0; }
.qp-hello__greet { color: var(--m-ink); font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.qp-hello__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--m-muted); font-size: .875rem; }
.qp-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.qp-rank { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 9px; background: #f2f3f8; color: var(--m-ink); font-family: var(--font-display); font-size: .8125rem; font-weight: 800; }
.qp-row:first-child .qp-rank { background: var(--m-amber-soft); color: var(--m-amber-dark); }
.qp-donut { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.qp-donut svg { flex: none; width: 128px; height: 128px; }
.qp-legend { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: .875rem; color: var(--m-text); }
.qp-legend li { display: flex; align-items: center; gap: 10px; }
.qp-legend strong { margin-left: auto; padding-left: 16px; color: var(--m-ink); font-family: var(--font-display); }
.qp-legend__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
@media (max-width: 1199.98px) { .qp-duo { grid-template-columns: 1fr; } }

/* ---- Produtos (lista e formulário) -------------------------------------- */
.qx-shell .qx-content .btn-sm.btn-light:is([data-toggle="tooltip"], [aria-label]):has(> i.rmx:only-child) { border-color: var(--m-line); background: #fff; color: var(--m-text); }
.qx-shell .qx-content .btn-sm.btn-light:is([data-toggle="tooltip"], [aria-label]):has(> i.rmx:only-child):hover:not(:disabled) { border-color: rgba(var(--m-indigo-rgb), .35); background: var(--m-indigo-soft); color: var(--m-indigo-dark); }
.qx-shell .qx-content .btn-sm.btn-light.qp-btn-danger:hover:not(:disabled) { border-color: #f6c6cf !important; background: #fdecef !important; color: #d92d4a !important; }
.qx-shell .qx-content .btn-sm.btn-light:disabled { opacity: .45; }

.qp-card__head--tools { align-items: center; }
.qp-search { position: relative; display: flex; align-items: center; flex: 1 1 280px; max-width: 420px; margin: 0; }
.qp-search i { position: absolute; left: 14px; color: var(--m-muted); font-size: 1.05rem; pointer-events: none; }
.qp-search input { width: 100%; min-height: 42px; padding: 0 14px 0 40px; border: 1px solid var(--m-field); border-radius: 11px; background: #fff; color: var(--m-ink); font-size: .9rem; outline: 0; transition: border-color .15s ease, box-shadow .15s ease; }
.qp-search input:focus { border-color: var(--m-indigo); box-shadow: 0 0 0 4px var(--m-indigo-soft); }

.qp-plist { --qp-pcols: minmax(0, 2.4fr) 130px 110px 90px 136px; display: grid; }
.qp-plist--stores { --qp-pcols: minmax(0, 2.2fr) minmax(0, 1fr) 130px 110px 90px 136px; }
.qp-plist__head, .qp-prow { display: grid; grid-template-columns: var(--qp-pcols); align-items: center; gap: 16px; padding: 12px 24px; }
.qp-plist__head { padding-top: 10px; padding-bottom: 10px; background: #fafbfd; border-bottom: 1px solid #f0f1f6; color: var(--m-muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.qp-prow { border-top: 1px solid #f0f1f6; transition: background-color .15s ease; }
.qp-plist__head + .qp-prow { border-top: 0; }
.qp-prow:hover { background: #fcfcfe; }
.qp-prow__product { display: flex; align-items: center; gap: 14px; min-width: 0; color: inherit !important; text-decoration: none !important; }
.qp-prow__product .qp-res__img { width: 56px; height: 56px; }
.qp-prow__name { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.qp-prow__name strong { overflow: hidden; color: var(--m-ink); font-family: var(--font-display); font-size: .9rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.qp-prow__product:hover .qp-prow__name strong { color: var(--m-indigo-dark); }
.qp-prow__name small { color: var(--m-muted); font-size: .76rem; }
.qp-prow__store { display: block; overflow: hidden; color: var(--m-text); font-size: .84rem; white-space: nowrap; text-overflow: ellipsis; }
.qp-prow__price { color: var(--m-ink); font-family: var(--font-display); font-size: .92rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qp-prow__stock { color: var(--m-text); font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qp-prow__stock.is-low { color: var(--m-amber-dark); }
.qp-prow__actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.qp-prow__actions form { margin: 0; }

.qp-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.qp-pager > * { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 10px; color: var(--m-text) !important; font-size: .85rem; font-weight: 600; text-decoration: none !important; }
.qp-pager > a:hover { background: var(--m-indigo-soft); color: var(--m-indigo-dark) !important; }
.qp-pager > .is-active { background: var(--m-indigo); color: #fff !important; }
.qp-pager > .is-disabled, .qp-pager > .is-gap { color: #b8bdc8 !important; }

.qp-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--m-muted) !important; font-size: .84rem; font-weight: 600; text-decoration: none !important; }
.qp-back:hover { color: var(--m-indigo-dark) !important; }
.qp-intro__title { margin: 0; color: var(--m-ink); font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.qp-split--wide { grid-template-columns: 360px minmax(0, 1fr); }

.qp-gallery { display: grid; gap: 14px; }
.qp-gallery__main { display: block; width: 100%; aspect-ratio: 1 / 1; max-width: 100%; border-radius: 14px; background: #f5f6fa; object-fit: contain; }
.qp-gallery__strip { display: flex; flex-wrap: wrap; gap: 10px; }
.qp-gallery__strip > div { position: relative; margin: 0 !important; }
.qp-gallery__strip > div img { display: block; width: 60px !important; height: 60px !important; padding: 0 !important; border: 1px solid var(--m-line) !important; border-radius: 12px !important; background: #fff; object-fit: cover; }
.qp-gallery__strip > div .btn { position: absolute !important; top: -7px !important; right: -7px !important; display: inline-flex; align-items: center; justify-content: center; width: 22px !important; height: 22px !important; min-height: 22px; padding: 0 !important; border: 2px solid #fff; border-radius: 50% !important; font-size: .8rem; line-height: 1; }
.qp-gallery__add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 60px; height: 60px; margin: 0; border: 1.5px dashed var(--m-field); border-radius: 12px; background: #fafbfd; color: var(--m-muted); cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.qp-gallery__add[hidden] { display: none !important; }
.qp-gallery__add i { font-size: 1.15rem; }
.qp-gallery__add span { font-size: .62rem; font-weight: 700; }
.qp-gallery__add:hover { border-color: var(--m-indigo); background: var(--m-indigo-soft); color: var(--m-indigo); }
.qp-gallery .qp-help { margin: 0; }

.qp-checks { display: grid; gap: 8px; max-height: 300px; overflow-y: auto; }
.qp-check { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--m-line); border-radius: 11px; color: var(--m-ink); font-size: .875rem; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.qp-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--m-indigo); }
.qp-check:has(input:checked) { border-color: rgba(var(--m-indigo-rgb), .4); background: var(--m-indigo-soft); }
.qp-check.is-static { cursor: default; background: #fafbfd; }
.qp-check.is-static i { color: var(--m-indigo); font-size: 1.1rem; }

.qp-affix { display: flex; align-items: stretch; }
.qp-affix em { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--m-field); border-right: 0; border-radius: 12px 0 0 12px; background: #f5f6fa; color: var(--m-muted); font-size: .85rem; font-style: normal; font-weight: 600; }
.qp-affix .form-control { min-width: 0; border-radius: 0 12px 12px 0 !important; }
.qp-affix--end em { border-right: 1px solid var(--m-field); border-left: 0; border-radius: 0 12px 12px 0; }
.qp-affix--end .form-control { border-radius: 12px 0 0 12px !important; }

.qp-savebar { position: sticky; bottom: 16px; z-index: 5; display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px; border: 1px solid var(--qx-card-line); border-radius: 16px; background: rgba(255, 255, 255, .94); box-shadow: 0 16px 36px -20px rgba(20, 18, 31, .35); backdrop-filter: blur(8px); }

@media (max-width: 1199.98px) {
    .qp-plist, .qp-plist--stores { --qp-pcols: minmax(0, 1fr) 120px 100px 80px 136px; }
    .qp-plist--stores .qp-prow__stores, .qp-plist--stores .qp-plist__head > span:nth-child(2) { display: none; }
    .qp-split--wide { grid-template-columns: 300px minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
    .qp-split--wide { grid-template-columns: 1fr; }
    .qp-gallery { grid-template-columns: 160px minmax(0, 1fr); align-items: start; }
    .qp-gallery .qp-help { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    .qp-plist__head { display: none; }
    .qp-prow { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px 18px; }
    .qp-prow__product { grid-column: 1 / -1; }
    .qp-prow__stores { display: none; }
    .qp-prow__status { grid-column: 1; grid-row: 2; }
    .qp-prow__price { grid-column: 2; grid-row: 2; text-align: right; }
    .qp-prow__stock { grid-column: 1; grid-row: 3; font-size: .8rem; }
    .qp-prow__stock::before { content: "Estoque: "; color: var(--m-muted); font-weight: 500; }
    .qp-prow__actions { grid-column: 2; grid-row: 3; }
    .qp-search { max-width: none; flex-basis: 100%; }
    .qp-card__head--tools .qp-toolbar__group { width: 100%; }
    .qp-card__head--tools .qp-toolbar__group .btn { flex: 1 1 auto; }
    .qp-card__head--tools .qp-select, .qp-card__head--tools .qp-select select { flex: 1 1 auto; min-width: 0; width: 100%; }
    .qp-card__foot--split { justify-content: center; }
    .qp-savebar { bottom: calc(var(--qx-tab-h) + 10px + env(safe-area-inset-bottom, 0px)); }
    .qp-savebar .btn { flex: 1 1 auto; }
}
@media (max-width: 480px) {
    .qp-gallery { grid-template-columns: 1fr; }
}

.qp-split--wide > .qp-aside { position: static; }
.qp-gallery__strip > div .btn-danger { background: #e5364f !important; color: #fff !important; }
.qp-gallery__strip > div .btn-secondary { background: #656d76 !important; color: #fff !important; }
.qx-shell .qx-content .qp-gallery__strip > div .btn { width: 22px !important; min-width: 22px !important; height: 22px !important; min-height: 22px !important; border: 2px solid #fff !important; border-radius: 50% !important; font-size: .8rem !important; }

/* ---- Lojas (lista em cartões e formulário) ------------------------------ */
.qp-stores { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.qp-store { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.qp-store__top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.qp-store__logo { flex: none; width: 52px; height: 52px; border-radius: 14px; object-fit: cover; box-shadow: 0 0 0 1px var(--m-line); }
.qp-store__name { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.35; }
.qp-store__name strong { overflow: hidden; color: var(--m-ink); font-family: var(--font-display); font-size: .95rem; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.qp-store__name small { color: var(--m-muted); font-size: .78rem; }
.qp-store__badge { flex: none; color: var(--m-indigo); font-size: 1.25rem; }
.qp-store__info { display: grid; gap: 10px; flex: 1 1 auto; margin: 0; padding: 14px 0 0; border-top: 1px solid #f0f1f6; list-style: none; }
.qp-store__info li { display: flex; align-items: flex-start; gap: 10px; color: var(--m-text); font-size: .84rem; line-height: 1.45; }
.qp-store__info i { flex: none; margin-top: 1px; color: var(--m-indigo); font-size: 1rem; }
.qp-store__info small { color: var(--m-muted); font-size: .78rem; }
.qp-store__actions { display: flex; align-items: center; gap: 8px; }
.qp-store__actions > a { flex: 1 1 auto; }
.qp-store__actions form { margin: 0; }
.qp-store__actions .btn-sm { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; }

.qp-avatar--logo img { border-radius: 26px; }
.qp-hours { display: flex; align-items: center; gap: 8px; }
.qp-hours .form-control { flex: 1 1 0; min-width: 0; }
.qp-hours em { color: var(--m-muted); font-size: .84rem; font-style: normal; }
.qp-grid--addr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qp-grid > .qp-span-3 { grid-column: span 3; }
.qp-grid--addr > .qp-span-2 { grid-column: span 2; }
.qp-map { height: 220px; margin-top: 18px; overflow: hidden; border: 1px solid var(--m-line); border-radius: 14px; background: #f5f6fa; }
@media (max-width: 767.98px) {
    .qp-grid--addr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qp-grid--addr > .qp-span-3 { grid-column: span 2; }
    .qp-grid--addr > .qp-span-2 { grid-column: span 1; }
}
@media (max-width: 400px) {
    .qp-grid--addr { grid-template-columns: 1fr; }
    .qp-grid--addr > * { grid-column: auto !important; }
}

/* ---- Avaliações, avisos e envio de documento ---------------------------- */
.qp-stars { display: inline-flex; gap: 1px; color: #f5b301; font-size: .95rem; white-space: nowrap; }
.qp-stars .is-off { color: #d9dde6; }
.qp-stars--lg { font-size: 1.25rem; }
.qp-score { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding: 22px 24px; }
.qp-score__value { color: var(--m-ink); font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.qp-score__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--m-muted); font-size: .875rem; }
.qp-score__text strong { color: var(--m-ink); font-family: var(--font-display); }
.qp-review { padding: 16px 24px; border-top: 1px solid #f0f1f6; }
.qp-review:first-child { border-top: 0; }
.qp-review__head { display: flex; align-items: flex-start; gap: 14px; }
.qp-review__text { margin: 10px 0 0; color: var(--m-text); font-size: .9rem; line-height: 1.55; }

.qp-notice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #f5f6fa; }
.qp-notice > i { flex: none; font-size: 1.35rem; line-height: 1.2; }
.qp-notice > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .86rem; }
.qp-notice strong { color: var(--m-ink); font-family: var(--font-display); }
.qp-notice span { color: var(--m-text); }
.qp-notice--indigo { background: var(--m-indigo-soft); }
.qp-notice--indigo > i { color: var(--m-indigo); }
.qp-notice--amber { background: var(--m-amber-soft); }
.qp-notice--amber > i { color: var(--m-amber-dark); }
.qp-notice--red { background: #fdecef; }
.qp-notice--red > i { color: #d92d4a; }

.qp-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.qp-upload__drop { position: relative; display: flex; flex: 1 1 280px; align-items: center; gap: 12px; min-width: 0; margin: 0; padding: 14px 16px; border: 1.5px dashed var(--m-field); border-radius: 12px; background: #fafbfd; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.qp-upload__drop:hover { border-color: var(--m-indigo); background: var(--m-indigo-soft); }
.qp-upload__drop > i { flex: none; color: #d92d4a; font-size: 1.6rem; }
.qp-upload__drop > span { display: flex; flex-direction: column; min-width: 0; }
.qp-upload__drop strong { color: var(--m-ink); font-size: .875rem; }
.qp-upload__drop small { overflow: hidden; color: var(--m-muted); font-size: .78rem; white-space: nowrap; text-overflow: ellipsis; }
.qp-upload__drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-width: 575.98px) {
    .qp-review { padding: 14px 18px; }
    .qp-review__head { flex-direction: column; gap: 6px; }
    .qp-upload .btn { width: 100%; }
}

/* ---- Suporte (chamados) no mesmo layout do chat ------------------------- */

.qp-seg { display: flex; gap: 4px; margin: 0 14px 10px; padding: 4px; border-radius: 12px; background: #eef0f5; }
.qp-seg a { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px; min-height: 34px; border-radius: 9px; color: var(--m-muted) !important; font-size: .8125rem; font-weight: 700; text-decoration: none !important; transition: background-color .15s ease, color .15s ease; }
.qp-seg a span { color: inherit; font-weight: 600; opacity: .75; }
.qp-seg a:hover { color: var(--m-ink) !important; }
.qp-seg a.is-active { background: #fff; color: var(--m-indigo-dark) !important; box-shadow: 0 1px 2px rgba(20, 18, 31, .08); }
.qp-ticket { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 2px; padding: 12px; border-radius: 12px; color: inherit !important; text-decoration: none !important; transition: background-color .15s ease; }
.qp-ticket:hover { background: #f2f3f8; }
.qp-ticket.is-active { background: var(--m-indigo-soft); }
.qp-ticket__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; }
.qp-ticket__top strong { overflow: hidden; color: var(--m-ink); font-family: var(--font-display); font-size: .875rem; white-space: nowrap; text-overflow: ellipsis; }
.qp-ticket.is-active .qp-ticket__top strong { color: var(--m-indigo-dark); }
.qp-ticket__top small { flex: none; color: var(--m-muted); font-size: .7rem; }
.qp-ticket__who, .qp-ticket__preview { display: block; width: 100%; overflow: hidden; color: var(--m-muted); font-size: .78rem; white-space: nowrap; text-overflow: ellipsis; }
.qp-ticket__who { color: var(--m-text); font-weight: 600; }
.qp-ticket .q-support-pill { margin-top: 2px; }
.qp-ticket-head { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.35; }
.qp-ticket-head strong { overflow: hidden; color: var(--m-ink); font-family: var(--font-display); font-size: .95rem; white-space: nowrap; text-overflow: ellipsis; }
.qp-ticket-head small { overflow: hidden; color: var(--m-muted); font-size: .76rem; white-space: nowrap; text-overflow: ellipsis; }
.qp-chat__head .q-support-back { display: none; }
.qx-shell .qx-content .btn-sm.qp-btn-label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--m-line); border-radius: 10px; background: #fff; color: var(--m-text); font-weight: 600; white-space: nowrap; }
.qx-shell .qx-content .btn-sm.qp-btn-label:hover { border-color: rgba(var(--m-indigo-rgb), .35); background: var(--m-indigo-soft); color: var(--m-indigo-dark); }
.qp-support .qp-chat__msgs { display: flex; flex-direction: column; gap: 14px; }
.qp-support .qp-chat__input form { align-items: flex-end; padding: 0; border: 0; }
.qp-support .qp-chat__input textarea { flex: 1 1 auto; min-width: 0; min-height: 46px; max-height: 140px; padding: 12px 18px; border: 1px solid var(--m-field); border-radius: 23px; color: var(--m-ink); font-family: inherit; font-size: .9375rem; line-height: 1.4; resize: none; outline: 0; transition: border-color .15s ease, box-shadow .15s ease; }
.qp-support .qp-chat__input textarea:focus { border-color: var(--m-indigo); box-shadow: 0 0 0 4px var(--m-indigo-soft); }
.qp-chat__closed { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px; border-top: 1px solid #f0f1f6; color: var(--m-muted); font-size: .84rem; }
@media (max-width: 991.98px) {
    .qp-chat__head .q-support-back { display: inline-flex; }
    .qp-support.is-open .qp-chat__list { transform: translateX(-100%); }
    .qp-support.is-open .qp-chat__pane { transform: translateX(0); }
}
@media (max-width: 767.98px) {
    .qp-support .qp-chat__input textarea { font-size: 16px; }
    .qp-chat__head .qp-btn-label { padding: 0 10px !important; }
}

/* ---- Administração ------------------------------------------------------ */
.qp-section { display: grid; gap: 12px; }
.qp-section__title { margin: 0; color: var(--m-muted); font-family: var(--font-body); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.qp-todo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
a.qp-notice { color: inherit !important; text-decoration: none !important; transition: transform .15s ease, box-shadow .15s ease; }
a.qp-notice:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -18px rgba(20, 18, 31, .35); }

.qp-card__head--tabs { padding-bottom: 0; border-bottom: 1px solid #f0f1f6; }
.qp-tabs { display: flex; gap: 4px; margin-bottom: -1px; overflow-x: auto; scrollbar-width: none; }
.qp-tabs::-webkit-scrollbar { display: none; }
.qp-tabs a { flex: none; padding: 8px 14px 12px; border-bottom: 2px solid transparent; color: var(--m-muted) !important; font-size: .875rem; font-weight: 700; text-decoration: none !important; white-space: nowrap; transition: color .15s ease, border-color .15s ease; }
.qp-tabs a:hover { color: var(--m-ink) !important; }
.qp-tabs a.is-active { border-bottom-color: var(--m-indigo); color: var(--m-indigo-dark) !important; }
.qp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px 24px; border-bottom: 1px solid #f0f1f6; background: #fcfcfe; }
.qp-chips__label { margin-right: 4px; color: var(--m-muted); font-size: .78rem; font-weight: 600; }
.qp-chips a { padding: 5px 12px; border: 1px solid var(--m-line); border-radius: 999px; background: #fff; color: var(--m-text) !important; font-size: .78rem; font-weight: 600; text-decoration: none !important; transition: all .15s ease; }
.qp-chips a:hover { border-color: rgba(var(--m-indigo-rgb), .35); color: var(--m-indigo-dark) !important; }
.qp-chips a.is-active { border-color: var(--m-indigo); background: var(--m-indigo); color: #fff !important; }

.qp-table { margin: 0; }
.qp-table thead th { padding: 11px 16px; border-top: 0 !important; border-bottom: 1px solid #f0f1f6 !important; background: #fafbfd; color: var(--m-muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.qp-table thead th:first-child, .qp-table tbody td:first-child { padding-left: 24px; }
.qp-table thead th:last-child, .qp-table tbody td:last-child { padding-right: 24px; }
.qp-table tbody td { padding: 13px 16px; border-top: 1px solid #f0f1f6 !important; color: var(--m-text); font-size: .875rem; vertical-align: middle !important; }
.qp-table tbody tr:first-child td { border-top: 0 !important; }
.qp-table tbody tr:hover { background: #fcfcfe; }
.qp-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.qp-who__avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; font-size: 1rem; }
.qp-who__text { display: flex; flex-direction: column; min-width: 0; max-width: 260px; line-height: 1.35; }
.qp-who__text strong { overflow: hidden; color: var(--m-ink); font-family: var(--font-display); font-size: .875rem; white-space: nowrap; text-overflow: ellipsis; }
.qp-who__text small { overflow: hidden; color: var(--m-muted); font-size: .76rem; white-space: nowrap; text-overflow: ellipsis; }
.qp-mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.qp-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.qp-actions form { margin: 0; }

.qp-mod { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.qp-mod__card { display: flex; flex-direction: column; overflow: hidden; }
.qp-mod__media { position: relative; display: block; aspect-ratio: 4 / 3; max-width: 100%; background: #f5f6fa center / contain no-repeat; background-blend-mode: multiply; background-origin: content-box; padding: 14px; border-bottom: 1px solid #f0f1f6; }
.qp-mod__media .qp-pill { position: absolute; top: 12px; left: 12px; }
.qp-mod__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; padding: 16px 18px 18px; }
.qp-mod__store { display: flex; align-items: center; gap: 10px; min-width: 0; }
.qp-mod__store img { flex: none; width: 32px; height: 32px; border-radius: 10px; object-fit: cover; box-shadow: 0 0 0 1px var(--m-line); }
.qp-mod__store > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.qp-mod__store strong { overflow: hidden; color: var(--m-ink); font-size: .8125rem; white-space: nowrap; text-overflow: ellipsis; }
.qp-mod__store strong i { color: var(--m-indigo); }
.qp-mod__store small { overflow: hidden; color: var(--m-muted); font-size: .72rem; white-space: nowrap; text-overflow: ellipsis; }
.qp-mod__title { color: var(--m-ink) !important; font-family: var(--font-display); font-size: .92rem; font-weight: 700; line-height: 1.35; text-decoration: none !important; }
.qp-mod__title:hover { color: var(--m-indigo-dark) !important; }
.qp-mod__why { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.qp-mod__why small { color: var(--m-muted); font-size: .74rem; }
.qp-mod__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid #f0f1f6; }
.qp-mod__actions form { margin: 0; }

.qp-file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--m-line); border-radius: 12px; color: inherit !important; text-decoration: none !important; transition: border-color .15s ease, background-color .15s ease; }
.qp-file:hover { border-color: rgba(var(--m-indigo-rgb), .35); background: var(--m-indigo-soft); }
.qp-file > i:first-child { flex: none; color: #d92d4a; font-size: 1.6rem; }
.qp-file > span { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.qp-file strong { color: var(--m-ink); font-size: .875rem; }
.qp-file small { color: var(--m-muted); font-size: .76rem; }
.qp-file__go { color: var(--m-muted); }

.qp-review__head .qp-who__avatar { width: 36px; height: 36px; }
.qp-review__head form { margin: 0; }
.qp-review__text--indent { margin-left: 50px; }
.qp-log { align-items: flex-start; }
.qp-log__details { display: block; margin-top: 2px; color: var(--m-muted); font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; }
.qp-log__meta { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.qp-log__meta span { color: var(--m-ink); font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qp-log__meta small { max-width: 200px; overflow: hidden; color: var(--m-muted); font-size: .74rem; white-space: nowrap; text-overflow: ellipsis; }

.qp-duo--settings { align-items: start; }
.qp-affix--short { max-width: 220px; }
.qp-card--warn { border-color: #f6d9a8; }
.qp-card--warn .qp-card__head h2 { color: var(--m-amber-dark); }
label.qp-switch { margin: 0; cursor: pointer; }
.qp-switch > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qp-switch .custom-control { flex: none; min-height: 1.5rem; margin-top: 2px; }
.qp-switch .custom-control-label { display: block; cursor: pointer; }

@media (max-width: 767.98px) {
    .qp-chips { padding: 12px 18px; }
    .qp-table thead th:first-child, .qp-table tbody td:first-child { padding-left: 18px; }
    .qp-review__text--indent { margin-left: 0; }
    .qp-log { flex-wrap: wrap; }
    .qp-log__meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; padding-left: 50px; text-align: left; }
    .qp-mod__actions { grid-template-columns: 1fr 1fr; }
}

/* Tabelas do admin redesenhadas: cartões só até 1100px */
@media (min-width: 576px) and (max-width: 1099.98px) {
    .q-table-stack--md, .q-table-stack--md tbody, .q-table-stack--md tr, .q-table-stack--md td { display: block; width: 100% !important; }
    .q-table-stack--md { table-layout: auto !important; }
    .q-table-stack--md thead { display: none; }
    .q-table-stack--md tbody { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .q-table-stack--md tbody tr { margin: 0 !important; padding: .85rem 1rem; background: #fff; border: 1px solid #eceef3; border-radius: var(--m-radius-lg); }
    .q-table-stack--md tbody tr:hover { background: #fff; }
    .q-table-stack--md td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem 0 !important; border: 0 !important; text-align: right; max-width: none !important; }
    .q-table-stack--md td::before { content: attr(data-label); flex: 0 0 34%; text-align: left; color: #8b94a3; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
    .q-table-stack--md td.q-cell-main { justify-content: flex-start; text-align: left; padding-bottom: .65rem !important; margin-bottom: .3rem; border-bottom: 1px solid #f0f1f5 !important; }
    .q-table-stack--md td.q-cell-main::before, .q-table-stack--md td.q-cell-actions::before { display: none; }
    .q-table-stack--md td.q-cell-actions { justify-content: flex-start; padding-top: .7rem !important; margin-top: .3rem; border-top: 1px solid #f0f1f5 !important; }
    
    
    .q-table-stack--md td.q-cell-actions .btn { margin: 0 !important; }
    .q-table-stack--md tfoot, .q-table-stack--md tfoot tr, .q-table-stack--md tfoot td { display: block; background: transparent; border: 0 !important; box-shadow: none; padding: .5rem 0 0 !important; }
    .q-table-stack--md tfoot td::before { display: none; }
}
.q-table-stack--md td.q-cell-actions .qp-actions { justify-content: flex-start; }
@media (min-width: 576px) and (max-width: 1099.98px) { .qp-card .q-table-stack--md tbody { padding: 16px; } .qp-card .q-table-stack--md tbody td:first-child, .qp-card .q-table-stack--md tbody td:last-child { padding-left: 0 !important; padding-right: 0 !important; } }
.qp-affix em { white-space: nowrap; }
@media (max-width: 767.98px) { .qp-log > .qp-row__main { flex: 1 1 calc(100% - 50px); } }
label.qp-switch small { color: var(--m-muted) !important; font-weight: 500 !important; }
@media (max-width: 767.98px) { .qp-stats--3 > :last-child:nth-child(3) { grid-column: 1 / -1; } }
.alert + .qp-chat { height: calc(100vh - var(--qx-top-h) - 64px - 72px); }
@media (max-width: 767.98px) { .alert + .qp-chat { height: calc(100vh - 60px - var(--qx-tab-h) - 40px - 72px - env(safe-area-inset-bottom, 0px)); } }
.q-support-msg p.q-bubble { display: inline-block; max-width: 100%; border-radius: 16px; text-align: left; overflow-wrap: anywhere; }
.q-support-msg.is-mine p.q-bubble { border-bottom-right-radius: 6px; }
.q-support-msg:not(.is-mine) p.q-bubble { border-bottom-left-radius: 6px; }

/* ---- Chat v2 (2026-09-30): lista com prévia, dia, bolhas agrupadas, reserva compacta ---- */
.qp-chat { grid-template-columns: 340px minmax(0, 1fr); }
.qp-chat__list { background: #fff; }
.qp-chat__list-head { padding: 20px 18px 14px; border-bottom: 1px solid #f0f1f6; }
.qp-chat__list-body { padding: 8px; }
.qp-chat__conv { align-items: flex-start; gap: 12px; padding: 12px; border-radius: 14px; }
.qp-chat__conv .qp-chat__avatar { width: 46px; height: 46px; }
.qp-chat__conv .qp-chat__who { gap: 1px; }
.qp-chat__line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.qp-chat__line strong { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.qp-chat__line time { flex: none; color: var(--m-muted); font-size: .72rem; font-weight: 500; }
.qp-chat__badge { color: var(--m-indigo); font-size: .85rem; }
.qp-chat__store { color: var(--m-muted); font-size: .74rem; }
.qp-chat__preview { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--m-muted); font-size: .8rem; white-space: nowrap; text-overflow: ellipsis; }
.qp-chat__conv.has-unread .qp-chat__preview { color: var(--m-ink); font-weight: 600; }
.qp-chat__conv.has-unread time { color: var(--m-indigo); font-weight: 700; }
.qp-chat__conv.is-active { background: var(--m-indigo-soft); box-shadow: inset 3px 0 0 var(--m-indigo); }

.qp-chat__head { gap: 12px; padding: 14px 20px; background: #fff; }
.qp-chat__head .qp-chat__who { flex: 1 1 auto; }
.qp-chat__head .qp-chat__who strong { font-size: .95rem; }
.qp-chat__head .qp-chat__avatar { width: 42px; height: 42px; }

.qp-chat__msgs { display: flex; flex-direction: column; gap: 2px; padding: 20px 24px 12px; background: #f6f7fb; }
.qc-day { display: flex; justify-content: center; margin: 14px 0 10px; }
.qc-day:first-child { margin-top: 0; }
.qc-day span { padding: 4px 12px; border-radius: 999px; background: #fff; color: var(--m-muted); font-size: .72rem; font-weight: 700; box-shadow: 0 1px 2px rgba(20, 18, 31, .06); }

.qc-msg { display: flex; margin-top: 10px; }
.qc-msg--cont { margin-top: 3px; }
.qc-msg--mine { justify-content: flex-end; }
.qc-bubble { position: relative; display: inline-flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: 2px 10px; max-width: min(72%, 560px); padding: 9px 12px 7px 14px; border-radius: 18px; font-size: .9375rem; line-height: 1.45; overflow-wrap: anywhere; }
.qc-msg--theirs .qc-bubble { background: #fff; color: var(--m-ink); box-shadow: 0 1px 2px rgba(20, 18, 31, .07); border-bottom-left-radius: 6px; }
.qc-msg--mine .qc-bubble { background: var(--m-indigo); color: #fff; border-bottom-right-radius: 6px; }
.qc-msg--theirs.qc-msg--cont .qc-bubble { border-top-left-radius: 6px; }
.qc-msg--mine.qc-msg--cont .qc-bubble { border-top-right-radius: 6px; }
.qc-text { flex: 1 1 auto; min-width: 0; }
.qc-meta { display: inline-flex; flex: none; align-items: center; gap: 3px; margin-left: auto; font-size: .68rem; opacity: .7; white-space: nowrap; }
.qc-msg--mine .qc-meta { opacity: .85; }
.qc-meta i { font-size: .9rem; }
.qc-msg--mine .qc-meta i.is-read { color: #b9f3d6; opacity: 1; }

.qc-res { align-self: center; width: 100%; max-width: 440px; margin: 12px 0 6px; overflow: hidden; border: 1px solid var(--qx-card-line); border-radius: 16px; background: #fff; box-shadow: 0 6px 18px -14px rgba(20, 18, 31, .35); }
.qc-res__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #f0f1f6; color: var(--m-muted); font-size: .76rem; font-weight: 600; }
.qc-res__head i { color: var(--m-indigo); }
.qc-res__body { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: inherit !important; text-decoration: none !important; transition: background-color .15s ease; }
.qc-res__body:hover { background: #fafbfd; }
.qc-res__img { flex: none; width: 52px; height: 52px; padding: 5px; border-radius: 12px; background: #f5f6fa center / contain no-repeat; background-blend-mode: multiply; background-origin: content-box; }
.qc-res__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qc-res__text strong { overflow: hidden; color: var(--m-ink); font-family: var(--font-display); font-size: .875rem; white-space: nowrap; text-overflow: ellipsis; }
.qc-res__body:hover .qc-res__text strong { color: var(--m-indigo-dark); }
.qc-res__text small { color: var(--m-muted); font-size: .78rem; }
.qc-res__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 14px; border-top: 1px solid #f0f1f6; background: #fcfcfe; }
.qc-res__note { display: inline-flex; align-items: center; gap: 5px; color: var(--m-amber-dark); font-size: .78rem; font-weight: 600; }
.qc-res__actions { display: flex; gap: 6px; }
.qc-res__actions form, .qc-res__foot form { margin: 0; }
.qc-res__actions .btn { min-height: 34px; padding: 0 14px; border-radius: 10px; font-size: .8rem; font-weight: 700; }
.qc-link { padding: 0; border: 0; background: none; color: var(--m-indigo-dark); font-size: .8rem; font-weight: 700; cursor: pointer; }
.qc-link:hover { text-decoration: underline; }
.qc-link--danger { color: #d92d4a; }

.qc-empty { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 20px; color: var(--m-muted); font-size: .9rem; text-align: center; }
.qc-empty .qp-empty__icon { margin: 0; }
.qc-empty p { margin: 0; }

.qp-chat__input { padding: 12px 16px 14px; background: #fff; }
.qp-chat__input input[name="body"] { background: #f6f7fb; border-color: transparent; }
.qp-chat__input input[name="body"]:focus { background: #fff; }
.qp-chat__closed { background: #fff; }

@media (max-width: 991.98px) {
    .qp-chat { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .qp-chat__msgs { padding: 16px 12px 10px; }
    .qc-bubble { max-width: 84%; }
    .qp-chat__head { padding: 12px 14px; }
    .qc-res__actions { width: 100%; }
    .qc-res__actions form { flex: 1 1 0; }
    .qc-res__actions .btn { width: 100%; }
}
.qp-chat__msgs > * { flex-shrink: 0; }

/* ---- Favoritos v2 ------------------------------------------------------- */
.qf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.qf-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--qx-card-line); border-radius: 18px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.qf-card:hover { transform: translateY(-2px); border-color: rgba(var(--m-indigo-rgb), .3); box-shadow: 0 18px 36px -24px rgba(20, 18, 31, .35); }
.qf-card__media { position: relative; display: block; margin: 8px 8px 0; border-radius: 14px; background: #f5f6fa; }
.qf-card__img { display: block; aspect-ratio: 4 / 3; max-width: 100%; padding: 16px; background: center / contain no-repeat; background-blend-mode: multiply; background-origin: content-box; background-color: #f5f6fa; border-radius: 14px; }
.qf-card__tag { position: absolute; left: 10px; bottom: 10px; box-shadow: 0 2px 6px rgba(20, 18, 31, .08); }
.qf-card__fav { position: absolute; top: 16px; right: 16px; z-index: 2; margin: 0; }
.qf-card__fav button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #e5364f; font-size: 1.1rem; box-shadow: 0 2px 8px rgba(20, 18, 31, .12); cursor: pointer; transition: transform .15s ease; }
.qf-card__fav button:hover { transform: scale(1.08); }
.qf-card__fav button:not(.is-active) { color: var(--m-muted); }
.qf-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.qf-card__store { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--m-indigo-dark); font-size: .75rem; font-weight: 700; }
.qf-card__store > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.qf-card__title { display: -webkit-box; margin: 0; overflow: hidden; font-size: .92rem; font-weight: 700; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.7em; }
.qf-card__title a { color: var(--m-ink) !important; text-decoration: none !important; }
.qf-card__title a:hover { color: var(--m-indigo-dark) !important; }
.qf-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 2px; }
.qf-card__price strong { color: var(--m-ink); font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.qf-card__price s { color: var(--m-muted); font-size: .8rem; }
.qf-card__cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: auto; min-height: 40px; border: 1px solid var(--m-line); border-radius: 11px; background: #fff; color: var(--m-ink); font-size: .85rem; font-weight: 700; }
.qf-card__body .qf-card__cta { margin-top: 10px; }
.qf-card:hover .qf-card__cta { border-color: var(--m-indigo); background: var(--m-indigo); color: #fff; }
@media (max-width: 575.98px) {
    .qf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .qf-card__body { padding: 12px; }
    .qf-card__price strong { font-size: 1rem; }
    .qf-card__tag { font-size: .65rem; }
}

/* ---- Novo chamado v2 ---------------------------------------------------- */
.qs-compose { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; max-width: 1100px; }
.qs-compose__main .qp-card__head h2 { margin-top: 4px; font-size: 1.25rem; }
.qs-compose__body { display: grid; gap: 26px; }
.qs-step { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.qs-step legend { display: flex; align-items: center; gap: 10px; width: auto; margin: 0 0 2px; color: var(--m-ink); font-family: var(--font-display); font-size: .95rem; font-weight: 800; }
.qs-step legend span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--m-indigo-soft); color: var(--m-indigo-dark); font-size: .75rem; }
.qs-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.qs-topic { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--m-line); border-radius: 12px; background: #fff; color: var(--m-text); font-size: .86rem; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.qs-topic input { position: absolute; opacity: 0; pointer-events: none; }
.qs-topic i { flex: none; color: var(--m-muted); font-size: 1.15rem; }
.qs-topic:hover { border-color: rgba(var(--m-indigo-rgb), .35); }
.qs-topic:has(input:checked) { border-color: var(--m-indigo); background: var(--m-indigo-soft); color: var(--m-indigo-dark); box-shadow: 0 0 0 1px var(--m-indigo); }
.qs-topic:has(input:checked) i { color: var(--m-indigo); }
.qs-topic:has(input:focus-visible) { outline: 2px solid var(--m-indigo); outline-offset: 2px; }
.qs-compose__aside { position: sticky; top: calc(var(--qx-top-h) + 20px); display: grid; gap: 16px; }
.qs-tips { padding: 20px; }
.qs-tips h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .95rem; font-weight: 800; }
.qs-tips ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.qs-tips li { display: flex; gap: 8px; color: var(--m-text); font-size: .85rem; line-height: 1.45; }
.qs-tips li i { flex: none; color: #148a4f; font-size: 1rem; }
.qs-tips p { margin: 0 0 12px; color: var(--m-text); font-size: .85rem; line-height: 1.5; }
.qs-tips--soft { border-color: transparent; background: var(--m-indigo-soft); box-shadow: none; }
.qs-tips--soft h3 i { color: var(--m-indigo); }
@media (max-width: 991.98px) {
    .qs-compose { grid-template-columns: 1fr; }
    .qs-compose__aside { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 575.98px) {
    .qs-topics { grid-template-columns: 1fr 1fr; }
}
.qp-chat__input .qp-chat__closed { padding: 4px 0; border-top: 0; }
.qc-res { width: min(100%, 400px); max-width: 400px; margin: 10px 0 4px; }
.qc-res--mine { align-self: flex-end; border-bottom-right-radius: 6px; border-color: rgba(var(--m-indigo-rgb), .25); }
.qc-res--theirs { align-self: flex-start; border-bottom-left-radius: 6px; }
@media (max-width: 575.98px) { .qc-res { width: 88%; } }

/* ==========================================================================
   15. PÁGINAS INSTITUCIONAIS (qw-*): como funciona, anuncie, vantagens, sobre,
   contato, proteção, termos e privacidade
   ========================================================================== */
.qw-hero { position: relative; overflow: hidden; padding: 64px 0 56px; background: radial-gradient(900px 420px at 88% -10%, rgba(var(--m-indigo-rgb), .10), transparent 60%), #f8f9fb; border-bottom: 1px solid #eef0f5; }
.qw-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 40px; }
.qw-hero__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.qw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid rgba(var(--m-indigo-rgb), .18); border-radius: 999px; background: #fff; color: var(--m-indigo-dark); font-size: .78rem; font-weight: 700; }
.qw-hero h1 { margin: 16px 0 14px; color: var(--m-ink); font-family: var(--font-display); font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); font-weight: 800; line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.qw-hero h1 em { color: var(--m-indigo); font-style: normal; }
.qw-lead { max-width: 58ch; margin: 0; color: var(--m-text); font-size: 1.075rem; line-height: 1.6; }
.qw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
.qw-actions .btn-lg { min-height: 52px; padding: 0 26px; border-radius: 14px; font-weight: 800; }
.qw-link { display: inline-flex; align-items: center; gap: 6px; color: var(--m-indigo-dark) !important; font-weight: 700; text-decoration: none !important; }
.qw-link:hover { text-decoration: underline !important; }
.qw-note { margin: 18px 0 0; color: var(--m-muted); font-size: .9rem; }
.qw-hero__art { display: flex; justify-content: center; }
.qw-hero__art img { width: 100%; max-width: 380px; height: auto; }
.qw-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; color: var(--m-muted); font-size: .88rem; }
.qw-meta span { display: inline-flex; align-items: center; gap: 6px; }
.qw-meta i { color: var(--m-indigo); }

.qw-section { padding: 72px 0; }
.qw-section--soft { background: #f8f9fb; border-top: 1px solid #eef0f5; border-bottom: 1px solid #eef0f5; }
.qw-section--tight { padding-top: 48px; }
.qw-head { max-width: 640px; margin: 0 auto 36px; text-align: center; }

.qw-eyebrow { display: block; margin-bottom: 8px; color: var(--m-indigo); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.qw-head h2, .qw-h2 { margin: 0; color: var(--m-ink); font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.qw-head p { margin: 12px 0 0; color: var(--m-muted); font-size: 1rem; line-height: 1.6; }

.qw-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.qw-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qw-card { display: flex; flex-direction: column; gap: 10px; padding: 28px; border: 1px solid var(--qx-card-line); border-radius: 20px; background: #fff; transition: border-color .15s ease, box-shadow .2s ease, transform .2s ease; }
.qw-card:hover { transform: translateY(-3px); border-color: rgba(var(--m-indigo-rgb), .28); box-shadow: 0 22px 44px -30px rgba(20, 18, 31, .35); }
.qw-card h3 { margin: 6px 0 0; color: var(--m-ink); font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; }
.qw-card p { margin: 0; color: var(--m-text); font-size: .95rem; line-height: 1.6; }
.qw-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--m-indigo-soft); color: var(--m-indigo); font-size: 1.4rem; }
.qw-ico--amber { background: var(--m-amber-soft); color: var(--m-amber-dark); }
.qw-ico--green { background: #e5f7ee; color: #148a4f; }

.qw-steps { position: relative; display: grid; grid-template-columns: repeat(var(--qw-steps, 4), minmax(0, 1fr)); gap: 20px; counter-reset: qw-step; }
.qw-steps::before { content: ""; position: absolute; top: 23px; left: 24px; right: 24px; height: 2px; background: linear-gradient(90deg, var(--m-indigo-soft), rgba(var(--m-indigo-rgb), .35), var(--m-indigo-soft)); }
.qw-step { position: relative; display: flex; flex-direction: column; gap: 10px; }
.qw-step__num { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 4px solid #fff; border-radius: 50%; background: var(--m-indigo); color: #fff; font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; box-shadow: 0 0 0 1px rgba(var(--m-indigo-rgb), .25); }
.qw-section--soft .qw-step__num { border-color: #f8f9fb; }
.qw-step h3 { margin: 6px 0 0; color: var(--m-ink); font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; }
.qw-step p { margin: 0; color: var(--m-text); font-size: .93rem; line-height: 1.6; }

.qw-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; }
.qw-split__art { display: flex; justify-content: center; }
.qw-split__art img { width: 100%; max-width: 340px; height: auto; }
.qw-checks { display: grid; gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.qw-checks li { display: flex; gap: 12px; color: var(--m-text); font-size: 1rem; line-height: 1.5; }
.qw-checks li i { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #e5f7ee; color: #148a4f; font-size: .9rem; }
.qw-checks strong { color: var(--m-ink); }

.qw-faq { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; }
.qw-faq details { border: 1px solid var(--qx-card-line); border-radius: 16px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.qw-faq details[open] { border-color: rgba(var(--m-indigo-rgb), .3); box-shadow: 0 14px 30px -24px rgba(20, 18, 31, .35); }
.qw-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; color: var(--m-ink); font-family: var(--font-display); font-size: 1rem; font-weight: 700; list-style: none; cursor: pointer; }
.qw-faq summary::-webkit-details-marker { display: none; }
.qw-faq summary::after { content: "+"; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--m-indigo-soft); color: var(--m-indigo); font-size: 1.1rem; font-weight: 700; transition: transform .2s ease; }
.qw-faq details[open] summary::after { transform: rotate(45deg); }
.qw-faq summary:focus-visible { outline: 2px solid var(--m-indigo); outline-offset: -2px; border-radius: 16px; }
.qw-faq details p { margin: 0; padding: 0 22px 20px; color: var(--m-text); font-size: .95rem; line-height: 1.65; }

.qw-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 36px 40px; border-radius: 24px; background: var(--m-indigo); color: #fff; }
.qw-band h2 { margin: 0 0 6px; color: #fff; font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; }
.qw-band p { margin: 0; color: rgba(255, 255, 255, .85); }
.qw-band .btn { flex: none; min-height: 52px; padding: 0 26px; border-radius: 14px; font-weight: 800; }

/* Prévia do painel (anuncie): ilustração em HTML */
.qw-preview { width: 100%; max-width: 400px; padding: 18px; border: 1px solid var(--qx-card-line); border-radius: 22px; background: #fff; box-shadow: 0 30px 60px -36px rgba(20, 18, 31, .45); }
.qw-preview__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; color: var(--m-ink); font-family: var(--font-display); font-size: .9rem; font-weight: 800; }
.qw-preview__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qw-preview__stat { padding: 12px 14px; border-radius: 14px; background: #f7f8fb; }
.qw-preview__stat small { display: block; color: var(--m-muted); font-size: .72rem; font-weight: 600; }
.qw-preview__stat strong { color: var(--m-ink); font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; }
.qw-preview__row { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid #f0f1f6; border-radius: 14px; }
.qw-preview__row > i { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--m-indigo-soft); color: var(--m-indigo); }
.qw-preview__row span { flex: 1 1 auto; min-width: 0; font-size: .8rem; line-height: 1.3; }
.qw-preview__row span strong { display: block; color: var(--m-ink); font-size: .82rem; }
.qw-preview__row span small { color: var(--m-muted); }
.qw-preview__row em { flex: none; padding: 5px 10px; border-radius: 8px; background: var(--m-indigo); color: #fff; font-size: .72rem; font-style: normal; font-weight: 700; }
.qw-preview__caption { margin: 10px 0 0; color: var(--m-muted); font-size: .72rem; text-align: center; }

/* Contato */
.qw-contact { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.qw-form { padding: 32px; border: 1px solid var(--qx-card-line); border-radius: 22px; background: #fff; }
.qw-form h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; }
.qw-form > p { margin: 0 0 22px; color: var(--m-muted); }
.qw-form .qp-grid { margin-bottom: 20px; }
.qw-form .btn-lg { min-height: 52px; padding: 0 28px; border-radius: 14px; font-weight: 800; }
.qw-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.qw-topic { margin: 0; cursor: pointer; }
.qw-topic input { position: absolute; opacity: 0; pointer-events: none; }
.qw-topic span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--m-line); border-radius: 999px; background: #fff; color: var(--m-text); font-size: .86rem; font-weight: 600; transition: all .15s ease; }
.qw-topic:hover span { border-color: rgba(var(--m-indigo-rgb), .35); }
.qw-topic input:checked + span { border-color: var(--m-indigo); background: var(--m-indigo); color: #fff; }
.qw-topic input:focus-visible + span { outline: 2px solid var(--m-indigo); outline-offset: 2px; }
.qw-aside { display: grid; gap: 16px; }
.qw-channel { display: flex; gap: 14px; padding: 20px; border: 1px solid var(--qx-card-line); border-radius: 18px; background: #fff; color: inherit !important; text-decoration: none !important; }
a.qw-channel:hover { border-color: rgba(var(--m-indigo-rgb), .3); }
.qw-channel .qw-ico { flex: none; width: 44px; height: 44px; font-size: 1.2rem; }
.qw-channel strong { display: block; color: var(--m-ink); font-family: var(--font-display); font-size: .95rem; }
.qw-channel span { display: block; margin-top: 2px; color: var(--m-muted); font-size: .86rem; line-height: 1.5; }
.qw-channel em { display: block; margin-top: 6px; color: var(--m-indigo-dark); font-size: .86rem; font-style: normal; font-weight: 700; }

/* Documentos legais */
.qw-doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
.qw-doc__nav { position: sticky; top: calc(var(--m-header-h, 74px) + 24px); display: grid; gap: 4px; }
.qw-doc__nav small { margin-bottom: 6px; color: var(--m-muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.qw-doc__nav a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; color: var(--m-text) !important; font-size: .9rem; font-weight: 600; text-decoration: none !important; }
.qw-doc__nav a:hover { background: #f2f3f8; }
.qw-doc__nav a.is-active { background: var(--m-indigo-soft); color: var(--m-indigo-dark) !important; }
.qw-doc__body { max-width: 72ch; }
.qw-doc__body h2 { margin: 36px 0 12px; color: var(--m-ink); font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; scroll-margin-top: 100px; }
.qw-doc__body h2:first-child { margin-top: 0; }
.qw-doc__body p, .qw-doc__body li { color: var(--m-text); font-size: 1rem; line-height: 1.75; }
.qw-doc__body ul { padding-left: 1.2rem; }
.qw-doc__help { display: flex; gap: 14px; margin-top: 36px; padding: 20px 22px; border-radius: 18px; background: var(--m-indigo-soft); }
.qw-doc__help i { color: var(--m-indigo); font-size: 1.4rem; }
.qw-doc__help p { margin: 0; font-size: .95rem; }

.qm-page-advantages .qx-footer__cta, .qm-page-contact .qx-footer__cta, .qm-page-terms .qx-footer__cta, .qm-page-privacy .qx-footer__cta { display: none; }

@media (max-width: 991.98px) {
    .qw-hero { padding: 48px 0 44px; }
    .qw-hero__grid, .qw-split { grid-template-columns: 1fr; gap: 32px; }
    .qw-hero__art img { max-width: 300px; }
    .qw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
    .qw-steps::before { display: none; }
    .qw-contact, .qw-doc { grid-template-columns: 1fr; }
    .qw-doc__nav { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
    .qw-doc__nav small { display: none; }
    .qw-section { padding: 56px 0; }
}
@media (max-width: 575.98px) {
    .qw-hero { padding: 36px 0; }
    .qw-cards, .qw-cards--2, .qw-steps { grid-template-columns: 1fr; }
    .qw-card { padding: 22px; }
    .qw-actions .btn-lg { width: 100%; }
    .qw-band { padding: 26px 22px; }
    .qw-band .btn { width: 100%; }
    .qw-form { padding: 22px; }
    .qw-form .btn-lg { width: 100%; }
    .qw-section { padding: 44px 0; }
}
.qm-public .qw-contact .qw-form { max-width: none !important; margin: 0 !important; justify-self: stretch; }
.qw-doc__nav { scrollbar-width: none; }
.qw-doc__nav::-webkit-scrollbar { display: none; }

/* ---- Gráfico de colunas diário (qch) ------------------------------------ */
.qch-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; padding: 20px 24px 0; }
.qch-card__head h2 { margin: 0; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; }
.qch-card__head p { margin: 4px 0 0; color: var(--m-muted); font-size: .875rem; }
.qch-card__kpi { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.qch-card__kpi > strong { color: var(--m-ink); font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.qch-card__kpi > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.qch-delta { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.qch-delta.is-up { background: #e5f7ee; color: #127a45; }
.qch-delta.is-down { background: #fdecef; color: #c42a44; }
.qch-delta__hint { color: var(--m-muted); font-size: .72rem; }

.qch { --qch: var(--m-indigo); --qch-rgb: var(--m-indigo-rgb); padding-top: 34px; }
.qch--amber { --qch: #f59e0b; --qch-rgb: 245, 158, 11; }
.qch__plot { position: relative; height: 210px; margin-left: 40px; }
.qch__grid span { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed #e6e8ef; }
.qch__grid span:last-child { border-top: 1px solid #e1e4ec; }
.qch__grid em { position: absolute; left: -40px; width: 34px; transform: translateY(-50%); color: #9aa1ad; font-size: .7rem; font-style: normal; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qch__cols { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 6px; }
.qch__col { position: relative; display: flex; flex: 1 1 0; align-items: flex-end; justify-content: center; min-width: 0; border-radius: 10px; outline: 0; cursor: default; transition: background-color .15s ease; }
.qch__col:hover, .qch__col:focus-visible { background: rgba(var(--qch-rgb), .06); }
.qch__bar { width: min(64%, 38px); min-height: 4px; border-radius: 8px 8px 3px 3px; background: rgba(var(--qch-rgb), .32); transition: background-color .15s ease, height .4s ease; }
.qch__col.is-today .qch__bar, .qch__col:hover .qch__bar, .qch__col:focus-visible .qch__bar { background: var(--qch); }
.qch__col.is-zero .qch__bar { background: #e6e8ef; }
.qch__tip { position: absolute; top: -8px; left: 50%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 10px; border-radius: 10px; background: var(--m-ink); color: rgba(255, 255, 255, .75); font-size: .7rem; white-space: nowrap; transform: translate(-50%, -100%); opacity: 0; pointer-events: none; transition: opacity .12s ease; box-shadow: 0 10px 24px -12px rgba(20, 18, 31, .5); }
.qch__tip strong { color: #fff; font-size: .8rem; }
.qch__col:hover .qch__tip, .qch__col:focus-visible .qch__tip { opacity: 1; }
.qch__col:first-child .qch__tip { left: 0; transform: translate(0, -100%); }
.qch__col:last-child .qch__tip { left: auto; right: 0; transform: translate(0, -100%); }
.qch__x { display: flex; gap: 6px; margin: 10px 0 0 40px; }
.qch__x span { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; min-width: 0; color: #9aa1ad; font-size: .7rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.qch__x b { color: var(--m-text); font-size: .72rem; font-weight: 600; }
.qch__x span.is-today, .qch__x span.is-today b { color: var(--qch); font-weight: 800; }
.qch--amber .qch__x span.is-today, .qch--amber .qch__x span.is-today b { color: #b86e00; }
@media (max-width: 1500px) { .qch--dense .qch__x span.is-skip { visibility: hidden; } }
@media (max-width: 575.98px) {
    .qch__plot { height: 170px; margin-left: 32px; }
    .qch__grid em { left: -32px; width: 28px; }
    .qch__x { margin-left: 32px; }
    .qch__cols, .qch__x { gap: 3px; }
    .qch-card__head { padding: 18px 18px 0; }
    .qch-card__kpi { align-items: flex-start; text-align: left; }
}

/* ---- Tráfego ao vivo v2 (qlv) ------------------------------------------- */
.qlv__kpis { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 16px; }
.qlv__hero { border-color: transparent; background: linear-gradient(135deg, var(--m-indigo), var(--m-indigo-dark)); color: #fff !important; }
.qlv__hero .qp-stat__label, .qlv__hero .qp-stat__foot { color: rgba(255, 255, 255, .8); }
.qlv__hero .qp-stat__value { color: #fff; font-size: 2.6rem; }
.qlv__status { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff !important; font-size: .72rem !important; font-weight: 600; }
.qlv__status .q-live__pulse { background: #c9ccff; }
.qlv__status.is-live .q-live__pulse { background: #4ade80; }
.qlv [data-live-reasons] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.qlv__main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.qlv__map .q-live__mapbox { margin: 0 20px 20px; border-color: #eef0f5; border-radius: 14px; background: #fafbfd; }
.qlv__map .q-live__svg { max-height: min(64vh, 620px); }
.qlv__legend { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 12px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .92); color: var(--m-muted); font-size: .72rem; font-weight: 600; box-shadow: 0 1px 3px rgba(20, 18, 31, .08); }
.qlv__legend span { display: inline-flex; align-items: center; gap: 6px; }
.qlv__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--m-amber); box-shadow: 0 0 0 3px rgba(245, 158, 11, .25); }
.qlv__swatch { display: inline-block; width: 14px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, rgba(98, 89, 248, .18), rgba(98, 89, 248, .66)); }
.qlv__side { display: grid; gap: 16px; }
.qlv__side .qp-card__head { padding: 16px 20px 12px; }
.qlv__side .qp-card__head h2 { font-size: .95rem; }
.qlv__side .qp-card__head p { font-size: .78rem; }
.qlv__listbody { padding: 8px 10px 10px; }
.qlv__listbody .q-live__list { margin: 0; }
.qlv__listbody .q-live__row { padding: .6rem .7rem .7rem; border-radius: 10px; }
.qlv__listbody .q-live__row strong { color: var(--m-ink); font-family: var(--font-display); }
.qlv__listbody .q-live__bar { height: 3px; border-radius: 3px; background: rgba(98, 89, 248, .5); }
.qlv__spark { display: flex; align-items: flex-end; gap: 3px; height: 70px; }
.qlv__spark span { flex: 1 1 0; height: 4px; border-radius: 3px 3px 1px 1px; background: #eceef4; }
.qlv__spark span.is-on { background: rgba(98, 89, 248, .45); }
.qlv__spark span.is-on:last-child { background: var(--m-indigo); }
.qlv__privacy { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; background: #fcfcfe; }
.qlv__privacy .qp-stat__icon { flex: none; }
.qlv__privacy p { margin: 0; color: var(--m-muted); font-size: .82rem; line-height: 1.55; }
.qlv__privacy strong { color: var(--m-ink); }
@media (max-width: 1199.98px) {
    .qlv__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qlv__main { grid-template-columns: 1fr; }
    .qlv__side { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 575.98px) {
    .qlv__map .q-live__mapbox { margin: 0 12px 12px; }
    .qlv__hero .qp-stat__value { font-size: 2.2rem; }
    .qlv__kpis { gap: 10px; }
    .qlv__hero { grid-column: 1 / -1; }
}
.qch__bar { position: relative; }
.qch__tip { top: auto; bottom: calc(100% + 8px); transform: translateX(-50%); }
.qch__col:first-child .qch__tip { left: 0; transform: none; }
.qch__col:last-child .qch__tip { left: auto; right: 0; transform: none; }
.qch-card__head { flex-wrap: nowrap; }
.qch-card__head > div:first-child { min-width: 0; }
.qch-card__kpi { flex: none; }
@media (max-width: 575.98px) { .qch-card__head { flex-wrap: wrap; } }
/* Uma rolagem só: o tema base deixava html/body com altura 100% e o body virava um segundo contêiner de rolagem (topo e menu 'descendo' ao rolar até o fim). */
html { height: auto; }
body.qm { height: auto; min-height: 100vh; overflow-x: clip; overflow-y: visible; }
body.qm.qx-drawer-open { overflow: hidden; }
@media (max-width: 1199.98px) { .qp-duo { grid-template-columns: minmax(0, 1fr); } }
.qp-duo > *, .qlv__main > *, .qlv__kpis > * { min-width: 0; }
.qp-rows, .qp-plist, .qp { grid-template-columns: minmax(0, 1fr); }
.qp-review__head > .qp-row__main { max-width: 100%; }
@media (max-width: 575.98px) { .qp-review__head > .qp-row__main { align-self: stretch; } }
.qp-btn-soft { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border: 0; border-radius: 11px; background: var(--m-indigo-soft); color: var(--m-indigo-dark) !important; font-weight: 700; }
.qp-btn-soft:hover { background: var(--m-indigo); color: #fff !important; }
.qs-compose { max-width: none; grid-template-columns: minmax(0, 1fr) 360px; }
.qs-topics { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
@media (max-width: 991.98px) { .qs-compose { grid-template-columns: 1fr; } }
.qs-topics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .qs-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .qs-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   16. HOME v3 (qh-*): hero mantido; resto novo
   ========================================================================== */
.qm-page-home .qx-hero { padding-bottom: 96px; }

.qh-trust { position: relative; z-index: 2; margin-top: -52px; }
.qh-trust__bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px; border: 1px solid var(--qx-card-line); border-radius: 22px; background: #fff; box-shadow: 0 24px 50px -34px rgba(20, 18, 31, .35); }
.qh-trust__item { display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.qh-trust__item + .qh-trust__item { border-left: 1px solid #f0f1f6; }
.qh-trust__item .qw-ico { flex: none; width: 44px; height: 44px; font-size: 1.25rem; }
.qh-trust__item > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.qh-trust__item strong { color: var(--m-ink); font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.qh-trust__item span { color: var(--m-muted); font-size: .82rem; }

.qh-section { padding: 72px 0; }
.qh-section--tight { padding-top: 56px; }
.qh-section--soft { background: #f8f9fb; border-top: 1px solid #eef0f5; border-bottom: 1px solid #eef0f5; }
.qh-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }
.qh-head h2 { margin: 0; color: var(--m-ink); font-family: var(--font-display); font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.qh-head p { margin: 8px 0 0; color: var(--m-muted); }
.qh-head--center { justify-content: center; text-align: center; }

.qh-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.qh-cat { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--qx-card-line); border-radius: 18px; background: #fff; color: inherit !important; text-decoration: none !important; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.qh-cat:hover { transform: translateY(-2px); border-color: rgba(var(--m-indigo-rgb), .35); box-shadow: 0 16px 32px -24px rgba(20, 18, 31, .4); }
.qh-cat__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--m-indigo-soft); color: var(--m-indigo); font-size: 1.35rem; transition: background-color .15s ease, color .15s ease; }
.qh-cat:hover .qh-cat__icon { background: var(--m-indigo); color: #fff; }
.qh-cat__text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.3; }
.qh-cat__text strong { overflow: hidden; color: var(--m-ink); font-family: var(--font-display); font-size: .92rem; white-space: nowrap; text-overflow: ellipsis; }
.qh-cat__text small { color: var(--m-muted); font-size: .78rem; }
.qh-cat__go { flex: none; color: #b8bdc8; font-size: 1.1rem; transition: color .15s ease; }
.qh-cat:hover .qh-cat__go { color: var(--m-indigo); }

.qh-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.qh-value { display: flex; flex-direction: column; gap: 10px; padding: 26px; border: 1px solid var(--qx-card-line); border-radius: 20px; background: #fff; }
.qh-value h3 { margin: 6px 0 0; color: var(--m-ink); font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; }
.qh-value p { margin: 0; color: var(--m-text); font-size: .93rem; line-height: 1.55; }
.qh-value--feature { border-color: transparent; background: var(--m-indigo); }
.qh-value--feature h3, .qh-value--feature p, .qh-value--feature strong { color: #fff; }
.qh-value--feature p { color: rgba(255, 255, 255, .88); }
.qh-value--feature .qw-ico { background: rgba(255, 255, 255, .16); color: #fff; }

.qh-brands { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 48px; }
.qh-brands__label { color: var(--m-muted); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.qh-brands__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.qh-brand { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border: 1px solid var(--qx-card-line); border-radius: 16px; background: #fff; }
.qh-brand img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.qh-brand > span { display: flex; flex-direction: column; line-height: 1.3; }
.qh-brand strong { color: var(--m-ink); font-family: var(--font-display); font-size: .9rem; }
.qh-brand strong i { color: var(--m-indigo); }
.qh-brand small { color: var(--m-muted); font-size: .76rem; }

.qh-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.qh-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 36px; border-radius: 24px; background: var(--m-indigo-soft); }
.qh-cta--amber { background: var(--m-amber-soft); }
.qh-cta .qw-ico { background: #fff; }
.qh-cta h2 { margin: 6px 0 0; color: var(--m-ink); font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.qh-cta p { max-width: 46ch; margin: 0 0 8px; color: var(--m-text); line-height: 1.6; }
.qh-cta .btn-lg { min-height: 50px; padding: 0 24px; border-radius: 14px; font-weight: 800; }
.qm-page-home .qx-footer__cta { display: none; }

@media (max-width: 1199.98px) {
    .qh-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .qh-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .qh-trust__bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qh-trust__item:nth-child(3) { border-left: 0; }
    .qh-trust__item:nth-child(n+3) { border-top: 1px solid #f0f1f6; }
    
    
    .qh-duo { grid-template-columns: 1fr; }
    .qh-section { padding: 56px 0; }
}
@media (max-width: 767.98px) {
    .qh-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .qh-cat { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
    .qh-cat__go { position: absolute; top: 14px; right: 14px; }
    .qh-cat__text strong { white-space: normal; }
}
@media (max-width: 575.98px) {
    .qm-page-home .qx-hero { padding-bottom: 76px; }
    .qh-trust__item { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
    .qh-trust__item strong { font-size: 1.15rem; }
    .qh-values { grid-template-columns: 1fr; }
    
    
    .qh-cta { padding: 26px 22px; }
    .qh-cta .btn-lg { width: 100%; }
    .qh-section { padding: 44px 0; }
}

.qh-trust__bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991.98px) {
    .qh-trust__bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .qh-trust__item:nth-child(3) { border-left: 1px solid #f0f1f6; }
    .qh-trust__item:nth-child(n+3) { border-top: 0; }
}
@media (max-width: 575.98px) {
    .qh-trust__bar { grid-template-columns: 1fr; }
    .qh-trust__item { flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; }
    .qh-trust__item + .qh-trust__item { border-left: 0 !important; border-top: 1px solid #f0f1f6 !important; }
}.qh-brand { width: 220px; max-width: 100%; }
.qh-brand > span { flex: 1 1 auto; min-width: 0; }
.qh-brand strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 575.98px) { .qh-brands__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .qh-brand { width: auto; } }


/* ---- Avaliações do admin (qr-*) ----------------------------------------- */
.qr-item { display: grid; gap: 14px; padding: 18px 24px; border-top: 1px solid #f0f1f6; }
.qp-rows > .qr-item:first-child { border-top: 0; }
.qr-item__head { display: flex; align-items: center; gap: 14px; }
.qr-item__logo { flex: none; width: 48px; height: 48px; border-radius: 14px; object-fit: cover; box-shadow: 0 0 0 1px var(--m-line); }
.qr-item__brand { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.3; }
.qr-item__brand strong { overflow: hidden; color: var(--m-ink); font-family: var(--font-display); font-size: .98rem; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.qr-item__brand strong i { color: var(--m-indigo); font-size: .95rem; }
.qr-item__brand span { overflow: hidden; color: var(--m-muted); font-size: .82rem; white-space: nowrap; text-overflow: ellipsis; }
.qr-item__rating { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 2px; }
.qr-item__rating .qp-stars { font-size: 1.05rem; }
.qr-item__rating small { color: var(--m-muted); font-size: .74rem; font-weight: 600; }
.qr-item__facts { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: 10px; margin-left: 62px; }
.qr-fact { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border: 1px solid #f0f1f6; border-radius: 12px; background: #fafbfd; }
.qr-fact > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.qr-fact small { color: var(--m-muted); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.qr-fact strong { overflow: hidden; color: var(--m-ink); font-size: .86rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.qr-fact span:not(.qr-fact__img):not(.qr-fact__icon) { overflow: hidden; color: var(--m-muted); font-size: .78rem; white-space: nowrap; text-overflow: ellipsis; }
.qr-fact__img { flex: none; width: 40px; height: 40px; padding: 4px; border-radius: 10px; background: #fff center / contain no-repeat; background-origin: content-box; box-shadow: 0 0 0 1px var(--m-line); }
.qr-fact__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--m-indigo-soft); color: var(--m-indigo); font-size: 1.1rem; }
.qr-item__comment { position: relative; margin: 0 0 0 62px; padding: 12px 16px 12px 40px; border-radius: 12px; background: var(--m-amber-soft); color: var(--m-text); font-size: .9rem; line-height: 1.55; }
.qr-item__comment i { position: absolute; top: 10px; left: 14px; color: var(--m-amber-dark); font-size: 1.1rem; }
@media (max-width: 1199.98px) {
    .qr-item__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qr-fact--product { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    .qr-item { padding: 16px 18px; }
    .qr-item__facts, .qr-item__comment { margin-left: 0; }
    .qr-item__facts { grid-template-columns: 1fr; }
    .qr-item__head { flex-wrap: wrap; }
    .qr-item__brand { flex-basis: calc(100% - 62px); }
    .qr-item__rating { flex-direction: row; align-items: center; gap: 8px; margin-left: 62px; margin-right: auto; }
}

/* Loja: grade semanal de horário e datas especiais */
.qp-week{display:grid;gap:6px}
.qp-week__row{display:grid;grid-template-columns:150px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 12px;border:1px solid #eef0f4;border-radius:10px;background:#fff}
.qp-week__row.is-closed{background:#f8f9fb}
.qp-week__day{display:flex;align-items:center;gap:8px;margin:0;font-weight:600;cursor:pointer}
.qp-week__day input{width:16px;height:16px;accent-color:#4f46e5}
.qp-week__closed{display:none;font-size:12px;color:#8a93a3}
.qp-week__row.is-closed .qp-week__closed{display:inline}
.qp-week__row.is-closed .qp-hours{opacity:.45}
.qp-week .qp-hours{max-width:320px}
.qp-exc-list{margin-top:22px;padding-top:18px;border-top:1px solid #eef0f4}
.qp-exc-list h3{font-size:15px;font-weight:700;margin:0 0 2px}
.qp-exc-list [data-exc-list]{display:grid;gap:8px;margin:10px 0}
.qp-exc{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border:1px solid #eef0f4;border-radius:10px;min-width:0}
.qp-exc > input[type="date"]{flex:0 0 165px;max-width:100%}
.qp-exc > input[type="text"]{flex:1 1 200px;min-width:0}
.qp-exc [data-exc-remove]{margin-left:auto}
.qp-exc__kind{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;white-space:nowrap}
.qp-exc__hours{display:flex;align-items:center;gap:6px}
.qp-exc__hours[hidden]{display:none}
.qp-exc__hours em{font-style:normal;color:#8a93a3;font-size:12px}
.qp-exc__hours .form-control{width:110px}
@media (max-width:767.98px){
    .qp-week__row{grid-template-columns:minmax(0,1fr);gap:6px}
    .qp-week__closed{justify-self:start}
    .qp-exc > input[type="date"]{flex:1 1 140px}
}

/* Produto: aviso de ficha compartilhada do catálogo */
.qp-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-bottom:16px;border-radius:10px;background:#eef2ff;color:#3730a3;font-size:13px;line-height:1.5}
.qp-note i{font-size:18px;line-height:1.2}

/* Reservas com vários itens (lista abaixo do título) */
.qp-res__items{list-style:none;margin:6px 0 2px;padding:8px 10px;border-radius:8px;background:#f8f9fb;display:grid;gap:4px;font-size:13px;min-width:0}
.qp-res__items li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:baseline}
.qp-res__items-qty{font-weight:700;color:#4f46e5}
.qp-res__items-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qp-res__items-price{color:#6b7280;font-variant-numeric:tabular-nums}
.qc-res .qp-res__items{margin:0 12px 10px}

/* Página do produto: adicionar à sacola */
.q-addbag{margin-top:10px;font-weight:600}
.q-addbag i{margin-right:4px}

/* Sacola (panel/personal/cart) */
.qk-store{overflow:hidden}
.qk-store__head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #eef0f4}
.qk-store__logo{width:44px;height:44px;border-radius:10px;object-fit:cover;border:1px solid #eef0f4;flex:0 0 auto}
.qk-store__name{display:flex;flex-direction:column;min-width:0;flex:1}
.qk-store__name strong{font-size:15px}
.qk-store__name small{color:#8a93a3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qk-items{display:grid}
.qk-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto auto;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid #f1f3f6}
.qk-item.is-off{background:#fffaf0}
.qk-item__img{width:64px;height:64px;border-radius:10px;background:#f4f5f8 center/cover no-repeat;border:1px solid #eef0f4}
.qk-item__main{display:flex;flex-direction:column;gap:2px;min-width:0}
.qk-item__name{font-weight:600;color:inherit;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.qk-item__unit{font-size:12px;color:#8a93a3}
.qk-item__warn{font-size:12px;color:#b45309}
.qk-item__qty .form-control{width:72px}
.qk-item__sub{font-variant-numeric:tabular-nums;min-width:96px;text-align:right}
.qk-item__qty,.qk-item__remove{margin:0}
.qk-store__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;background:#fafbfc}
.qk-store__foot form{margin:0}
.qk-store__total{display:flex;flex-direction:column}
.qk-store__total small{color:#8a93a3}
.qk-store__total strong{font-size:20px;font-variant-numeric:tabular-nums}
@media (max-width:767.98px){
    .qk-store__head,.qk-store__foot{padding:14px 16px}
    .qk-item{grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"img main main" "img qty sub" "img qty del";gap:6px 12px;padding:12px 16px}
    .qk-item__img{grid-area:img;width:56px;height:56px;align-self:start}
    .qk-item__main{grid-area:main}
    .qk-item__qty{grid-area:qty}
    .qk-item__sub{grid-area:sub;min-width:0}
    .qk-item__remove{grid-area:del;justify-self:end}
    .qk-store__foot{flex-direction:column;align-items:stretch}
    .qk-store__foot .btn{width:100%}
}

/* Equipe (panel/business/team) */
.qt-form{display:grid;gap:16px}
.qt-access{display:grid;gap:14px}
.qt-access fieldset{margin:0;padding:0;border:0;min-width:0}
.qt-access legend{font-size:13px;font-weight:600;margin-bottom:6px}
.qt-roles{display:grid;gap:8px}
.qt-role{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid #eef0f4;border-radius:10px;cursor:pointer;margin:0}
.qt-role:has(input:checked){border-color:#4f46e5;background:#f5f5ff}
.qt-role input{margin-top:3px;accent-color:#4f46e5}
.qt-role span{display:flex;flex-direction:column;gap:2px}
.qt-role small{color:#6b7280;line-height:1.4}
.qt-inline{display:flex;gap:8px;align-items:center;margin:0 0 6px;font-size:14px}
.qt-inline input{accent-color:#4f46e5}
.qt-stores[hidden]{display:none}
.qt-list{display:grid}
.qt-member{padding:14px 20px;border-bottom:1px solid #f1f3f6}
.qt-member:last-child{border-bottom:0}
.qt-member__row{display:flex;align-items:center;gap:12px}
.qt-member__avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid #eef0f4;flex:0 0 auto}
.qt-member__main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.qt-member__main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qt-member__main small{color:#8a93a3}
.qt-member__edit{margin:10px 0 0 52px}
.qt-member__edit summary{cursor:pointer;font-size:13px;font-weight:600;color:#4f46e5;list-style:none}
.qt-member__edit summary::-webkit-details-marker{display:none}
.qt-member__edit[open] summary{margin-bottom:12px}
.qt-member__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.qt-member__actions form{margin:0}
@media (max-width:767.98px){
    .qt-member{padding:12px 16px}
    .qt-member__edit{margin-left:0}
}

.q-buy-card__actions > form.flex-fill{min-width:0}
.q-buy-card__actions .q-reserve-row{min-width:0;gap:8px}
.q-buy-card__actions .q-reserve-row .btn-block{min-width:0;flex:1 1 auto;width:auto}
/* Computador: a sacola fica numa linha própria, abaixo de quantidade + Reservar + ícones */
.q-buy-card__actions{flex-wrap:wrap}
.q-buy-card__actions > .q-addbag{flex:1 1 100%;margin-top:0}
@media (max-width:991.98px){
    /*
     * Tablet e celular: quantidade sozinha, favoritar | compartilhar, Adicionar à sacola e
     * Reservar por último, todos com a mesma altura. O formulário e a linha do Reservar
     * viram "display:contents" para os filhos entrarem direto na grade (o formulário
     * continua funcionando normalmente).
     */
    .q-buy-card__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .q-buy-card__actions > form.flex-fill,
    .q-buy-card__actions .q-reserve-row{display:contents!important}
    .q-buy-card__actions .qty-stepper{grid-column:1 / -1;order:1}
    .q-buy-card__actions > form:not(.flex-fill){order:2;margin:0;min-width:0}
    .q-buy-card__actions > #q-share{order:3}
    .q-buy-card__actions > .q-addbag{grid-column:1 / -1;order:4}
    .q-buy-card__actions .q-reserve-row .btn-block{grid-column:1 / -1;order:5}
    .q-buy-card__actions > .btn-block,.q-buy-card__actions > .btn-block ~ #q-share{grid-column:1 / -1}
    .q-buy-card__actions .qty-stepper,
    .q-buy-card__actions .q-reserve-row .btn-block,
    .q-buy-card__actions > .btn-block,
    .q-buy-card__actions .q-icon-btn,
    .q-buy-card__actions > .q-addbag{width:100%;height:50px;min-height:50px;margin:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
    .q-buy-card__actions .qty-stepper{justify-content:space-between}
    .q-buy-card__actions .qty-input{flex:1 1 auto;text-align:center}
}

/* Página do produto: aviso depois de "Adicionar à sacola" */
.q-cartnote{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#ecfdf5;color:#065f46;font-size:14px;font-weight:600}
.q-cartnote i{font-size:18px;color:#10b981}
.q-cartnote a{margin-left:auto;color:#4f46e5;font-weight:700;white-space:nowrap}

/* Cabeçalho: botão da sacola (cliente logado) */
.qx-cartbtn{position:relative}
.qx-cartbtn__count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#f59e0b;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
#q-reserve{scroll-margin-top:90px}

/*
 * iPhone/Safari: o select (e os campos de data/hora) usa a aparência nativa do iOS, que
 * ignora height/min-height e fica mais baixo que os outros campos. Sem a aparência nativa
 * a altura do CSS passa a valer; a seta vira um SVG desenhado aqui (mesma cor do texto
 * secundário). Só background-image/position/size/repeat, para não apagar a cor de fundo
 * que cada componente já define.
 */
select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 14px 14px;
}
select:not([multiple]):not([size])::-ms-expand { display: none; }
input[type="date"].form-control,
input[type="time"].form-control {
    -webkit-appearance: none;
    appearance: none;
    min-height: calc(1.5em + .75rem + 2px);
}
.qp-field input[type="date"].form-control,
.qp-field input[type="time"].form-control { min-height: 46px; }
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value { text-align: left; min-height: 1.5em; }

/* Minhas reservas: marca (nome fantasia) e, embaixo, a loja */
.qp-res__brand{display:flex;align-items:center;gap:8px;margin:4px 0 2px;min-width:0}
.qp-res__brand img{width:28px;height:28px;border-radius:7px;object-fit:cover;border:1px solid #eef0f4;flex:0 0 auto}
.qp-res__brand div{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.qp-res__brand strong{font-size:13px;font-weight:700}
.qp-res__brand strong i{color:#4f46e5;font-size:14px;vertical-align:-2px}
.qp-res__brand small{font-size:12px;color:#8a93a3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qc-res__store{color:#4b5563!important;font-weight:600}
.qc-res__store i{color:#4f46e5}

/* Sobre nós: mapa do bairro (arte feita com os componentes do site, sem imagem externa) */
.qw-nbh { position: relative; width: 100%; max-width: 420px; aspect-ratio: 400 / 320; }
.qw-nbh__map { display: block; width: 100%; height: 100%; border-radius: var(--m-radius-xl); box-shadow: var(--m-shadow); }
.qw-nbh__you { position: absolute; left: 50%; top: 51%; transform: translate(-50%, 22px); display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--m-indigo); color: #fff; font-size: .75rem; font-weight: 700; box-shadow: var(--m-shadow-indigo); white-space: nowrap; }
.qw-nbh__card { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border: 1px solid var(--m-line); border-radius: 14px; background: var(--m-surface); box-shadow: var(--m-shadow-hover); max-width: 78%; }
.qw-nbh__card div { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.qw-nbh__card strong { color: var(--m-ink); font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.qw-nbh__card strong i { color: var(--m-indigo); }
.qw-nbh__card small { color: var(--m-muted); font-size: .75rem; white-space: nowrap; }
.qw-nbh__card small b { color: #0f9f5a; font-weight: 700; }
.qw-nbh__card--store { left: -18px; top: 38%; }
.qw-nbh__card--res { right: -14px; bottom: -18px; }
.qw-nbh__icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: var(--m-indigo-soft); color: var(--m-indigo); font-size: 1.05rem; }
.qw-nbh__icon--green { background: #e4f6ec; color: #0f9f5a; }
@media (max-width: 991.98px) {
    .qw-nbh { max-width: 380px; margin: 0 auto; }
    .qw-nbh__card--store { left: 6px; top: 24%; }
    .qw-nbh__card--res { right: 6px; bottom: -14px; }
}

/* Artes das páginas públicas feitas com os componentes do site (Como funciona e Vantagens) */
.qw-nbh__icon--amber { background: var(--m-amber-soft); color: var(--m-amber-dark); }

/* Como funciona: celular com a busca */
.qw-phone { position: relative; width: 100%; max-width: 290px; margin: 0 auto; padding: 10px; border-radius: 34px; background: var(--m-ink); box-shadow: 0 24px 48px -18px rgba(var(--m-ink-rgb), .45); }
.qw-phone__screen { display: flex; flex-direction: column; gap: 10px; padding: 18px 14px 16px; border-radius: 26px; background: #f7f7fb; }
.qw-phone__search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--m-line); border-radius: 12px; background: var(--m-surface); color: var(--m-ink); font-size: .8125rem; font-weight: 600; }
.qw-phone__search i { color: var(--m-indigo); }
.qw-phone__where { display: flex; align-items: center; gap: 6px; color: var(--m-indigo-dark); font-size: .75rem; font-weight: 700; }
.qw-phone__item { display: flex; gap: 10px; padding: 10px; border: 1px solid var(--m-line); border-radius: 14px; background: var(--m-surface); }
.qw-phone__item > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.qw-phone__item strong { color: var(--m-ink); font-size: .8125rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qw-phone__item small { color: var(--m-muted); font-size: .72rem; }
.qw-phone__thumb { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 12px; background: var(--m-indigo-soft); color: var(--m-indigo); font-size: 1.5rem; }
.qw-phone__thumb--amber { background: var(--m-amber-soft); color: var(--m-amber-dark); }
.qw-phone__row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.qw-phone__row b { color: var(--m-ink); font-size: .875rem; font-weight: 800; }
.qw-phone__row em { padding: 1px 8px; border-radius: 999px; background: #e4f6ec; color: #0f9f5a; font-size: .68rem; font-style: normal; font-weight: 700; }
.qw-phone__btn { display: block; padding: 10px; border-radius: 12px; background: var(--m-indigo); color: #fff; font-size: .8125rem; font-weight: 700; text-align: center; box-shadow: var(--m-shadow-indigo); }
.qw-phone__toast { left: auto; right: -64px; bottom: -22px; }
.qw-phone__screen { padding-bottom: 38px; }

/* Vantagens: painel do lojista */
.qw-dash { position: relative; width: 100%; max-width: 380px; margin: 0 auto; }
.qw-dash__panel { padding: 18px; border: 1px solid var(--m-line); border-radius: var(--m-radius-xl); background: var(--m-surface); box-shadow: var(--m-shadow-hover); }
.qw-dash__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.qw-dash__head div { display: flex; flex-direction: column; line-height: 1.2; }
.qw-dash__head strong { color: var(--m-ink); font-size: .875rem; }
.qw-dash__head small { color: var(--m-muted); font-size: .75rem; }
.qw-dash__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.qw-dash__stats div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: #f7f7fb; line-height: 1.25; }
.qw-dash__stats small { color: var(--m-muted); font-size: .72rem; font-weight: 600; }
.qw-dash__stats strong { color: var(--m-ink); font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; }
.qw-dash__stats em { color: #0f9f5a; font-size: .7rem; font-style: normal; font-weight: 700; }
.qw-dash__chart { display: flex; align-items: flex-end; gap: 8px; height: 96px; padding: 0 2px; }
.qw-dash__chart span { flex: 1; border-radius: 6px 6px 3px 3px; background: rgba(var(--m-indigo-rgb), .22); }
.qw-dash__chart span.is-today { background: var(--m-indigo); }
.qw-dash__days { display: flex; gap: 8px; margin-top: 6px; }
.qw-dash__days span { flex: 1; color: var(--m-muted); font-size: .65rem; text-align: center; }
.qw-dash__toast { left: auto; right: -34px; top: -22px; }

/* Vantagens: produto na busca + chat */
.qw-listing { position: relative; width: 100%; max-width: 330px; margin: 0 auto; padding-bottom: 70px; }
.qw-listing__card { overflow: hidden; border: 1px solid var(--m-line); border-radius: var(--m-radius-xl); background: var(--m-surface); box-shadow: var(--m-shadow-hover); }
.qw-listing__photo { position: relative; display: grid; place-items: center; height: 150px; background: linear-gradient(135deg, var(--m-indigo-soft), #fff 70%); color: var(--m-indigo); font-size: 4rem; }
.qw-listing__photo em { position: absolute; left: 12px; top: 12px; padding: 3px 10px; border-radius: 999px; background: var(--m-surface); color: var(--m-indigo-dark); font-size: .72rem; font-style: normal; font-weight: 700; box-shadow: var(--m-shadow-sm); }
.qw-listing__body { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; }
.qw-listing__body small { color: var(--m-muted); font-size: .75rem; font-weight: 600; }
.qw-listing__body small .ri-verified-badge-fill { color: var(--m-indigo); }
.qw-listing__body strong { color: var(--m-ink); font-size: .9375rem; font-weight: 700; }
.qw-listing__chat { position: absolute; right: -28px; bottom: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.qw-listing__msg { padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--m-surface); border: 1px solid var(--m-line); color: var(--m-ink); font-size: .8rem; box-shadow: var(--m-shadow); }
.qw-listing__msg.is-store { border-color: transparent; border-radius: 14px 14px 14px 4px; background: var(--m-indigo); color: #fff; box-shadow: var(--m-shadow-indigo); }

@media (max-width: 991.98px) {
    .qw-phone__toast { right: -8px; bottom: -22px; }
    .qw-dash__toast { right: 8px; top: -26px; }
    .qw-listing__chat { right: 4px; }
}

/* ---- Moderação com revisão (2026-09-30) ---------------------------------- */
/* Lojista: faixa no formulário do anúncio bloqueado / em revisão */
.qp-modnote { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; padding: 14px 16px; border: 1px solid #fecdca; border-radius: 14px; background: #fef3f2; color: #7a271a; font-size: .875rem; line-height: 1.5; }
.qp-modnote > i { flex: none; margin-top: 1px; color: #d92d20; font-size: 1.2rem; }
.qp-modnote > div { display: grid; gap: 2px; }
.qp-modnote strong { color: inherit; font-family: var(--font-display); }
.qp-modnote--review { border-color: rgba(var(--m-indigo-rgb), .25); background: var(--m-indigo-soft); color: var(--m-indigo-dark); }
.qp-modnote--review > i { color: var(--m-indigo); }

/* Administrador: alerta de contas reincidentes */
.qp-modalert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid #fedf89; border-radius: 14px; background: #fffaeb; color: #7a2e0e; font-size: .875rem; line-height: 1.5; }
.qp-modalert > i { flex: none; margin-top: 1px; color: #dc6803; font-size: 1.2rem; }
.qp-modalert strong { display: block; color: inherit; font-family: var(--font-display); }
.qp-modalert ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.qp-modalert li { display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid #fedf89; border-radius: 11px; background: #fff; line-height: 1.3; }
.qp-modalert li a { color: var(--m-ink); font-weight: 700; }
.qp-modalert li small { color: var(--m-muted); font-size: .75rem; }

/* Administrador: cartão em revisão ocupa a linha, com antes/depois lado a lado */
.qp-mod__card--review { grid-column: 1 / -1; flex-direction: row; box-shadow: 0 0 0 2px rgba(var(--m-indigo-rgb), .35); }
.qp-mod__card--review .qp-mod__media { flex: none; width: 240px; aspect-ratio: auto; border-right: 1px solid #f0f1f6; border-bottom: 0; }
.qp-mod__card--review .qp-mod__body { min-width: 0; }
.qp-mod__card--review .qp-mod__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qp-mod__compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qp-mod__compare section { min-width: 0; padding: 12px 14px; border: 1px solid #fecdca; border-radius: 12px; background: #fffbfa; }
.qp-mod__compare section.is-new { border-color: #b7e4cb; background: #f6fef9; }
.qp-mod__compare h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--m-muted); font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.qp-mod__compare strong { display: block; margin-bottom: 4px; color: var(--m-ink); font-size: .875rem; }
.qp-mod__compare p { max-height: 150px; margin: 0; overflow-y: auto; color: var(--m-text); font-size: .8125rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.qp-mod__compare em { color: var(--m-muted); }
.qp-mod__compare mark { padding: 0 2px; border-radius: 4px; background: #fee4e2; color: #b42318; font-weight: 700; }
.qp-mod__hint, .qp-mod__kept { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--m-muted); font-size: .8rem; }
.qp-mod__kept { align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: #f5f6fa; color: var(--m-text); }
.qp-mod__keep { display: grid; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--m-line); }
.qp-mod__keep[hidden] { display: none; }
.qp-mod__keep textarea.form-control { min-height: 70px; }
.qp-mod__keep-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 767.98px) {
    .qp-mod__card--review { flex-direction: column; }
    .qp-mod__card--review .qp-mod__media { width: auto; aspect-ratio: 4 / 3; border-right: 0; border-bottom: 1px solid #f0f1f6; }
    .qp-mod__compare { grid-template-columns: 1fr; }
    .qp-mod__card--review .qp-mod__actions { grid-template-columns: 1fr 1fr; }
    .qp-mod__card--review .qp-mod__actions > :last-child { grid-column: 1 / -1; }
}