/*
 * Skin QuantoFica (roxo + lima) sobre o UBold.
 * Paleta: roxo #7047EB · lima #C5EF65 · fundo #F7F7FB · texto #292633 · fonte Poppins.
 * Segue o formato dos skins do app.min.css (html[data-skin=...]); não editar o CSS do UBold.
 */

html[data-skin=quantofica] {
    --qf-roxo: #7047eb;
    --qf-roxo-escuro: #5a36c9;
    --qf-lima: #c5ef65;
    --qf-lima-rgb: 197, 239, 101;
    --qf-fundo: #f7f7fb;
    --qf-texto: #292633;

    --theme-font-sans-serif: "Poppins", sans-serif;
    --theme-font-family-secondary: "Poppins", sans-serif;
    --theme-body-font-family: "Poppins", sans-serif;

    --theme-primary: #7047eb;
    --theme-primary-rgb: 112, 71, 235;
    --theme-primary-bg-subtle: rgba(112, 71, 235, .12);
    --theme-primary-border-subtle: rgba(112, 71, 235, .3);
    --theme-primary-text-emphasis: #5a36c9;

    --theme-link-color: #7047eb;
    --theme-link-color-rgb: 112, 71, 235;
    --theme-link-hover-color: #5a36c9;
    --theme-link-hover-color-rgb: 90, 54, 201;

    --theme-chart-primary: #7047eb;
    --theme-chart-primary-rgb: 112, 71, 235;
    --theme-chart-secondary: #c5ef65;
    --theme-chart-secondary-rgb: 197, 239, 101;
}

html[data-skin=quantofica][data-bs-theme=light] {
    --theme-body-bg: #f7f7fb;
    --theme-body-color: #292633;
    --theme-heading-color: #292633;
    --theme-emphasis-color: #292633;
}

html[data-skin=quantofica][data-bs-theme=dark] {
    --theme-primary: #8b6cf0;
    --theme-primary-rgb: 139, 108, 240;
    --theme-primary-text-emphasis: #a891f4;
    --theme-link-color: #a891f4;
    --theme-link-color-rgb: 168, 145, 244;
}

html[data-skin=quantofica][data-menu-color=light] {
    --theme-sidenav-bg: #fff;
    --theme-sidenav-border-color: #ececf3;
    --theme-sidenav-item-color: #292633;
    --theme-sidenav-item-hover-color: #7047eb;
    --theme-sidenav-item-hover-bg: rgba(112, 71, 235, .08);
    --theme-sidenav-item-active-color: #fff;
    --theme-sidenav-item-active-bg: #7047eb;
}

html[data-skin=quantofica][data-topbar-color=light] {
    --theme-topbar-bg: #f2eefb;
    --theme-topbar-item-color: #292633;
    --theme-topbar-item-hover-color: #7047eb;
}

/* Lima: destaque secundário (metas, barras de progresso, selos positivos). */
.bg-lima { background-color: var(--qf-lima) !important; color: var(--qf-texto) !important; }
.bg-lima-subtle { background-color: rgba(var(--qf-lima-rgb), .25) !important; }
.text-lima { color: var(--qf-lima) !important; }
.progress-bar.bg-lima { background-color: var(--qf-lima) !important; }

/* Fundo das telas de autenticação: os objetos ficam à esquerda, o card ocupa o espaço vazio à direita. */
.qf-auth-fundo {
    background: #f1edfb url("../images/login-fundo.jpg") left center / cover no-repeat;
}

.qf-auth-fundo .card {
    box-shadow: 0 1rem 3rem rgba(41, 38, 51, .12);
}

/* Logo nas telas de autenticação (o UBold já alterna logo-dark/logo-light pelo tema). */
.auth-brand .logo-dark img,
.auth-brand .logo-light img { height: 40px; }

/* ---------- Layout principal (esboço: docs/identidade-visual/esboco-telas.png) ---------- */

/* Menu lateral: logo maior, itens arredondados, ativo em roxo com texto branco. */
.sidenav-menu .logo .logo-lg img { height: 34px; }
.sidenav-menu .side-nav { padding: .5rem .75rem; }
.sidenav-menu .side-nav .side-nav-item { margin-bottom: .25rem; }
.sidenav-menu .side-nav .side-nav-link { border-radius: 10px; }
.sidenav-menu .side-nav .side-nav-link:hover { background-color: var(--theme-sidenav-item-hover-bg); }
.sidenav-menu .side-nav .side-nav-link.active,
.sidenav-menu .side-nav .side-nav-link.active:hover {
    background-color: var(--theme-sidenav-item-active-bg);
    color: var(--theme-sidenav-item-active-color) !important;
}

/* Topo: faixa lilás bem clara com uma linha fina embaixo, separando do conteúdo. */
html[data-skin=quantofica] .app-topbar { box-shadow: none; border-bottom: 1px solid #e6dff5; }

/* Avatar com a inicial do usuário. */
.qf-avatar {
    width: 36px; height: 36px;
    background-color: #ecebf3; color: var(--qf-texto, #292633);
    font-weight: 600;
}

/* Menu suspenso nativo (<details>), sem depender do JS do Bootstrap. */
.qf-dropdown { position: relative; }
.qf-dropdown > summary { list-style: none; cursor: pointer; }
.qf-dropdown > summary::-webkit-details-marker { display: none; }
.qf-dropdown > .dropdown-menu { position: absolute; inset-inline-end: 0; top: 100%; min-width: 220px; }
.qf-dropdown:not([open]) > .dropdown-menu { display: none; }

/* Aviso de erro do Blazor (antes ficava no CSS do layout do template). */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* Foto de perfil: avatar do topo e foto grande na tela Meu perfil. */
img.qf-avatar { object-fit: cover; }
.qf-foto-perfil { width: 112px; height: 112px; object-fit: cover; }

/* Cards de atalho (ex.: Configurações): leve destaque ao passar o mouse. */
.qf-card-atalho { transition: transform .15s ease, box-shadow .15s ease; }
.qf-card-atalho:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.5rem rgba(112, 71, 235, .12) !important; }

/* Logo do negócio no topo. */
.qf-logo-negocio { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; }

/* Etapas do assistente de boas-vindas: 1 Seus dados → 2 Seu negócio → 3 Pronto. */
.qf-etapas { display: flex; list-style: none; padding: 0; margin: 0; gap: .5rem; }
.qf-etapas li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; position: relative; color: var(--theme-secondary-color); font-size: .8rem; }
.qf-etapas li:not(:last-child)::after { content: ""; position: absolute; top: 16px; left: calc(50% + 22px); right: calc(-50% + 22px); height: 2px; background: #e4e1f0; }
.qf-etapas li.concluida:not(:last-child)::after { background: var(--qf-roxo, #7047eb); }
.qf-etapa-numero { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; background: #ecebf3; color: var(--qf-texto, #292633); }
.qf-etapas li.atual { color: var(--qf-texto, #292633); font-weight: 600; }
.qf-etapas li.atual .qf-etapa-numero { background: var(--qf-roxo, #7047eb); color: #fff; }
.qf-etapas li.concluida .qf-etapa-numero { background: var(--qf-lima, #c5ef65); color: var(--qf-texto, #292633); }

/* Menu lateral roxo "fumê" em degradê, item ativo roxo vivo com barra lima —
   escolhido em 2026-10-29 a partir da referência do usuário. Vale com
   data-menu-color="dark" (App.razor); o UBold troca sozinho pra logo clara. */
html[data-skin=quantofica][data-menu-color=dark] {
    --theme-sidenav-bg: #322451;
    --theme-sidenav-border-color: #322451;
    --theme-sidenav-item-color: #d9d2ec;
    --theme-sidenav-item-hover-color: #ffffff;
    --theme-sidenav-item-hover-bg: rgba(255, 255, 255, .06);
    --theme-sidenav-item-active-color: #ffffff;
    --theme-sidenav-item-active-bg: #7545ef;
}
html[data-skin=quantofica][data-menu-color=dark] .sidenav-menu {
    background: linear-gradient(180deg, #3d2c66 0%, #322451 45%, #221838 100%);
}
html[data-skin=quantofica][data-menu-color=dark] .side-nav-title { color: #9f93c4; }
html[data-skin=quantofica][data-menu-color=dark] .sidenav-menu .side-nav .side-nav-link.active {
    box-shadow: inset 4px 0 0 var(--qf-lima);
}

/* Negócio selecionado: etiqueta centralizada no topo (no celular, só a logo/ícone). */
.app-topbar .topbar-menu { position: relative; }
.qf-topo-centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 45%; }
.qf-negocio-atual {
    display: flex; align-items: center; gap: .5rem;
    padding: .35rem .85rem .35rem .45rem; border-radius: 999px;
    background: #fff; border: 1px solid #e6dff5;
    color: var(--qf-texto, #292633); font-weight: 600; text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.qf-negocio-atual:hover { border-color: var(--qf-roxo); box-shadow: 0 .25rem .75rem rgba(112, 71, 235, .12); color: var(--qf-texto, #292633); }
.qf-negocio-atual .lucide-store, .qf-negocio-atual > .lucide:first-child { color: var(--qf-roxo); }
.qf-negocio-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qf-negocio-seta { color: var(--theme-secondary-color); flex-shrink: 0; }
@media (max-width: 575.98px) {
    .qf-negocio-nome, .qf-negocio-seta { display: none; }
    .qf-negocio-atual { padding: .35rem; }
}

/* Menu da área Segurança da conta. */
.qf-nav-conta .nav-link { color: var(--qf-texto, #292633); border-radius: 8px; }
.qf-nav-conta .nav-link:hover { background: rgba(112, 71, 235, .08); }
.qf-nav-conta .nav-link.active { background: var(--qf-roxo); color: #fff; }

/* QR code do aplicativo autenticador. */
.qf-qrcode svg { width: 180px; height: 180px; display: block; }

/* Grupo de opções (btn-group de radio): todas do mesmo tamanho, independente do texto. */
.qf-opcoes > .btn { flex: 1 1 0; }

/* Confirmações (SweetAlert2) no visual do app: fonte, cantos e cores do tema. */
.swal2-popup.qf-swal { font-family: inherit; border-radius: 12px; padding: 1.75rem 1.5rem 1.5rem; width: 26rem; }
.swal2-popup.qf-swal .swal2-title { font-size: 1.25rem; font-weight: 700; color: var(--qf-texto, #292633); padding-top: .25rem; }
.swal2-popup.qf-swal .swal2-html-container { font-size: .95rem; color: var(--bs-secondary-color, #6c757d); margin-top: .5rem; }
.swal2-popup.qf-swal .swal2-html-container strong { color: var(--qf-texto, #292633); }
.swal2-popup.qf-swal .swal2-icon { transform: scale(.8); margin: .25rem auto 0; }
.swal2-popup.qf-swal .swal2-icon.swal2-question { border-color: rgba(112, 71, 235, .35); color: var(--qf-roxo); }
.swal2-popup.qf-swal .swal2-actions { margin-top: 1.25rem; }


/* Quadro da produção (igual ao esboço): colunas cinza com cards brancos; faixa à esquerda na cor do prazo.
   Cores do tema UBold (--theme-*), não do Bootstrap (--bs-*). */
.qf-quadro { display: grid; grid-template-columns: repeat(4, minmax(250px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 4px; align-items: start; }
.qf-coluna { background: var(--theme-body-bg, #f7f7fb); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.qf-coluna-topo { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .85rem; padding: 2px 2px 0; }
.qf-coluna-cards { display: flex; flex-direction: column; gap: 10px; min-height: 60px; border-radius: 10px; }
.qf-coluna-cards.qf-alvo { outline: 2px dashed var(--qf-roxo); outline-offset: 3px; }

.qf-pcard { --qf-faixa: var(--theme-border-color, #e6e3f0); background: var(--theme-secondary-bg, #fff); border: 1px solid var(--theme-border-color, #e6e3f0);
    border-left: 4px solid var(--qf-faixa); border-radius: 10px; padding: 12px 12px 10px 10px; display: grid; gap: 7px; }
.qf-pcard.qf-prazo-ok, .qf-legenda.qf-prazo-ok { --qf-faixa: var(--theme-success); }
.qf-pcard.qf-prazo-perto, .qf-legenda.qf-prazo-perto { --qf-faixa: var(--theme-warning); }
.qf-pcard.qf-prazo-atrasada, .qf-legenda.qf-prazo-atrasada { --qf-faixa: var(--theme-danger); }
.qf-pcard.qf-prazo-feita { --qf-faixa: var(--theme-success); }
.qf-pcard.qf-prazo-entregue { --qf-faixa: var(--theme-primary); opacity: .85; }
.qf-pcard.qf-prazo-atrasada { background: linear-gradient(rgba(var(--theme-danger-rgb), .05), rgba(var(--theme-danger-rgb), .05)), var(--theme-secondary-bg, #fff); }
.qf-pcard-num { font-size: .7rem; font-weight: 600; color: var(--theme-secondary-color); }
.qf-pcard-alca { color: var(--theme-secondary-color); line-height: 1; }
.qf-pcard-prod { font-weight: 700; font-size: .95rem; line-height: 1.25; color: var(--qf-texto, #292633); }
.qf-pcard-quem { font-size: .82rem; color: var(--theme-secondary-color); }
.qf-pcard-obs { font-size: .75rem; color: var(--theme-secondary-color); font-style: italic; }
.qf-chip { display: inline-block; font-size: .7rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.qf-chip-neutro { background: var(--theme-body-bg, #f7f7fb); color: var(--theme-secondary-color); border: 1px solid var(--theme-border-color); }
.qf-pcard-acoes { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.qf-btn-card { font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 8px; display: inline-flex; align-items: center; gap: 4px; }
.qf-btn-icone { padding: 4px; line-height: 1; color: var(--theme-secondary-color); border-radius: 6px; }
.qf-btn-icone:hover { color: var(--qf-roxo); background: rgba(112, 71, 235, .08); }
.qf-arrastavel { cursor: grab; }
.qf-arrastavel:active { cursor: grabbing; }
.qf-producao-fantasma { opacity: .35; }
.qf-producao-arrastando .qf-pcard { transform: rotate(2deg); box-shadow: 0 .75rem 1.5rem rgba(41, 38, 51, .18); }
.qf-legenda { display: inline-flex; align-items: center; gap: 6px; }
.qf-legenda::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--qf-faixa); }

/* Cores exatas do esboço da produção (faixa do card, tags e contadores das colunas). */
:root {
    --qf-ok: #1fa971; --qf-ok-suave: #e3f6ee;
    --qf-aviso: #c98a06; --qf-aviso-suave: #fdf3dc;
    --qf-perigo: #d9465b; --qf-perigo-suave: #fbe6ea;
    --qf-info: #2f80c8; --qf-info-suave: #e4effa;
    --qf-roxo-suave: #efeafd;
    --qf-linha: #e6e3f0; --qf-apagado: #7b7690; --qf-fundo: #f7f7fb;
}
[data-bs-theme=dark] {
    --qf-ok-suave: #173327; --qf-aviso-suave: #3a2e10; --qf-perigo-suave: #3d1c23; --qf-info-suave: #172b3d;
    --qf-roxo-suave: #2e2546; --qf-linha: #34303f; --qf-apagado: #a29db5; --qf-fundo: #17151f;
}
.qf-c-ok { background: var(--qf-ok-suave); color: var(--qf-ok); }
.qf-c-aviso { background: var(--qf-aviso-suave); color: var(--qf-aviso); }
.qf-c-perigo { background: var(--qf-perigo-suave); color: var(--qf-perigo); }
.qf-c-info { background: var(--qf-info-suave); color: var(--qf-info); }
.qf-c-roxo { background: var(--qf-roxo-suave); color: var(--qf-roxo); }
.qf-chip-neutro { background: var(--qf-fundo); color: var(--qf-apagado); border: 1px solid var(--qf-linha); }
.qf-coluna { background: var(--qf-fundo); }
.qf-pcard { --qf-faixa: var(--qf-linha); border: 1px solid var(--qf-linha); border-left: 4px solid var(--qf-faixa); }
.qf-pcard.qf-prazo-ok, .qf-legenda.qf-prazo-ok, .qf-pcard.qf-prazo-feita { --qf-faixa: var(--qf-ok); }
.qf-pcard.qf-prazo-perto, .qf-legenda.qf-prazo-perto { --qf-faixa: var(--qf-aviso); }
.qf-pcard.qf-prazo-atrasada, .qf-legenda.qf-prazo-atrasada { --qf-faixa: var(--qf-perigo); }
.qf-pcard.qf-prazo-atrasada { background: linear-gradient(rgba(217, 70, 91, .05), rgba(217, 70, 91, .05)), var(--theme-secondary-bg, #fff); }
.qf-pcard.qf-prazo-entregue { --qf-faixa: var(--qf-roxo); }
.qf-pcard-num, .qf-pcard-quem, .qf-pcard-obs, .qf-pcard-alca { color: var(--qf-apagado); }
.qf-btn-card, .qf-btn-card:hover, .qf-btn-card:focus { background: var(--qf-roxo-suave); color: var(--qf-roxo); border: 0; }
.qf-btn-card:hover { filter: brightness(.96); }


/* Calendário de entregas: estilo do calendário do UBold (_calendar.scss) com as cores da produção. */
.qf-calendario { --fc-border-color: var(--theme-border-color, #e7e9eb); --fc-page-bg-color: var(--theme-secondary-bg, #fff); --fc-neutral-bg-color: var(--theme-light, #f6f7fb); --fc-today-bg-color: transparent; }
.qf-calendario .fc { font-family: inherit; font-size: .875rem; }
.qf-calendario .fc .fc-toolbar-title { font-size: 16px; line-height: 30px; text-transform: uppercase; font-weight: 600; }
.qf-calendario .fc .fc-col-header, .qf-calendario .fc .fc-daygrid-body, .qf-calendario .fc .fc-scrollgrid-sync-table { width: 100% !important; }
.qf-calendario .fc .fc-scrollgrid { border: 0; }
.qf-calendario .fc td, .qf-calendario .fc th { border: 1px solid var(--theme-border-color, #e7e9eb); }
.qf-calendario .fc .fc-col-header-cell { background-color: var(--theme-light, #f6f7fb); }
.qf-calendario .fc .fc-col-header-cell-cushion { display: block; padding: 8px 4px; color: var(--qf-texto, #292633); font-weight: 600; text-decoration: none; text-transform: capitalize; }
.qf-calendario .fc .fc-daygrid-day-number { width: 24px; height: 24px; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; margin: 4px; color: var(--qf-texto, #292633); text-decoration: none; }
.qf-calendario .fc .fc-day-other .fc-daygrid-day-number { opacity: .45; }
.qf-calendario .fc .fc-daygrid-day.fc-day-today { background-color: rgba(112, 71, 235, .08); }
.qf-calendario .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number { background-color: var(--qf-roxo); color: #fff; }
.qf-calendario .fc .fc-button { padding: 6px 12px; height: auto; text-transform: capitalize; box-shadow: none !important; font-weight: 500; }
.qf-calendario .fc .fc-button-group .fc-button, .qf-calendario .fc .fc-prev-button, .qf-calendario .fc .fc-next-button { color: var(--qf-roxo); background-color: var(--qf-roxo-suave); border: none; }
.qf-calendario .fc .fc-button-group .fc-button:hover, .qf-calendario .fc .fc-button-primary:not(:disabled).fc-button-active { color: #fff !important; background-color: var(--qf-roxo) !important; }
.qf-calendario .fc .fc-today-button { background-color: var(--qf-roxo) !important; border: 0; color: #fff; opacity: 1; }
.qf-calendario .fc .fc-today-button:disabled { opacity: .55; }
.qf-calendario .fc .fc-toolbar.fc-header-toolbar { margin-bottom: 1rem; }
@media (max-width: 575.98px) { .qf-calendario .fc .fc-toolbar { flex-direction: column; gap: 12px; } }
/* Eventos: fundo claro, borda esquerda e texto na cor (igual ao UBold). */
.qf-calendario .fc .fc-daygrid-event.qf-ev { border: 0; border-left: 3px solid var(--qf-ev); background: var(--qf-ev-suave); border-radius: 2px; margin: 3px 6px; padding: 4px 6px; cursor: pointer; }
.qf-calendario .fc .fc-daygrid-event.qf-ev .fc-event-main, .qf-calendario .fc .fc-daygrid-event.qf-ev .fc-event-title { color: var(--qf-ev) !important; font-weight: 600; font-size: .78rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.qf-calendario .fc .fc-daygrid-event.qf-ev:hover { filter: brightness(.97); }
.qf-calendario .fc .fc-list-event.qf-ev { cursor: pointer; }
.qf-calendario .fc .fc-list-event.qf-ev .fc-list-event-dot { border-color: var(--qf-ev); }
.qf-calendario .fc .fc-list-event.qf-ev:hover td { background: var(--qf-ev-suave); }
.qf-calendario .fc .fc-list-day-cushion { background: var(--theme-light, #f6f7fb); }
.qf-calendario .fc .fc-daygrid-more-link { color: var(--qf-roxo); font-weight: 600; font-size: .75rem; margin-left: 6px; }
.qf-ev-ok { --qf-ev: var(--qf-ok); --qf-ev-suave: var(--qf-ok-suave); }
.qf-ev-perto { --qf-ev: var(--qf-aviso); --qf-ev-suave: var(--qf-aviso-suave); }
.qf-ev-atrasada { --qf-ev: var(--qf-perigo); --qf-ev-suave: var(--qf-perigo-suave); }
.qf-ev-entregue { --qf-ev: var(--qf-roxo); --qf-ev-suave: var(--qf-roxo-suave); }
.qf-ev-neutro { --qf-ev: var(--qf-apagado); --qf-ev-suave: var(--qf-fundo); }
.qf-legenda.qf-prazo-entregue { --qf-faixa: var(--qf-roxo); }

/* Passo a passo no card (em andamento) e barra de progresso, como no esboço. */
.qf-passos { display: grid; gap: 3px; }
.qf-passo { display: flex; align-items: center; gap: 6px; font-size: .78rem; cursor: pointer; margin: 0; }
.qf-passo .form-check-input { margin: 0; width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }
.qf-passo.feito span { color: var(--qf-apagado); text-decoration: line-through; }
.qf-barra { height: 6px; border-radius: 999px; background: var(--qf-linha); overflow: hidden; }
.qf-barra i { display: block; height: 100%; border-radius: 999px; transition: width .25s ease; }
.qf-barra i.aviso { background: var(--qf-aviso); }
.qf-barra i.info { background: var(--qf-info); }
.qf-barra i.ok { background: var(--qf-ok); }
.qf-prog { display: flex; justify-content: space-between; font-size: .72rem; color: var(--qf-apagado); }

/* Contas a pagar (esboço): números do topo e linha vencida com faixa vermelha. */
.qf-kpi-conta { border: 1px solid var(--qf-linha); border-radius: 12px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; height: 100%; }
.qf-kpi-conta span:not(.qf-kpi-ic) { font-size: .72rem; color: var(--qf-apagado); font-weight: 600; display: block; }
.qf-kpi-conta strong { font-size: 1.15rem; font-weight: 800; }
.qf-kpi-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; font-weight: 700; flex-shrink: 0; }
.qf-linha-vencida > td:first-child { box-shadow: inset 3px 0 0 var(--qf-perigo); }
.qf-sugestoes { border: 1px solid var(--qf-linha); border-radius: 8px; margin-top: 4px; font-size: .82rem; overflow: hidden; }
.qf-sugestoes button { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-bottom: 1px solid var(--qf-linha); background: transparent; text-align: left; color: inherit; }
.qf-sugestoes button:last-child { border-bottom: 0; }
.qf-sugestoes button:hover, .qf-sugestoes button.ativo { background: var(--qf-roxo-suave); }
.qf-parcelas > div { display: grid; grid-template-columns: 44px 1fr 150px; gap: 8px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--qf-linha); }
.qf-parcelas { border: 1px solid var(--qf-linha); border-radius: 10px; overflow: hidden; }
.qf-parcelas > div:last-child { border-bottom: 0; }
.qf-auto { color: var(--qf-roxo); font-weight: 600; }

/* Botão do WhatsApp (verde da marca do WhatsApp, como no esboço de vendas). */
.qf-btn-zap, .qf-btn-zap:hover, .qf-btn-zap:focus { background: #25d366; color: #fff; border: 0; font-weight: 600; }
.qf-btn-zap:hover { filter: brightness(.95); }

/* Pedido (esboço do orçamento): etapas, resumo, opções de pagamento. */
.qf-etapa { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--qf-linha); border-radius: 999px; padding: 5px 14px 5px 5px; font-weight: 600; font-size: .82rem; color: var(--qf-apagado); }
.qf-etapa b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; color: #fff; background: var(--qf-linha); }
.qf-etapa.feita { color: var(--qf-ok); } .qf-etapa.feita b { background: var(--qf-ok); }
.qf-etapa.atual { color: var(--qf-roxo); border-color: var(--qf-roxo); background: var(--qf-roxo-suave); } .qf-etapa.atual b { background: var(--qf-roxo); }
.qf-etapa.opc { border-style: dashed; }
.qf-resumo-pedido { display: grid; gap: 8px; align-content: start; }
.qf-total { font-size: 1.5rem; font-weight: 800; }
.qf-kpi-mini { background: var(--qf-fundo); border-radius: 10px; padding: 8px 10px; }
.qf-kpi-mini span { display: block; font-size: .68rem; color: var(--qf-apagado); text-transform: uppercase; font-weight: 600; }
.qf-kpi-mini strong { font-size: .95rem; font-weight: 800; }
.qf-opc-pg { position: relative; text-align: left; border: 1px solid var(--qf-linha); border-radius: 12px; padding: 14px 12px 12px; background: transparent; display: grid; gap: 4px; height: 100%; color: inherit; }
.qf-opc-pg strong { font-size: .9rem; } .qf-opc-pg span { font-size: .75rem; color: var(--qf-apagado); line-height: 1.45; }
.qf-opc-pg.on { border: 2px solid var(--qf-roxo); box-shadow: 0 6px 18px rgba(112, 71, 235, .12); }
.qf-opc-tag { position: absolute; top: -10px; right: 10px; color: var(--qf-roxo) !important; }

/* Notinha (orçamento / pedido / recibo): A4 e impressora de nota 80 mm. */
.qf-impressao { background: #f2f1f6; min-height: 100vh; padding: 16px; }
.qf-nota-barra { max-width: 760px; margin: 0 auto 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qf-nota { background: #fff; color: #292633; max-width: 760px; margin: 0 auto; padding: 28px; border-radius: 6px; box-shadow: 0 10px 30px rgba(41, 38, 51, .14); font-size: 13px; }
.qf-nota small { color: #7b7690; font-size: .78em; line-height: 1.5; }
.qf-nota-topo { display: flex; justify-content: space-between; gap: 16px; border-bottom: 3px solid #7047eb; padding-bottom: 14px; }
.qf-nota-marca { display: flex; gap: 10px; align-items: center; }
.qf-nota-marca strong { font-size: 1.1em; display: block; }
.qf-nota-logo { width: 52px; height: 52px; border-radius: 12px; object-fit: contain; flex-shrink: 0; }
.qf-nota-logo-letra { background: #7047eb; color: #c5ef65; display: grid; place-items: center; font-weight: 800; font-size: 1.4em; }
.qf-nota-num { text-align: right; }
.qf-nota-num .tipo { font-size: .75em; letter-spacing: .1em; font-weight: 700; color: #7047eb; }
.qf-nota-num .n { font-size: 1.5em; font-weight: 800; }
.qf-nota-cli { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.qf-nota-itens { width: 100%; border-collapse: collapse; }
.qf-nota-itens th { text-align: left; font-size: .75em; text-transform: uppercase; color: #7b7690; border-bottom: 1px solid #ece9f4; padding: 6px 4px; }
.qf-nota-itens td { border-bottom: 1px solid #ece9f4; padding: 8px 4px; vertical-align: top; }
.qf-nota-itens .num { text-align: right; white-space: nowrap; }
.qf-nota-total { display: grid; gap: 4px; margin: 12px 0 0 auto; width: min(260px, 100%); }
.qf-nota-total div { display: flex; justify-content: space-between; }
.qf-nota-total .grande { font-size: 1.25em; font-weight: 800; border-top: 2px solid #292633; padding-top: 6px; }
.qf-nota-cond { margin-top: 16px; background: #f7f7fb; border-radius: 8px; padding: 10px 12px; line-height: 1.55; }
.qf-nota-assinatura { margin-top: 28px; text-align: center; }
.qf-nota-assinatura p { margin-bottom: 36px; }
.qf-nota-assinatura .linha { border-top: 1px solid #292633; width: 70%; margin: 0 auto 4px; }
.qf-nota-rodape { margin-top: 18px; text-align: center; font-size: .75em; color: #7b7690; }

/* 80 mm: uma coluna, letra menor, sem cantos nem sombra. */
.qf-nota-80 { max-width: 302px; padding: 10px; font-size: 11px; border-radius: 0; }
.qf-nota-80 .qf-nota-topo { flex-direction: column; text-align: center; border-bottom-width: 2px; }
.qf-nota-80 .qf-nota-marca { flex-direction: column; }
.qf-nota-80 .qf-nota-num { text-align: center; }
.qf-nota-80 .qf-nota-cli { grid-template-columns: 1fr; }
.qf-nota-80 .qf-nota-total { width: 100%; }
.qf-nota-80 .qf-nota-cond { background: transparent; padding: 0; border-top: 1px dashed #292633; padding-top: 8px; border-radius: 0; }

@media print {
    .qf-impressao { background: #fff; padding: 0; min-height: 0; }
    .qf-nota-barra { display: none !important; }
    .qf-nota { box-shadow: none; max-width: none; margin: 0; padding: 0; }
    .qf-nota-80 { width: 74mm; }
    .qf-nota-cond { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Passos do orçamento: 1 salvar → 2 enviar → 3 aprovou (o atual fica em destaque). */
.qf-passo-orc { display: flex; align-items: center; gap: 8px; opacity: .6; }
.qf-passo-orc.atual, .qf-passo-orc.feito { opacity: 1; }
.qf-passo-num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: var(--qf-linha); color: var(--qf-apagado); flex-shrink: 0; }
.qf-passo-orc.atual .qf-passo-num { background: var(--qf-roxo); color: #fff; }
.qf-passo-orc.feito .qf-passo-num { background: var(--qf-ok); color: #fff; }

/* Balcão (PDV), como no esboço de vendas. */
.qf-pdv { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
@media (max-width: 991.98px) { .qf-pdv { grid-template-columns: minmax(0, 1fr); } .qf-pdv > * { min-width: 0; } }
.qf-pdv-busca { display: flex; align-items: center; gap: 8px; border: 2px solid var(--qf-roxo); border-radius: 12px; padding: 6px 12px; }
.qf-pdv-busca input { font-size: 1.05rem; }
.qf-pdv-cat { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--qf-linha); font-weight: 600; font-size: .82rem; color: var(--qf-apagado); background: transparent; }
.qf-pdv-cat.on { background: var(--qf-roxo); border-color: var(--qf-roxo); color: #fff; }
.qf-pdv-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; }
.qf-pdv-prod { border: 1px solid var(--qf-linha); border-radius: 10px; padding: 8px 10px; display: grid; gap: 4px; text-align: left; background: var(--theme-secondary-bg, #fff); color: inherit; }
.qf-pdv-prod:hover { border-color: var(--qf-roxo); box-shadow: 0 6px 16px rgba(112, 71, 235, .12); }
.qf-pdv-prod strong { font-size: .8rem; line-height: 1.25; }
.qf-pdv-prod .preco { font-size: .95rem; font-weight: 800; color: var(--qf-roxo); }
.qf-pdv-prod small { color: var(--qf-apagado); font-size: .72rem; }
.qf-pdv-prod.baixo small { color: var(--qf-perigo); }
.qf-pdv-lado { position: sticky; top: 90px; }
.qf-pdv-carrinho { border: 2px solid var(--qf-linha); overflow: hidden; }
.qf-pdv-carrinho-cab { display: flex; justify-content: space-between; padding: 10px 16px; background: var(--qf-roxo-suave); color: var(--qf-roxo); font-weight: 700; }
.qf-pdv-qtd input { width: 64px; }
.qf-pdv-preco { max-width: 110px; margin-left: auto; }
.qf-pdv-peso { min-width: 110px; font-weight: 600; }
.qf-conta-peso { background: var(--qf-roxo-suave); color: var(--qf-roxo); }
.qf-pdv-item { display: grid; grid-template-columns: 1fr auto; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--qf-linha); font-size: .85rem; }
.qf-pdv-qtd { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; margin-top: 2px; }
.qf-pdv-qtd button { width: 26px; height: 26px; border-radius: 6px; background: var(--qf-fundo); border: 1px solid var(--qf-linha); font-weight: 700; line-height: 1; color: inherit; }
.qf-pdv-total { font-size: 1.7rem; font-weight: 800; }
.qf-pdv-finalizar { padding: 14px; font-size: 1rem; font-weight: 700; }
.qf-tecla { font-size: .68rem; padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, .25); margin-left: 4px; }
/* Grade de 6 colunas: 3 por linha; se a última linha tiver 2 ou 1, eles dividem a largura toda. */
.qf-pdv-formas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.qf-pdv-formas > .qf-pdv-forma { grid-column: span 2; }
.qf-pdv-formas > .qf-pdv-forma:nth-child(3n+1):nth-last-child(2),
.qf-pdv-formas > .qf-pdv-forma:nth-child(3n+2):last-child { grid-column: span 3; }
.qf-pdv-formas > .qf-pdv-forma:nth-child(3n+1):last-child { grid-column: span 6; }
.qf-pdv-forma { border: 1px solid var(--qf-linha); border-radius: 10px; min-height: 46px; padding: 0 8px; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; font-weight: 600; font-size: .85rem; background: transparent; color: inherit; }
/* Escolhido: contorno por sombra, sem mudar o tamanho do botão. */
.qf-pdv-forma.on { border-color: var(--qf-roxo); box-shadow: inset 0 0 0 1px var(--qf-roxo); background: var(--qf-roxo-suave); color: var(--qf-roxo); }
.qf-pdv-troco { background: var(--qf-ok-suave); color: var(--qf-ok); border-radius: 10px; padding: 10px 12px; font-weight: 700; display: flex; justify-content: space-between; font-size: 1.1rem; }

/* Entregas (esboço de entregas): cartões da fila, com faixa colorida à esquerda. */
.qf-opc-pg-centro { text-align: center; place-items: center; padding: 12px 6px; }
.qf-entregas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.qf-ent { border: 1px solid var(--qf-linha); border-left: 4px solid var(--qf-info); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; }
.qf-ent.atrasada { border-left-color: var(--qf-perigo); background: var(--qf-perigo-suave); }
.qf-ent.saiu { border-left-color: var(--qf-aviso); }
.qf-ent.feita { border-left-color: var(--qf-ok); opacity: .75; }
.qf-ent-lin { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.qf-ent-hora { font-weight: 800; font-size: 1.05rem; }
.qf-ent-cli { font-weight: 700; }
.qf-ent-end { color: var(--qf-roxo); font-weight: 600; font-size: .85rem; text-decoration: none; }
.qf-ent-itens { color: var(--qf-apagado); font-size: .82rem; }
.qf-ent-receber { background: var(--qf-aviso-suave); color: var(--qf-aviso); border-radius: 8px; padding: 6px 10px; font-weight: 700; font-size: .82rem; display: flex; justify-content: space-between; }
.qf-ent-pago { background: var(--qf-ok-suave); color: var(--qf-ok); border-radius: 8px; padding: 6px 10px; font-weight: 700; font-size: .82rem; }
.qf-ent-acoes { display: flex; gap: 6px; flex-wrap: wrap; }

/* Quadro de pedidos (esboço simplificar): 4 colunas, um botão por cartão. */
.qf-quadro-pedidos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.qf-qp-col { background: var(--qf-fundo); border-radius: 12px; padding: 10px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.qf-qp-cab { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .88rem; padding: 2px 4px; }
.qf-qp-cab small { display: block; color: var(--qf-apagado); font-weight: 500; font-size: .72rem; }
.qf-qp-num { background: var(--theme-secondary-bg, #fff); border: 1px solid var(--qf-linha); border-radius: 999px; padding: 1px 9px; font-size: .75rem; }
.qf-qp-card { background: var(--theme-secondary-bg, #fff); border: 1px solid var(--qf-linha); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; cursor: pointer; }
.qf-qp-card:hover { border-color: var(--qf-roxo); box-shadow: 0 6px 16px rgba(112, 71, 235, .1); }
.qf-qp-card.atrasado { border-color: var(--qf-perigo); }
.qf-qp-lin { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.qf-qp-cli { font-weight: 700; }
.qf-qp-itens { color: var(--qf-apagado); font-size: .8rem; overflow-wrap: anywhere; }
.qf-qp-valor { font-weight: 700; }
.qf-qp-prog { height: 6px; border-radius: 99px; background: var(--qf-linha); overflow: hidden; }
.qf-qp-prog i { display: block; height: 100%; background: var(--qf-roxo); }
.qf-qp-vazio { color: var(--qf-apagado); font-size: .8rem; text-align: center; padding: 12px 0; }
@media (max-width: 767.98px) { .qf-quadro-pedidos { grid-auto-columns: 85%; scroll-snap-type: x mandatory; } .qf-qp-col { scroll-snap-align: start; } }
.qf-pdv-prod.foco { border: 2px solid var(--qf-roxo); background: var(--qf-roxo-suave); }

/* Fiado (esboço docs/identidade-visual/esboco-fiado.html): indicadores, linhas de notinha, barra do limite. */
.qf-fiado-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.qf-fiado-kpis .card-body { display: grid; gap: 2px; padding: 14px 16px; }
.qf-fiado-kpis span { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--qf-apagado); }
.qf-fiado-kpis b { font-size: 1.35rem; font-weight: 800; }
.qf-fiado-kpis small { color: var(--qf-apagado); font-size: .75rem; }
.qf-fiado-linhas { display: grid; font-size: .85rem; }
.qf-fiado-linhas > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--qf-linha); }
.qf-fiado-linhas > div.marcada { background: var(--qf-roxo-suave); border-radius: 6px; }
.qf-fiado-linhas > div[role="button"]:hover { background: var(--qf-fundo); }
.qf-fiado-linhas > div.marcada[role="button"]:hover { background: var(--qf-roxo-suave); }
.qf-fiado-linhas > .tot { font-weight: 800; font-size: 1rem; border-bottom: 0; }
.qf-fiado-lim { height: 6px; border-radius: 3px; background: var(--qf-linha); overflow: hidden; margin-bottom: 2px; }
.qf-fiado-lim i { display: block; height: 100%; background: var(--qf-ok); }
.qf-fiado-lim i.alto { background: var(--qf-aviso); }
.qf-fiado-lim i.passou { background: var(--qf-perigo); }
.qf-linha-atrasada > td:first-child { box-shadow: inset 3px 0 0 var(--qf-perigo); }

/* Impressos do fiado: extrato, recibo e lista (mesma folha da notinha). */
.qf-fiado-papel { max-width: 520px; font-variant-numeric: tabular-nums; }
.qf-fiado-papel .c { text-align: center; }
.qf-fiado-papel .l { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.qf-fiado-papel .grande { font-weight: 800; font-size: 1.1em; }
.qf-fiado-papel hr { border: 0; border-top: 1px dashed #292633; margin: 8px 0; opacity: 1; }
.qf-fiado-papel .assina { margin-top: 36px; border-top: 1px solid #292633; text-align: center; padding-top: 4px; font-size: .85em; }

/* Duas vias (fiado): uma embaixo da outra na tela; na impressão, cada uma numa folha (a térmica corta). */
.qf-via + .qf-via { margin-top: 16px; }
.qf-nota-msg { font-weight: 600; color: #292633; margin-bottom: 2px; }
@media print {
    .qf-via + .qf-via { margin-top: 0; break-before: page; }
}

/* Submenu do menu lateral: o grupo da tela atual fica destacado. */
.sidenav-menu .side-nav .side-nav-link.qf-grupo-ativo { color: var(--qf-roxo); font-weight: 600; }
.sidenav-menu .side-nav .side-nav-link[role="button"] { cursor: pointer; }

/* Menu lateral mais compacto e com rolagem (sem o simplebar do UBold, a lista estourava a tela). */
.sidenav-menu { display: flex; flex-direction: column; }
.sidenav-menu > .scrollbar { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.sidenav-menu > .scrollbar::-webkit-scrollbar { display: none; }
.sidenav-menu .side-nav { padding: .25rem .6rem .75rem; }
.sidenav-menu .side-nav .side-nav-item { margin-bottom: 1px; }
.sidenav-menu .side-nav .side-nav-link { padding-top: .42rem; padding-bottom: .42rem; font-size: .88rem; }
.sidenav-menu .side-nav .side-nav-title { padding-top: .7rem; padding-bottom: .25rem; font-size: .66rem; }
.sidenav-menu .side-nav .sub-menu .side-nav-link { padding-top: .32rem; padding-bottom: .32rem; font-size: .84rem; }

/* Orçamentos (uma coluna só): os cartões ficam lado a lado. */
.qf-quadro-unico { grid-auto-flow: row; grid-auto-columns: auto; }
.qf-quadro-unico .qf-qp-col { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.qf-quadro-unico .qf-qp-cab, .qf-quadro-unico .qf-qp-vazio { grid-column: 1 / -1; }
@media (max-width: 767.98px) { .qf-quadro-unico { grid-auto-columns: auto; } }

/* Botão "Abrir Balcão" no topo, à esquerda (esboço do botão do PDV, opção A): roxo da marca. */
.qf-btn-pdv-topo { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 10px;
    background: linear-gradient(135deg, #7047eb, #9b6bff); color: #fff !important; font-weight: 700; font-size: .9rem; text-decoration: none; white-space: nowrap;
    box-shadow: 0 6px 16px rgba(112, 71, 235, .3); transition: transform .15s, box-shadow .15s; }
.qf-btn-pdv-topo:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(112, 71, 235, .45); }
.qf-tecla-pdv { font-size: .65rem; font-weight: 600; background: rgba(255, 255, 255, .25); border-radius: 4px; padding: 1px 5px; }
/* Venda aberta no Balcão: laranja, para não esquecer de voltar. */
.qf-btn-pdv-topo.qf-btn-pdv-aberta { background: linear-gradient(135deg, #f08a24, #f7a948); box-shadow: 0 6px 16px rgba(240, 138, 36, .35); }
.qf-btn-pdv-topo.qf-btn-pdv-aberta:hover { box-shadow: 0 8px 20px rgba(240, 138, 36, .5); }

/* Relatórios impressos (A4, com o cabeçalho padrão). */
.qf-relatorio { max-width: 1040px; font-variant-numeric: tabular-nums; }
.qf-relatorio.qf-nota-80 { max-width: 302px; }
.qf-relatorio .l { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.qf-relatorio .grande { font-weight: 800; font-size: 1.1em; }
.qf-relatorio .c { text-align: center; }
.qf-relatorio hr { border: 0; border-top: 1px dashed #292633; margin: 8px 0; opacity: 1; }
.qf-relatorio .assina { margin-top: 36px; border-top: 1px solid #292633; text-align: center; padding-top: 4px; font-size: .85em; }
.qf-rel-resumo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; }
.qf-rel-resumo div { background: #f6f5fa; border-radius: 6px; padding: 8px 10px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.qf-rel-resumo span { display: block; color: #7b7690; font-size: .72em; text-transform: uppercase; }
.qf-rel-resumo b { font-size: 1.15em; }
.qf-rel-tabela { font-size: .92em; }
.qf-rel-tabela tr.total td { font-weight: 800; border-top: 2px solid #292633; }

/* Relatórios com painel (esboço docs/identidade-visual/esboco-relatorios-painel.html). */
.qf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; }
.qf-kpi .card-body { display: grid; gap: 2px; padding: 14px 16px; }
.qf-kpi-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; margin-bottom: 4px; }
.qf-kpi-t { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--qf-apagado); }
.qf-kpi b { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.qf-kpi small { font-size: .74rem; color: var(--qf-apagado); }
.qf-graf-barras { display: flex; align-items: flex-end; gap: 4px; height: 160px; border-bottom: 1px solid var(--qf-linha); padding: 0 2px; }
.qf-graf-col { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 4px; cursor: default; }
.qf-graf-barra { width: 100%; background: var(--qf-roxo); border-radius: 4px 4px 0 0; opacity: .85; min-height: 2px; transition: opacity .15s; }
.qf-graf-col:hover .qf-graf-barra { opacity: 1; }
.qf-graf-eixo { display: flex; gap: 4px; padding: 4px 2px 0; font-size: .62rem; color: var(--qf-apagado); }
.qf-graf-eixo span { flex: 1; text-align: center; min-width: 4px; overflow: hidden; white-space: nowrap; }
.qf-tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.qf-tops .card-body { display: grid; gap: 6px; font-size: .85rem; padding: 14px 16px; }
.qf-tops .l { display: flex; justify-content: space-between; gap: 8px; }
.qf-part { display: inline-block; height: 6px; border-radius: 3px; background: var(--qf-roxo); opacity: .5; vertical-align: middle; margin-right: 6px; }
.qf-ordenar { cursor: pointer; user-select: none; white-space: nowrap; }
.qf-ordenar:hover { color: var(--qf-roxo); }
.qf-linha-filtro { cursor: pointer; }
.qf-so-impressao { display: none; }

/* Relatório impresso igual à tela: some o menu, o topo, os filtros e os botões; entra o cabeçalho da empresa. */
@media print {
    .app-topbar, .sidenav-menu, .page-title-head, .qf-nao-imprime, #blazor-error-ui, .qf-avisos { display: none !important; }
    .content-page { margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
    .content-page > .container-fluid { padding: 0 !important; }
    .qf-so-impressao { display: block !important; }
    .card { box-shadow: none !important; border: 1px solid #eee !important; break-inside: avoid; }
    .qf-kpi-ic, .qf-graf-barra, .qf-part { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .table-responsive { overflow: visible !important; }
}

/* Período personalizado: duas datas compactas, na mesma linha dos atalhos. */
.qf-periodo-datas { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.qf-periodo-datas .form-control { width: 9.5rem !important; flex: 0 0 auto; }
.qf-data-curta { width: 9.5rem !important; flex: 0 0 auto; }
.qf-graf-vazio { height: 90px; display: grid; place-items: center; color: var(--qf-apagado); font-size: .85rem; border: 1px dashed var(--qf-linha); border-radius: 10px; }
/* Botões da barra dos relatórios: altura normal (não esticam com a linha). */
.qf-nao-imprime .btn-group, .qf-nao-imprime .btn { align-self: center; }
.qf-filtro-auto .form-control { padding-top: .25rem; padding-bottom: .25rem; font-size: .8125rem; min-height: calc(1.5em + .5rem + 2px); }
.qf-busca-curta { width: 14rem !important; flex: 0 0 auto; }

/* "Detalhar" nos relatórios: a venda em destaque e os itens dela recuados embaixo. */
.qf-detalhe .qf-detalhe-venda td { background: var(--qf-fundo); border-top: 2px solid var(--qf-linha); padding-top: .5rem; padding-bottom: .5rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.qf-detalhe .qf-detalhe-item td:first-child { padding-left: 1.5rem; }
.qf-detalhe .qf-detalhe-item td { color: var(--qf-texto, #292633); font-size: .82rem; border-bottom-style: dashed; }
.qf-detalhar { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; cursor: pointer; user-select: none; margin: 0; }

/* Visão geral (Fase 5): barra da meta, avisos e fila da produção. */
.qf-meta-barra { height: 14px; border-radius: 7px; background: var(--qf-fundo); border: 1px solid var(--qf-linha); position: relative; overflow: visible; }
.qf-meta-barra i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #7047eb, #9b6bff); border-radius: 7px; }
.qf-meta-barra em { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #292633; border-radius: 1px; }
.qf-aviso { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border-radius: 10px; border: 1px solid var(--qf-linha); border-left-width: 4px; color: inherit; text-decoration: none; font-size: .85rem; }
.qf-aviso:hover { background: var(--qf-fundo); color: inherit; }
.qf-aviso small { display: block; color: var(--qf-apagado); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qf-aviso-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--qf-fundo); }
.qf-aviso-q { margin-left: auto; font-weight: 800; white-space: nowrap; }
.qf-aviso-atrasado { border-left-color: var(--qf-perigo); } .qf-aviso-atrasado .qf-aviso-ic { background: var(--qf-perigo-suave); }
.qf-aviso-hoje { border-left-color: var(--qf-aviso); } .qf-aviso-hoje .qf-aviso-ic { background: var(--qf-aviso-suave); }
.qf-aviso-atencao { border-left-color: var(--qf-info); } .qf-aviso-atencao .qf-aviso-ic { background: var(--qf-info-suave); }
.qf-fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qf-fila div { background: var(--qf-fundo); border-radius: 10px; padding: 10px; text-align: center; font-size: .75rem; color: var(--qf-apagado); }
.qf-fila b { display: block; font-size: 1.35rem; color: var(--qf-texto, #292633); }
/* Sino do topo. */
.qf-sino { width: min(380px, 92vw); max-height: 70vh; overflow-y: auto; }
.qf-sino-item { white-space: normal; }
.qf-sino-atrasado { background: var(--qf-perigo-suave); } .qf-sino-hoje { background: var(--qf-aviso-suave); } .qf-sino-atencao { background: var(--qf-info-suave); }
.qf-dropdown summary.topbar-link { list-style: none; } .qf-dropdown summary.topbar-link::-webkit-details-marker { display: none; }
.qf-mini-meta { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: var(--qf-fundo); overflow: hidden; vertical-align: middle; margin-right: 6px; } .qf-mini-meta i { display: block; height: 100%; background: var(--qf-roxo); }

/* Botão leve desligado: o texto continua visível (ex.: "＋ Adicionar" antes de escolher o produto). */
.btn-soft-primary:disabled, .btn-soft-primary.disabled { color: var(--qf-roxo) !important; background-color: var(--qf-roxo-suave) !important; opacity: .55; }

/* Filas de botões que rolam de lado no celular (período, ver por, filtros), em vez de virar 4 linhas. */
.qf-rolar-chips { min-width: 0; max-width: 100%; }
.qf-rolar-chips > * { flex: 0 0 auto; }

/* ---------- Celular (até 576 px) ---------- */
@media (max-width: 575.98px) {
    .content-page > .container-fluid { padding-left: 10px !important; padding-right: 10px !important; }
    .card-body { padding: 14px; }
    /* Título sem a trilha (Início > ...): a seta de voltar já leva de volta. */
    .page-title-head .breadcrumb { display: none; }
    .page-title-head { margin-bottom: .5rem !important; }
    .page-title-head .page-main-title { font-size: 1.1rem; }

    /* Cartões de números: 2 por linha, mais baixos. */
    .qf-kpis, .qf-fiado-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
    .qf-kpi .card-body, .qf-fiado-kpis .card-body { padding: 10px 12px; }
    .qf-kpi b, .qf-fiado-kpis b { font-size: 1.02rem; word-break: break-word; }
    .qf-kpi-ic { width: 26px; height: 26px; font-size: .85rem; margin-bottom: 2px; }
    .qf-kpi small, .qf-fiado-kpis small { font-size: .68rem; line-height: 1.3; }
    .qf-kpi-conta { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; }
    .qf-kpi-conta strong { font-size: 1rem; white-space: nowrap; }

    /* Filas de botões: uma linha só, rolando de lado. */
    .qf-rolar-chips { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; flex: 1 1 100%; width: 100%; }
    .qf-rolar-chips::-webkit-scrollbar { display: none; }

    /* Grupos de opção (Produto | Fabricação | Serviço...): cabem na largura, texto pode quebrar. */
    .btn-group.qf-opcoes { flex-wrap: nowrap; }
    .qf-opcoes > .btn { white-space: normal; font-size: .78rem; padding-left: .35rem; padding-right: .35rem; line-height: 1.2; }

    /* Etapas do pedido (Pedido → Entregue → Pago) numa linha. */
    .qf-passos-pedido { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }

    /* Tabela vazia: a mensagem fica à esquerda, visível (a tabela rola de lado). */
    .table-responsive td[colspan] { text-align: left !important; white-space: normal; }

    /* Modal ocupa a tela toda no celular. */
    .modal-dialog { margin: .5rem; }
    .modal-footer { flex-wrap: wrap; gap: .5rem; }
    .modal-footer > .btn { flex: 1 1 auto; }

    /* Visão geral: atalhos em linha que rola. */
    .qf-atalhos-home { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
    .qf-atalhos-home > * { flex: 0 0 auto; }
}
/* Filhos de grade não esticam além da tela (a fila de botões rola dentro). */
.card-body.d-grid > *, .d-grid > .d-flex { min-width: 0; }

/* Avisos (painel e sino): o texto de detalhe corta com "…" dentro do cartão, não passa da borda. */
.qf-aviso .min-w-0, .qf-sino-item .min-w-0 { min-width: 0; flex: 1 1 auto; overflow: hidden; }

/* Topo no celular: tudo numa linha, sem um item ficar por cima do outro. */
@media (max-width: 575.98px) {
    .app-topbar .topbar-menu { gap: 6px; padding-left: 8px !important; padding-right: 8px !important; }
    .app-topbar .logo-topbar { display: none; }
    .qf-topo-centro { position: static; transform: none; max-width: none; flex: 0 0 auto; margin-left: auto; }
    .qf-btn-pdv-topo { padding: .4rem .65rem; gap: .35rem; font-size: .8rem; }
    .qf-btn-pdv-topo .qf-pdv-itens { display: none; }
    .app-topbar .qf-avatar ~ svg { display: none; }
    .app-topbar .topbar-item .topbar-link { padding-left: .25rem; padding-right: .25rem; }
}

/* ---------- Modo aplicativo: abas embaixo no celular (esboço docs/identidade-visual/esboco-app.html) ---------- */
.qf-abas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
           background: #fff; border-top: 1px solid #ece9f4; box-shadow: 0 -4px 16px rgba(41, 38, 51, .06);
           padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
.qf-aba { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 50px; padding: 0; border: 0; background: none;
          color: #7b7690; font-size: .68rem; font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.qf-aba .qf-aba-icone { display: grid; place-items: center; height: 28px; padding: 0 14px; border-radius: 14px; position: relative; transition: background .15s; }
.qf-aba.ativa { color: #7047eb; }
.qf-aba.ativa .qf-aba-icone { background: #efeafd; }
.qf-aba:active .qf-aba-icone { background: #f3f0fb; }
/* Vender: o botão grande e redondo do meio. */
.qf-aba-meio .qf-aba-icone { width: 54px; height: 54px; padding: 0; margin-top: -26px; border-radius: 50%; background: #7047eb !important; color: #fff;
                             box-shadow: 0 6px 16px rgba(112, 71, 235, .4); border: 4px solid #fff; }
.qf-aba-meio.ativa { color: #7047eb; }
.qf-aba-contador { position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
                   background: #c5ef65; color: #2b1d52; font-size: .68rem; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; }

/* Convite para instalar, logo acima das abas. */
.qf-instalar { position: fixed; left: 10px; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 1031;
               display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: #2b1d52; color: #fff;
               box-shadow: 0 12px 30px rgba(43, 29, 82, .35); font-size: .78rem; }
.qf-instalar img { width: 42px; height: 42px; border-radius: 11px; flex: 0 0 auto; }
.qf-instalar-texto { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; line-height: 1.35; }
.qf-instalar-texto > b { font-size: .88rem; }
.qf-instalar-botoes { display: grid; gap: 4px; justify-items: center; flex: 0 0 auto; }
.qf-btn-lima { background: #c5ef65; color: #2b1d52; font-weight: 800; border: 0; border-radius: 10px; padding: .45rem .9rem; }
.qf-btn-lima:hover, .qf-btn-lima:focus { background: #b8e651; color: #2b1d52; }

@media (max-width: 991.98px) {
    /* Com as abas: o conteúdo não fica escondido atrás delas. */
    .wrapper:has(.qf-abas) .content-page { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    /* "Mais" e "Vender" já estão nas abas: o topo fica com a logo, o negócio, o sino e o perfil. */
    .wrapper:has(.qf-abas) .app-topbar .sidenav-toggle-button,
    .wrapper:has(.qf-abas) .app-topbar .qf-btn-pdv-topo { display: none !important; }
    .wrapper:has(.qf-abas) .app-topbar .logo-topbar { display: block !important; }
    .wrapper:has(.qf-abas) .app-topbar .logo-topbar img { height: 30px; width: 30px; border-radius: 9px; }
    /* Dedo: botões e campos com pelo menos 44 px. */
    .wrapper:has(.qf-abas) .content-page .btn:not(.btn-sm):not(.btn-icon),
    .wrapper:has(.qf-abas) .content-page .form-control:not(.form-control-sm),
    .wrapper:has(.qf-abas) .content-page .form-select:not(.form-select-sm) { min-height: 44px; }
    .wrapper:has(.qf-abas) .content-page .card { border-radius: 14px; }
}

/* Instalado (abre sem a barra do navegador): respeita o recorte da câmera no topo. */
.qf-instalado .app-topbar { padding-top: env(safe-area-inset-top, 0px); }

/* ---------- Balcão no celular: produtos 2 por linha, "Cobrar" fixo e folha de baixo para cima ---------- */
.qf-pdv-prod { position: relative; }
.qf-pdv-no-carrinho { position: absolute; top: 6px; right: 6px; background: #c5ef65; color: #2b1d52; font-size: .68rem; font-weight: 800;
                      border-radius: 999px; padding: 1px 7px; line-height: 1.5; }
.qf-pdv-cobrar { display: flex; }

@media (max-width: 991.98px) {
    .qf-pdv-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; overflow: visible; gap: 10px; }
    .qf-pdv-prod { min-height: 96px; padding: 10px 44px 10px 12px; border-radius: 14px; align-content: start; }
    .qf-pdv-prod strong { font-size: .82rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .qf-pdv-prod:has(.qf-pdv-no-carrinho) strong { padding-right: 4px; }
    .qf-pdv-no-carrinho { top: auto; bottom: 46px; right: 8px; }
    .qf-pdv-mais { position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%; background: #7047eb; color: #fff;
                   display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; line-height: 1; }
    .qf-pdv-prod:active { transform: scale(.97); }
    .qf-pdv-busca input { font-size: 16px; } /* 16 px: o iPhone não dá zoom ao tocar */

    /* O pagamento só aparece na folha. */
    .qf-pdv-lado { display: none; }
    .qf-pdv-lado.aberta { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 88vh; max-height: 88dvh; overflow-y: auto;
                          z-index: 1045; border-radius: 22px 22px 0 0; margin: 0; box-shadow: 0 -10px 30px rgba(41, 38, 51, .2);
                          padding-bottom: env(safe-area-inset-bottom, 0px); animation: qf-sobe .2s ease-out; }
    .qf-pdv-fundo { position: fixed; inset: 0; z-index: 1040; background: rgba(41, 38, 51, .45); }
    html:has(.qf-pdv-lado.aberta) { overflow: hidden; }
    .qf-pdv-pega { display: block; width: 40px; height: 5px; border-radius: 3px; background: #ddd; margin: -4px auto 8px; }
    .qf-pdv-folha-cab { display: grid; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--qf-linha); }
    .qf-pdv-folha-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1eef8; font-size: .85rem; }
    .qf-pdv-folha-item:last-child { border-bottom: 0; }
    .qf-pdv-folha-qtd { display: flex; align-items: center; gap: 8px; font-weight: 700; flex: 0 0 auto; }
    .qf-pdv-folha-qtd button { width: 34px; height: 34px; border-radius: 10px; border: 0; background: #f3f0fb; color: #7047eb; font-weight: 800; font-size: 1.1rem; }
    .qf-pdv-folha-qtd span { min-width: 22px; text-align: center; }
    .qf-pdv-folha-total { min-width: 62px; text-align: right; flex: 0 0 auto; }

    .qf-pdv-cobrar { position: fixed; left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); z-index: 1029;
                     justify-content: space-between; align-items: center; gap: 10px; border: 0; border-radius: 16px; padding: 12px 16px;
                     background: #1fa971; color: #fff; font-weight: 800; font-size: .92rem; box-shadow: 0 10px 24px rgba(31, 169, 113, .35); }
    .qf-pdv-cobrar small { display: block; font-weight: 600; font-size: .7rem; opacity: .9; }
    .wrapper:has(.qf-pdv-cobrar) .content-page { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
    .wrapper:has(.qf-pdv-cobrar) .qf-instalar { display: none; }
}
@keyframes qf-sobe { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }

/* ---------- Listas em cartões no celular (esboço docs/identidade-visual/esboco-app.html) ----------
   Na tabela com qf-cartoes, cada linha vira um cartão. Cada célula diz o seu papel:
   c-titulo (nome, em cima) · c-chip (selo, em cima à direita) · c-detalhe (linhas pequenas) ·
   c-valor (valor, embaixo) · c-acoes (botões, embaixo à direita) · c-check (caixinha) · c-oculto (some). */
@media (max-width: 767.98px) {
    .table-responsive:has(> .qf-cartoes) { overflow: visible; }
    table.qf-cartoes, .qf-cartoes > tbody { display: block; width: 100%; }
    .qf-cartoes > thead { display: none; }
    .qf-cartoes > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; padding: 12px 14px; margin-bottom: 10px;
                               background: var(--theme-secondary-bg, #fff); border: 1px solid var(--qf-linha); border-radius: 14px; }
    .qf-cartoes > tbody > tr > td { display: block; flex: 1 1 100%; order: 3; padding: 0 !important; border: 0 !important; box-shadow: none !important;
                                    background: none !important; white-space: normal !important; text-align: left !important; font-size: .78rem; color: var(--qf-apagado); min-width: 0; }
    .qf-cartoes > tbody > tr > td.c-check { flex: 0 0 auto; order: 0; }
    .qf-cartoes > tbody > tr > td.c-titulo { flex: 1 1 0; order: 1; font-size: .88rem; color: var(--bs-body-color); }
    .qf-cartoes > tbody > tr > td.c-chip { flex: 0 0 auto; order: 2; font-size: .72rem; }
    .qf-cartoes > tbody > tr > td.c-valor { flex: 1 1 auto; order: 4; margin-top: 6px; font-size: .95rem; font-weight: 800; color: var(--bs-body-color); }
    .qf-cartoes > tbody > tr > td.c-acoes { flex: 0 0 auto; order: 5; margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
    .qf-cartoes > tbody > tr > td.c-acoes .btn { margin: 0 !important; }
    .qf-cartoes > tbody > tr > td.c-oculto { display: none; }
    .qf-cartoes > tbody > tr > td[data-rotulo]::before { content: attr(data-rotulo) " "; font-weight: 600; font-size: .72rem; color: var(--qf-apagado); }
    /* Linha vazia ("Nada aqui"): sem cartão. */
    .qf-cartoes > tbody > tr:has(> td[colspan]) { background: none; border: 0; justify-content: center; }
    .qf-cartoes > tbody > tr > td[colspan] { text-align: center !important; padding: 16px 0 !important; }
    /* Atrasado: risca vermelha do lado, como nos avisos. */
    .qf-cartoes > tbody > tr.qf-linha-atrasada, .qf-cartoes > tbody > tr.qf-linha-vencida { border-left: 4px solid var(--qf-perigo); }

    /* Pedidos: uma coluna por vez, a escolhida nos botões. */
    .qf-quadro-celular { display: block; overflow: visible; }
    .qf-quadro-celular > .qf-qp-col { display: none; }
    .qf-quadro-celular > .qf-qp-col.no-celular { display: grid; background: none; padding: 0; }
    .qf-quadro-celular .qf-qp-cab { display: none; }
}

/* ---------- Ajustes do celular achados no teste do modo aplicativo ---------- */
@media (max-width: 575.98px) {
    /* Logo do negócio no topo: centrada na altura (antes ficava grudada em cima). */
    .qf-topo-centro { display: flex; align-items: center; }
    .qf-negocio-atual { padding: .25rem; }
    .qf-negocio-atual .qf-logo-negocio { width: 30px; height: 30px; }
}
@media (max-width: 767.98px) {
    /* Barra de cima dos cards (busca, filtros, chaves): quebra a linha em vez de alargar a tela. */
    .card-header > .d-flex, .card-header > div { flex-wrap: wrap; min-width: 0; max-width: 100%; }
    .card-header .app-search { flex: 1 1 160px; min-width: 0; }
    .card-header .form-select { min-width: 0 !important; flex: 1 1 160px; width: auto !important; }
    /* Mensagem de lista vazia quebra a linha (a tabela rola de lado, a frase não). */
    .table-responsive td[colspan] { white-space: normal !important; }
}
@media (max-width: 991.98px) {
    /* Rede de segurança: nada empurra a tela para o lado (as tabelas continuam rolando dentro do card). */
    body { overflow-x: clip; }
    /* Ícones das abas no tamanho certo. */
    .qf-aba .qf-aba-icone svg { width: 22px; height: 22px; }
    .qf-aba-meio .qf-aba-icone svg { width: 24px; height: 24px; }
}