/*
 * Menuxy — Design System
 * Camada única de tokens + componentes compartilhados por toda a aplicação
 * (login, painel, páginas internas, KDS e cardápio público). Construída sobre
 * as variáveis nativas do Bootstrap 5.3 (--bs-*) para herdar dark mode via
 * data-bs-theme automaticamente — nunca usar cor hexadecimal solta fora daqui.
 */

:root {
    /* =====================================================================
       PALETA DE MARCA — LARANJA MENUXY
       ---------------------------------------------------------------------
       Extraída do logotipo (logo/logoblack.jpeg) e aplicada na interface com
       preenchimentos sólidos para manter consistência visual.

       O laranja PURO do logotipo não serve como cor de botão: #FC6C00 com
       texto branco dá 2,90:1, abaixo do mínimo de 4,5:1 do WCAG — o rótulo
       fica ilegível. Então o token de UI é um laranja queimado da mesma
       família (mesma matiz), e o laranja/dourado vivos do logotipo ficam
       para detalhes decorativos, onde não carregam texto pequeno.

       Contraste WCAG do texto escuro oficial sobre a marca: cerca de 7,17:1.
       ===================================================================== */
    --brand-h: 27;
    --brand-s: 91%;
    --brand-l: 59%;
    --bs-primary: hsl(var(--brand-h) var(--brand-s) var(--brand-l));   /* #f68b36 */
    --bs-primary-rgb: 246, 139, 54;

    /* Cor do texto que vai EM CIMA de um preenchimento laranja.
       #f68b36 com branco da 2,39:1 (reprova); com este marrom quase preto
       da 7,25:1. Por isso botao, menu ativo e badge primarios levam texto
       escuro nos DOIS temas — nao e um descuido do modo claro. */
    --on-primary: #2a1505;

    /* Laranja fechado para TEXTO sobre fundo claro (links, precos, etiquetas).
       O #f68b36 puro em corpo de texto da 2,39:1; este da 5,58:1. */
    --bs-primary-text-emphasis: hsl(var(--brand-h) var(--brand-s) 34%);
    --bs-link-color: var(--bs-primary-text-emphasis);
    --bs-link-hover-color: hsl(var(--brand-h) var(--brand-s) 27%);

    /* Laranja e dourado vivos do logotipo — só para detalhes grandes, nunca
       atrás de texto pequeno. A cor sólida oficial da UI é --bs-primary. */
    --brand-fogo: #ef6c00;
    --brand-ambar: #fca80c;
    --brand-ouro: #fcd830;
    --brand-carvao: #0a0a0a;

    /* Neutros limpos deixam o laranja da marca guiar a ação sem tingir cada
       superfície. A cor comercial das lojas vive fora deste painel. */
    --ui-canvas: #f5f6f7;
    --ui-surface: #ffffff;
    --ui-surface-soft: #fafbfc;
    --ui-border: #e2e5e9;
    --ui-ink: #25282c;
    --ui-muted: #626971;
    --ui-action-hover: #e97925;
    --ui-action-pressed: #d96516;
    --ui-success-ink: #17633f;
    --ui-warning-ink: #76500e;
    --ui-danger-ink: #a52822;
    --ui-info-ink: #205b8e;
    --bs-tertiary-bg: var(--ui-canvas);
    --bs-border-color: var(--ui-border);

    /* ---- Escala de espaçamento (múltiplos de 4px) ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;

    /* ---- Raio ---- */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-pill: 999px;

    /* ---- Elevação ---- */
    --shadow-xs: 0 1px 2px rgba(25, 30, 36, 0.05);
    --shadow-sm: 0 1px 3px rgba(25, 30, 36, 0.07), 0 1px 2px rgba(25, 30, 36, 0.04);
    --shadow-md: 0 4px 10px -2px rgba(25, 30, 36, 0.10), 0 2px 6px -2px rgba(25, 30, 36, 0.06);
    --shadow-lg: 0 12px 24px -8px rgba(25, 30, 36, 0.15), 0 4px 8px -4px rgba(25, 30, 36, 0.06);
    --shadow-focus: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);

    /* ---- Barra inferior (mobile) ----
       Altura real do .bottom-nav: 62px de min-height + 0.45rem de padding em
       cima e embaixo. O <body> reserva exatamente isso de padding-bottom, senao
       a ultima linha de conteudo fica escondida atras da barra. */
    --bottom-nav-h: 76px;

    /* ---- Movimento ---- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;
}

[data-bs-theme="light"] {
    --bs-body-bg: var(--ui-surface);
    --bs-body-color: var(--ui-ink);
    --bs-secondary-color: var(--ui-muted);
    --bs-secondary-bg: var(--ui-surface-soft);
    --bs-tertiary-bg: var(--ui-canvas);
    --bs-border-color: var(--ui-border);
    --bs-border-color-translucent: rgba(37, 40, 44, .12);
    --bs-success-text-emphasis: var(--ui-success-ink);
    --bs-warning-text-emphasis: var(--ui-warning-ink);
    --bs-danger-text-emphasis: var(--ui-danger-ink);
    --bs-info-text-emphasis: var(--ui-info-ink);
}

[data-bs-theme="dark"] {
    /* No escuro, superfícies de carvão neutro dão contraste sem mudar o
       laranja Menuxy nem a identidade comercial de cada loja. */
    /* No escuro o #f68b36 ja tem 7,12:1 contra o fundo, entao a marca aparece
       na cor exata, sem clarear. So o texto de enfase precisa subir. */
    --bs-primary-text-emphasis: hsl(var(--brand-h) 92% 76%);
    --bs-link-color: var(--bs-primary-text-emphasis);
    --bs-link-hover-color: hsl(var(--brand-h) 92% 84%);

    /* Superfícies de carvão neutro. */
    --bs-body-bg: #17191b;
    --bs-body-color: #f0f1f2;
    --bs-secondary-color: #b0b5bb;
    --bs-tertiary-bg: #202326;
    --bs-secondary-bg: #1c1f22;
    --bs-border-color: #383d42;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.10);
    --bs-success-text-emphasis: #72d29d;
    --bs-warning-text-emphasis: #f5cc71;
    --bs-danger-text-emphasis: #ff9388;
    --bs-info-text-emphasis: #86c5f4;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.26);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 1px 2px rgba(0, 0, 0, 0.26);
    --shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.42), 0 2px 6px -2px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 16px 32px -10px rgba(0, 0, 0, 0.58), 0 4px 10px -4px rgba(0, 0, 0, 0.36);
}

[data-bs-theme="dark"] .delivery-notificacoes-status.is-ativo {
    background: rgba(114, 210, 157, .14);
    color: #8be0ad;
}

/* Estados semânticos também precisam de texto legível no canvas e em cada
   tema; usar só a cor Bootstrap viva em fundo claro deixava verde/âmbar/ciano
   abaixo do contraste de leitura. */
[data-bs-theme="light"] .text-success { color: var(--ui-success-ink) !important; }
[data-bs-theme="light"] .text-warning { color: var(--ui-warning-ink) !important; }
[data-bs-theme="light"] .text-danger { color: var(--ui-danger-ink) !important; }
[data-bs-theme="light"] .text-info { color: var(--ui-info-ink) !important; }
[data-bs-theme="light"] .btn-outline-success { --bs-btn-color: var(--ui-success-ink); --bs-btn-border-color: var(--ui-success-ink); --bs-btn-disabled-color: var(--ui-success-ink); --bs-btn-disabled-border-color: var(--ui-success-ink); }
[data-bs-theme="light"] .btn-outline-warning { --bs-btn-color: var(--ui-warning-ink); --bs-btn-border-color: var(--ui-warning-ink); --bs-btn-disabled-color: var(--ui-warning-ink); --bs-btn-disabled-border-color: var(--ui-warning-ink); }
[data-bs-theme="light"] .btn-outline-danger { --bs-btn-color: var(--ui-danger-ink); --bs-btn-border-color: var(--ui-danger-ink); --bs-btn-disabled-color: var(--ui-danger-ink); --bs-btn-disabled-border-color: var(--ui-danger-ink); }
[data-bs-theme="light"] .btn-outline-info { --bs-btn-color: var(--ui-info-ink); --bs-btn-border-color: var(--ui-info-ink); --bs-btn-disabled-color: var(--ui-info-ink); --bs-btn-disabled-border-color: var(--ui-info-ink); }
[data-bs-theme="dark"] .text-success { color: #72d29d !important; }
[data-bs-theme="dark"] .text-warning { color: #f5cc71 !important; }
[data-bs-theme="dark"] .text-danger { color: #ff9388 !important; }
[data-bs-theme="dark"] .text-info { color: #86c5f4 !important; }
[data-bs-theme="dark"] .btn-outline-success { --bs-btn-color: #72d29d; --bs-btn-border-color: #72d29d; --bs-btn-hover-color: #102219; --bs-btn-hover-bg: #72d29d; --bs-btn-hover-border-color: #72d29d; --bs-btn-active-color: #102219; --bs-btn-active-bg: #72d29d; --bs-btn-active-border-color: #72d29d; }
[data-bs-theme="dark"] .btn-outline-warning { --bs-btn-color: #f5cc71; --bs-btn-border-color: #f5cc71; --bs-btn-hover-color: #251d0c; --bs-btn-hover-bg: #f5cc71; --bs-btn-hover-border-color: #f5cc71; --bs-btn-active-color: #251d0c; --bs-btn-active-bg: #f5cc71; --bs-btn-active-border-color: #f5cc71; }
[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #ff9388; --bs-btn-border-color: #ff9388; --bs-btn-hover-color: #2c1412; --bs-btn-hover-bg: #ff9388; --bs-btn-hover-border-color: #ff9388; --bs-btn-active-color: #2c1412; --bs-btn-active-bg: #ff9388; --bs-btn-active-border-color: #ff9388; }
[data-bs-theme="dark"] .btn-outline-info { --bs-btn-color: #86c5f4; --bs-btn-border-color: #86c5f4; --bs-btn-hover-color: #112333; --bs-btn-hover-bg: #86c5f4; --bs-btn-hover-border-color: #86c5f4; --bs-btn-active-color: #112333; --bs-btn-active-bg: #86c5f4; --bs-btn-active-border-color: #86c5f4; }

/* ==========================================================================
   Base
   ========================================================================== */

* { scrollbar-width: thin; scrollbar-color: var(--bs-secondary-color) transparent; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

@media (min-width: 992px) { body { padding-bottom: 0; } }

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.01em; }

::selection { background-color: rgba(var(--bs-primary-rgb), 0.25); }

:focus-visible { outline: 2px solid var(--bs-primary-text-emphasis); outline-offset: 2px; }

/* Fade de entrada do conteúdo principal — evita o "pop" seco ao trocar de aba. */
main, .content-fade { animation: mx-fade-in var(--dur-slow) var(--ease-out); }

@keyframes mx-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
    html { scroll-behavior: auto; }
}

/* ==========================================================================
   Navegação — Sidebar / Topbar / Bottom nav
   ========================================================================== */

.sidebar {
    height: 100vh;
    background-color: var(--bs-body-bg);
    border-right: 1px solid var(--bs-border-color);
    transition: transform var(--dur-base) var(--ease-out);
    overflow-y: auto;
    overflow-x: hidden;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background-color: var(--bs-secondary-color); border-radius: var(--radius-pill); }

/* ---------- Bloco de marca da loja (topo da sidebar) ----------
   Antes era um <img w-100> dentro de uma caixa: o logotipo da loja ficava
   esticado e sem contexto. Agora é logotipo + nome num alvo clicável que
   leva ao painel. */
.marca-loja {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .7rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    text-decoration: none;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.marca-loja:hover {
    border-color: rgba(var(--bs-primary-rgb), .55);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.marca-loja:active { transform: translateY(0); }
.marca-loja:focus-visible { outline: 2px solid var(--bs-primary-text-emphasis); outline-offset: 2px; }

/* Moldura quadrada e estável: logotipos vêm em proporções muito diferentes,
   e o object-fit:contain evita corte ou distorção de qualquer um deles. */
.marca-loja-fig {
    flex: 0 0 42px; width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    overflow: hidden;
}
.marca-loja-fig img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.marca-loja-iniciais {
    font-weight: 700; font-size: .95rem; letter-spacing: .02em;
    color: var(--on-primary); width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bs-primary);
}

.marca-loja-texto { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.marca-loja-nome {
    font-weight: 700; font-size: .88rem; color: var(--bs-body-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.marca-loja-sub {
    font-size: .7rem; color: var(--bs-secondary-color);
    display: flex; align-items: center; gap: .2rem;
    transition: color var(--dur-fast) var(--ease-out);
}
.marca-loja-sub i { transition: transform var(--dur-fast) var(--ease-out); }
.marca-loja:hover .marca-loja-sub { color: var(--bs-primary); }
.marca-loja:hover .marca-loja-sub i { transform: translateX(3px); }

.nav-link {
    color: var(--bs-secondary-color);
    font-weight: 500;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-sm);
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
    display: flex; align-items: center; gap: 10px;
}
.nav-link i { font-size: 1.15rem; width: 1.2em; text-align: center; }
.nav-link:hover { background-color: rgba(var(--bs-primary-rgb), 0.1); color: var(--bs-primary-text-emphasis); transform: translateX(2px); }
.nav-link:hover i { color: var(--bs-primary-text-emphasis); }
.active-menu, .active-menu:hover {
    background-color: var(--bs-primary);
    color: var(--on-primary) !important;
    box-shadow: var(--shadow-sm);
    transform: none;
}
.active-menu i, .active-menu:hover i { color: var(--on-primary) !important; }

.topbar {
    background-color: color-mix(in srgb, var(--bs-body-bg) 86%, transparent);
    border-bottom: 1px solid var(--bs-border-color);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.bottom-nav {
    position: fixed; bottom: 0; left: .5rem; right: .5rem; z-index: 1030;
    display: flex; justify-content: space-around;
    min-height: calc(62px + env(safe-area-inset-bottom));
    padding: 0.45rem .35rem calc(0.45rem + env(safe-area-inset-bottom));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-lg);
    transform: translateZ(0);
    transition: transform 180ms var(--ease-out);
    background-color: color-mix(in srgb, var(--bs-tertiary-bg) 78%, transparent) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.bottom-nav-link {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--bs-secondary-color);
    font-size: 0.68rem; line-height: 1.1;
    border-radius: var(--radius-md);
    padding: .3rem 0;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.bottom-nav-link i { font-size: 1.2rem; margin: 0; }
.bottom-nav-link:hover, .bottom-nav-link:active, .bottom-nav-link.active { color: var(--bs-primary); }
.bottom-nav-link.active { font-weight: 700; }
.bottom-nav-link:active { transform: scale(0.94); }
.bottom-nav button.bottom-nav-link { background: none; border: 0; font: inherit; }
body.mobile-keyboard-open .bottom-nav { transform: translateY(115%); }

.bottom-nav-icone {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 26px; border-radius: var(--radius-pill);
    transition: background-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.bottom-nav-link.active .bottom-nav-icone {
    background: rgba(var(--bs-primary-rgb), .14);
    transform: translateY(-1px);
}
.bottom-nav-link:active .bottom-nav-icone { transform: scale(.9); }

/* Selo de contagem (pedidos novos no delivery / KDS) */
.bottom-nav-selo {
    position: absolute; top: .1rem; margin-left: 1.35rem;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--bs-danger); color: #fff;
    font-size: .62rem; font-weight: 700; line-height: 17px; text-align: center;
}

#themeToggle { cursor: pointer; transition: transform var(--dur-base) var(--ease-out); }
#themeToggle:hover { transform: rotate(-14deg) scale(1.1); }

@media (min-width: 992px) {
    .content-wrapper { margin-left: 250px; }
    .sidebar { width: 250px; position: fixed; top: 0; left: 0; z-index: 1000; }
}
@media (max-width: 991.98px) {
    .content-wrapper { margin-left: 0; }
    /* Some a sidebar do operador (#sidebarMenu), que no celular vira a barra
       inferior. A regra antiga escondia QUALQUER .sidebar com !important e
       levava junto o off-canvas do painel master (#sidebar): o usuario tocava
       no menu e so via o escurecido, porque o menu em si estava display:none. */
    #sidebarMenu.sidebar { display: none !important; }
    main { padding: 1rem !important; }
    .topbar { padding: 0.65rem 1rem !important; }
}

/* ==========================================================================
   Sidebar recolhível — botão "ocultar menu" na topbar (desktop)
   O estado fica em localStorage e é aplicado antes do primeiro paint, no
   mesmo script inline que já aplica o tema (header.php).
   ========================================================================== */

@media (min-width: 992px) {
    .content-wrapper { transition: margin-left var(--dur-base) var(--ease-out); }
    body.sidebar-hidden .sidebar { transform: translateX(-100%); }
    body.sidebar-hidden .content-wrapper { margin-left: 0; }
}
#sidebarCollapseToggle { transition: transform var(--dur-fast) var(--ease-out); }
body.sidebar-hidden #sidebarCollapseToggle i { transform: rotate(180deg); }

/* ==========================================================================
   Superfícies — Cards, tabelas, formulários, botões
   ========================================================================== */

.card {
    border-radius: var(--radius-md);
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card.card-hover:hover, a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Cartões de KPI — usa border-left (não pseudo-elemento + overflow:hidden)
   de propósito: a combinação anterior clipava o primeiro caractere do título
   em telas estreitas. */
.stat-card {
    position: relative;
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--stat-accent, var(--bs-primary));
    border-radius: var(--radius-lg);
    background: var(--bs-body-bg);
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* .stat-card não carrega a classe .card do Bootstrap, então --bs-card-spacer-*
   não existe aqui e o padding do .card-body zeraria. Precisa ser explícito. */
.stat-card .card-body { padding: 1.1rem 1.15rem; }
.stat-card .card-body > .d-flex { gap: .5rem; }
.stat-card h6 { min-width: 0; overflow-wrap: break-word; }
.stat-card .stat-icon {
    width: 42px; height: 42px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--stat-accent, var(--bs-primary)) 14%, transparent);
    color: var(--stat-accent, var(--bs-primary));
    font-size: 1.15rem;
}

.btn { border-radius: var(--radius-sm); font-weight: 500;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.btn:active { transform: scale(0.97); }

/* O Bootstrap compila .btn-primary com hexadecimal fixo (#0d6efd), não com
   var(--bs-primary) — sem estas linhas o menu ficaria laranja e os botões
   continuariam azuis, duas marcas na mesma tela. */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    /* Texto ESCURO sobre o laranja, nos dois temas: com branco o rotulo
       do botao fica em 2,39:1 e some. Ver --on-primary. */
    --bs-btn-color: var(--on-primary);
    --bs-btn-hover-color: var(--on-primary);
    --bs-btn-active-color: var(--on-primary);
    --bs-btn-disabled-color: var(--on-primary);
    --bs-btn-hover-bg: var(--ui-action-hover);
    --bs-btn-hover-border-color: var(--ui-action-hover);
    --bs-btn-active-bg: var(--ui-action-pressed);
    --bs-btn-active-border-color: var(--ui-action-pressed);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    box-shadow: var(--shadow-xs);
}
.btn-primary:hover { box-shadow: var(--shadow-sm); }

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary-text-emphasis);
    --bs-btn-border-color: var(--bs-primary-text-emphasis);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--on-primary);
    --bs-btn-active-color: var(--on-primary);
}

/* Ação principal com a cor sólida oficial da marca. */
.btn-marca {
    background: var(--bs-primary);
    border: 0; color: var(--on-primary); font-weight: 700;
    box-shadow: var(--shadow-sm);
}
.btn-marca:hover { color: var(--on-primary); filter: brightness(1.06); box-shadow: var(--shadow-md); }
.btn-marca:disabled { filter: grayscale(.6); opacity: .65; }

/* Utilitários de fundo/badge também vêm com hexadecimal fixo. */
.bg-primary { background-color: var(--bs-primary) !important; }
.text-bg-primary { background-color: var(--bs-primary) !important; color: var(--on-primary) !important; }
.text-primary { color: var(--bs-primary-text-emphasis) !important; }
.border-primary { border-color: var(--bs-primary) !important; }
.link-primary { color: var(--bs-primary-text-emphasis) !important; }

/* No tema escuro o laranja clareia, então texto branco perde contraste —
   texto escuro sobre ele lê muito melhor. */

.form-control, .form-select {
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-control:focus, .form-select:focus { box-shadow: var(--shadow-focus); border-color: var(--bs-primary); }

.table > :not(caption) > * > * { padding: 1rem 0.75rem; vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background-color: rgba(var(--bs-primary-rgb), 0.05); }

@media (max-width: 991.98px) {
    .card { border-radius: var(--radius-sm); }
    .table-responsive { border-radius: var(--radius-sm); -webkit-overflow-scrolling: touch; }
    .table > :not(caption) > * > * { padding: .72rem .55rem; }
    .pagination { flex-wrap: nowrap; justify-content: flex-start !important; overflow-x: auto; max-width: 100%; padding-bottom: .25rem; }
    .pagination .page-link { min-width: 34px; text-align: center; }
}

/* ==========================================================================
   Select2 — tema claro e escuro
   ========================================================================== */

.select2-container .select2-selection--single {
    height: 38px !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--radius-sm) !important;
    background-color: var(--bs-body-bg) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important; color: var(--bs-body-color) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; }
.select2-dropdown { background-color: var(--bs-body-bg) !important; border-color: var(--bs-border-color) !important; }
.select2-search__field {
    background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}
.select2-results__option { color: var(--bs-body-color) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--bs-primary) !important; color: var(--on-primary) !important;
}

/* ==========================================================================
   Estados — vazio, carregando, skeleton
   ========================================================================== */

.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: var(--space-8) var(--space-4);
    color: var(--bs-secondary-color);
}
.empty-state i { font-size: 2.75rem; opacity: .35; margin-bottom: var(--space-3); }
.empty-state h6 { color: var(--bs-body-color); font-weight: 600; margin-bottom: var(--space-1); }
.empty-state p { max-width: 320px; margin: 0 auto; font-size: .875rem; }

.skeleton {
    background: var(--bs-border-color);
    animation: mx-skeleton 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
@keyframes mx-skeleton {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}
.skeleton-linha { height: 14px; margin-bottom: .5rem; }
.skeleton-linha:last-child { width: 60%; margin-bottom: 0; }

/* ---------- Renderização adiada ("ocultamento na abertura da aba") ----------
   Blocos pesados (grade de mesas, cardápio, KDS, listas longas) nascem
   escondidos e só entram quando o navegador termina o trabalho crítico ou
   quando o bloco chega perto da viewport. Sem isso, abrir a aba criava
   centenas de nós de uma vez e a tela travava por um instante no celular.
   O JS em footer.php faz a troca; aqui ficam só os dois estados. */
[data-adiar] { min-height: var(--adiar-altura, 120px); }
[data-adiar]:not(.adiar-pronto) > .adiar-conteudo { display: none !important; }
[data-adiar].adiar-pronto > .adiar-esqueleto { display: none !important; }
[data-adiar].adiar-pronto > .adiar-conteudo {
    animation: mx-fade-in var(--dur-base) var(--ease-out);
}
/* Sem JS o conteúdo aparece assim mesmo — nunca deixa a tela vazia. */
.no-js [data-adiar]:not(.adiar-pronto) > .adiar-conteudo { display: block !important; }
.no-js [data-adiar] > .adiar-esqueleto { display: none !important; }

/* ==========================================================================
   Autenticação (login)
   ========================================================================== */

.auth-shell {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: var(--bs-tertiary-bg);
    padding: var(--space-4);
}
.auth-card {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 100%; max-width: 400px;
    padding: var(--space-6);
    animation: mx-fade-in var(--dur-slow) var(--ease-out);
}
.auth-card .form-control { background-color: var(--bs-tertiary-bg); border-color: var(--bs-border-color); padding: 0.7rem 1rem; }
.auth-card .form-control:focus { background-color: var(--bs-body-bg); }
.auth-logo {
    width: 76px; height: 76px; object-fit: contain; border-radius: var(--radius-md);
    margin-bottom: var(--space-4); background: var(--bs-body-bg); padding: 5px;
    border: 1px solid var(--bs-border-color);
}
.hp-field { display: none !important; position: absolute; left: -9999px; }

/* ==========================================================================
   Frente de Caixa (PDV)
   ========================================================================== */

.pdv-shell { display: grid; gap: var(--space-4); }

.pdv-falha {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .9rem;
    margin-bottom: var(--space-4);
    padding: .9rem 1rem;
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
    border: 1px solid var(--bs-danger-border-subtle);
    border-left: 4px solid var(--bs-danger);
    border-radius: .7rem;
    box-shadow: 0 .2rem .8rem rgba(0, 0, 0, .06);
}
.pdv-falha__icone {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--bs-danger);
    background: var(--bs-body-bg);
    border-radius: 50%;
    font-size: 1.05rem;
}
.pdv-falha__texto { display: grid; gap: .15rem; min-width: 0; line-height: 1.35; }
.pdv-falha__texto strong { color: var(--bs-emphasis-color); font-size: .95rem; }
.pdv-falha__texto span { font-size: .82rem; }
.pdv-falha__acao { white-space: nowrap; font-size: .82rem; font-weight: 700; }

@media (max-width: 575.98px) {
    .pdv-falha { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
    .pdv-falha__acao { grid-column: 1 / -1; width: 100%; }
}
@media (min-width: 992px) {
    .pdv-shell { grid-template-columns: minmax(320px, 5fr) minmax(360px, 7fr); align-items: start; }
}

.pdv-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.pdv-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--bs-border-color);
}
.pdv-card-head h2, .pdv-card-head h3 {
    font-size: .95rem; font-weight: 700; margin: 0;
    letter-spacing: -.01em; display: flex; align-items: center; gap: .5rem;
}
.pdv-card-body { padding: var(--space-4); }

/* Faixa de status do caixa */
.pdv-status {
    display: flex; align-items: center; gap: .55rem;
    padding: .6rem .9rem; border-radius: var(--radius-md);
    font-weight: 600; font-size: .88rem; border: 1px solid transparent;
}
.pdv-status--on  { background: rgba(25,135,84,.10); color: var(--bs-success-text-emphasis); border-color: rgba(25,135,84,.25); }
.pdv-status--off { background: rgba(255,193,7,.12); color: var(--bs-warning-text-emphasis); border-color: rgba(255,193,7,.30); }

/* Busca de produto com sugestões */
.pdv-search-wrap { position: relative; }
.pdv-suggestions {
    position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 1055;
    max-height: 46vh; overflow-y: auto; display: none;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
.pdv-suggestion {
    display: flex; align-items: center; gap: .7rem; width: 100%;
    padding: .55rem .7rem; border: 0; border-bottom: 1px solid var(--bs-border-color);
    background: transparent; color: var(--bs-body-color); text-align: left;
    cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out);
}
.pdv-suggestion:last-child { border-bottom: 0; }
.pdv-suggestion:hover, .pdv-suggestion.is-active { background: rgba(var(--bs-primary-rgb), .10); }
.pdv-suggestion[disabled] { opacity: .5; cursor: not-allowed; }
.pdv-suggestion-thumb {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--radius-sm);
    object-fit: cover; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
    display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color);
}
.pdv-suggestion-main { min-width: 0; flex: 1 1 auto; }
.pdv-suggestion-name { font-weight: 600; font-size: .9rem; line-height: 1.25; }
.pdv-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .68rem; font-weight: 700; letter-spacing: .05em;
    color: var(--bs-primary-text-emphasis); text-transform: uppercase;
}

/* Carrinho */
.pdv-cart-list { display: flex; flex-direction: column; }
.pdv-cart-item {
    display: grid; gap: .15rem .75rem; align-items: center;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: .7rem var(--space-4);
    border-bottom: 1px solid var(--bs-border-color);
}
.pdv-cart-item:last-child { border-bottom: 0; }
.pdv-cart-name  { font-weight: 600; font-size: .92rem; grid-column: 1; }
.pdv-cart-meta  { grid-column: 1; font-size: .78rem; color: var(--bs-secondary-color); }
.pdv-cart-details {
    grid-column: 1 / -1; display: flex; flex-direction: column; gap: .15rem;
    min-width: 0; margin-top: .25rem; padding: .45rem .55rem;
    border-radius: var(--radius-sm); background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color); font-size: .72rem; line-height: 1.35;
    overflow-wrap: anywhere;
}
.pdv-cart-total { grid-column: 2; font-weight: 700; color: var(--bs-success-text-emphasis); font-variant-numeric: tabular-nums; }
.pdv-cart-actions { grid-column: 3; grid-row: 1 / span 2; display: flex; align-items: center; gap: .1rem; }

.pdv-empty { text-align: center; padding: var(--space-6) var(--space-4); color: var(--bs-secondary-color); }
.pdv-empty i { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .45; }

.pdv-total-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-3); padding: var(--space-3) 0;
}
.pdv-total-value { font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* Painel lateral de histórico */
.pdv-hist-item { display: flex; align-items: center; gap: .7rem; padding: .65rem .25rem; border-bottom: 1px solid var(--bs-border-color); }
.pdv-hist-item:last-child { border-bottom: 0; }
.pdv-hist-num {
    flex: 0 0 auto; min-width: 2.6rem; text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .74rem; font-weight: 700; padding: .2rem .35rem;
    border-radius: var(--radius-sm); background: var(--bs-tertiary-bg); color: var(--bs-secondary-color);
}
.pdv-hist-main   { flex: 1 1 auto; min-width: 0; }
.pdv-hist-cliente{ font-weight: 600; font-size: .86rem; line-height: 1.2; }
.pdv-hist-meta   { font-size: .72rem; color: var(--bs-secondary-color); }
.pdv-hist-valor  { font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Produtos recolhíveis de uma venda. O resumo continua denso para conferência
   rápida e a composição completa abre no próprio contexto, sem modal. */
.sale-record { border-bottom: 1px solid var(--bs-border-color); }
.sale-record > .pdv-hist-item { border-bottom: 0; padding-bottom: .3rem; }
.sale-items-toggle {
    width: calc(100% - .5rem); margin: 0 .25rem .55rem; padding: .35rem .55rem;
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    border: 0; border-radius: var(--radius-sm); background: transparent;
    color: var(--bs-secondary-color); font-size: .72rem; font-weight: 600; text-align: left;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.sale-items-toggle:hover,
.sale-items-toggle[aria-expanded="true"] {
    background: rgba(var(--bs-primary-rgb), .09);
    color: var(--bs-primary-text-emphasis);
}
.sale-items-toggle:focus-visible,
.sale-items-pill:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.sale-items-chevron {
    display: inline-block; font-size: .7rem;
    transition: transform var(--dur-base) var(--ease-out);
}
[aria-expanded="true"] > .sale-items-chevron { transform: rotate(180deg); }

.sale-products-list {
    margin: 0 .25rem .7rem; overflow: hidden;
    border: 1px solid var(--bs-border-color); border-radius: var(--radius-sm);
    background: var(--bs-body-bg); box-shadow: var(--shadow-xs);
}
.sale-product-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: .55rem; padding: .48rem .6rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.sale-product-row:last-child { border-bottom: 0; }
.sale-product-qty {
    min-width: 2.15rem; padding: .16rem .35rem; border-radius: var(--radius-pill);
    background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary-text-emphasis);
    font-size: .68rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
}
.sale-product-main { min-width: 0; display: flex; flex-direction: column; }
.sale-product-name {
    overflow: hidden; color: var(--bs-body-color); font-size: .78rem;
    font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap;
}
.sale-product-detail {
    overflow: hidden; color: var(--bs-secondary-color); font-size: .66rem;
    line-height: 1.35; text-overflow: ellipsis; white-space: nowrap;
}
.sale-product-price {
    color: var(--bs-success-text-emphasis); font-size: .75rem; font-weight: 700;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

@media (max-width: 991.98px) {
    .pdv-card-body { padding: var(--space-3); }
    .pdv-total-value { font-size: 1.55rem; }
    .pdv-suggestion { padding: .7rem; }
    .pdv-cart-item { padding: .7rem var(--space-3); }
}

/* Vitrine da marca na Frente de Caixa. A moldura reproduz a referência do
   PDV e usa sempre o logotipo configurado para a empresa autenticada. */
.pdv-vitrine {
    flex-direction: column; align-items: center; justify-content: center;
    gap: var(--space-4); padding: var(--space-6) var(--space-4);
    min-height: 320px; text-align: center;
    animation: mx-fade-in var(--dur-slow) var(--ease-out);
}
.pdv-fone {
    position: relative; width: 132px; height: 258px; flex: 0 0 auto;
    border-radius: 26px; background: var(--bs-body-bg);
    border: 3px solid var(--bs-border-color);
    box-shadow: var(--shadow-lg), inset 0 0 0 2px var(--bs-tertiary-bg);
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--dur-slow) var(--ease-out);
}
.pdv-vitrine:hover .pdv-fone { transform: translateY(-4px) rotate(-1.5deg); }
.pdv-fone-notch {
    position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 46px; height: 5px; border-radius: var(--radius-pill);
    background: var(--bs-border-color);
}
.pdv-fone-tela {
    width: calc(100% - 14px); height: calc(100% - 34px);
    margin-top: 6px; border-radius: 18px; overflow: hidden;
    background: var(--bs-tertiary-bg);
    display: flex; align-items: center; justify-content: center; padding: 12px;
}
.pdv-fone-tela img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pdv-fone-home {
    position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
    width: 42px; height: 4px; border-radius: var(--radius-pill);
    background: var(--bs-border-color);
}
.pdv-vitrine-txt { margin: 0; line-height: 1.4; }
.pdv-vitrine-txt strong { display: block; font-size: 1rem; }
.pdv-vitrine-txt span { font-size: .85rem; color: var(--bs-secondary-color); }

@media (prefers-reduced-motion: reduce) {
    .pdv-vitrine, .pdv-vitrine:hover .pdv-fone { animation: none; transform: none; }
}

/* ==========================================================================
   Central de Relatórios
   ========================================================================== */

.rel-shell { display: grid; gap: var(--space-4); }
@media (min-width: 992px) {
    .rel-shell { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
    .rel-menu { position: sticky; top: 88px; }
}

.rel-menu-body { padding: var(--space-2); display: flex; flex-direction: column; gap: 1px; }
.rel-grupo {
    font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--bs-secondary-color); padding: .7rem .75rem .3rem;
}
.rel-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .75rem; border-radius: var(--radius-sm);
    color: var(--bs-body-color); text-decoration: none; font-size: .88rem; font-weight: 500;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rel-item i { font-size: 1rem; width: 1.2em; text-align: center; color: var(--bs-secondary-color); }
.rel-item:hover { background: rgba(var(--bs-primary-rgb), .10); color: var(--bs-primary-text-emphasis); }
.rel-item:hover i { color: var(--bs-primary-text-emphasis); }
.rel-item.is-active { background: var(--bs-primary); color: var(--on-primary); font-weight: 600; }
.rel-item.is-active i { color: var(--on-primary); }
.rel-library-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:1rem 1rem .75rem; border-bottom:1px solid var(--bs-border-color); }
.rel-library-head h2 { margin:.18rem 0 0; font-size:1.05rem; font-weight:750; }
.rel-library-head h2 i { color:var(--bs-primary); margin-right:.3rem; }
.rel-library-kicker { color:var(--bs-secondary-color); font-size:.62rem; font-weight:800; letter-spacing:.12em; }
.rel-library-count { color:var(--bs-primary-text-emphasis); background:rgba(var(--bs-primary-rgb),.1); padding:.4rem .55rem; border-radius:999px; font-size:.8rem; font-weight:800; white-space:nowrap; }
.rel-library-count small { font-size:.68rem; font-weight:600; }
.rel-library-search { display:flex; align-items:center; gap:.5rem; margin:.75rem .75rem .4rem; padding:.55rem .65rem; border:1px solid var(--bs-border-color); border-radius:var(--radius-sm); color:var(--bs-secondary-color); }
.rel-library-search:focus-within { border-color:var(--bs-primary); box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb),.12); }
.rel-library-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--bs-body-color); font-size:.84rem; }
.rel-grupo { display:flex; justify-content:space-between; align-items:center; }
.rel-grupo small { min-width:1.35rem; text-align:center; border-radius:999px; background:var(--bs-tertiary-bg); padding:.08rem .35rem; letter-spacing:0; }
.rel-item { min-height:42px; }
.rel-item-current { margin-left:auto; color:inherit!important; }
.rel-menu { max-height:calc(100vh - 104px); display:flex; flex-direction:column; }
.rel-menu-body { min-height:0; overflow:auto; overscroll-behavior:contain; }
.rel-current-banner { display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; border:1px solid var(--bs-border-color); border-radius:var(--radius-lg); background:linear-gradient(115deg,rgba(var(--bs-primary-rgb),.1),var(--bs-body-bg) 58%); box-shadow:var(--shadow-sm); animation:rel-enter .35s var(--ease-out) both; }
.rel-current-icon { width:3rem; height:3rem; display:grid; place-items:center; flex:0 0 auto; border-radius:1rem; color:var(--bs-primary-text-emphasis); background:rgba(var(--bs-primary-rgb),.14); font-size:1.25rem; }
.rel-current-banner h2 { font-size:1.2rem; font-weight:800; margin:.12rem 0; }
.rel-current-banner p { color:var(--bs-secondary-color); margin:0; font-size:.84rem; }
.rel-live-chip { margin-left:auto; display:flex; align-items:center; gap:.45rem; color:var(--bs-secondary-color); font-size:.73rem; white-space:nowrap; }
.rel-live-chip i { width:.48rem;height:.48rem;border-radius:50%;background:#20a46a;box-shadow:0 0 0 4px rgba(32,164,106,.12); }
@keyframes rel-enter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:991.98px) { .rel-menu { max-height:none; } .rel-library-head { padding:.65rem .8rem .4rem; border:0; } .rel-library-search { margin:.25rem .65rem .4rem; } .rel-menu-body { padding:.35rem .55rem .65rem; } .rel-grupo { display:none; } .rel-item { min-height:40px; } }
@media (max-width:575.98px) { .rel-current-banner { align-items:flex-start; padding:.8rem; gap:.7rem; } .rel-current-icon { width:2.5rem;height:2.5rem;border-radius:.8rem; } .rel-current-banner h2 { font-size:1.02rem; } .rel-current-banner p { font-size:.75rem; } .rel-live-chip { display:none; } }
@media (prefers-reduced-motion:reduce) { .rel-current-banner { animation:none; } }

/* Ajustes de notificações em janela flutuante */
.notif-config-backdrop { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:1rem; background:rgba(20,22,25,.48); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); animation:notif-fade-in .18s ease-out both; }
.notif-config-window { width:min(100%,520px); padding:1.25rem; color:var(--bs-body-color); background:var(--bs-body-bg); background:color-mix(in srgb,var(--bs-body-bg) 92%,transparent); border:1px solid var(--bs-border-color); border-color:color-mix(in srgb,var(--bs-border-color) 65%,transparent); border-radius:1.15rem; box-shadow:0 24px 80px rgba(13,20,31,.28); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); animation:notif-window-in .24s cubic-bezier(.2,.8,.2,1) both; }
.notif-config__heading { display:flex; align-items:flex-start; gap:.8rem; position:relative; padding-right:2rem; }
.notif-config__brand,.notif-config__toggle-icon { width:2.7rem;height:2.7rem; flex:0 0 auto; display:grid; place-items:center; color:var(--bs-primary-text-emphasis); background:rgba(var(--bs-primary-rgb),.13); border-radius:.85rem; font-size:1.05rem; }
.notif-config__heading h1 { margin:.15rem 0 .2rem; font-size:1.22rem; font-weight:800; letter-spacing:-.025em; }
.notif-config__heading p:last-child { margin:0; color:var(--bs-secondary-color); font-size:.84rem; }
.notif-config__eyebrow { margin:0; color:var(--bs-secondary-color); font-size:.61rem; font-weight:800; letter-spacing:.12em; }
.notif-config__close { position:absolute; right:0;top:0; width:2rem;height:2rem; display:grid;place-items:center; color:var(--bs-secondary-color); background:var(--bs-tertiary-bg); border-radius:50%; text-decoration:none; }
.notif-config__close:hover { color:var(--bs-body-color); background:var(--bs-secondary-bg); }
.notif-config__status { display:flex; align-items:flex-start; gap:.55rem; margin:1rem 0 .75rem; padding:.65rem .75rem; background:var(--bs-tertiary-bg); border-radius:.7rem; }
.notif-config__status p { margin:0; color:var(--bs-secondary-color); font-size:.78rem; line-height:1.45; }
.notif-config__status-dot { width:.5rem;height:.5rem;flex:0 0 auto;margin-top:.22rem;border-radius:50%;background:#20a46a;box-shadow:0 0 0 4px rgba(32,164,106,.12); }
.notif-config__toggle-row { display:flex; align-items:center; gap:.75rem; padding:.9rem .1rem; border-block:1px solid var(--bs-border-color); }
.notif-config__toggle-icon { width:2.4rem;height:2.4rem;border-radius:.72rem; }
.notif-config__toggle-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:.18rem; }
.notif-config__toggle-copy strong { font-size:.9rem; }
.notif-config__toggle-copy small { color:var(--bs-secondary-color); font-size:.74rem; line-height:1.4; }
.notif-switch { position:relative; width:2.7rem;height:1.55rem; flex:0 0 auto; }
.notif-switch input { position:absolute; opacity:0; width:1px;height:1px; }
.notif-switch span { position:absolute;inset:0; cursor:pointer;border-radius:999px;background:var(--bs-secondary-bg);border:1px solid var(--bs-border-color);transition:background .18s ease,border-color .18s ease; }
.notif-switch span::after { content:"";position:absolute;top:.17rem;left:.17rem;width:1.05rem;height:1.05rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .18s ease; }
.notif-switch input:checked+span { background:var(--bs-primary);border-color:var(--bs-primary); }
.notif-switch input:checked+span::after { transform:translateX(1.14rem); }
.notif-switch input:focus-visible+span { outline:3px solid rgba(var(--bs-primary-rgb),.3);outline-offset:2px; }
.notif-config__actions { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.9rem; }
.notif-config__actions .btn { min-height:42px; flex:0 0 auto; display:inline-flex;align-items:center;justify-content:center;gap:.4rem; }
.notif-config__footnote { display:flex; gap:.45rem; margin:.85rem 0 0; color:var(--bs-secondary-color);font-size:.72rem;line-height:1.45; }
.notif-config__footnote i { color:var(--bs-primary); }
@keyframes notif-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes notif-window-in { from { opacity:0;transform:translateY(10px) scale(.985); } to { opacity:1;transform:translateY(0) scale(1); } }
@media (max-width:480px) { .notif-config-backdrop { padding:.7rem; } .notif-config-window { padding:1rem; } .notif-config__actions { flex-direction:column; } .notif-config__actions .btn { width:100%; } }
@media (prefers-reduced-motion:reduce) { .notif-config-backdrop,.notif-config-window,.notif-switch span,.notif-switch span::after { animation:none;transition:none; } }

/* No celular o menu vira faixa rolável horizontal, senão a lista de relatórios
   empurra a tabela para muito abaixo da dobra. */
@media (max-width: 991.98px) {
    .rel-menu-body { flex-direction: row; overflow-x: auto; gap: .35rem; padding: .6rem; scrollbar-width: thin; }
    .rel-grupo { display: none; }
    .rel-item { white-space: nowrap; flex: 0 0 auto; border: 1px solid var(--bs-border-color); }
}

.rel-tabela-wrap { overflow-x: auto; }
.rel-tabela { font-size: .88rem; }
.rel-tabela thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--bs-tertiary-bg);
    font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--bs-secondary-color); white-space: nowrap;
    border-bottom: 2px solid var(--bs-border-color);
}
.rel-tabela td { white-space: nowrap; }
.rel-tabela tfoot .rel-total td {
    background: rgba(var(--bs-primary-rgb), .08);
    font-weight: 700; border-top: 2px solid var(--bs-primary);
}
.sale-items-pill {
    display: inline-flex; align-items: center; justify-content: flex-end; gap: .32rem;
    padding: .28rem .48rem; border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-pill); background: var(--bs-body-bg);
    color: var(--bs-primary-text-emphasis); font-size: .72rem; font-weight: 700;
    white-space: nowrap;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.sale-items-pill:hover,
.sale-items-pill[aria-expanded="true"] {
    border-color: rgba(var(--bs-primary-rgb), .55);
    background: rgba(var(--bs-primary-rgb), .09);
}
.rel-tabela .rel-products-row > td { padding: 0; border-bottom: 0; white-space: normal; }
.rel-tabela .rel-products-row:hover > td { background: transparent; }
.sale-products-panel {
    padding: .65rem 1rem .8rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: rgba(var(--bs-primary-rgb), .035);
}
.sale-products-heading {
    margin-bottom: .4rem; color: var(--bs-secondary-color);
    font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.sale-products-list--report { width: min(100%, 760px); margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .sale-items-chevron { transition: none; }
}

/* ==========================================================================
   PIX
   ========================================================================== */

.pix-conferencia {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-md);
    background: var(--bs-tertiary-bg);
}
/* O QR precisa de fundo branco e margem clara mesmo no tema escuro —
   leitor de celular falha em ler QR invertido ou sem borda. */
.pix-conferencia-qr, .pix-qr-caixa {
    background: #fff; padding: 8px; border-radius: var(--radius-sm);
    flex: 0 0 auto; line-height: 0;
}
.pix-conferencia-qr img, .pix-conferencia-qr canvas,
.pix-qr-caixa img, .pix-qr-caixa canvas { display: block; }

.pix-bloco {
    border: 1px solid rgba(var(--bs-primary-rgb), .35);
    border-radius: var(--radius-md);
    background: rgba(var(--bs-primary-rgb), .06);
    padding: var(--space-4);
    text-align: center;
}
.pix-valor {
    font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; color: var(--bs-primary-text-emphasis);
}
.pix-copiacola {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .68rem; word-break: break-all; line-height: 1.4;
    max-height: 4.2em; overflow-y: auto;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-sm); padding: .5rem; text-align: left;
}

/* ==========================================================================
   Barra de atalhos e painel "Mais" (mobile)
   O dropdown do Bootstrap ficava espremido na tela do celular, sem espaço
   para agrupar e com área de toque pequena. No celular, abre como gaveta
   lateral para manter os atalhos visíveis sem cobrir toda a tela.
   ========================================================================== */

.mais-fundo {
    position: fixed; inset: 0; z-index: 1045;
    background: rgba(12, 8, 5, .55);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.mais-fundo.aberto { opacity: 1; }

.mais-painel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1046;
    background: var(--bs-body-bg);
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
    box-shadow: 0 -12px 40px rgba(0,0,0,.28);
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom));
    max-height: 82vh; display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform var(--dur-base) var(--ease-out);
    will-change: transform;
}
.mais-painel.aberto { transform: translateY(0); }

.mais-alca { width: 40px; height: 4px; border-radius: var(--radius-pill); background: var(--bs-border-color); margin: .6rem auto .2rem; }
.mais-cabecalho { display: flex; align-items: center; justify-content: space-between; padding: .35rem 1.15rem .6rem; }
.mais-titulo {
    font-size: .72rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--bs-secondary-color); margin: 0;
}
.mais-fechar {
    width: 32px; height: 32px; border: 0; border-radius: 50%;
    background: var(--bs-tertiary-bg); color: var(--bs-body-color);
    display: flex; align-items: center; justify-content: center;
}
.mais-fechar:active { transform: scale(.92); }

.mais-corpo { overflow-y: auto; padding: 0 .75rem .75rem; overscroll-behavior: contain; }
.mais-grupo {
    font-size: .66rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--bs-secondary-color); padding: .85rem .5rem .35rem;
}

.mais-item {
    display: flex; align-items: center; gap: .8rem;
    padding: .7rem .6rem; border-radius: var(--radius-md);
    color: var(--bs-body-color); text-decoration: none;
    min-height: 52px;                     /* alvo de toque confortável */
    opacity: 0; transform: translateY(10px);
}
.mais-painel.aberto .mais-item {
    animation: mais-entra var(--dur-base) var(--ease-out) forwards;
    animation-delay: calc(var(--ordem, 0) * 22ms + 60ms);
}
@keyframes mais-entra { to { opacity: 1; transform: translateY(0); } }

.mais-item:active { background: var(--bs-tertiary-bg); transform: scale(.99); }
.mais-item-icone {
    flex: 0 0 40px; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(var(--bs-primary-rgb), .16);
    color: var(--bs-primary-text-emphasis); font-size: 1.1rem;
}
.mais-item-txt  { flex: 1 1 auto; font-weight: 600; font-size: .95rem; }
.mais-item-seta { color: var(--bs-secondary-color); font-size: .8rem; }

.mais-item.atual { background: rgba(var(--bs-primary-rgb), .10); }
.mais-item.atual .mais-item-icone { background: var(--bs-primary); color: var(--on-primary); }
.mais-item-marca {
    font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--bs-primary-text-emphasis); background: rgba(var(--bs-primary-rgb), .14);
    padding: .18rem .45rem; border-radius: var(--radius-pill);
}

.mais-item-sair { margin-top: .5rem; border-top: 1px solid var(--bs-border-color); border-radius: 0; padding-top: .9rem; }
.mais-item-sair .mais-item-icone { background: rgba(var(--bs-danger-rgb), .12); color: var(--bs-danger); }
.mais-item-sair .mais-item-txt   { color: var(--bs-danger); }

@media (max-width: 991.98px) {
    .mais-painel {
        top: max(6vh, env(safe-area-inset-top));
        right: max(.75rem, env(safe-area-inset-right));
        bottom: auto;
        left: auto;
        width: min(84vw, 23rem);
        height: min(76dvh, 44rem);
        max-height: calc(100dvh - max(6vh, env(safe-area-inset-top)) - 1rem);
        padding-bottom: .5rem;
        border-radius: var(--radius-xl);
        box-shadow: 0 16px 48px rgba(0,0,0,.24);
        transform: translateX(calc(100% + 1.25rem));
    }
    .mais-painel.aberto { transform: translateX(0); }
    .mais-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
}

@media (prefers-reduced-motion: reduce) {
    .mais-painel, .mais-fundo { transition: none; }
    .mais-painel.aberto .mais-item { animation: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   REGISTRO — padrão das telas de cadastro (Cardápio, Clientes, O.S.)
   A ação constante nessas telas é PROCURAR, não cadastrar: no celular a lista
   nascia abaixo da dobra, atrás de dez campos. Aqui a lista É a tela; criar
   virou ação deliberada num painel lateral.
   ========================================================================== */

.reg-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.reg-titulo { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.1; }
.reg-contagem { font-size: .82rem; color: var(--bs-secondary-color); margin: .15rem 0 0; }

.cardapio-rotas {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
    margin-bottom: var(--space-3); padding: .55rem;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.cardapio-rotas .btn { font-size: .8rem; }
.cardapio-rota-icone { display: inline-grid; place-items: center; }
.cardapio-rota-seta { display: none; }

/* Central financeira: uma única entrada no menu e escolhas explícitas dentro
   da área. O seletor também aparece nas telas filhas para trocar de função sem
   voltar à sidebar. */
.financeiro-central { max-width: 1180px; margin: 0 auto; }
.financeiro-cabecalho {
    position: relative; overflow: hidden;
    margin-bottom: 1rem; padding: clamp(1.25rem, 3vw, 2.2rem);
    border: 1px solid rgba(var(--bs-primary-rgb), .22); border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 92% 12%, rgba(var(--bs-primary-rgb), .18), transparent 34%),
        linear-gradient(135deg, var(--bs-body-bg), var(--bs-tertiary-bg));
    box-shadow: var(--shadow-sm);
}
.financeiro-kicker {
    display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .55rem;
    color: var(--bs-primary-text-emphasis); font-size: .7rem; font-weight: 800;
    letter-spacing: .075em; text-transform: uppercase;
}
.financeiro-cabecalho h1 { margin: 0; font-size: clamp(1.65rem, 4vw, 2.35rem); font-weight: 800; letter-spacing: -.035em; }
.financeiro-cabecalho p { max-width: 680px; margin: .45rem 0 0; color: var(--bs-secondary-color); line-height: 1.55; }

.financeiro-rotas {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem;
    margin: 0 0 1rem; padding: .55rem;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.financeiro-central > .financeiro-rotas { display: none; }
.financeiro-rota {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55rem;
    min-height: 48px; padding: .45rem .55rem; border: 1px solid transparent; border-radius: var(--radius-sm);
    color: var(--bs-body-color); text-decoration: none; transition: border-color var(--dur-fast), background-color var(--dur-fast), transform var(--dur-fast);
}
.financeiro-rota:hover { border-color: var(--bs-border-color); background: var(--bs-tertiary-bg); transform: translateY(-1px); }
.financeiro-rota.is-active { border-color: rgba(var(--bs-primary-rgb), .32); background: rgba(var(--bs-primary-rgb), .10); }
.financeiro-rota__icone {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: .65rem;
    background: rgba(var(--bs-primary-rgb), .13); color: var(--bs-primary-text-emphasis);
}
.financeiro-rota.is-active .financeiro-rota__icone { background: var(--bs-primary); color: var(--on-primary); }
.financeiro-rota__texto { min-width: 0; }
.financeiro-rota__texto strong { display: block; font-size: .78rem; line-height: 1.2; }
.financeiro-rota__texto small { display: block; color: var(--bs-secondary-color); font-size: .65rem; }
.financeiro-rota__seta { display: none; color: var(--bs-secondary-color); font-size: .75rem; }

.financeiro-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.financeiro-card {
    --fin-cor: var(--bs-primary-rgb);
    position: relative; display: flex; flex-direction: column; min-height: 245px; overflow: hidden;
    padding: 1.25rem; border: 1px solid var(--bs-border-color); border-radius: var(--radius-lg);
    color: var(--bs-body-color); text-decoration: none; background: var(--bs-body-bg); box-shadow: var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base);
}
.financeiro-card::after {
    content: ''; position: absolute; right: -45px; bottom: -60px; width: 160px; height: 160px;
    border-radius: 50%; background: rgba(var(--fin-cor), .09); pointer-events: none;
}
.financeiro-card:hover { transform: translateY(-3px); border-color: rgba(var(--fin-cor), .4); box-shadow: var(--shadow-md); }
.financeiro-card--caixa { --fin-cor: 246, 139, 54; }
.financeiro-card--receber { --fin-cor: 25, 135, 84; }
.financeiro-card--pagar { --fin-cor: 49, 92, 148; }
.financeiro-card__icone {
    display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1rem;
    border-radius: .9rem; background: rgba(var(--fin-cor), .14); color: rgb(var(--fin-cor)); font-size: 1.35rem;
}
.financeiro-card__conteudo { position: relative; z-index: 1; }
.financeiro-card__conteudo strong { display: block; margin-bottom: .4rem; font-size: 1.08rem; }
.financeiro-card__conteudo small { display: block; color: var(--bs-secondary-color); font-size: .8rem; line-height: 1.5; }
.financeiro-card__acao { position: relative; z-index: 1; display: flex; align-items: center; gap: .45rem; margin-top: auto; padding-top: 1rem; color: rgb(var(--fin-cor)); font-size: .78rem; font-weight: 800; }
.financeiro-card:hover .financeiro-card__acao i { transform: translateX(3px); }
.financeiro-card__acao i { transition: transform var(--dur-fast); }
.acoes-massa-cardapio {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    margin-bottom: var(--space-3); padding: .65rem .8rem;
    background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: var(--radius-md);
}
.acoes-massa-cardapio .form-select { width: auto; min-width: 220px; }

.reg-busca { display: flex; gap: .5rem; margin-bottom: var(--space-3); }
.reg-busca .form-control { font-size: 1rem; padding: .65rem .9rem; }
.reg-busca .input-group-text { background: var(--bs-body-bg); border-right: 0; }

.reg-lista {
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}

.reg-linha {
    display: grid; align-items: center; gap: .15rem .9rem;
    padding: .8rem 1rem; border-bottom: 1px solid var(--bs-border-color);
    grid-template-columns: auto minmax(0,1fr) auto auto auto;
    grid-template-areas: "fig corpo preco estoque acoes";
    transition: background-color var(--dur-fast) var(--ease-out);
}
.reg-linha.reg-linha--selecionavel {
    grid-template-columns: auto auto minmax(0,1fr) auto auto auto;
    grid-template-areas: "selecao fig corpo preco estoque acoes";
}
.reg-selecao { grid-area: selecao; display: flex; align-items: center; justify-content: center; }
.reg-selecao .form-check-input { width: 1.15rem; height: 1.15rem; margin: 0; cursor: pointer; }
.reg-linha:last-child { border-bottom: 0; }
.reg-linha:hover { background: var(--bs-tertiary-bg); }

.reg-fig {
    grid-area: fig; width: 46px; height: 46px; flex: 0 0 46px;
    border-radius: var(--radius-sm); overflow: hidden;
    background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
    display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color);
}
.reg-fig img { width: 100%; height: 100%; object-fit: cover; }
.reg-fig--inicial {
    background: rgba(var(--bs-primary-rgb), .16); color: var(--bs-primary-text-emphasis);
    font-weight: 700; font-size: 1.1rem; border-color: rgba(var(--bs-primary-rgb), .2);
}

.reg-corpo { grid-area: corpo; min-width: 0; }
.reg-tag {
    display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .68rem; font-weight: 700; letter-spacing: .08em;
    color: var(--bs-primary-text-emphasis); background: rgba(var(--bs-primary-rgb), .16);
    border: 1px solid rgba(var(--bs-primary-rgb), .35);
    padding: .1rem .4rem; border-radius: 4px; margin-bottom: .2rem;
}
.reg-nome { font-weight: 600; font-size: .95rem; line-height: 1.25; overflow-wrap: anywhere; }
.reg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .55rem; font-size: .76rem; color: var(--bs-secondary-color); margin-top: .15rem; }
.reg-meta i { font-size: .82rem; }

.reg-preco { grid-area: preco; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.reg-preco-de   { font-size: .72rem; color: var(--bs-secondary-color); text-decoration: line-through; display: block; line-height: 1.2; }
.reg-preco-por  { font-weight: 700; font-size: .98rem; }
.reg-preco-custo{ font-size: .72rem; color: var(--bs-secondary-color); display: block; line-height: 1.3; }

.reg-estoque { grid-area: estoque; text-align: center; white-space: nowrap; }
.reg-pill { display: inline-block; font-size: .74rem; font-weight: 700; padding: .22rem .55rem; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; }
.reg-pill--ok    { background: var(--bs-tertiary-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); }
.reg-pill--baixo { background: rgba(var(--bs-warning-rgb), .16); color: var(--bs-warning-text-emphasis); }
.reg-pill--zero  { background: rgba(var(--bs-danger-rgb), .14);  color: var(--bs-danger-text-emphasis); }
.reg-pill--livre { background: transparent; color: var(--bs-secondary-color); border: 1px dashed var(--bs-border-color); }

.reg-acoes { grid-area: acoes; display: flex; gap: .1rem; justify-content: flex-end; }

/* No desktop o bloco de números "desaparece" com display:contents e deixa
   preço e estoque caírem nas suas próprias colunas, alinhados linha a linha. */
@media (min-width: 768px) { .reg-numeros { display: contents; } }

.reg-rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: .8rem 1rem; border-top: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); }
.reg-vazio { text-align: center; padding: var(--space-8) var(--space-4); color: var(--bs-secondary-color); }
.reg-vazio i { font-size: 2.4rem; display: block; margin-bottom: .6rem; opacity: .4; }
.reg-vazio strong { display: block; color: var(--bs-body-color); margin-bottom: .25rem; }

@media (max-width: 767.98px) {
    .financeiro-grade { grid-template-columns: 1fr; gap: .7rem; }
    .financeiro-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; min-height: 0; padding: .9rem; }
    .financeiro-card__icone { width: 46px; height: 46px; margin: 0; }
    .financeiro-card__conteudo strong { margin-bottom: .2rem; font-size: .95rem; }
    .financeiro-card__conteudo small { font-size: .72rem; line-height: 1.4; }
    .financeiro-card__acao { align-self: stretch; justify-content: center; margin: 0; padding: 0 0 0 .65rem; border-left: 1px solid var(--bs-border-color); font-size: 0; }
    .financeiro-card__acao i { font-size: .9rem; }

    .financeiro-rotas { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .reg-linha {
        grid-template-columns: auto minmax(0,1fr) auto;
        grid-template-areas:
            "fig corpo   acoes"
            "fig numeros numeros";
        row-gap: .45rem; padding: .8rem .75rem; align-items: start;
    }
    .reg-linha.reg-linha--selecionavel {
        grid-template-columns: auto auto minmax(0,1fr) auto;
        grid-template-areas:
            "selecao fig corpo   acoes"
            "selecao fig numeros numeros";
    }
    .acoes-massa-cardapio { align-items: stretch; }
    .acoes-massa-cardapio .form-select { width: 100%; min-width: 0; flex: 1 1 100%; }
    .reg-preco, .reg-estoque { grid-area: numeros; text-align: left; display: inline-block; }
    .reg-numeros { grid-area: numeros; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
    .reg-preco-de { display: inline; margin-right: .3rem; }
    /* Custo é informação de gestão: no celular quem consulta está no balcão. */
    .reg-preco-custo { display: none; }
    .reg-titulo { font-size: 1.15rem; }
    .reg-busca > .btn { display: none; }   /* Enter já envia a busca */
}

.reg-painel { width: min(480px, 94vw); }
.reg-painel .offcanvas-body { padding-top: .5rem; }

/* Cadastro guiado do cardapio: transforma o painel longo em pequenas decisoes
   com contexto. Os mesmos blocos sao usados em produto, categoria e opcional. */
.cadastro-painel-subtitulo { color: var(--bs-secondary-color); font-size: .75rem; line-height: 1.35; margin-top: .2rem; }
.cadastro-guia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; margin: .1rem 0 1rem; padding: .3rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; background: var(--bs-tertiary-bg); }
.cadastro-guia-item { display: flex; align-items: center; justify-content: center; gap: .3rem; min-width: 0; padding: .42rem .25rem; color: var(--bs-secondary-color); font-size: .67rem; font-weight: 700; white-space: nowrap; }
.cadastro-guia-item b { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); font-size: .68rem; }
.cadastro-guia-item.is-ativo { color: var(--bs-primary-text-emphasis); }
.cadastro-guia-item.is-ativo b { background: var(--bs-primary); color: var(--bs-light); }
.cadastro-etapa { margin: 0 0 1rem; padding: .8rem; border: 1px solid var(--bs-border-color); border-radius: .8rem; background: color-mix(in srgb, var(--bs-body-bg) 72%, var(--bs-tertiary-bg)); }
.cadastro-etapa--avancada { border-style: dashed; background: var(--bs-tertiary-bg); }
.cadastro-etapa-titulo { display: flex; align-items: center; gap: .55rem; margin: 0 0 .8rem; padding-bottom: .6rem; border-bottom: 1px solid var(--bs-border-color); }
.cadastro-etapa-numero { display: grid; place-items: center; flex: 0 0 1.7rem; width: 1.7rem; height: 1.7rem; border-radius: .5rem; background: rgba(var(--bs-primary-rgb), .14); color: var(--bs-primary-text-emphasis); font-weight: 800; }
.cadastro-etapa-titulo div { min-width: 0; flex: 1 1 auto; }
.cadastro-etapa-titulo strong { display: block; font-size: .82rem; line-height: 1.2; }
.cadastro-etapa-titulo small { display: block; margin-top: .16rem; color: var(--bs-secondary-color); font-size: .69rem; font-weight: 400; line-height: 1.35; }
.cadastro-etapa-titulo em { flex: 0 0 auto; padding: .18rem .4rem; border-radius: var(--radius-pill); background: rgba(var(--bs-success-rgb), .12); color: var(--bs-success-text-emphasis); font-size: .59rem; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.cadastro-etapa--avancada .cadastro-etapa-titulo em { background: rgba(var(--bs-warning-rgb), .14); color: var(--bs-warning-text-emphasis); }
.cadastro-etapa .mb-3:last-child, .cadastro-etapa .mb-4:last-child { margin-bottom: 0 !important; }
.cadastro-ajuda { display: flex; align-items: flex-start; gap: .45rem; margin-top: -.25rem; padding: .55rem .65rem; border-radius: .55rem; background: rgba(var(--bs-info-rgb), .08); color: var(--bs-secondary-color); font-size: .7rem; line-height: 1.4; }
.cadastro-ajuda i { flex: 0 0 auto; color: var(--bs-info); font-size: .9rem; }
.cadastro-ajuda strong { color: var(--bs-body-color); }
.cadastro-acoes { position: sticky; bottom: -.5rem; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .2rem -.5rem -.5rem; padding: .75rem .5rem .5rem; background: linear-gradient(to bottom, transparent, var(--bs-body-bg) 34%); }
.cadastro-acoes > div { min-width: 0; }
.cadastro-acoes strong, .cadastro-acoes small { display: block; }
.cadastro-acoes strong { font-size: .76rem; }
.cadastro-acoes small { color: var(--bs-secondary-color); font-size: .66rem; }
.cadastro-acoes .btn { flex: 0 0 auto; min-width: 9.5rem; }

@media (max-width: 575.98px) {
    .cardapio-rotas { display: grid; gap: .45rem; padding: .5rem; }
    .cardapio-rotas > a.btn {
        display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: .7rem;
        width: 100%; min-height: 52px; padding: .35rem .55rem; border: 0; border-radius: .7rem;
        background: transparent; color: var(--bs-body-color); text-align: left; font-size: .9rem; font-weight: 650;
    }
    .cardapio-rotas > a.btn:hover { background: var(--bs-tertiary-bg); }
    .cardapio-rotas > a.btn.btn-primary { display: none; }
    .cardapio-rota-icone {
        width: 40px; height: 40px; border-radius: .65rem;
        background: rgba(var(--bs-primary-rgb), .13); color: var(--bs-primary-text-emphasis); font-size: 1rem;
    }
    .cardapio-rota-seta { display: inline-block; color: var(--bs-secondary-color); font-size: .75rem; }
    .cardapio-rotas > button { width: 100%; min-height: 44px; margin-left: 0 !important; }

    .financeiro-cabecalho { padding: 1rem; }
    .financeiro-cabecalho p { font-size: .82rem; }
    .financeiro-rotas { display: grid; grid-template-columns: 1fr; gap: .35rem; padding: .45rem; }
    .financeiro-rota { min-height: 52px; padding: .4rem .5rem; }
    .financeiro-rota__icone { width: 40px; height: 40px; }
    .financeiro-rota__texto strong { font-size: .86rem; }
    .financeiro-rota__seta { display: block; }
    .financeiro-card { grid-template-columns: auto minmax(0, 1fr) auto; }
    .financeiro-card__conteudo small { display: none; }

    .cadastro-guia-item { font-size: .62rem; }
    .cadastro-etapa { padding: .68rem; }
    .cadastro-etapa-titulo { align-items: flex-start; }
    .cadastro-etapa-titulo em { margin-left: auto; }
    .cadastro-acoes { align-items: stretch; flex-direction: column; }
    .cadastro-acoes .btn { width: 100%; }
}

/* ==========================================================================
   Contas a pagar — filtros, resumo e lançamentos
   ========================================================================== */

.cp-filtros {
    padding: 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
.cp-navmes {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(190px, 240px) auto;
    align-items: end;
    gap: .8rem;
}
.cp-filtro-grupo { min-width: 0; }
.cp-filtro-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .35rem;
    color: var(--bs-secondary-color);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.cp-filtro-label i { color: var(--bs-primary); font-size: .85rem; }
.cp-navmes-centro {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: .45rem;
}
.cp-navmes-centro .form-control { min-width: 0; font-weight: 600; }
.cp-mes-seta { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.cp-navmes-todos { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; white-space: nowrap; }

.cp-resumo {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .7rem;
}
.cp-kpi {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-top: 3px solid var(--cp-kpi-cor, var(--bs-primary));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
.cp-kpi-icone {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cp-kpi-cor, var(--bs-primary));
    background: color-mix(in srgb, var(--cp-kpi-cor, var(--bs-primary)) 13%, transparent);
    border-radius: var(--radius-md);
    font-size: 1.05rem;
}
.cp-kpi > div { min-width: 0; }
.cp-kpi-label {
    display: block;
    margin-bottom: .1rem;
    color: var(--bs-secondary-color);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.cp-kpi strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: clamp(1rem, 1.45vw, 1.35rem);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.cp-reg-lista { overflow: visible; background: transparent; border: 0; box-shadow: none; }
.cp-list { display: grid; gap: .65rem; }
.cp-item {
    --cp-cor: var(--bs-primary);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(150px, auto) auto;
    grid-template-areas: "icone principal valor acoes";
    align-items: center;
    gap: .75rem 1rem;
    min-width: 0;
    padding: .9rem 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--cp-cor);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.cp-item:hover { border-color: color-mix(in srgb, var(--cp-cor) 55%, var(--bs-border-color)); box-shadow: var(--shadow-sm); }
.cp-item-icone {
    grid-area: icone;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cp-cor);
    background: color-mix(in srgb, var(--cp-cor) 12%, transparent);
    border-radius: var(--radius-md);
    font-size: 1.05rem;
}
.cp-item-main { grid-area: principal; min-width: 0; }
.cp-item-titulo { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.cp-item-titulo strong { min-width: 0; overflow-wrap: anywhere; font-size: .96rem; }
.cp-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: .15rem .55rem;
    border-radius: var(--radius-pill);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.cp-status--pendente { color: var(--bs-primary-text-emphasis); background: rgba(var(--bs-primary-rgb), .13); }
.cp-status--pago { color: var(--bs-success-text-emphasis); background: rgba(var(--bs-success-rgb), .14); }
.cp-status--parcial { color: var(--bs-warning-text-emphasis); background: rgba(var(--bs-warning-rgb), .18); }
.cp-status--vencida { color: var(--bs-danger-text-emphasis); background: rgba(var(--bs-danger-rgb), .14); }
.cp-status--cancelado { color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); }
.cp-item-meta { display: flex; flex-wrap: wrap; gap: .25rem .7rem; margin-top: .3rem; color: var(--bs-secondary-color); font-size: .76rem; }
.cp-item-meta span { display: inline-flex; align-items: center; gap: .25rem; min-width: 0; }
.cp-item-meta i { color: var(--cp-cor); }
.cp-item-obs {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin: .35rem 0 0;
    color: var(--bs-secondary-color);
    font-size: .75rem;
}
.cp-item-valor { grid-area: valor; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
.cp-item-valor > span { display: block; color: var(--bs-secondary-color); font-size: .65rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.cp-item-valor strong { display: block; white-space: nowrap; font-size: 1rem; }
.cp-item-valor small { display: block; max-width: 220px; color: var(--bs-secondary-color); font-size: .7rem; line-height: 1.3; }
.cp-item-acoes { grid-area: acoes; display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.cp-item-acoes form { display: inline-flex; margin: 0; }
.cp-btn-acao { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; white-space: nowrap; }
.cp-btn-acao span { font-size: .76rem; font-weight: 700; }

@media (max-width: 1199.98px) {
    .cp-btn-acao span { display: none; }
    .cp-btn-acao { min-width: 38px; padding-inline: .55rem; }
}

@media (max-width: 767.98px) {
    .cp-navmes { grid-template-columns: minmax(0, 1fr) minmax(180px, .7fr); }
    .cp-filtro-periodo { grid-column: 1 / -1; }
    .cp-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cp-kpi { padding: .75rem; gap: .6rem; }
    .cp-kpi-icone { width: 36px; height: 36px; flex-basis: 36px; }
    .cp-item {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "icone principal valor"
            "icone acoes    acoes";
        align-items: start;
        gap: .55rem .7rem;
        padding: .8rem;
    }
    .cp-item-acoes { justify-content: flex-end; }
    .cp-item-valor { align-self: start; }
}

@media (max-width: 575.98px) {
    .cp-nova-btn { width: 100%; }
    .cp-filtros { padding: .75rem; }
    .cp-navmes { grid-template-columns: 1fr; gap: .65rem; }
    .cp-filtro-periodo { grid-column: auto; }
    .cp-navmes-todos { width: 100%; }
    .cp-kpi { align-items: flex-start; }
    .cp-kpi-icone { display: none; }
    .cp-kpi strong { font-size: clamp(.98rem, 5vw, 1.15rem); }
    .cp-item {
        grid-template-columns: 36px minmax(0, 1fr);
        grid-template-areas:
            "icone principal"
            ".      valor"
            "acoes  acoes";
    }
    .cp-item-icone { width: 36px; height: 36px; }
    .cp-item-titulo { align-items: flex-start; flex-direction: column; gap: .3rem; }
    .cp-item-valor { text-align: left; }
    .cp-item-valor small { max-width: none; }
    .cp-item-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .cp-item-acoes form { width: 100%; }
    .cp-btn-acao { width: 100%; min-height: 42px; }
    .cp-btn-acao span { display: inline; }
    .cp-form-row > [class*="col-"] { width: 100%; }
    .cp-modal-pagamento .modal-footer { display: grid; grid-template-columns: 1fr; }
    .cp-modal-pagamento .modal-footer .btn { width: 100%; }
}

/* Editor e modal de comunicados do painel. A prévia usa o mesmo quadro 16:7
   entregue aos usuários, então o ponto focal escolhido não muda ao publicar. */
.admin-section-head { display:flex; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.admin-section-head h2 { margin:.2rem 0; font-size:clamp(1.35rem,2vw,1.8rem); font-weight:800; }
.admin-section-head p { margin:0; color:var(--bs-secondary-color); }
.admin-section-kicker { color:#f59e0b; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.admin-editor-sticky { position:sticky; top:1rem; }
.announcement-image-guide { display:flex; gap:.65rem; margin-top:.6rem; padding:.75rem; border-radius:.75rem; background:rgb(245 158 11 / 10%); color:var(--bs-secondary-color); font-size:.76rem; line-height:1.4; }
.announcement-image-guide i { flex:0 0 auto; color:#f59e0b; font-size:1.05rem; }
.announcement-preview-stage { min-height:500px; display:grid; place-items:center; padding:2rem; overflow:hidden; border:1px solid #334155; border-radius:1rem; background:repeating-linear-gradient(135deg,#101827,#101827 12px,#142035 12px,#142035 24px); }
.announcement-preview-shell { width:min(100%,680px); transition:width .25s ease; }
.announcement-preview-stage.is-mobile .announcement-preview-shell { width:360px; max-width:100%; }
.announcement-preview-card { overflow:hidden; border-radius:1.15rem; background:#fff; color:#1f2937; box-shadow:0 26px 70px rgb(0 0 0 / 42%); }
.announcement-preview-media { aspect-ratio:16/7; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; background:#eef1f5 center/cover no-repeat; color:#64748b; }
.announcement-preview-media.has-image > * { display:none; }
.announcement-preview-stage.is-mobile .announcement-preview-media { aspect-ratio:16/10; }
.announcement-preview-body { padding:1.45rem; }
.announcement-preview-kicker,.announcement-test-body>span:first-child,.system-announcement-kicker { color:#e86f12; font-size:.7rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.announcement-preview-body h3 { margin:.35rem 0 .6rem; font-size:1.45rem; font-weight:800; }
.announcement-preview-body p { color:#64748b; white-space:pre-line; }
.announcement-list-thumb { width:96px; height:76px; flex:0 0 auto; border-radius:.65rem; object-fit:cover; }
.announcement-test-overlay,.system-announcement { position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:clamp(1rem,4vw,3rem); background:rgb(3 10 20 / 62%); backdrop-filter:blur(10px); }
.announcement-test-overlay[hidden] { display:none; }
.announcement-test-card,.system-announcement-card { position:relative; width:min(680px,100%); max-height:88dvh; overflow:auto; border-radius:1.2rem; background:#fff; color:#1f2937; box-shadow:0 30px 90px rgb(0 0 0 / 50%); animation:announcement-rise .25s ease; }
.announcement-test-media,.system-announcement-image { display:none; width:100%; aspect-ratio:16/7; object-fit:cover; background:center/cover no-repeat; }
.announcement-test-media.has-image,.system-announcement-image { display:block; }
.announcement-test-body,.system-announcement-body { padding:clamp(1.3rem,4vw,1.8rem); }
.announcement-test-body h2,.system-announcement-body h2 { margin:.4rem 2.5rem .7rem 0; font-size:clamp(1.45rem,3vw,1.85rem); font-weight:800; }
.announcement-test-body p,.system-announcement-body p { color:#64748b; white-space:pre-line; }
.announcement-test-close,.system-announcement-close { position:absolute; z-index:2; top:.8rem; right:.8rem; width:2.55rem; height:2.55rem; display:grid; place-items:center; border:0; border-radius:50%; background:rgb(15 23 42 / 82%); color:#fff; }
.system-announcement.is-closing { opacity:0; transition:opacity .18s ease; }
@keyframes announcement-rise { from { opacity:0; transform:translateY(16px) scale(.98); } }
@media(max-width:1199.98px){.admin-editor-sticky{position:static}}
@media(max-width:575.98px){.announcement-preview-stage{min-height:455px;padding:.8rem}.announcement-preview-media,.announcement-test-media,.system-announcement-image{aspect-ratio:16/10}.announcement-test-overlay,.system-announcement{padding:.7rem;place-items:center}.announcement-test-card,.system-announcement-card{max-height:92dvh}.announcement-list-thumb{width:68px;height:60px}.admin-section-head{display:block}}

/* Fila, recorte e editor avançado de anúncios. */
body.has-announcement{overflow:hidden}
.system-announcement[hidden],.system-announcement-card[hidden]{display:none!important}
.system-announcement-card.is-leaving{opacity:0;transform:translateY(-10px) scale(.985);transition:opacity .15s ease,transform .15s ease}
.system-announcement-media{position:relative;margin:0;overflow:hidden;aspect-ratio:16/7;background:var(--bs-tertiary-bg)}
.system-announcement-media .system-announcement-image{display:block;max-width:none;aspect-ratio:auto}
.system-announcement-kicker{display:inline-flex;align-items:center;gap:.35rem;color:var(--announcement-accent,#f59e0b)}
.system-announcement-body .btn-primary{background:var(--announcement-accent,var(--bs-primary));border-color:var(--announcement-accent,var(--bs-primary))}
.system-announcement-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.5rem}
.system-announcement-step{order:-1;margin-right:auto;font-size:.78rem;font-weight:700;color:var(--bs-secondary-color)}
.announcement-preview-media{position:relative;overflow:hidden;padding:0}
.announcement-preview-media.is-editable{cursor:grab;touch-action:none}
.announcement-preview-media.is-editable:active,.announcement-preview-media.is-dragging{cursor:grabbing}
.announcement-crop-img{display:none;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;pointer-events:none}
.announcement-preview-media.has-image .announcement-crop-img{display:block}
.announcement-crop-hint{position:absolute;left:50%;bottom:.6rem;transform:translateX(-50%);display:none;gap:.35rem;align-items:center;padding:.3rem .7rem;border-radius:999px;background:rgb(8 15 28 / 72%);color:#fff;font-size:.72rem;font-weight:600;white-space:nowrap;pointer-events:none}
.announcement-preview-media.has-image .announcement-crop-hint{display:inline-flex}
.announcement-crop-grid{position:absolute;inset:0;display:none;pointer-events:none;background-image:linear-gradient(rgb(255 255 255 / 35%) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / 35%) 1px,transparent 1px);background-size:33.33% 33.33%;opacity:0;transition:opacity .15s ease}
.announcement-preview-media.has-image .announcement-crop-grid{display:block}.announcement-preview-media.is-dragging .announcement-crop-grid{opacity:1}
.announcement-test-toolbar{position:fixed;left:50%;top:1rem;transform:translateX(-50%);z-index:3;display:flex;gap:.4rem;padding:.3rem;border-radius:999px;background:rgb(8 15 28 / 82%);backdrop-filter:blur(6px)}
.announcement-test-overlay.is-mobile .announcement-test-card{width:390px;max-width:100%;border-radius:2rem;border:9px solid #0b1220}
.announcement-test-overlay.is-mobile .announcement-test-media{aspect-ratio:16/10}.announcement-test-overlay.is-mobile .announcement-test-body{padding:1.2rem}.announcement-test-overlay.is-mobile .announcement-test-body h2{font-size:1.35rem}
.announcement-test-media{position:relative;overflow:hidden}.announcement-test-media img{display:none;max-width:none}.announcement-test-media.has-image img{display:block}
.admin-fieldset{border:1px solid var(--bs-border-color,#334155);border-radius:.8rem;padding:.9rem}.admin-fieldset>legend{float:none;width:auto;margin:0 0 .5rem;padding:0 .4rem;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;opacity:.75}
.emoji-quick{display:flex;flex-wrap:wrap;gap:.3rem}.emoji-quick-btn{min-width:2.2rem;height:2.2rem;padding:0 .35rem;border:1px solid var(--bs-border-color,#334155);border-radius:.55rem;background:transparent;color:inherit;font-size:1.05rem;line-height:1}.emoji-quick-btn:hover{border-color:#f59e0b;background:rgb(245 158 11 / 14%)}
.announcement-crop-box .announcement-preview-media{aspect-ratio:16/7;border-radius:.7rem;background:#0f172a}.crop-sliders{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.45rem .9rem}.crop-sliders .form-label,.crop-sliders .form-range{margin:0}.crop-sliders .form-label{white-space:nowrap}
.announcement-item-thumb{position:relative;overflow:hidden;flex:0 0 auto;width:110px;height:72px;border-radius:.6rem;background:#0f172a;display:grid;place-items:center;color:#64748b}.announcement-item-thumb img{max-width:none}.announcement-item-excerpt{white-space:pre-line;overflow-wrap:anywhere}
.empresa-exclusao[hidden],[data-exclusao-bloco][hidden]{display:none!important}.empresa-exclusao{margin-top:.6rem}.empresa-exclusao-busca{position:relative;display:flex;align-items:center}.empresa-exclusao-busca>i{position:absolute;left:.75rem;opacity:.55;pointer-events:none}.empresa-exclusao-busca .form-control{padding-left:2.1rem;padding-right:3rem}.empresa-exclusao-contador{position:absolute;right:.55rem;min-width:1.8rem;padding:.15rem .45rem;border-radius:999px;background:rgb(148 163 184 / 22%);font-size:.74rem;font-weight:700;text-align:center}.empresa-exclusao-contador.is-ativo{background:var(--bs-warning);color:#111827}.empresa-exclusao-lista{max-height:15rem;overflow:auto;margin-top:.5rem;border:1px solid var(--bs-border-color,#334155);border-radius:.7rem}.empresa-exclusao-item{display:flex;gap:.6rem;align-items:center;width:100%;padding:.55rem .7rem;border-bottom:1px solid rgb(148 163 184 / 16%);font-size:.86rem;cursor:pointer}.empresa-exclusao-item[hidden]{display:none!important}.empresa-exclusao-item.is-marcada{background:rgb(245 158 11 / 14%)}.empresa-exclusao-item .form-check-input{margin:0}

/* Diagnóstico explicável e seletor visual do acesso assistido. */
.diag-check{display:flex;gap:.75rem;align-items:flex-start;width:100%;padding:.9rem 1rem;border:0;border-bottom:1px solid rgb(148 163 184 / 25%);background:transparent;color:inherit;text-align:left}.diag-check.is-pendente{cursor:pointer}.diag-check.is-pendente:hover,.diag-check.is-pendente:focus-visible{background:rgb(148 163 184 / 10%)}.diag-check .badge{align-self:center}.diag-check-seta{align-self:center;font-size:.8rem;opacity:.6;transition:transform .18s}.diag-check[aria-expanded=true] .diag-check-seta{transform:rotate(180deg)}.diag-detalhe{padding:0 1rem 1rem 2.6rem}.diag-acao{display:flex;gap:.45rem;margin:0 0 .6rem;padding:.55rem .7rem;border-radius:.6rem;background:rgb(14 165 233 / 12%);color:#38bdf8;font-size:.82rem;font-weight:600}.diag-lista{margin:0;padding:0;list-style:none;display:grid;gap:.35rem;max-height:19rem;overflow:auto}.diag-lista li{display:flex;flex-wrap:wrap;gap:.15rem .6rem;padding:.4rem .6rem;border-radius:.5rem;background:rgb(148 163 184 / 9%);font-size:.84rem}.diag-lista li span{opacity:.7;font-size:.79rem}
.suporte-busca{position:relative;display:flex;align-items:center}.suporte-busca>i{position:absolute;left:.9rem;opacity:.55}.suporte-busca .form-control{height:3rem;padding-left:2.6rem;padding-right:3.4rem}.suporte-busca-total{position:absolute;right:.7rem;padding:.2rem .55rem;border-radius:999px;background:rgb(148 163 184 / 20%);font-size:.74rem;font-weight:700}.suporte-lista{max-height:22rem;overflow:auto;margin-top:.75rem;border:1px solid var(--bs-border-color,#334155);border-radius:.85rem}.suporte-item{display:flex;gap:.75rem;align-items:center;width:100%;padding:.7rem .85rem;border:0;border-bottom:1px solid rgb(148 163 184 / 16%);background:transparent;color:inherit;text-align:left}.suporte-item[hidden]{display:none!important}.suporte-item:hover,.suporte-item:focus-visible{background:rgb(148 163 184 / 12%)}.suporte-item.is-escolhido{background:rgb(37 99 235 / 18%);box-shadow:inset 3px 0 #3b82f6}.suporte-item-inicial{width:2.2rem;height:2.2rem;display:grid;place-items:center;border-radius:.7rem;background:rgb(37 99 235 / 18%);font-weight:800}.suporte-item-texto{flex:1;min-width:0;display:flex;flex-direction:column}.suporte-item-texto strong,.suporte-item-texto small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.suporte-item-check{opacity:0}.suporte-item.is-escolhido .suporte-item-check{opacity:1}.suporte-acao{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;margin-top:.9rem}
@media(max-width:575.98px){.system-announcement-media{aspect-ratio:16/10}.system-announcement-actions .btn{flex:1 1 auto}.announcement-item-thumb{width:100%;height:120px}.announcement-item-actions .btn,.announcement-item-actions form{flex:1 1 auto}.announcement-item-actions form .btn{width:100%}.admin-fieldset{padding:.7rem}.diag-detalhe{padding-left:1rem}.diag-lista li{flex-direction:column}.suporte-lista{max-height:17rem}.suporte-item .badge{display:none}}

/* ==========================================================================
   Salão e Mesas
   ========================================================================== */

.mesa-grade {
    display: grid; gap: var(--space-3);
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.mesa-card {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .3rem; min-height: 118px; padding: var(--space-3);
    border-radius: var(--radius-lg); border: 1px solid var(--bs-border-color);
    border-top: 4px solid var(--mesa-cor, var(--bs-secondary-color));
    background: var(--bs-body-bg); box-shadow: var(--shadow-xs);
    color: var(--bs-body-color); text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.mesa-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--bs-body-color); }
.mesa-card:active { transform: translateY(0) scale(.98); }
.mesa-numero { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.mesa-rotulo { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); }
.mesa-valor  { font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mesa-card--livre    { --mesa-cor: var(--bs-success); }
.mesa-card--ocupada  { --mesa-cor: var(--bs-danger); background: rgba(var(--bs-danger-rgb), .04); }
.mesa-card--reservada{ --mesa-cor: var(--bs-warning); background: rgba(var(--bs-warning-rgb), .05); }

/* ==========================================================================
   KDS — Cozinha
   ========================================================================== */

.kds-grade { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.kds-card {
    display: flex; flex-direction: column;
    border-radius: var(--radius-lg); border: 1px solid var(--bs-border-color);
    border-left: 5px solid var(--kds-cor, var(--bs-secondary-color));
    background: var(--bs-body-bg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.kds-card--novo     { --kds-cor: var(--bs-danger);  animation: kds-pulsa 2s ease-in-out infinite; }
.kds-card--preparo  { --kds-cor: var(--bs-warning); }
.kds-card--pronto   { --kds-cor: var(--bs-success); }
@keyframes kds-pulsa {
    0%, 100% { box-shadow: var(--shadow-sm); }
    50%      { box-shadow: 0 0 0 4px rgba(var(--bs-danger-rgb), .16); }
}
.kds-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); }
.kds-origem { font-weight: 700; font-size: .92rem; }
.kds-tempo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; font-weight: 700; color: var(--bs-secondary-color); }
.kds-tempo--atrasado { color: var(--bs-danger); }
.kds-itens { list-style: none; margin: 0; padding: .6rem .9rem; display: flex; flex-direction: column; gap: .45rem; }
.kds-item { display: flex; gap: .5rem; align-items: baseline; font-size: .9rem; }
.kds-qtd { font-weight: 800; color: var(--bs-primary-text-emphasis); min-width: 1.8rem; font-variant-numeric: tabular-nums; }
.kds-obs { font-size: .76rem; color: var(--bs-warning-text-emphasis); background: rgba(var(--bs-warning-rgb), .12); border-radius: var(--radius-sm); padding: .15rem .4rem; display: inline-block; margin-top: .15rem; }
.kds-rodape { margin-top: auto; padding: .6rem .9rem; border-top: 1px solid var(--bs-border-color); }

/* ==========================================================================
   Cardápio digital público (vitrine)
   ========================================================================== */

.cardapio-capa {
    position: relative; min-height: 190px;
    background: var(--bs-primary);
    background-size: cover; background-position: center;
}
.cardapio-capa::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(0,0,0,.38);
}
.cardapio-marca {
    position: relative; z-index: 1;
    display: flex; align-items: flex-end; gap: var(--space-3);
    padding: var(--space-4); min-height: 190px;
}
.cardapio-marca-fig {
    flex: 0 0 74px; width: 74px; height: 74px; border-radius: var(--radius-md);
    background: #fff; border: 2px solid rgba(255,255,255,.85);
    box-shadow: var(--shadow-lg); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.cardapio-marca-fig img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.cardapio-marca-txt { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); min-width: 0; }
.cardapio-marca-nome { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.cardapio-marca-sub { font-size: .82rem; opacity: .92; margin: .15rem 0 0; }

/* Selo aberto/fechado */
.cardapio-selo {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    padding: .2rem .6rem; border-radius: var(--radius-pill);
}
.cardapio-selo--aberto  { background: rgba(25,135,84,.9); color: #fff; }
.cardapio-selo--fechado { background: rgba(220,53,69,.9); color: #fff; }

/* Barra de categorias grudenta */
.cardapio-cats {
    position: sticky; top: 0; z-index: 1020;
    display: flex; gap: .4rem; overflow-x: auto;
    padding: .6rem var(--space-3);
    background: color-mix(in srgb, var(--bs-body-bg) 92%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--bs-border-color);
    scrollbar-width: none;
}
.cardapio-cats::-webkit-scrollbar { display: none; }
.cardapio-cat {
    flex: 0 0 auto; white-space: nowrap;
    padding: .38rem .8rem; border-radius: var(--radius-pill);
    border: 1px solid var(--bs-border-color); background: var(--bs-body-bg);
    color: var(--bs-body-color); text-decoration: none;
    font-size: .82rem; font-weight: 600;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cardapio-cat.is-active { background: var(--bs-primary); border-color: var(--bs-primary); color: var(--on-primary); }

/* Item do cardápio — foto à direita, como nos apps de delivery: o texto
   começa na margem e o olho percorre nome → descrição → preço sem desviar. */
.cardapio-item {
    display: grid; grid-template-columns: minmax(0,1fr) 92px; gap: var(--space-3);
    align-items: start; width: 100%; text-align: left;
    padding: var(--space-3); border: 0; border-bottom: 1px solid var(--bs-border-color);
    background: transparent; color: var(--bs-body-color);
    transition: background-color var(--dur-fast) var(--ease-out);
}
.cardapio-item:last-child { border-bottom: 0; }
.cardapio-item:hover  { background: var(--bs-tertiary-bg); }
.cardapio-item:active { background: rgba(var(--bs-primary-rgb), .08); }
.cardapio-item--esgotado { opacity: .5; }
.cardapio-item-nome { font-weight: 700; font-size: .98rem; line-height: 1.25; margin: 0 0 .15rem; }
.cardapio-item-desc {
    font-size: .82rem; color: var(--bs-secondary-color); margin: 0 0 .4rem; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cardapio-item-preco { font-weight: 800; font-size: 1rem; color: var(--bs-primary-text-emphasis); font-variant-numeric: tabular-nums; }
.cardapio-item-de { font-size: .78rem; color: var(--bs-secondary-color); text-decoration: line-through; margin-right: .35rem; font-weight: 500; }
.cardapio-item-fig {
    width: 92px; height: 92px; border-radius: var(--radius-md); overflow: hidden;
    background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
    display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color);
}
.cardapio-item-fig img { width: 100%; height: 100%; object-fit: cover; }
.cardapio-selo-promo {
    display: inline-block; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    background: var(--bs-primary); color: var(--on-primary);
    padding: .12rem .4rem; border-radius: 4px; margin-bottom: .25rem;
}

/* Sacola flutuante */
.cardapio-sacola {
    position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 1040;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: .8rem 1rem; border-radius: var(--radius-lg);
    background: var(--bs-primary); color: var(--on-primary);
    box-shadow: var(--shadow-lg); border: 0;
    transform: translateY(150%); transition: transform var(--dur-base) var(--ease-out);
}
.cardapio-sacola.visivel { transform: translateY(0); }
.cardapio-sacola-qtd {
    min-width: 24px; height: 24px; border-radius: var(--radius-pill);
    background: rgba(255,255,255,.25); font-size: .78rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 .4rem;
}
@media (min-width: 768px) {
    .cardapio-sacola { left: auto; right: 1.5rem; bottom: 1.5rem; width: 320px; }
}

/* ==========================================================================
   Assinatura Alves Protect
   Marca do fabricante do software. Fica deliberadamente discreta: quem manda
   visualmente na tela é a marca da loja (topo do menu / capa do cardápio).
   ========================================================================== */

.marca-ap {
    display: inline-flex; align-items: center; gap: .4rem;
    margin-left: .9rem; padding-left: .9rem;
    border-left: 1px solid var(--bs-border-color);
    text-decoration: none; opacity: .55;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.marca-ap:hover, .marca-ap:focus-visible { opacity: 1; }
.marca-ap-por {
    font-size: .64rem; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--bs-secondary-color);
}
.marca-ap-img { height: 16px; width: auto; display: block; }
/* O nome vai como texto, não como imagem: em 16px o logotipo completo deixa
   "PROTECT" ilegível. O símbolo aguenta o tamanho pequeno. */
.marca-ap-nome { font-size: .72rem; font-weight: 600; letter-spacing: .01em; color: var(--bs-body-color); white-space: nowrap; }

/* Versão do painel "Mais" (celular): centralizada, separada por um filete. */
.marca-ap--mais {
    display: flex; justify-content: center; align-items: center; gap: .4rem;
    margin: 1.1rem .25rem .35rem; padding-top: .9rem;
    border-top: 1px solid var(--bs-border-color);
    border-left: 0; margin-left: .25rem; padding-left: 0;
}

/* Duas artes: tinta escura para o tema claro, tinta branca para o escuro.
   A troca é por CSS para não depender de JS nem piscar ao carregar. */
.marca-ap-img--escuro { display: none; }
[data-bs-theme="dark"] .marca-ap-img--claro  { display: none; }
[data-bs-theme="dark"] .marca-ap-img--escuro { display: block; }

/* Versão do rodapé (login e cardápio público): empilhada e centralizada. */
.marca-ap--rodape {
    flex-direction: column; gap: .3rem;
    margin-left: 0; padding-left: 0; border-left: 0; opacity: .7;
}
.marca-ap--rodape .marca-ap-img  { height: 20px; }
.marca-ap--rodape .marca-ap-nome { font-size: .82rem; font-weight: 700; }

/* Rodapé do cardápio público: fundo próprio, separado do conteúdo da loja. */
.cardapio-rodape {
    margin-top: var(--space-6); padding: var(--space-5) var(--space-4) calc(var(--space-8) + 3.5rem);
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg); text-align: center;
}
.cardapio-rodape-loja { font-size: .82rem; color: var(--bs-secondary-color); margin-bottom: var(--space-3); }

/* ==========================================================================
   Polimento responsivo — mobile
   ========================================================================== */

/* Trava geral contra estouro lateral. Um único elemento largo demais faz a
   página inteira rolar de lado no celular; conteúdo largo deve rolar dentro
   do próprio container.

   Precisa ser `clip`, NUNCA `hidden`. Com `overflow-x: hidden` no <html>, a
   regra do CSS que transforma o eixo `visible` restante em `auto` faz a raiz
   E o <body> virarem dois containers de rolagem separados: o dedo pousa no
   <body>, que nao tem nada para rolar, e o `overscroll-behavior-y: contain`
   do bloco mobile impede o gesto de subir para a raiz — a pagina inteira
   trava no celular e a topbar sticky para de grudar. `clip` corta o excesso
   do mesmo jeito sem criar container de rolagem nenhum. */
html, body { max-width: 100%; }
body { overflow-x: hidden; }   /* Safari < 16: corta so no body, que propaga para a viewport */
@supports (overflow-x: clip) {
    html, body { overflow-x: clip; }
}

@media (max-width: 991.98px) {
    /* O iOS dá zoom automático ao focar um campo com fonte menor que 16px.
       Antes isso era contornado desligando o zoom da página inteira no
       <meta viewport> — o que também impedia o usuário de ampliar de propósito.
       Fixar 16px resolve a causa sem tirar o zoom de quem precisa dele. */
    .form-control, .form-select, input[type="text"], input[type="number"],
    input[type="date"], input[type="email"], input[type="password"], input[type="tel"], textarea { font-size: 16px; }
    .form-control-sm, .form-select-sm { font-size: 16px; }

    /* Alvos de toque confortáveis. */
    .btn { min-height: 40px; }
    .btn-sm { min-height: 34px; }
    .dropdown-item { padding-top: .55rem; padding-bottom: .55rem; }

    .modal-dialog { margin: .5rem; }
    .modal-body   { padding: 1rem; }

    .stat-card .card-body h3 { font-size: 1.35rem; }
    h1.h4 { font-size: 1.15rem; }
    .mesa-grade { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .6rem; }
    .mesa-card { min-height: 98px; }
    .mesa-numero { font-size: 1.35rem; }
    .kds-grade { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .btn-toolbar-mobile { flex-direction: column; align-items: stretch; }
    .btn-toolbar-mobile > * { width: 100%; }
    .stat-card .card-body { padding: .75rem; }
    .stat-card .card-body h3 { font-size: 1.15rem; }
    .cardapio-item { grid-template-columns: minmax(0,1fr) 76px; }
    .cardapio-item-fig { width: 76px; height: 76px; }
}

/* ==========================================================================
   Fluidez responsiva — operacao em celular
   ========================================================================== */

@media (max-width: 991.98px) {
    html {
        scroll-padding-top: 66px;
        overscroll-behavior-x: none;
    }
    body {
        min-height: 100dvh;
        overscroll-behavior-y: contain;
    }
    .content-wrapper { width: 100%; min-width: 0; }
    .topbar {
        min-height: 56px;
        padding: .5rem .75rem !important;
        box-shadow: var(--shadow-xs) !important;
    }
    .topbar > div:first-child { flex: 1 1 auto; min-width: 0; }
    .topbar > div:last-child { flex: 0 0 auto; gap: .7rem !important; }
    main { padding: .85rem !important; }

    /* Alvos de toque confortaveis e campos sem zoom automatico no iOS. */
    .btn:not(.btn-close), .form-control, .form-select, .input-group-text { min-height: 44px; }
    .btn-sm:not(.btn-close), .pagination .page-link { min-height: 38px; }
    .input-group > .form-control, .input-group > .form-select { min-width: 0; }
    .form-check-input { width: 1.2em; height: 1.2em; }

    /* Cabecalhos de pagina e suas acoes ocupam linhas previsiveis. */
    .reg-topo { gap: .65rem; margin-bottom: .85rem; }
    .reg-topo > :first-child { min-width: 0; flex: 1 1 100%; }
    .reg-topo > .d-flex, .reg-topo > .dropdown { width: 100%; }
    .reg-topo > .d-flex > .btn,
    .reg-topo > .d-flex > a.btn,
    .reg-topo > .dropdown > .btn { flex: 1 1 auto; }
    .reg-contagem { line-height: 1.35; }

    .pdv-shell, .rel-shell, .cfg-grid { gap: .85rem; }
    .pdv-card { border-radius: var(--radius-md); }
    .pdv-card-head { min-height: 48px; padding: .7rem .85rem; }
    .pdv-card-body { padding: .85rem; }
    .pdv-suggestions { max-height: min(48dvh, 360px); overscroll-behavior: contain; }
    .pdv-status { min-height: 40px; justify-content: center; }
    #formFinalizar { padding: 1rem !important; }
    #btnFinalizar { font-size: 1.05rem !important; padding-block: .8rem !important; }

    /* Tabelas largas rolam dentro do cartao, nao na pagina inteira. */
    .table-responsive, .rel-tabela-wrap {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        touch-action: pan-x pan-y;
    }
    .table { font-size: .84rem; }
    .table > :not(caption) > * > * { padding: .68rem .55rem; }
    .rel-tabela thead th { top: -1px; }

    /* Menu de relatorios acessivel sem empurrar o conteudo para baixo. */
    .rel-menu { position: sticky; top: 56px; z-index: 1015; }
    .rel-menu-body {
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }
    .rel-item { min-height: 42px; scroll-snap-align: start; }

    .reg-rodape {
        align-items: stretch;
        flex-direction: column;
        gap: .55rem;
        padding: .7rem .8rem;
    }
    .reg-rodape > nav { max-width: 100%; overflow: hidden; }

    /* Viewport dinamica: teclado e barra do navegador nao cortam modais. */
    .modal { padding: 0 !important; }
    .modal-dialog { max-width: none; min-height: calc(100dvh - 1rem); margin: .5rem; }
    .modal-dialog-scrollable { height: calc(100dvh - 1rem); }
    .modal-dialog-scrollable .modal-content { max-height: calc(100dvh - 1rem); }
    .modal-header, .modal-footer { flex: 0 0 auto; padding: .8rem 1rem; }
    .modal-body { overscroll-behavior: contain; }
    .offcanvas { max-width: 100vw; }
    .offcanvas-end { width: min(420px, 100vw) !important; }
    .offcanvas-body { overscroll-behavior: contain; }

    .cfg-logo-row { align-items: flex-start; }
    .pix-conferencia { align-items: flex-start; }
    .alert { overflow-wrap: anywhere; }
}

@media (max-width: 575.98px) {
    main { padding: .65rem !important; }
    .topbar > div:first-child img { width: 32px !important; height: 32px !important; margin-right: 8px !important; }
    #userMenu > div { width: 34px !important; height: 34px !important; }

    .reg-titulo { font-size: 1.08rem; }
    .reg-topo > .d-flex { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reg-topo > .d-flex > * { width: 100%; min-width: 0; }
    .reg-topo > .d-flex > :only-child { grid-column: 1 / -1; }

    .pdv-cart-item {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "nome total"
            "meta acoes"
            "detalhes detalhes";
        gap: .3rem .55rem;
        padding: .75rem .8rem;
    }
    .pdv-cart-name { grid-area: nome; min-width: 0; overflow-wrap: anywhere; }
    .pdv-cart-meta { grid-area: meta; }
    .pdv-cart-total { grid-area: total; align-self: start; white-space: nowrap; }
    .pdv-cart-actions { grid-area: acoes; justify-self: end; }
    .pdv-cart-details { grid-area: detalhes; }
    .pdv-cart-actions .btn { min-width: 40px; padding-inline: .55rem; }
    .pdv-total-value { font-size: 1.4rem; }

    .rel-menu-body { padding: .45rem; }
    .rel-item { padding: .5rem .65rem; font-size: .82rem; }
    .rel-tabela { font-size: .8rem; }
    .stat-card .card-body h3 { overflow-wrap: anywhere; }

    .modal-dialog:not(.modal-fullscreen-sm-down) {
        align-items: flex-end;
        min-height: 100dvh;
        margin: 0;
    }
    .modal-dialog:not(.modal-fullscreen-sm-down) .modal-content {
        max-height: 94dvh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    }
    .modal-fullscreen-sm-down .modal-content { min-height: 100dvh; }

    .cfg-logo-row { flex-direction: column; }
    .pix-conferencia { flex-direction: column; }
    .mais-painel { height: min(76dvh, 44rem); }
}

/* Em touch o :hover pode ficar preso e causar saltos visuais. */
@media (hover: none), (pointer: coarse) {
    .card.card-hover:hover, a.card:hover, .stat-card:hover, .mesa-card:hover,
    .pdv-vitrine:hover .pdv-fone, .marca-loja:hover { transform: none; }
    .btn, .nav-link, .card, .stat-card { -webkit-tap-highlight-color: transparent; }
}

/* Filhos de grid e flex nascem com min-width:auto ("não encolha abaixo do
   conteúdo"). Uma tabela larga então estica o container em vez de rolar
   dentro dele — e a página passa a rolar de lado. */
.rel-shell > *, .pdv-shell > *, .cfg-grid > * { min-width: 0; }
.rel-shell section, .pdv-shell section { min-width: 0; }

@media (max-width: 991.98px) {
    .rel-menu { min-width: 0; overflow: hidden; }
    .rel-menu-body { max-width: 100%; }
    .rel-tabela-wrap { -webkit-overflow-scrolling: touch; }
    .rel-tabela-wrap::-webkit-scrollbar { height: 6px; }
    .rel-tabela-wrap::-webkit-scrollbar-thumb { background: var(--bs-secondary-color); border-radius: var(--radius-pill); }
    .rel-periodo-btn { min-height: 40px; padding-block: .45rem; }
}

/* Bootstrap .row usa margens negativas; dentro de um grid item estreito isso
   também gera estouro. Neutraliza no celular. */
@media (max-width: 575.98px) {
    .pdv-card-body > .row { margin-inline: 0; }
    .pdv-card-body > .row > [class*="col"] { padding-inline: calc(var(--bs-gutter-x) * .5); }
}

/* Aparelhos com notch/barra inferior: respeita a área segura, senão o
   bottom-nav fica por baixo da barra de gestos do sistema. */
@supports (padding: max(0px)) {
    /* Soma ao respiro proprio da barra em vez de substitui-lo: a regra antiga
       zerava os 0.45rem de padding do .bottom-nav em aparelhos sem notch, e
       reservava no <body> um --bottom-nav-h que nunca chegou a ser declarado
       (caia no fallback de 64px, menor que a barra — a ultima linha da tela
       ficava por baixo dela). */
    .bottom-nav { padding-bottom: calc(0.45rem + max(0px, env(safe-area-inset-bottom))); }
    body { padding-bottom: calc(var(--bottom-nav-h) + max(0px, env(safe-area-inset-bottom))); }
    @media (min-width: 992px) { body { padding-bottom: 0; } }
}

/* ==========================================================================
   Configurações (perfil.php)
   ========================================================================== */

.cfg-grid { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 992px) { .cfg-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.cfg-logo-row { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--bs-border-color); }
.cfg-logo-preview {
    flex: 0 0 68px; width: 68px; height: 68px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--bs-border-color); border-radius: var(--radius-md);
    background: var(--bs-tertiary-bg); overflow: hidden;
    color: var(--bs-secondary-color); font-size: 1.5rem;
}
.cfg-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Central de configurações: a seção atual fica óbvia e o catálogo completo
   aparece somente quando o usuário pede para trocar. Isso evita onze abas
   concorrendo por atenção e elimina a rolagem lateral no celular. */
.cfg-home { display:grid; gap:1.1rem; max-width:72rem; scroll-behavior:smooth; }
.cfg-home-hero { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); align-items:center; min-height:320px; overflow:hidden; padding:clamp(1.5rem,4vw,3.25rem); color:#fff8f1; border:1px solid rgba(255,139,50,.28); border-radius:1.35rem; background:linear-gradient(125deg,#21150f 0%,#3b2114 58%,#6b3518 100%); box-shadow:0 18px 45px rgba(50,26,10,.16); }
.cfg-home-hero::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.2; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(90deg,#000,transparent 85%); }
.cfg-home-hero::after { content:""; position:absolute; z-index:-1; width:22rem; height:22rem; right:-8rem; bottom:-12rem; border:1px solid rgba(255,163,89,.28); border-radius:50%; box-shadow:0 0 0 4rem rgba(255,137,45,.035),0 0 0 8rem rgba(255,137,45,.025); }
.cfg-home-hero__content { position:relative; z-index:2; max-width:37rem; }
.cfg-home-hero__eyebrow { display:inline-flex; align-items:center; gap:.4rem; margin:0 0 .75rem; color:#ffb071; font-size:.7rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.cfg-home-hero h1 { max-width:32rem; margin:0; color:#fff; font-size:clamp(2rem,4vw,3.2rem); font-weight:850; letter-spacing:-.045em; line-height:1.02; text-wrap:balance; }
.cfg-home-hero__content>p:not(.cfg-home-hero__eyebrow) { max-width:32rem; margin:1rem 0 1.35rem; color:rgba(255,248,241,.76); font-size:.95rem; line-height:1.55; }
.cfg-home-hero__cta { display:inline-grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1rem; min-width:min(100%,21rem); padding:.75rem .8rem .75rem 1rem; color:#2a160c; text-decoration:none; border:1px solid rgba(255,255,255,.5); border-radius:.85rem; background:#ff963f; box-shadow:0 10px 25px rgba(0,0,0,.18); }
.cfg-home-hero__cta:hover { color:#2a160c; background:#ffa65e; transform:translateY(-2px); }
.cfg-home-hero__cta>span { display:grid; line-height:1.18; }
.cfg-home-hero__cta strong { font-size:.84rem; }
.cfg-home-hero__cta small { margin-top:.18rem; opacity:.72; font-size:.67rem; }
.cfg-home-hero__cta>i { display:grid; place-items:center; width:34px; height:34px; border-radius:.6rem; background:rgba(255,255,255,.48); animation:cfg-help-arrow 1.8s ease-in-out infinite; }
@keyframes cfg-help-arrow { 0%,100%{transform:translateY(-2px)} 50%{transform:translateY(3px)} }

.cfg-home-orbit { position:relative; justify-self:center; width:280px; height:280px; }
.cfg-home-orbit__ring { position:absolute; inset:50%; border:1px solid rgba(255,181,120,.28); border-radius:50%; transform:translate(-50%,-50%); }
.cfg-home-orbit__ring--outer { width:250px; height:250px; }
.cfg-home-orbit__ring--inner { width:145px; height:145px; border-style:dashed; }
.cfg-home-orbit__core,.cfg-home-orbit__item { position:absolute; display:grid; place-items:center; border:1px solid rgba(255,188,133,.4); box-shadow:0 12px 25px rgba(0,0,0,.24); backdrop-filter:blur(8px); }
.cfg-home-orbit__core { inset:50%; width:78px; height:78px; color:#2a160c; border-radius:1.35rem; background:#ff963f; font-size:2rem; transform:translate(-50%,-50%) rotate(-6deg); }
.cfg-home-orbit__item { width:52px; height:52px; color:#ffb87e; border-radius:1rem; background:rgba(255,255,255,.08); font-size:1.15rem; }
.cfg-home-orbit__item--shop { top:4px; left:114px; }
.cfg-home-orbit__item--pix { top:112px; right:1px; }
.cfg-home-orbit__item--team { bottom:4px; left:114px; }
.cfg-home-orbit__item--print { top:112px; left:1px; }

.cfg-home-map { scroll-margin-top:1rem; overflow:hidden; border:1px solid var(--bs-border-color); border-radius:1.15rem; background:var(--bs-body-bg); box-shadow:var(--shadow-sm); }
.cfg-home-map__head { display:flex; align-items:end; justify-content:space-between; gap:1rem; padding:1.15rem 1.25rem; border-bottom:1px solid var(--bs-border-color); }
.cfg-home-map__head p { margin:0 0 .14rem; color:var(--bs-primary); font-size:.65rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.cfg-home-map__head h2 { margin:0; font-size:1.2rem; font-weight:800; letter-spacing:-.02em; }
.cfg-home-map__head>span { color:var(--bs-secondary-color); font-size:.72rem; }
.cfg-home-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; }
.cfg-home-group { min-width:0; padding:1.2rem; border-bottom:1px solid var(--bs-border-color); }
.cfg-home-group:nth-child(odd) { border-right:1px solid var(--bs-border-color); }
.cfg-home-group:nth-last-child(-n+2) { border-bottom:0; }
.cfg-home-group__head { display:flex; align-items:flex-start; gap:.7rem; margin-bottom:.75rem; }
.cfg-home-group__head>span { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; color:var(--bs-primary); border-radius:.65rem; background:rgba(var(--bs-primary-rgb),.1); }
.cfg-home-group__head h3 { margin:.05rem 0 .12rem; font-size:.9rem; font-weight:800; }
.cfg-home-group__head p { margin:0; color:var(--bs-secondary-color); font-size:.68rem; line-height:1.35; }
.cfg-home-group__links { display:grid; gap:.42rem; }
.cfg-home-link { position:relative; display:grid; grid-template-columns:2.35rem minmax(0,1fr) auto auto; align-items:center; gap:.65rem; min-height:62px; padding:.58rem .65rem; color:var(--bs-body-color); text-decoration:none; border:1px solid transparent; border-radius:.75rem; background:transparent; transition:border-color .16s ease,background-color .16s ease,transform .16s ease; }
.cfg-home-link:hover { color:var(--bs-primary); border-color:rgba(var(--bs-primary-rgb),.26); background:var(--bs-tertiary-bg); transform:translateX(3px); }
.cfg-home-link__icon { display:grid; place-items:center; width:36px; height:36px; color:var(--bs-primary); border:1px solid rgba(var(--bs-primary-rgb),.17); border-radius:.65rem; background:rgba(var(--bs-primary-rgb),.07); }
.cfg-home-link__text { display:grid; min-width:0; line-height:1.22; }
.cfg-home-link__text strong { font-size:.81rem; }
.cfg-home-link__text small { margin-top:.14rem; color:var(--bs-secondary-color); font-size:.66rem; overflow-wrap:anywhere; }
.cfg-home-link__status { padding:.2rem .4rem; color:var(--bs-success-text-emphasis); border-radius:2rem; background:rgba(var(--bs-success-rgb),.1); font-size:.59rem; font-weight:800; white-space:nowrap; }
.cfg-home-link__arrow { color:var(--bs-secondary-color); font-size:.8rem; transition:transform .16s ease; }
.cfg-home-link:hover .cfg-home-link__arrow { color:var(--bs-primary); transform:translateX(2px); }
.cfg-home-link--featured { border-color:rgba(var(--bs-primary-rgb),.18); background:rgba(var(--bs-primary-rgb),.045); }

.cfg-heading { display:flex; align-items:center; gap:.85rem; margin-bottom:1rem; }
.cfg-heading__icon { display:grid; place-items:center; flex:0 0 46px; width:46px; height:46px; color:var(--bs-primary); background:rgba(var(--bs-primary-rgb),.1); border:1px solid rgba(var(--bs-primary-rgb),.18); border-radius:.9rem; font-size:1.25rem; }
.cfg-heading__eyebrow { margin:0 0 .12rem; color:var(--bs-primary); font-size:.66rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.cfg-heading h1 { margin:0; font-size:1.45rem; font-weight:800; letter-spacing:-.03em; }
.cfg-heading>div:last-child>p:last-child { margin:.12rem 0 0; color:var(--bs-secondary-color); font-size:.82rem; }

.cfg-nav { position:relative; max-width:72rem; border:1px solid var(--bs-border-color); border-radius:1rem; background:var(--bs-body-bg); box-shadow:var(--shadow-sm); }
.cfg-nav>summary { list-style:none; }
.cfg-nav>summary::-webkit-details-marker { display:none; }
.cfg-nav__summary { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.8rem; min-height:74px; padding:.7rem .8rem; cursor:pointer; border-radius:inherit; }
.cfg-nav__summary:focus-visible { outline:3px solid rgba(var(--bs-primary-rgb),.25); outline-offset:2px; }
.cfg-nav__current-icon { display:grid; place-items:center; width:44px; height:44px; color:var(--bs-primary); background:rgba(var(--bs-primary-rgb),.1); border-radius:.75rem; font-size:1.1rem; }
.cfg-nav__current { display:grid; min-width:0; line-height:1.2; }
.cfg-nav__current small { margin-bottom:.16rem; color:var(--bs-secondary-color); font-size:.61rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.cfg-nav__current strong { color:var(--bs-emphasis-color); font-size:.95rem; }
.cfg-nav__current>span { margin-top:.15rem; overflow:hidden; color:var(--bs-secondary-color); font-size:.75rem; text-overflow:ellipsis; white-space:nowrap; }
.cfg-nav__toggle { display:inline-flex; align-items:center; gap:.55rem; min-height:40px; padding:.45rem .7rem; color:var(--bs-primary); border:1px solid rgba(var(--bs-primary-rgb),.25); border-radius:.65rem; background:rgba(var(--bs-primary-rgb),.06); font-size:.78rem; font-weight:800; white-space:nowrap; }
.cfg-nav__toggle i { transition:transform .2s ease; }
.cfg-nav[open] .cfg-nav__toggle i { transform:rotate(180deg); }
.cfg-nav__menu { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; padding:1rem; border-top:1px solid var(--bs-border-color); background:var(--bs-tertiary-bg); border-radius:0 0 1rem 1rem; }
.cfg-nav__group h2 { margin:0 0 .5rem; padding:0 .35rem; color:var(--bs-secondary-color); font-size:.65rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.cfg-nav__links { display:grid; gap:.3rem; }
.cfg-nav__link { position:relative; display:grid; grid-template-columns:1.8rem minmax(0,1fr) auto; align-items:center; gap:.45rem; min-height:55px; padding:.48rem .55rem; color:var(--bs-body-color); text-decoration:none; border:1px solid transparent; border-radius:.7rem; }
.cfg-nav__link:hover { color:var(--bs-primary); border-color:rgba(var(--bs-primary-rgb),.2); background:var(--bs-body-bg); }
.cfg-nav__link>i:first-child { color:var(--bs-primary); font-size:1rem; text-align:center; }
.cfg-nav__link>span { display:grid; min-width:0; line-height:1.18; }
.cfg-nav__link strong { font-size:.79rem; }
.cfg-nav__link small { margin-top:.16rem; color:var(--bs-secondary-color); font-size:.65rem; }
.cfg-nav__link.is-active { color:var(--bs-primary); border-color:rgba(var(--bs-primary-rgb),.25); background:var(--bs-body-bg); box-shadow:0 3px 12px rgba(0,0,0,.04); }
.cfg-nav__check { font-size:.9rem!important; }

.cfg-grid--separado { grid-template-columns:minmax(0,1fr)!important; max-width:72rem; }
.cfg-grid--separado>.d-flex:empty { display:none!important; }
.cfg-card { overflow:hidden; }
.cfg-card__head { justify-content:flex-start; gap:.7rem; }
.cfg-card__head-icon { display:grid; place-items:center; width:34px; height:34px; color:var(--bs-primary); background:rgba(var(--bs-primary-rgb),.1); border-radius:.65rem; }
.cfg-card__head>span:last-child { display:grid; line-height:1.12; }
.cfg-card__head small { margin-bottom:.16rem; color:var(--bs-secondary-color); font-size:.58rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.cfg-card__head h2 { margin:0; }

.cfg-form { display:grid; gap:0; }
.cfg-form-section { display:grid; grid-template-columns:minmax(175px,1fr) minmax(0,2.35fr); gap:1.5rem; padding:1.4rem 0; border-bottom:1px solid var(--bs-border-color); }
.cfg-form-section:first-of-type { padding-top:.25rem; }
.cfg-form-section__intro { display:flex; align-items:flex-start; gap:.7rem; }
.cfg-form-section__intro>span { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; color:var(--bs-primary); background:rgba(var(--bs-primary-rgb),.1); border-radius:.55rem; font-size:.69rem; font-weight:900; }
.cfg-form-section__intro h3 { margin:.1rem 0 .2rem; font-size:.9rem; font-weight:800; }
.cfg-form-section__intro p { margin:0; color:var(--bs-secondary-color); font-size:.72rem; line-height:1.4; }
.cfg-form-section__fields { min-width:0; }
.cfg-logo-row { align-items:flex-start; margin-bottom:1rem; padding:0; border:0; }
.cfg-logo-preview { flex-basis:76px; width:76px; height:76px; }
.cfg-related-link { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.7rem; margin-top:1rem; padding:.75rem .85rem; color:var(--bs-body-color); text-decoration:none; border:1px solid var(--bs-border-color); border-radius:.75rem; background:var(--bs-tertiary-bg); }
.cfg-related-link:hover { color:var(--bs-primary); border-color:rgba(var(--bs-primary-rgb),.3); }
.cfg-related-link>i:first-child { color:var(--bs-primary); font-size:1.1rem; }
.cfg-related-link>span { display:grid; line-height:1.2; }
.cfg-related-link strong { font-size:.8rem; }
.cfg-related-link small { margin-top:.15rem; color:var(--bs-secondary-color); font-size:.7rem; }
.cfg-savebar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:1rem; }
.cfg-savebar>span { color:var(--bs-secondary-color); font-size:.72rem; }
.cfg-savebar .btn { min-width:13rem; }
.cfg-notice { display:flex; align-items:flex-start; gap:.7rem; padding:.8rem .9rem; color:var(--bs-info-text-emphasis); border:1px solid var(--bs-info-border-subtle); border-radius:.75rem; background:var(--bs-info-bg-subtle); }
.cfg-notice>i { margin-top:.08rem; font-size:1rem; }
.cfg-notice p { display:grid; gap:.12rem; margin:0; line-height:1.35; }
.cfg-notice strong { color:var(--bs-emphasis-color); font-size:.78rem; }
.cfg-notice span { font-size:.72rem; }
.cfg-simple-form { max-width:54rem; }
.cfg-primary-action { min-width:14rem; }
.cfg-account-block { display:grid; grid-template-columns:minmax(180px,1fr) minmax(0,2.1fr); gap:1.5rem; padding:1.25rem 0; border-bottom:1px solid var(--bs-border-color); }
.cfg-account-block:first-of-type { padding-top:.2rem; }
.cfg-account-block:last-child { padding-bottom:.2rem; border-bottom:0; }
.cfg-account-block__title { display:flex; align-items:flex-start; gap:.65rem; }
.cfg-account-block__title>span { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; color:var(--bs-primary); background:rgba(var(--bs-primary-rgb),.1); border-radius:.55rem; font-size:.69rem; font-weight:900; }
.cfg-account-block__title h3 { margin:.08rem 0 .15rem; font-size:.88rem; font-weight:800; }
.cfg-account-block__title p { margin:0; color:var(--bs-secondary-color); font-size:.7rem; line-height:1.4; }
.cfg-account-form { max-width:34rem; }
.cfg-support-intro { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; padding:.5rem; }
.cfg-support-intro img { width:58px; height:58px; object-fit:contain; }
.cfg-support-intro h3 { margin:0 0 .2rem; font-size:1rem; }
.cfg-support-intro p { margin:0; color:var(--bs-secondary-color); font-size:.78rem; line-height:1.4; }
.cfg-support-link { display:grid; grid-template-columns:2.2rem minmax(0,1fr) auto; align-items:center; gap:.7rem; margin-top:.55rem; padding:.75rem .85rem; color:var(--bs-body-color); text-decoration:none; border:1px solid var(--bs-border-color); border-radius:.75rem; }
.cfg-support-link:hover { color:var(--bs-primary); border-color:rgba(var(--bs-primary-rgb),.3); background:var(--bs-tertiary-bg); }
.cfg-support-link>i:first-child { color:var(--bs-primary); font-size:1.15rem; text-align:center; }
.cfg-support-link>span { display:grid; line-height:1.2; }
.cfg-support-link strong { font-size:.82rem; }
.cfg-support-link small { margin-top:.15rem; color:var(--bs-secondary-color); font-size:.7rem; }
.cfg-support-link--primary { color:var(--bs-success-text-emphasis); border-color:rgba(var(--bs-success-rgb),.3); background:rgba(var(--bs-success-rgb),.07); }
.cfg-support-link--primary>i:first-child { color:var(--bs-success); }
@media (max-width:991.98px) {
    .cfg-home-hero { grid-template-columns:minmax(0,1fr) 250px; min-height:300px; }
    .cfg-home-orbit { width:230px; height:230px; transform:scale(.82); }
    .cfg-nav__menu { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .cfg-form-section { grid-template-columns:1fr; gap:.9rem; }
    .cfg-form-section__intro p { max-width:34rem; }
    .cfg-account-block { grid-template-columns:1fr; gap:.9rem; }
}
@media (max-width:575.98px) {
    .cfg-home { gap:.8rem; }
    .cfg-home-hero { display:block; min-height:0; padding:1.35rem 1.15rem 1.2rem; border-radius:1rem; }
    .cfg-home-hero::before { mask-image:linear-gradient(#000,transparent 90%); }
    .cfg-home-hero h1 { max-width:18rem; font-size:2rem; }
    .cfg-home-hero__content>p:not(.cfg-home-hero__eyebrow) { max-width:20rem; margin:.75rem 0 1rem; font-size:.82rem; }
    .cfg-home-hero__cta { width:100%; }
    .cfg-home-orbit { position:absolute; z-index:0; top:-32px; right:-80px; opacity:.22; transform:scale(.72); }
    .cfg-home-map { border-radius:1rem; }
    .cfg-home-map__head { align-items:flex-start; flex-direction:column; padding:1rem; }
    .cfg-home-map__head>span { display:none; }
    .cfg-home-groups { grid-template-columns:1fr; }
    .cfg-home-group { padding:1rem; border-right:0!important; border-bottom:1px solid var(--bs-border-color)!important; }
    .cfg-home-group:last-child { border-bottom:0!important; }
    .cfg-home-link { grid-template-columns:2.35rem minmax(0,1fr) auto; }
    .cfg-home-link__status { display:none; }
    .cfg-heading { align-items:flex-start; margin-bottom:.8rem; }
    .cfg-heading__icon { flex-basis:40px; width:40px; height:40px; border-radius:.75rem; }
    .cfg-heading h1 { font-size:1.2rem; }
    .cfg-heading>div:last-child>p:last-child { line-height:1.35; }
    .cfg-nav__summary { grid-template-columns:auto minmax(0,1fr); min-height:68px; padding:.65rem; }
    .cfg-nav__current-icon { width:40px; height:40px; }
    .cfg-nav__current>span { white-space:normal; }
    .cfg-nav__toggle { grid-column:1/-1; justify-content:center; width:100%; min-height:38px; }
    .cfg-nav__menu { grid-template-columns:1fr; gap:.85rem; padding:.75rem; }
    .cfg-nav__link { min-height:52px; }
    .cfg-form-section { padding:1.1rem 0; }
    .cfg-form-section:first-of-type { padding-top:0; }
    .cfg-url-field { display:grid; grid-template-columns:minmax(0,1fr) auto; }
    .cfg-url-field .input-group-text { grid-column:1/-1; justify-content:flex-start; width:100%; border-radius:.55rem .55rem 0 0!important; border-bottom:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cfg-url-field .form-control { border-radius:0 0 0 .55rem!important; }
    .cfg-url-field .btn { border-radius:0 0 .55rem 0!important; }
    .cfg-savebar { align-items:stretch; flex-direction:column; }
    .cfg-savebar .btn { width:100%; min-width:0; }
    .cfg-primary-action { width:100%; min-width:0; }
    .cfg-support-intro { align-items:flex-start; padding:.25rem 0; }
}
@media (prefers-reduced-motion:reduce) {
    .cfg-home-hero__cta>i { animation:none; }
    .cfg-home-hero__cta,.cfg-home-link,.cfg-home-link__arrow { transition:none; }
}
.cfg-switch { display:flex; align-items:flex-start; gap:.65rem; padding:.85rem 1rem .85rem 3rem; border:1px solid var(--bs-border-color); border-radius:.75rem; background:var(--bs-tertiary-bg); }
.cfg-switch label { display:grid; line-height:1.25; }
.cfg-switch label small { margin-top:.2rem; color:var(--bs-secondary-color); }

.coupon-workspace-tabs { display:flex; gap:.35rem; margin-bottom:1rem; overflow-x:auto; }
.coupon-workspace-tab { display:flex; align-items:center; gap:.6rem; min-width:12rem; padding:.65rem .85rem; color:var(--bs-secondary-color); text-decoration:none; border:1px solid transparent; border-radius:.75rem; }
.coupon-workspace-tab>span { display:grid; line-height:1.15; }.coupon-workspace-tab small{margin-top:.15rem;font-size:.7rem}.coupon-workspace-tab.is-active{color:var(--bs-primary);border-color:rgba(var(--bs-primary-rgb),.3);background:rgba(var(--bs-primary-rgb),.07)}
.coupon-workspace-panel{max-width:62rem}.coupon-editor-shell{max-width:48rem}.cupom-lista{display:grid;gap:.75rem;margin:0;padding:0;list-style:none}.cupom-ticket{display:grid;grid-template-columns:6.2rem minmax(0,1fr);overflow:hidden;border:1px solid var(--bs-border-color);border-radius:.85rem;background:var(--bs-body-bg)}.cupom-ticket__canhoto{display:grid;place-content:center;text-align:center;color:var(--on-primary);background:var(--bs-primary);border-right:1px dashed rgba(42,21,5,.35)}.cupom-ticket__canhoto span{font-size:1.25rem;font-weight:800}.cupom-ticket__canhoto small{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase}.cupom-ticket__corpo{display:flex;flex-direction:column;gap:.3rem;min-width:0;padding:.85rem 1rem}.cupom-ticket__topo{display:flex;justify-content:space-between;gap:.5rem}.cupom-ticket__codigo{overflow:hidden;font-family:var(--bs-font-monospace);letter-spacing:.12em;text-overflow:ellipsis}.cupom-ticket__condicoes,.cupom-ticket__uso{margin:0;color:var(--bs-secondary-color);font-size:.78rem}.cupom-ticket__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.35rem}.cupom-ticket__acoes form{margin:0}.cupom-ticket.is-inativo{opacity:.7}.cupom-ticket.is-inativo .cupom-ticket__canhoto{color:#fff;background:var(--bs-secondary);border-right-color:rgba(255,255,255,.5)}.cupom-vazio{display:grid;justify-items:center;gap:.35rem;padding:3rem 1rem;text-align:center;color:var(--bs-secondary-color)}.cupom-vazio i{font-size:2.4rem;color:var(--bs-primary)}.cupom-vazio p{margin:0}
.coupon-code-builder { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.5rem; }
.coupon-code-builder input { min-width:0; letter-spacing:.08em; }
.coupon-code-builder button { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-width:8.8rem; white-space:nowrap; }
.coupon-code-help { display:flex; align-items:center; gap:.35rem; margin-top:.38rem; color:var(--bs-secondary-color); font-size:.72rem; }
.coupon-code-help i { color:var(--bs-primary); }
.coupon-code-builder.is-generated input { animation:coupon-code-ready .55s ease-out; }
@keyframes coupon-code-ready { 0%{border-color:var(--bs-success);box-shadow:0 0 0 .28rem rgba(var(--bs-success-rgb),.18);transform:scale(.985)} 100%{transform:none} }
@media(max-width:575.98px){.cupom-ticket{grid-template-columns:4.8rem minmax(0,1fr)}.cupom-ticket__canhoto span{font-size:1rem}.cupom-ticket__corpo{padding:.75rem}.coupon-workspace-tab{min-width:10.5rem}}
@media(max-width:575.98px){.coupon-code-builder{grid-template-columns:1fr}.coupon-code-builder button{width:100%}}
@media(prefers-reduced-motion:reduce){.coupon-code-builder.is-generated input{animation:none}}

/* Clientes ficam ligados ao próprio cartão de cupom. O painel abre no lugar,
   inicia compacto e pagina a lista para continuar leve com muitos pedidos. */
.cupom-ticket-item { display: grid; gap: .45rem; min-width: 0; }
.cupom-ticket__clientes { display: inline-flex; align-items: center; gap: .35rem; }
.coupon-inline-usage {
    margin: -.05rem .7rem 0; padding: .85rem; border: 1px solid rgba(var(--bs-primary-rgb), .25);
    border-top: 3px solid var(--bs-primary); border-radius: 0 0 .85rem .85rem;
    background: var(--bs-tertiary-bg); box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}
.coupon-inline-usage__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .65rem; }
.coupon-inline-usage__head h3 { margin: .08rem 0 0; font-size: .98rem; }
.coupon-inline-usage__eyebrow { color: var(--bs-primary); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.coupon-inline-search { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .4rem; margin-bottom: .55rem; }
.coupon-inline-search label {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .5rem;
    min-height: 38px; padding: 0 .68rem; border: 1px solid var(--bs-border-color); border-radius: .55rem;
    color: var(--bs-secondary-color); background: var(--bs-body-bg);
}
.coupon-inline-search label:focus-within { border-color: var(--bs-primary); box-shadow: 0 0 0 .18rem rgba(var(--bs-primary-rgb), .14); }
.coupon-inline-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--bs-body-color); background: transparent; font-size: .8rem; }
.coupon-inline-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin-bottom: .55rem; }
.coupon-inline-summary span { display: grid; padding: .48rem .6rem; border: 1px solid var(--bs-border-color); border-radius: .58rem; background: var(--bs-body-bg); }
.coupon-inline-summary b { overflow: hidden; font-size: .8rem; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.coupon-inline-summary small { margin-top: .1rem; color: var(--bs-secondary-color); font-size: .61rem; }
.coupon-inline-empty { display: flex; align-items: center; gap: .7rem; padding: .85rem; border: 1px dashed var(--bs-border-color); border-radius: .65rem; color: var(--bs-secondary-color); background: var(--bs-body-bg); }
.coupon-inline-empty > i { color: var(--bs-primary); font-size: 1.35rem; }
.coupon-inline-empty span { display: grid; }
.coupon-inline-empty strong { color: var(--bs-body-color); font-size: .82rem; }
.coupon-inline-empty small { font-size: .7rem; }
.coupon-usage-list { display: grid; gap: .42rem; margin: 0; padding: 0; list-style: none; }
.coupon-usage-item { overflow: hidden; border: 1px solid var(--bs-border-color); border-radius: .7rem; background: var(--bs-body-bg); }
.coupon-usage-item > summary {
    display: grid; grid-template-columns: 38px minmax(170px, 1fr) auto 20px;
    align-items: center; gap: .7rem; min-height: 58px; padding: .48rem .65rem;
    cursor: pointer; list-style: none; transition: background-color var(--dur-fast);
}
.coupon-usage-item > summary::-webkit-details-marker { display: none; }
.coupon-usage-item > summary:hover { background: var(--bs-tertiary-bg); }
.coupon-usage-item > summary:focus-visible { outline: 2px solid var(--bs-primary-text-emphasis); outline-offset: -2px; }
.coupon-usage-avatar {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: .65rem;
    background: rgba(var(--bs-primary-rgb), .13); color: var(--bs-primary-text-emphasis); font-size: .74rem; font-weight: 800;
}
.coupon-usage-person { min-width: 0; }
.coupon-usage-person strong, .coupon-usage-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coupon-usage-person strong { font-size: .84rem; }
.coupon-usage-person small { margin-top: .12rem; color: var(--bs-secondary-color); font-size: .68rem; }
.coupon-usage-value { min-width: 7.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.coupon-usage-value strong, .coupon-usage-value small { display: block; white-space: nowrap; }
.coupon-usage-value strong { color: var(--bs-success-text-emphasis); font-size: .78rem; }
.coupon-usage-value small { margin-top: .1rem; color: var(--bs-secondary-color); font-size: .62rem; }
.coupon-usage-chevron { color: var(--bs-secondary-color); font-size: .72rem; transition: transform var(--dur-fast); }
.coupon-usage-item[open] { border-color: rgba(var(--bs-primary-rgb), .28); }
.coupon-usage-item[open] > summary { background: rgba(var(--bs-primary-rgb), .055); }
.coupon-usage-item[open] .coupon-usage-chevron { transform: rotate(180deg); }
.coupon-usage-details {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem;
    padding: .65rem .75rem; border-top: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg);
}
.coupon-usage-details span { min-width: 0; }
.coupon-usage-details small, .coupon-usage-details strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coupon-usage-details small { margin-bottom: .15rem; color: var(--bs-secondary-color); font-size: .6rem; letter-spacing: .035em; text-transform: uppercase; }
.coupon-usage-details strong { font-size: .75rem; font-weight: 650; }
.coupon-usage-pagination { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--bs-border-color); }
.coupon-usage-pagination small { color: var(--bs-secondary-color); }
.coupon-usage-pagination div { display: flex; gap: .35rem; }

@media (max-width: 767.98px) {
    .coupon-usage-item > summary {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        grid-template-areas: "avatar pessoa seta" ". valor valor";
        gap: .38rem .65rem; padding: .55rem .65rem;
    }
    .coupon-usage-avatar { grid-area: avatar; }
    .coupon-usage-person { grid-area: pessoa; }
    .coupon-usage-value { grid-area: valor; min-width: 0; }
    .coupon-usage-chevron { grid-area: seta; }
    .coupon-usage-details { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 3.55rem; }
    .coupon-usage-details span:last-child { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
    .coupon-workspace-tabs { padding-bottom: .2rem; scroll-snap-type: x proximity; }
    .coupon-workspace-tab { scroll-snap-align: start; }
    .coupon-inline-usage { margin-inline: .25rem; padding: .68rem; }
    .coupon-inline-usage__head { align-items: flex-start; }
    .coupon-inline-usage__head .btn { padding-inline: .55rem; }
    .coupon-inline-search { grid-template-columns: minmax(0, 1fr) auto; }
    .coupon-inline-search label { grid-column: 1 / -1; }
    .coupon-inline-summary span { padding: .42rem .48rem; }
    .cupom-ticket__clientes { order: 4; }
}
.cadastro-lote-card{margin:0 0 1.1rem;padding:1rem;border:1px solid color-mix(in srgb,var(--bs-primary),var(--bs-border-color) 68%);border-left:4px solid var(--bs-primary);border-radius:.9rem;background:var(--bs-body-bg);box-shadow:0 8px 24px rgba(24,32,48,.06)}
.cadastro-lote-card__cabecalho{display:flex;align-items:flex-start;gap:.8rem}.cadastro-lote-card__icone{display:grid;place-items:center;flex:0 0 2.6rem;width:2.6rem;height:2.6rem;border-radius:.7rem;color:var(--bs-primary);background:rgba(var(--bs-primary-rgb),.12);font-size:1.2rem}.cadastro-lote-card__cabecalho h2{margin:.05rem 0 .15rem;font-size:1.05rem}.cadastro-lote-card__cabecalho p{margin:0;color:var(--bs-secondary-color);font-size:.82rem}.cadastro-lote-card__etapa{display:block;color:var(--bs-primary);font-size:.66rem;font-weight:800;letter-spacing:.1em}
.cadastro-tutorial{margin:.85rem 0;border:1px dashed var(--bs-border-color);border-radius:.7rem;background:var(--bs-tertiary-bg)}.cadastro-tutorial summary{padding:.7rem .8rem;cursor:pointer;color:var(--bs-primary-text-emphasis);font-size:.82rem;font-weight:750;list-style:none}.cadastro-tutorial summary::-webkit-details-marker{display:none}.cadastro-tutorial summary i{margin-right:.35rem}.cadastro-tutorial[open] summary{border-bottom:1px solid var(--bs-border-color)}.cadastro-tutorial ol{margin:.75rem 1rem .75rem 2rem;padding:0;font-size:.82rem}.cadastro-tutorial li+li{margin-top:.3rem}.cadastro-tutorial__exemplo{display:grid;gap:.3rem;margin:.75rem;padding:.7rem;border-radius:.55rem;color:var(--bs-body-color);background:var(--bs-body-bg)}.cadastro-tutorial__exemplo span{color:var(--bs-secondary-color);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.cadastro-tutorial__exemplo code{color:inherit;line-height:1.6}
.cadastro-lote-form{padding-top:.2rem}.cadastro-lote-textarea{min-height:8.5rem;resize:vertical;font:600 .86rem/1.65 ui-monospace,SFMono-Regular,Menlo,monospace}.cadastro-lote-feedback{display:flex;justify-content:space-between;gap:.75rem;margin-top:.4rem;color:var(--bs-secondary-color);font-size:.72rem}.cadastro-lote-feedback strong{white-space:nowrap}.cadastro-lote-opcoes{display:flex;flex-wrap:wrap;gap:.4rem;max-height:7.5rem;overflow:auto}.cadastro-lote-opcoes label{padding:.4rem .55rem;border:1px solid var(--bs-border-color);border-radius:.5rem;background:var(--bs-tertiary-bg);font-size:.76rem}.cadastro-proximo{display:flex;justify-content:flex-end;align-items:center;gap:.35rem;margin-top:.7rem;color:var(--bs-secondary-color);font-size:.75rem;text-decoration:none}.cadastro-proximo:hover{color:var(--bs-primary)}.cadastro-lote-vazio{display:flex;align-items:center;gap:.8rem;padding:.85rem;border-radius:.7rem;background:var(--bs-tertiary-bg)}.cadastro-lote-vazio>i{font-size:1.5rem;color:var(--bs-primary)}.cadastro-lote-vazio div{flex:1}.cadastro-lote-vazio p{margin:0;color:var(--bs-secondary-color);font-size:.78rem}
@media(max-width:767.98px){.cadastro-lote-card{padding:.85rem}.cadastro-lote-feedback{align-items:flex-start;flex-direction:column;gap:.2rem}.cadastro-lote-vazio{align-items:flex-start;flex-wrap:wrap}.cadastro-lote-vazio .btn{width:100%}}

.cfg-check {
    padding: var(--space-3); border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-md); background: var(--bs-tertiary-bg); margin-left: 0;
}
.cfg-check .form-check-input { margin-left: 0; margin-right: .55rem; float: none; }
.cfg-check .form-check-label { display: inline-block; width: calc(100% - 2rem); vertical-align: top; }

/* ==========================================================================
   Tarja do acesso assistido (suporte dentro da conta de um cliente).

   Fixa no topo e vermelha de propósito: o risco real dessa ferramenta não é
   técnico, é humano — alguém esquecer que está dentro da loja de outra pessoa
   e apagar um produto achando que é o ambiente de teste.
   ========================================================================== */

.suporte-tarja {
    position: fixed; top: 0; left: 0; right: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); flex-wrap: wrap;
    padding: var(--space-2) var(--space-4);
    background: #b02a37; color: #fff; font-size: .85rem; font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.suporte-tarja-tempo { opacity: .75; font-weight: 500; }
.suporte-tarja-btn {
    border: 1px solid rgba(255,255,255,.6); background: transparent; color: #fff;
    border-radius: var(--radius-pill); padding: 3px 14px; font-weight: 700;
    font-size: .8rem; cursor: pointer; white-space: nowrap;
}
.suporte-tarja-btn:hover { background: #fff; color: #b02a37; }

/* A tarja é fixed, então empurra o conteúdo — inclusive a sidebar e a topbar
   sticky, que senão nascem debaixo dela. */
body.tem-suporte-tarja { padding-top: 42px; }
body.tem-suporte-tarja .sidebar { top: 42px; height: calc(100vh - 42px); }
body.tem-suporte-tarja .topbar { top: 42px; }
@media (max-width: 575.98px) {
    .suporte-tarja { font-size: .78rem; padding: var(--space-2); }
    body.tem-suporte-tarja { padding-top: 62px; }
    body.tem-suporte-tarja .sidebar { top: 62px; height: calc(100vh - 62px); }
    body.tem-suporte-tarja .topbar { top: 62px; }
}
@media print { .suporte-tarja { display: none !important; } }

/* ==========================================================================
   KDS — Tela de produção da cozinha.

   Escrita para o aparelho onde ela realmente roda: um tablet preso na parede,
   lido de pé e a um metro de distância, por alguém de mãos ocupadas. Daí as
   três decisões que regem este bloco:

     1. ALVO DE TOQUE GRANDE. Nenhum botão abaixo de 44px. O padrão .btn-sm do
        Bootstrap, usado na versão anterior, dava 24px de altura — impossível
        de acertar com a mão molhada.
     2. COLUNAS QUE VIRAM ABAS NO CELULAR. Três colunas lado a lado só cabem a
        partir de 992px. Abaixo disso elas viram uma faixa rolável na
        horizontal, com scroll-snap, em vez de espremer para 90px de largura.
     3. COR COM SIGNIFICADO FIXO. Âmbar = esperando, laranja = na chapa,
        verde = pronto, vermelho pulsante = passou de 20 minutos.
   ========================================================================== */

.kds-topo {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-3); margin-bottom: var(--space-4);
}
.kds-topo-titulo { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.kds-relogio {
    font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem;
    color: var(--bs-secondary-color);
}
.kds-topo-acoes { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.kds-mobile-nav { display: none; }

/* Pulso de "estou vivo". Sem ele, uma tela parada é ambígua: pode ser cozinha
   vazia ou conexão caída — e as duas pedem reações opostas. */
.kds-pulso {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    background: var(--bs-success); box-shadow: 0 0 0 0 rgba(25, 135, 84, .6);
    animation: kds-bater 2.4s ease-out infinite;
}
.kds-pulso-erro { background: var(--bs-danger); animation: none; }
@keyframes kds-bater {
    0%   { box-shadow: 0 0 0 0 rgba(25, 135, 84, .55); }
    70%  { box-shadow: 0 0 0 9px rgba(25, 135, 84, 0); }
    100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

/* ---- Placar ----
   Conta ITENS, não pedidos, e o rótulo diz isso: um pedido com um prato na
   fila e outro já pronto aparece na coluna "Fila" e mesmo assim soma 1 em
   "prontos". Sem a palavra "itens" o número parece contradizer a coluna. */
.kds-placar {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2); margin-bottom: var(--space-4);
}
@media (max-width: 620px) {
    /* Quatro colunas a 390px cortam o último cartão e quebram o rótulo em três
       linhas. Em 2x2 cada número continua legível de longe, que é o ponto. */
    .kds-placar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kds-placar-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: var(--space-3) var(--space-2); border-radius: var(--radius-md);
    border: 1px solid var(--bs-border-color); background: var(--bs-body-bg);
    border-top: 3px solid var(--kds-cor, var(--bs-border-color));
    box-shadow: var(--shadow-xs);
}
.kds-placar-item[data-cor="fila"]       { --kds-cor: #d97706; }
.kds-placar-item[data-cor="preparando"] { --kds-cor: var(--brand-fogo); }
.kds-placar-item[data-cor="pronto"]     { --kds-cor: #198754; }
.kds-placar-item[data-cor="atraso"]     { --kds-cor: #dc3545; }
.kds-placar-num {
    font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--kds-cor);
}
.kds-placar-rot {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--bs-secondary-color); font-weight: 600; margin-top: 4px; text-align: center;
}

/* ---- Quadro de colunas ---- */
.kds-quadro { display: grid; gap: var(--space-3); align-items: stretch; }

@media (min-width: 992px) {
    .kds-quadro { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    /* Faixa rolável com encaixe: o cozinheiro desliza entre Fila, Preparando e
       Pronto do mesmo jeito que troca de aba, sem perder a largura do card. */
    .kds-quadro {
        grid-auto-flow: column; grid-auto-columns: 88%;
        overflow-x: auto; scroll-snap-type: x mandatory;
        padding-bottom: var(--space-2); scrollbar-width: thin;
    }
    .kds-coluna { scroll-snap-align: center; }
    .kds-mobile-nav {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem;
        margin: 0 0 var(--space-2); padding: .25rem;
        border: 1px solid var(--bs-border-color); border-radius: var(--radius-md);
        background: var(--bs-body-bg);
    }
    .kds-mobile-nav button {
        display: flex; align-items: center; justify-content: center; gap: .35rem;
        min-width: 0; min-height: 44px; padding: .35rem .25rem;
        border: 1px solid transparent; border-radius: var(--radius-sm);
        background: transparent; color: var(--bs-secondary-color);
        font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
    }
    .kds-mobile-nav button.ativo,
    .kds-mobile-nav button[aria-pressed="true"] {
        border-color: rgba(var(--bs-primary-rgb), .24);
        background: rgba(var(--bs-primary-rgb), .12);
        color: var(--bs-primary-text-emphasis);
    }
    .kds-mobile-nav button:focus-visible { outline: 2px solid var(--bs-primary-text-emphasis); outline-offset: 2px; }
    .kds-mobile-nav-num {
        display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem;
        padding: 0 .25rem; border-radius: var(--radius-pill);
        background: var(--bs-tertiary-bg); color: var(--bs-body-color);
        font-size: .72rem; font-variant-numeric: tabular-nums;
    }
    .kds-mobile-nav button.ativo .kds-mobile-nav-num { background: var(--bs-primary); color: var(--on-primary); }
}

.kds-coluna {
    display: flex; flex-direction: column; min-width: 0; min-height: 0;
    background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-lg); overflow: hidden;
}
.kds-coluna-cab {
    flex: 0 0 auto;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    border-top: 4px solid var(--kds-cor, var(--bs-border-color));
}
.kds-coluna-cab[data-cor="fila"]       { --kds-cor: #d97706; }
.kds-coluna-cab[data-cor="preparando"] { --kds-cor: var(--brand-fogo); }
.kds-coluna-cab[data-cor="pronto"]     { --kds-cor: #198754; }
.kds-coluna-cab h4 {
    margin: 0; font-size: .9rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; display: flex; align-items: center; gap: var(--space-2);
    color: var(--kds-cor);
}
.kds-coluna-num {
    margin-left: auto; background: var(--kds-cor); color: #fff;
    border-radius: var(--radius-pill); padding: 1px 10px; min-width: 30px; text-align: center;
    font-size: .8rem; font-variant-numeric: tabular-nums;
}

/* O CORAÇÃO DO CONSERTO.

   O corpo da coluna é um flex-column com altura limitada. Sem `flex-shrink: 0`
   no card, o flex distribui a falta de espaço encolhendo TODOS os cards — e o
   conteúdo deles, que tem altura própria, vaza por baixo do card seguinte. Era
   isso que fazia os pedidos aparecerem empilhados um sobre o outro em vez de a
   coluna simplesmente rolar. `min-height: 0` no pai é o par obrigatório dessa
   regra: sem ele o container flex se recusa a encolher abaixo do conteúdo e o
   overflow nunca chega a rolar. */
.kds-coluna-corpo {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-3); overflow-y: auto; overscroll-behavior: contain;
    max-height: calc(100vh - 330px);
}
.kds-coluna-corpo > * { flex: 0 0 auto; }

/* Barra de rolagem discreta: some do caminho mas continua visível o bastante
   para o cozinheiro perceber que há mais pedido abaixo. */
.kds-coluna-corpo { scrollbar-width: thin; scrollbar-color: var(--bs-border-color) transparent; }
.kds-coluna-corpo::-webkit-scrollbar { width: 8px; }
.kds-coluna-corpo::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: var(--radius-pill); }

.kds-coluna {
    position: relative;
}
.kds-coluna::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
    pointer-events: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: linear-gradient(to top, var(--bs-tertiary-bg), transparent);
}

.kds-coluna-vazia {
    flex: 1 1 auto; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 160px; margin: 0; padding: var(--space-5);
    color: var(--bs-secondary-color); text-align: center; font-size: .85rem;
    border: 1px dashed var(--bs-border-color); border-radius: var(--radius-md);
}
.kds-coluna-vazia i { font-size: 1.6rem; opacity: .5; }

/* ---- Card de pedido ---- */
.kds-card {
    display: flex; flex-direction: column;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
    border-left: 5px solid var(--kds-borda, var(--bs-border-color));
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
    overflow: hidden;   /* mantém os cantos arredondados sobre o cabeçalho */
}
.kds-card[data-urgencia="ok"]      { --kds-borda: #198754; }
.kds-card[data-urgencia="atencao"] { --kds-borda: #d97706; }
.kds-card[data-urgencia="critico"] {
    --kds-borda: #dc3545;
    animation: kds-alerta 1.8s ease-in-out infinite;
}
@keyframes kds-alerta {
    0%, 100% { box-shadow: var(--shadow-sm); }
    50%      { box-shadow: 0 0 0 3px rgba(220, 53, 69, .26); }
}

.kds-card-cab {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    padding: var(--space-3); border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}
.kds-card-id { display: flex; align-items: center; gap: var(--space-2); font-size: 1rem; min-width: 0; }
.kds-card-id i { color: var(--kds-borda); flex-shrink: 0; }
.kds-card-id strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kds-card-tempo {
    display: flex; align-items: baseline; gap: 3px; flex-shrink: 0;
    font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums;
    color: var(--kds-borda);
}
.kds-card-tempo span { font-size: .68rem; font-weight: 600; }

.kds-card-cliente, .kds-card-obs {
    padding: var(--space-2) var(--space-3); font-size: .82rem;
    border-bottom: 1px solid var(--bs-border-color); overflow-wrap: anywhere;
}
.kds-card-cliente { color: var(--bs-secondary-color); font-weight: 600; }
.kds-card-obs { background: rgba(217, 119, 6, .1); color: #92400e; font-weight: 600; }
.kds-card-rota {
    display: flex; align-items: center; gap: .4rem; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--bs-border-color);
    background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary-text-emphasis); font-size: .82rem; font-weight: 700; text-decoration: none;
}
.kds-card-rota:hover { background: rgba(var(--bs-primary-rgb), .16); color: var(--bs-primary-text-emphasis); }

.kds-card-itens { display: flex; flex-direction: column; }

/* ---- Item ----
   Grid de duas colunas em vez de flex: a coluna dos botões tem largura fixa e
   a do texto recebe `minmax(0, 1fr)`, que é o que impede um nome de produto
   longo de empurrar os botões para fora do card. */
.kds-item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: start; gap: var(--space-3);
    padding: var(--space-3); border-bottom: 1px solid var(--bs-border-color);
}
.kds-item:last-child { border-bottom: 0; }
.kds-item[data-status="pronto"] { opacity: .5; }
.kds-item[data-status="pronto"] .kds-item-nome { text-decoration: line-through; }
.kds-item[data-status="em_preparo"] { background: rgba(239, 108, 0, .07); }

.kds-item-info { min-width: 0; }
.kds-item-cab { display: flex; align-items: baseline; gap: var(--space-2); }
.kds-item-qtd {
    flex-shrink: 0;
    display: inline-block; min-width: 2.2rem; padding: 2px 7px;
    background: var(--bs-emphasis-color); color: var(--bs-body-bg);
    border-radius: var(--radius-sm); font-weight: 800; text-align: center;
    font-size: .9rem; font-variant-numeric: tabular-nums;
}
.kds-item-nome { font-weight: 700; font-size: 1.02rem; line-height: 1.3; overflow-wrap: break-word; }

.kds-item-opcionais {
    list-style: none; margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid #d97706; border-radius: var(--radius-sm);
    background: rgba(217, 119, 6, .09);
}
.kds-item-opcionais li {
    font-size: .9rem; color: var(--bs-secondary-color); line-height: 1.5; overflow-wrap: anywhere;
}
.kds-item-opcionais li + li { margin-top: var(--space-1); }
.kds-item-opcionais b { color: var(--bs-body-color); font-weight: 700; }

.kds-item-obs {
    margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3);
    background: rgba(220, 53, 69, .1); color: #b02a37;
    border-left: 3px solid #dc3545; border-radius: var(--radius-sm);
    font-weight: 700; font-size: .82rem; overflow-wrap: anywhere;
}

.kds-item-botoes { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* Alvo de toque: 46px é o mínimo confortável para mão molhada de cozinha. */
.kds-btn {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--radius-md);
    border: 1px solid transparent; font-size: 1.2rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast);
}
.kds-btn:active { transform: scale(.92); }
.kds-btn:disabled { opacity: .5; cursor: wait; }
.kds-btn-ok      { background: #198754; color: #fff; }
.kds-btn-iniciar { background: var(--brand-fogo); color: #fff; }
.kds-btn-voltar  { background: var(--bs-body-bg); color: var(--bs-secondary-color); border-color: var(--bs-border-color); }
.kds-btn-ok:hover, .kds-btn-iniciar:hover { filter: brightness(1.08); }

.kds-card-pe {
    display: flex; gap: var(--space-2); padding: var(--space-3);
    border-top: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg);
}
.kds-lote {
    flex: 1 1 auto; min-height: 44px; border-radius: var(--radius-md);
    border: 1.5px solid var(--kds-borda, var(--bs-border-color));
    background: transparent; color: var(--kds-borda, var(--bs-body-color));
    font-weight: 700; font-size: .88rem; cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.kds-lote:hover { background: color-mix(in srgb, var(--kds-borda) 12%, transparent); }
.kds-lote:active { transform: scale(.98); }
.kds-imprimir {
    width: 44px; min-height: 44px; flex-shrink: 0; border-radius: var(--radius-md);
    border: 1px solid var(--bs-border-color); background: var(--bs-body-bg);
    color: var(--bs-secondary-color); cursor: pointer;
}

.kds-vazio { text-align: center; padding: var(--space-8) var(--space-4); color: var(--bs-secondary-color); }
.kds-vazio i { font-size: 3.5rem; display: block; margin-bottom: var(--space-3); color: #198754; }
.kds-vazio p { margin: 0; font-size: 1.05rem; }

/* Complementos do pedido no painel de Delivery. Antes havia dois tamanhos
   inline de 11px/12px, pequenos demais para leitura rapida no telefone. */
.delivery-item-opcionais { display: grid; gap: var(--space-1); margin-top: var(--space-2); }
.delivery-item-opcional {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem;
    font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere;
}
.delivery-item-opcional-tipo { font-size: .76rem; letter-spacing: .02em; }
.delivery-item-opcional-valor { font-size: .92rem; }

@media (prefers-reduced-motion: reduce) {
    .kds-pulso, .kds-card[data-urgencia="critico"] { animation: none; }
}

/* Em tela cheia o navegador esconde a própria barra, então o KDS ocupa o
   espaço que sobra — é o modo em que o tablet fica o dia todo. */
:fullscreen .sidebar, :fullscreen .topbar, :fullscreen .bottom-nav { display: none !important; }
:fullscreen .content-wrapper { margin-left: 0 !important; }
:fullscreen .kds-coluna-corpo { max-height: calc(100vh - 260px); }

/* No celular a coluna ocupa a altura útil da tela, descontando a barra
   inferior — a rolagem acontece dentro dela, não na página. */
@media (max-width: 991.98px) {
    .kds-coluna-corpo { max-height: calc(100vh - 300px - var(--bottom-nav-h)); }
}

/* No telefone, 88% da area interna deixava o pedido estreito demais: o card
   perdia largura para o padding da pagina, da coluna e do proprio item. A
   coluna agora usa quase toda a area util, mas conserva uma faixa da proxima
   para comunicar que o quadro continua rolavel na horizontal. */
@media (max-width: 575.98px) {
    .kds-placar { gap: var(--space-2); margin-bottom: var(--space-3); }
    .kds-placar-item { padding: .65rem var(--space-2); }

    .kds-quadro {
        grid-auto-columns: calc(100% - var(--space-3));
        gap: var(--space-2);
        scroll-padding-inline: 0;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }
    .kds-coluna { scroll-snap-align: start; border-radius: var(--radius-md); }
    .kds-coluna-cab { padding: .7rem .85rem; }
    .kds-coluna-cab h4 { font-size: .95rem; }
    .kds-coluna-corpo {
        gap: var(--space-2); padding: var(--space-2);
        max-height: calc(100dvh - 286px - var(--bottom-nav-h));
    }

    .kds-card { border-left-width: 4px; }
    .kds-card-cab { padding: .8rem .75rem; }
    .kds-card-id { font-size: 1.05rem; }
    .kds-card-cliente, .kds-card-obs { padding: .65rem .75rem; font-size: .88rem; line-height: 1.45; }

    .kds-item { gap: .65rem; padding: .8rem .75rem; }
    .kds-item-cab { gap: .55rem; }
    .kds-item-qtd { min-width: 2.25rem; font-size: .95rem; }
    .kds-item-nome { font-size: 1.06rem; line-height: 1.28; }
    .kds-item-opcionais { margin-top: .65rem; padding: .55rem .65rem; }
    .kds-item-opcionais li { font-size: .94rem; line-height: 1.5; }
    .kds-item-opcionais b {
        display: block; margin-bottom: 1px;
        font-size: .76rem; letter-spacing: .035em; text-transform: uppercase;
    }
    .kds-card-pe { padding: .7rem .75rem; }

    .delivery-pedido-item { font-size: .94rem; line-height: 1.45; }
    .delivery-item-opcional { font-size: .94rem; line-height: 1.5; }
    .delivery-item-opcional-tipo { font-size: .8rem; padding: .3rem .45rem; }
    .delivery-item-opcional-valor { font-size: .96rem; }
}

[data-bs-theme="dark"] .kds-card-obs { background: rgba(217, 119, 6, .18); color: #fcd34d; }
[data-bs-theme="dark"] .kds-item-obs { background: rgba(220, 53, 69, .2);  color: #fca5a5; }
[data-bs-theme="dark"] .kds-item-opcionais { background: rgba(217, 119, 6, .14); }
[data-bs-theme="dark"] .kds-placar-item,
[data-bs-theme="dark"] .kds-card { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .kds-card-cab,
[data-bs-theme="dark"] .kds-card-pe { background: rgba(255, 255, 255, .03); }

/* ==========================================================================
   Impressão: nada de navegação no papel.
   ========================================================================== */

@media print {
    .sidebar, .topbar, .bottom-nav, .offcanvas, .btn, .no-print,
    .mais-painel, .mais-fundo, .cardapio-sacola,
    .kds-topo-acoes, .kds-item-botoes, .kds-card-pe { display: none !important; }
    .content-wrapper { margin-left: 0 !important; }
    .pdv-card, .card { border: 1px solid #999 !important; box-shadow: none !important; }
    body { padding-bottom: 0 !important; background: #fff !important; }
}
/* Ordenação acessível do catálogo: arrastar no desktop, botões no toque/teclado. */
.catalogo-sort{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}.catalogo-sort__item{min-height:52px;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:.5rem;padding:.35rem .5rem;border:1px solid var(--bs-border-color);border-radius:.55rem;background:var(--bs-body-bg)}.catalogo-sort__item.is-dragging{opacity:.45}.catalogo-sort__handle,.catalogo-sort__acoes button{width:44px;height:44px;border:0;background:transparent;color:var(--bs-secondary-color)}.catalogo-sort__handle{cursor:grab}.catalogo-sort__acoes{display:flex}
/* Editor visual dos banners da vitrine
   -----------------------------------
   O lojista ve os dois quadros que existem de verdade no cardapio publico — a
   dobra do computador e a do celular — com a mesma regra de recorte, o mesmo
   ponto focal e o mesmo leito do nome da loja de menu-cinematico.css. Qualquer
   mudanca aqui precisa acompanhar a de la, senao a previa passa a mentir. */
.banner-lista { display: grid; gap: .85rem; }

/* Dobras compactas das configurações longas do delivery. */
.delivery-dobra { overflow: clip; border: 1px solid var(--bs-border-color); border-radius: .7rem; background: var(--bs-body-bg); }
.delivery-dobra > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; min-height: 3.7rem; padding: .6rem .7rem; cursor: pointer; list-style: none; }
.delivery-dobra > summary::-webkit-details-marker { display: none; }
.delivery-dobra__icone { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: .6rem; background: rgba(var(--bs-primary-rgb), .11); color: var(--bs-primary); }
.delivery-dobra summary strong, .delivery-dobra summary small { display: block; }
.delivery-dobra summary small { margin-top: .08rem; color: var(--bs-secondary-color); font-size: .7rem; font-weight: 500; }
.delivery-dobra__seta { color: var(--bs-secondary-color); transition: transform .2s ease; }
.delivery-dobra[open] .delivery-dobra__seta { transform: rotate(180deg); }
.delivery-dobra__conteudo { padding: .75rem; border-top: 1px solid var(--bs-border-color); }

.banner-config { overflow: clip; border: 1px solid var(--bs-border-color); border-radius: .8rem; background: var(--bs-body-bg); }
.banner-config__resumo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; min-height: 4.25rem; padding: .75rem; cursor: pointer; list-style: none; }
.banner-config__resumo::-webkit-details-marker, .banner-editor__topo::-webkit-details-marker { display: none; }
.banner-config__icone { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .7rem; background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); font-size: 1.15rem; }
.banner-config__resumo strong, .banner-config__resumo small { display: block; }
.banner-config__resumo small { margin-top: .1rem; color: var(--bs-secondary-color); font-size: .72rem; font-weight: 500; }
.banner-config__seta, .banner-editor__seta { color: var(--bs-secondary-color); transition: transform .2s ease; }
.banner-config[open] > .banner-config__resumo .banner-config__seta, .banner-editor[open] > .banner-editor__topo .banner-editor__seta { transform: rotate(180deg); }
.banner-config__conteudo { padding: .2rem .75rem .9rem; border-top: 1px solid var(--bs-border-color); }

.banner-editor {
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: color-mix(in srgb, var(--bs-tertiary-bg) 60%, transparent);
}
.banner-editor.is-dragging { opacity: .48; border-color: var(--bs-primary); }
.banner-editor__topo { display: grid; grid-template-columns: 2.5rem auto minmax(0, 1fr) auto auto auto; align-items: center; gap: .5rem; min-height: 4rem; padding: .55rem; cursor: pointer; list-style: none; }
.banner-editor__conteudo { padding: 0 .75rem .75rem; border-top: 1px solid var(--bs-border-color); }
.banner-editor__conteudo > .form-check:first-child { padding-top: .65rem; }
.banner-editor__arrastar { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: .55rem; background: transparent; color: var(--bs-secondary-color); cursor: grab; touch-action: none; }
.banner-editor__arrastar:hover, .banner-editor__arrastar:focus-visible { background: var(--bs-secondary-bg); color: var(--bs-primary); }
.banner-editor__arrastar:active { cursor: grabbing; }
.banner-editor__identidade { min-width: 0; }
.banner-editor__ordem { display: flex; }
.banner-editor__ordem button { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; background: transparent; color: var(--bs-secondary-color); }
.banner-editor__ordem button:hover:not(:disabled) { color: var(--bs-primary); }
.banner-editor__ordem button:disabled { opacity: .25; }
.banner-editor__indice {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bs-emphasis-color);
    color: var(--bs-body-bg);
    font-size: .78rem;
    font-weight: 700;
}
.banner-editor__medida { font-size: .72rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.banner-editor__principal { align-self: center; }
.banner-editor__dica { margin: .65rem 0 0; font-size: .72rem; color: var(--bs-secondary-color); }

/* A largura fixa do celular mantem a proporcao honesta: um telefone nao ocupa
   metade da tela do computador, e a previa nao deve sugerir que ocupa. */
.banner-editor__telas { display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: .8rem; align-items: start; }
.banner-tela { display: grid; gap: .4rem; margin: 0; }

.banner-tela__quadro {
    position: relative;
    overflow: hidden;
    /* Proporções tiradas da capa real (--capa-altura em menu-cinematico.css):
       faixa larga no computador, quase quadrada no telefone. Mudou lá, muda aqui. */
    aspect-ratio: 16 / 5;
    border-radius: .6rem;
    background: #171513;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 9%);
    cursor: grab;
    /* Sem isto o arrasto vertical vira rolagem da pagina no celular. */
    touch-action: none;
    user-select: none;
}
.banner-tela__quadro:focus-visible { outline: 2px solid var(--bs-primary-text-emphasis); outline-offset: 2px; }
.banner-tela__quadro.esta-arrastando { cursor: grabbing; }
.banner-tela--mobile .banner-tela__quadro { aspect-ratio: 5 / 6; border-radius: 1.1rem; }
/* A capa encolhe no telefone quando a arte aparece inteira (.capa--inteiro). */
.banner-tela--mobile .banner-tela__quadro[data-recorte="inteiro"] { aspect-ratio: 1 / 1; }

.banner-tela__fundo {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--foco, 50% 50%);
    filter: blur(18px) saturate(115%) brightness(.6);
    transform: scale(1.15);
}
.banner-tela__quadro[data-recorte="inteiro"] .banner-tela__fundo { display: block; }

.banner-tela__arte { position: absolute; inset: 0; z-index: 1; }
.banner-tela__arte img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--foco, 50% 50%);
    /* Mesma aproximação que menu-cinematico.css aplica na vitrine. */
    transform: scale(var(--zoom, 1));
    pointer-events: none;
}

/* Guias de terços: só durante o arrasto, para o assunto cair no quadrante
   certo. Fora do arrasto elas sumiriam de qualquer forma — o que o lojista
   precisa ver é a foto, não a grade. */
.banner-tela__guias {
    position: absolute;
    z-index: 3;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
    background-image:
        linear-gradient(to right, rgb(255 255 255 / 42%) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(255 255 255 / 42%) 1px, transparent 1px);
    background-size: 33.333% 100%, 100% 33.333%;
    background-position: 33.333% 0, 0 33.333%;
}
.banner-tela__quadro.esta-arrastando .banner-tela__guias { opacity: 1; }
/* Mesmas alturas de menu-cinematico.css: a arte inteira para antes do leito
   do nome, em vez de ficar metade escondida atras do degrade. */
/* `bottom: auto` e obrigatorio: com inset:0 a altura seria ignorada. */
.banner-tela__quadro[data-recorte="inteiro"] .banner-tela__arte { height: 62%; bottom: auto; }
.banner-tela--mobile .banner-tela__quadro[data-recorte="inteiro"] .banner-tela__arte { height: 58%; }
.banner-tela__quadro[data-recorte="inteiro"] .banner-tela__arte img { object-fit: contain; }

.banner-tela__marca {
    position: absolute;
    z-index: 2;
    inset: auto 0 0;
    padding: 2.4rem .6rem .5rem;
    background: linear-gradient(180deg, transparent 0%, rgb(16 15 12 / 58%) 40%, rgb(16 15 12 / 90%) 100%);
    pointer-events: none;
}
.banner-tela__nome {
    display: block;
    color: #fff;
    font-size: clamp(.78rem, 2vw, 1.1rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    text-shadow: 0 1px 6px rgb(0 0 0 / 45%);
}

.banner-tela__rodape { display: flex; align-items: center; justify-content: space-between; gap: .4rem; font-size: .7rem; color: var(--bs-secondary-color); }
.banner-tela__valor { font-variant-numeric: tabular-nums; }
.banner-tela__controles { display: flex; gap: .35rem; }
.banner-tela__controles .form-select { flex: 1 1 auto; }
.banner-tela__controles .btn { flex: 0 0 auto; }

.banner-tela__zoom { display: flex; align-items: center; gap: .45rem; margin: 0; color: var(--bs-secondary-color); font-size: .72rem; }
.banner-tela__zoom .form-range { flex: 1 1 auto; padding: 0; }
.banner-tela__zoom output { min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; }

/* Medidas ideais: numeros grandes e copiaveis valem mais que um paragrafo. */
.banner-medidas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; margin-bottom: .85rem; }
.banner-medidas__item { padding: .5rem .6rem; border: 1px dashed var(--bs-border-color); border-radius: .6rem; background: var(--bs-body-bg); }
.banner-medidas__rotulo { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); }
.banner-medidas__valor { display: block; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.banner-medidas__nota { display: block; font-size: .68rem; color: var(--bs-secondary-color); }

.delivery-upload-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .55rem; }
.delivery-upload-previa { display: grid; gap: .25rem; margin: 0; }
.delivery-upload-previa img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .45rem; background: #171513; }
.delivery-upload-previa figcaption { overflow: hidden; font-size: .68rem; color: var(--bs-secondary-color); text-overflow: ellipsis; white-space: nowrap; }
.banner-adicionar { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .7rem; align-items: center; min-height: 3.6rem; padding: .65rem .75rem; border: 1px dashed color-mix(in srgb, var(--bs-primary) 60%, var(--bs-border-color)); border-radius: .7rem; color: var(--bs-body-color); cursor: pointer; }
.banner-adicionar:hover { border-style: solid; background: rgba(var(--bs-primary-rgb), .06); }
.banner-adicionar > span { grid-row: span 2; display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 50%; background: var(--bs-primary); color: var(--on-primary); }
.banner-adicionar strong { align-self: end; font-size: .86rem; }
.banner-adicionar small { align-self: start; color: var(--bs-secondary-color); font-size: .7rem; }

@media (max-width: 575.98px) {
    .banner-editor__topo { grid-template-columns: 2.5rem auto minmax(0, 1fr) auto; }
    .banner-editor__principal { grid-column: 3; justify-self: start; }
    .banner-editor__ordem { grid-column: 4; grid-row: 1 / span 2; }
    .banner-editor__seta { display: none; }
    .banner-editor__medida { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .banner-editor__telas { grid-template-columns: 1fr; justify-items: center; }
    .banner-tela { width: 100%; }
    .banner-tela--mobile { width: min(100%, 220px); }
}

/* Editor manual da foto do produto. */
.produto-recorte-quadro{display:flex;align-items:center;justify-content:center;width:min(100%,320px);aspect-ratio:1/1;margin-inline:auto;padding:0!important;background:var(--bs-tertiary-bg);cursor:grab;touch-action:none;user-select:none;transition:aspect-ratio .2s ease,border-color .2s ease}.produto-recorte-quadro.is-paisagem{aspect-ratio:4/3}.produto-recorte-quadro:focus-visible{outline:3px solid rgba(var(--bs-primary-rgb),.35);outline-offset:2px}.produto-recorte-quadro.esta-arrastando{cursor:grabbing;border-color:var(--bs-primary)!important}.produto-recorte-quadro img{transform-origin:center;will-change:transform;pointer-events:none}.produto-recorte-guias{position:absolute;z-index:3;inset:0;opacity:0;pointer-events:none;background-image:linear-gradient(to right,transparent 33.1%,rgba(255,255,255,.62) 33.3%,transparent 33.5%,transparent 66.4%,rgba(255,255,255,.62) 66.6%,transparent 66.8%),linear-gradient(to bottom,transparent 33.1%,rgba(255,255,255,.62) 33.3%,transparent 33.5%,transparent 66.4%,rgba(255,255,255,.62) 66.6%,transparent 66.8%);transition:opacity .15s ease}.produto-recorte-quadro.esta-arrastando .produto-recorte-guias{opacity:1}.produto-recorte-controles{margin-top:.65rem}.produto-recorte-modos{display:flex;gap:.3rem;margin-bottom:.65rem;padding:.25rem;border-radius:.55rem;background:var(--bs-tertiary-bg)}.produto-recorte-modos button{flex:1;padding:.4rem;border:0;border-radius:.4rem;color:var(--bs-secondary-color);background:transparent;font-size:.72rem;font-weight:700}.produto-recorte-modos button.is-active{color:var(--bs-primary-text-emphasis);background:var(--bs-body-bg);box-shadow:0 1px 4px rgba(0,0,0,.1)}.produto-recorte-zoom{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;font-weight:700}.produto-recorte-zoom output{color:var(--bs-primary)}.produto-recorte-rodape{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.produto-recorte-rodape small{color:var(--bs-secondary-color);font-size:.7rem}.produto-recorte-rodape>span{display:flex;gap:.3rem;flex-shrink:0}.produto-recorte-bloco{max-width:100%}
@media(max-width:575.98px){.produto-recorte-rodape{align-items:flex-start;flex-direction:column}.produto-recorte-rodape>span{width:100%}.produto-recorte-rodape .btn{flex:1}}
/* Escolha deliberada entre cadastro completo e cadastro em lote. */
.tipo-cadastro-modal { border: 0; border-radius: 18px; box-shadow: 0 24px 70px rgba(32, 24, 17, .18); }
.tipo-cadastro-kicker { display: block; margin-bottom: .3rem; color: var(--bs-primary); font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.tipo-cadastro-grid { display: grid; gap: .75rem; padding-top: 1.25rem; }
.tipo-cadastro-opcao { width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: 1rem; border: 1px solid var(--bs-border-color); border-radius: 14px; background: var(--bs-body-bg); color: var(--bs-body-color); text-align: left; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.tipo-cadastro-opcao:hover, .tipo-cadastro-opcao:focus-visible { border-color: var(--bs-primary); transform: translateY(-1px); box-shadow: 0 9px 24px rgba(32, 24, 17, .09); outline: 0; }
.tipo-cadastro-opcao__icone { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--bs-primary) 12%, white); color: var(--bs-primary); font-size: 1.35rem; }
.tipo-cadastro-opcao--lote .tipo-cadastro-opcao__icone { background: #eef7f1; color: #26734d; }
.tipo-cadastro-opcao strong, .tipo-cadastro-opcao small { display: block; }
.tipo-cadastro-opcao strong { margin-bottom: .18rem; font-size: 1rem; }
.tipo-cadastro-opcao small { color: var(--bs-secondary-color); line-height: 1.35; }
.reg-painel--lote { width: min(760px, 96vw) !important; }
.cadastro-lote-card--painel { margin: 0; box-shadow: none; }
@media (max-width: 575.98px) {
    .tipo-cadastro-opcao { grid-template-columns: 42px minmax(0, 1fr); }
    .tipo-cadastro-opcao > .bi-arrow-right { display: none; }
    .tipo-cadastro-opcao__icone { width: 42px; height: 42px; }
    .reg-painel--lote { width: 100vw !important; }
}


/* ==========================================================================
   Conta do usuário — avatar do topo e foto do perfil (portado do PDV)
   ========================================================================== */
.user-avatar {
    --avatar: 38px;
    flex: 0 0 auto; display: inline-grid; place-items: center; overflow: hidden;
    width: var(--avatar); height: var(--avatar); border-radius: 50%;
    background: var(--bs-primary); color: var(--on-primary, #2a1505);
    font-weight: 700; font-size: calc(var(--avatar) * .42); line-height: 1;
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 3px rgba(var(--bs-primary-rgb), .25);
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-avatar--sm { --avatar: 28px; box-shadow: none; }
.user-avatar--lg { --avatar: 44px; }
.user-avatar--xl { --avatar: 112px; box-shadow: 0 0 0 4px var(--bs-body-bg), 0 0 0 6px rgba(var(--bs-primary-rgb), .3); }

.user-menu { border-radius: var(--radius-md); min-width: 240px; padding-top: 0; overflow: hidden; }
.user-menu-head {
    display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem;
    background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color);
}
.user-menu .dropdown-item { font-size: .9rem; }

/* Foto do perfil — Configurações → Perfil → Minha conta */
.cfg-foto {
    display: flex; align-items: center; gap: var(--space-4);
    padding-bottom: var(--space-4); margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--bs-border-color);
}
.cfg-foto-alvo {
    position: relative; flex: 0 0 auto; cursor: pointer; border-radius: 50%; margin: 0;
    transition: transform var(--dur-base) var(--ease-out);
}
.cfg-foto-alvo:hover, .cfg-foto-alvo.is-over { transform: scale(1.03); }
.cfg-foto-alvo.is-over .user-avatar { box-shadow: 0 0 0 4px var(--bs-body-bg), 0 0 0 7px var(--bs-primary); }
.cfg-foto-cam {
    position: absolute; right: 2px; bottom: 2px; display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--bs-body-bg); color: var(--bs-primary);
    border: 1px solid var(--bs-border-color); box-shadow: var(--shadow-sm);
}
.cfg-foto-info { min-width: 0; }
.cfg-foto .user-avatar--xl { --avatar: 88px; }
.cfg-foto:focus-within .cfg-foto-alvo { outline: 2px solid var(--bs-primary); outline-offset: 4px; }
@media (max-width: 420px) {
    .cfg-foto { flex-direction: column; text-align: center; }
    .cfg-foto-info .d-flex { justify-content: center; }
}

/* ==========================================================================
   Registro de atividades — a "fita" do caixa
   A lista imita a bobina da impressora: hora em fonte de máquina na margem,
   um trilho contínuo e o dia marcado como um picote. É o único ornamento da
   tela; o resto segue os cartões e filtros do sistema.
   ========================================================================== */
.log-shell { --log-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; display: grid; gap: var(--space-3); max-width: 64rem; }
.log-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.log-head h2 { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.log-head p { margin: .2rem 0 0; color: var(--bs-secondary-color); font-size: .82rem; max-width: 40rem; }

.log-atencao {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem;
    padding: .85rem 1rem; border: 1px solid rgba(var(--bs-danger-rgb), .28); border-radius: var(--radius-lg);
    background: linear-gradient(110deg, rgba(var(--bs-danger-rgb), .1), rgba(var(--bs-danger-rgb), .025));
}
.log-atencao__icone { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .8rem; background: var(--bs-danger); color: #fff; }
.log-atencao strong { display: block; font-size: .88rem; }
.log-atencao p { margin: .12rem 0 0; color: var(--bs-secondary-color); font-size: .78rem; line-height: 1.4; }
.log-atencao > a, .log-atencao__ativo { white-space: nowrap; font-size: .8rem; font-weight: 700; text-decoration: none; }
.log-atencao__ativo { color: var(--bs-danger-text-emphasis); }

.log-filtros { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.log-periodos { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.log-chip {
    padding: .3rem .75rem; border-radius: var(--radius-pill); border: 1px solid var(--bs-border-color);
    font-size: .8rem; font-weight: 600; color: var(--bs-secondary-color); text-decoration: none;
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.log-chip:hover { color: var(--bs-primary); border-color: rgba(var(--bs-primary-rgb), .45); }
.log-chip.is-on { background: var(--bs-primary); border-color: var(--bs-primary); color: var(--on-primary, #2a1505); }
.log-chip-sep { width: 1px; height: 1.4rem; background: var(--bs-border-color); margin-inline: .2rem; }
.log-data { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--bs-secondary-color); }
.log-data input { width: auto; font-family: var(--log-mono); font-size: .8rem; }

.log-linha { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 14rem) auto auto; }
.log-busca { position: relative; }
.log-busca > i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); pointer-events: none; }
.log-busca input { padding-left: 2.3rem; }
.log-mais { white-space: nowrap; }
.log-extras {
    display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    padding-top: var(--space-3); border-top: 1px dashed var(--bs-border-color);
}
.log-extras label { display: grid; gap: .25rem; min-width: 0; }
.log-extras label > span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); }

.log-resumo {
    display: grid; grid-template-columns: repeat(3, minmax(7.5rem, auto)) minmax(0, 1fr) auto; align-items: center; gap: .6rem;
    font-size: .82rem; color: var(--bs-secondary-color);
}
.log-kpi { display: flex; align-items: center; gap: .55rem; min-height: 3.2rem; padding: .55rem .7rem; border: 1px solid var(--bs-border-color); border-radius: .8rem; background: var(--bs-body-bg); color: inherit; text-decoration: none; }
.log-kpi > i { color: var(--bs-primary); font-size: 1.1rem; }
.log-kpi > span { display: grid; line-height: 1.05; }
.log-kpi strong { color: var(--bs-body-color); font-family: var(--log-mono); font-size: .95rem; font-weight: 700; }
.log-kpi small { margin-top: .22rem; color: var(--bs-secondary-color); font-size: .68rem; }
.log-kpi--falha { border-color: rgba(var(--bs-danger-rgb), .25); background: rgba(var(--bs-danger-rgb), .045); }
.log-kpi--falha > i, .log-kpi--falha strong { color: var(--bs-danger-text-emphasis); }
.log-resumo-periodo { justify-self: end; font-family: var(--log-mono); font-size: .76rem; white-space: nowrap; }
.log-limpar { margin-left: auto; font-size: .8rem; text-decoration: none; }

.log-vazio { text-align: center; padding: var(--space-8) var(--space-4); }
.log-vazio > i { font-size: 2rem; color: var(--bs-secondary-color); display: block; margin-bottom: .5rem; }

/* Fita */
.log-fita {
    --trilho: 4.6rem;
    position: relative; list-style: none; margin: 0; padding: .25rem 0 .75rem;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.log-fita::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--trilho) + .95rem);
    border-left: 2px dotted var(--bs-border-color);
}
.log-dia { position: relative; margin: .9rem 0 .35rem; text-align: center; }
.log-dia::before {
    content: ""; position: absolute; inset: 50% 0 auto; border-top: 1px dashed var(--bs-border-color);
}
.log-dia span {
    position: relative; padding: .2rem .8rem; background: var(--bs-body-bg);
    font-family: var(--log-mono); font-size: .7rem; font-weight: 600; letter-spacing: .14em;
    color: var(--bs-secondary-color);
}
.log-item {
    --tom: var(--bs-secondary-color);
    position: relative; display: grid; grid-template-columns: var(--trilho) 1.9rem minmax(0, 1fr);
    align-items: start; gap: 0; padding: .1rem .75rem .1rem 0;
}
.log-hora {
    padding-top: .72rem; text-align: right; padding-right: .7rem;
    font-family: var(--log-mono); font-size: .82rem; font-weight: 600; color: var(--bs-body-color);
    font-variant-numeric: tabular-nums;
}
.log-hora small { color: var(--bs-secondary-color); font-weight: 500; font-size: .7rem; }
.log-marca {
    position: relative; z-index: 1; display: grid; place-items: center; margin-top: .55rem;
    width: 1.9rem; height: 1.9rem; border-radius: 50%; font-size: .85rem;
    background: var(--bs-body-bg); color: var(--tom);
    border: 1.5px solid color-mix(in srgb, var(--tom) 45%, transparent);
}
.log-t-criacao      { --tom: var(--bs-success); }
.log-t-edicao       { --tom: #a64f08; }
[data-bs-theme="dark"] .log-t-edicao { --tom: var(--bs-primary); }
.log-t-exclusao     { --tom: var(--bs-danger); }
.log-t-cancelamento { --tom: #c47a00; }
.log-t-venda        { --tom: #0f8a7e; }
.log-t-financeiro   { --tom: #2f7d32; }
.log-t-caixa        { --tom: #6a4fc2; }
.log-t-acesso       { --tom: var(--bs-secondary-color); }
.log-t-seguranca    { --tom: var(--bs-danger); }
.log-t-exportacao   { --tom: var(--bs-info); }
[data-bs-theme="dark"] .log-t-cancelamento { --tom: #f0b44a; }
[data-bs-theme="dark"] .log-t-venda        { --tom: #4fd1c1; }
[data-bs-theme="dark"] .log-t-financeiro   { --tom: #7ccf80; }
[data-bs-theme="dark"] .log-t-caixa        { --tom: #a893f0; }
.log-item.is-falha .log-marca { background: var(--bs-danger); color: #fff; border-color: var(--bs-danger); }

.log-corpo { min-width: 0; margin: .25rem 0 .25rem .6rem; border-radius: var(--radius-md); }
.log-corpo > summary {
    display: flex; align-items: flex-start; gap: .6rem; padding: .45rem .6rem;
    list-style: none; cursor: pointer; border-radius: var(--radius-md);
    transition: background-color var(--dur-fast) ease;
}
.log-corpo > summary::-webkit-details-marker { display: none; }
.log-corpo > summary:hover { background: var(--bs-tertiary-bg); }
.log-corpo[open] { background: var(--bs-tertiary-bg); }
.log-corpo > summary .user-avatar { margin-top: .1rem; font-size: .75rem; }
.log-texto { display: grid; gap: .1rem; min-width: 0; }
.log-titulo { font-size: .88rem; line-height: 1.35; }
.log-titulo strong { font-weight: 700; }
.log-selo-falha {
    margin-left: .35rem; padding: .05rem .45rem; border-radius: var(--radius-pill);
    background: rgba(var(--bs-danger-rgb), .12); color: var(--bs-danger-text-emphasis);
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; vertical-align: .1em;
}
.log-desc { font-size: .8rem; color: var(--bs-secondary-color); overflow-wrap: anywhere; }
.log-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .72rem; color: var(--bs-secondary-color); }
.log-meta > span + span::before { content: "·"; margin-right: .75rem; opacity: .6; }
.log-mono { font-family: var(--log-mono); font-size: .92em; }

.log-detalhe { padding: .2rem .8rem .8rem 2.9rem; animation: log-abrir var(--dur-base) var(--ease-out); }
@keyframes log-abrir { from { opacity: 0; transform: translateY(-3px); } }
.log-erro-operacional { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; margin: .1rem 0 .7rem; padding: .65rem .75rem; border-left: 3px solid var(--bs-danger); border-radius: .5rem; background: rgba(var(--bs-danger-rgb), .08); }
.log-erro-operacional > i { color: var(--bs-danger-text-emphasis); }
.log-erro-operacional > span { display: grid; gap: .1rem; }
.log-erro-operacional strong { font-size: .76rem; }
.log-erro-operacional small { color: var(--bs-secondary-color); font-size: .72rem; overflow-wrap: anywhere; }
.log-erro-operacional a { white-space: nowrap; font-size: .74rem; font-weight: 700; text-decoration: none; }
.log-detalhe dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .5rem 1rem; margin: 0 0 .6rem; }
.log-detalhe dt { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--bs-secondary-color); }
.log-detalhe dd { margin: 0; font-size: .8rem; overflow-wrap: anywhere; }
.log-dl-largo { grid-column: 1 / -1; }
.log-dl-largo dd { color: var(--bs-secondary-color); font-size: .74rem; }
.log-campos-titulo { margin: 0 0 .3rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--bs-secondary-color); }
.log-campos-titulo small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.log-campos { width: 100%; font-size: .78rem; border-collapse: collapse; background: var(--bs-body-bg); border-radius: var(--radius-sm); overflow: hidden; }
.log-campos th, .log-campos td { padding: .3rem .6rem; border-bottom: 1px solid var(--bs-border-color); vertical-align: top; }
.log-campos tr:last-child th, .log-campos tr:last-child td { border-bottom: 0; }
.log-campos th { width: 11rem; font-family: var(--log-mono); font-weight: 500; color: var(--bs-secondary-color); }
.log-campos td { overflow-wrap: anywhere; }

@media (max-width: 767.98px) {
    .log-atencao { grid-template-columns: auto minmax(0, 1fr); }
    .log-atencao > a, .log-atencao__ativo { grid-column: 1 / -1; width: 100%; padding-left: 3.35rem; }
    .log-linha { grid-template-columns: 1fr 1fr; }
    .log-busca { grid-column: 1 / -1; }
    .log-fita { --trilho: 3.1rem; }
    .log-hora { font-size: .74rem; padding-right: .45rem; }
    .log-hora small { display: none; }
    .log-detalhe { padding-left: .8rem; }
    .log-campos th { width: 7.5rem; }
    .log-resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .log-resumo-periodo { grid-column: 1 / -1; justify-self: start; }
    .log-limpar { grid-column: 1 / -1; margin-left: 0; }
    .log-erro-operacional { grid-template-columns: auto minmax(0, 1fr); }
    .log-erro-operacional a { grid-column: 1 / -1; padding-left: 1.65rem; }
}
@media (max-width: 420px) {
    .log-linha { grid-template-columns: 1fr; }
    .log-data { flex: 1 1 45%; }
    .log-data input { width: 100%; }
    .log-resumo { grid-template-columns: 1fr; }
    .log-resumo-periodo, .log-limpar { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .log-detalhe, .cfg-foto-alvo { animation: none; transition: none; }
}

/* Menuxy: o master vê as operações do acesso assistido dentro do admin. */
.log-suporte-selo {
    display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .5rem; border-radius: var(--radius-pill);
    background: rgba(220, 53, 69, .12); color: var(--bs-danger-text-emphasis); font-size: .7rem; font-weight: 700;
}

/* =====================================================================
   DESATIVADO SEM EXCLUIR
   ---------------------------------------------------------------------
   O cadastro pausado continua na lista: perde a cor, ganha uma hachura
   fina (a "porta baixada" da loja) e vai para o fim. As ações seguem com
   cor normal, senão o botão Ativar some junto com o resto.
   ===================================================================== */
:root {
    --off-hachura: rgba(60, 50, 40, .055);
    --off-tinta: #6c665f;
    --off-borda: #cfc7bf;
}
[data-bs-theme="dark"] {
    --off-hachura: rgba(255, 255, 255, .045);
    --off-tinta: #a39d96;
    --off-borda: #4a4541;
}

.is-desativado {
    background-image: repeating-linear-gradient(135deg, transparent 0 9px, var(--off-hachura) 9px 10px);
}
.is-desativado .off-apagar,
.reg-linha.is-desativado .reg-fig,
.reg-linha.is-desativado .reg-corpo,
.reg-linha.is-desativado .reg-numeros,
.reg-linha.is-desativado .reg-preco,
.reg-linha.is-desativado .reg-estoque {
    filter: grayscale(1);
    opacity: .55;
}
/* O nome continua legível: é por ele que o lojista acha o que quer reativar. */
.is-desativado .reg-nome,
.is-desativado .off-nome { color: var(--off-tinta); text-decoration: line-through; text-decoration-color: var(--off-borda); text-decoration-thickness: 1px; }
.reg-linha.is-desativado .reg-corpo { opacity: .8; }
tr.is-desativado > td { background: transparent; color: var(--off-tinta); }
tr.is-desativado .badge { filter: grayscale(1); opacity: .6; }

.selo-desativado {
    display: inline-flex; align-items: center; gap: .25rem; vertical-align: middle;
    margin-left: .35rem; padding: .08rem .45rem;
    font: 700 .64rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
    color: var(--off-tinta); background: var(--bs-body-bg);
    border: 1px dashed var(--off-borda); border-radius: 4px;
}
.selo-desativado i { font-size: .72rem; }

.btn-situacao--ativar {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .6rem; font-weight: 700; border-radius: var(--radius-pill);
    color: var(--bs-success-text-emphasis); background: var(--bs-body-bg);
    border: 1px solid rgba(var(--bs-success-rgb), .45);
}
.btn-situacao--ativar:hover,
.btn-situacao--ativar:focus-visible { color: #fff; background: var(--bs-success); border-color: var(--bs-success); }

/* Todos · Ativos · Desativados */
.situacao-filtro {
    display: inline-flex; gap: .2rem; padding: .22rem; max-width: 100%; overflow-x: auto;
    background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: var(--radius-pill);
}
.situacao-filtro__opcao {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: .3rem .8rem;
    font-size: .82rem; font-weight: 700; white-space: nowrap; text-decoration: none;
    color: var(--bs-secondary-color); border-radius: var(--radius-pill);
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.situacao-filtro__opcao:hover { color: var(--bs-body-color); }
.situacao-filtro__opcao:focus-visible { outline: 2px solid var(--bs-primary-text-emphasis); outline-offset: 1px; }
.situacao-filtro__qtd {
    min-width: 1.5rem; padding: .02rem .4rem; text-align: center;
    font-size: .72rem; font-variant-numeric: tabular-nums;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--radius-pill);
}
.situacao-filtro__opcao[aria-current="page"] {
    color: var(--bs-body-color); background: var(--bs-body-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--bs-border-color);
}
.situacao-filtro__opcao[aria-current="page"] .situacao-filtro__qtd { color: var(--on-primary); background: var(--bs-primary); border-color: transparent; }
/* "Desativados" selecionado fica cinza e hachurado: a lista inteira é de pausados. */
.situacao-filtro__opcao--off[aria-current="page"] {
    background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--off-hachura) 5px 6px);
}
.situacao-filtro__opcao--off[aria-current="page"] .situacao-filtro__qtd { color: #fff; background: var(--off-tinta); }

.situacao-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: var(--space-3); }

/* Grupo de opcionais pausado: o card inteiro apaga, o cabeçalho de ações não. */
.card.is-desativado { border-top-color: var(--off-borda) !important; }
.card.is-desativado .card-header { background: transparent !important; }

/* Zonas de entrega dentro das Configurações */
.zona-lista { list-style: none; margin: 0; padding: 0; }
.zona-linha {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .75rem;
    padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color);
}
.zona-linha:last-child { border-bottom: 0; }
.zona-nome { font-weight: 600; overflow-wrap: anywhere; }
.zona-taxa { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zona-taxa--gratis { color: var(--bs-success-text-emphasis); }
.zona-acoes { display: flex; align-items: center; gap: .1rem; }
.zona-busca { max-width: 16rem; }
.zona-regra { display: grid; gap: .25rem; padding: .85rem 1rem; border: 1px solid var(--bs-border-color); border-radius: var(--radius-md); background: var(--bs-tertiary-bg); }
.zona-regra + .zona-regra { margin-top: .75rem; }
@media (max-width: 575.98px) {
    .zona-linha { grid-template-columns: minmax(0, 1fr) auto; }
    .zona-acoes { grid-column: 1 / -1; justify-content: flex-end; }
    .zona-busca { max-width: none; width: 100%; }
    .situacao-filtro { width: 100%; }
    .situacao-filtro__opcao { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 400px) {
    .situacao-filtro__opcao { gap: .3rem; padding: .3rem .5rem; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
    .situacao-filtro__opcao { transition: none; }
}

/* Mapas Leaflet (entrega): herdam a fonte e mantêm os controles legíveis no escuro. */
.leaflet-container { font-family: inherit; }
[data-bs-theme="dark"] .leaflet-control-layers, [data-bs-theme="dark"] .leaflet-bar a { color: #222; }

/* =====================================================================
   UNIDADE DE MEDIDA — tíquete de balança
   ---------------------------------------------------------------------
   Mostra o que o preço quer dizer na prática ("250 g ........ R$ 7,50").
   O pontilhado liga peso a preço como na etiqueta da balança; os números
   são tabulares para as vírgulas ficarem alinhadas.
   ===================================================================== */
.medida-exemplo {
    margin-top: .1rem; padding: .6rem .75rem .65rem;
    border: 1px dashed color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color));
    border-radius: var(--radius-sm);
    background: rgba(var(--bs-primary-rgb), .05);
    font-size: .78rem;
}
.medida-exemplo__titulo { display: flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--bs-primary-text-emphasis); margin-bottom: .35rem; }
.medida-exemplo__linhas { margin: 0; }
.medida-exemplo__linhas > div { display: flex; align-items: baseline; gap: .4rem; line-height: 1.55; }
.medida-exemplo__linhas dt { font-weight: 500; color: var(--bs-body-color); white-space: nowrap; }
.medida-exemplo__linhas dd { margin: 0; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.medida-exemplo__linhas > div::before { content: ''; order: 1; flex: 1 1 auto; border-bottom: 1px dotted var(--bs-secondary-color); opacity: .5; transform: translateY(-.25em); }
.medida-exemplo__linhas dd { order: 2; }
.medida-exemplo__dica { margin-top: .4rem; color: var(--bs-secondary-color); font-size: .72rem; }

/* Comanda: quantidade com unidade, atalhos de peso e a conta ao vivo. */
.qtd-medida .input-group-text { font-weight: 700; color: var(--bs-primary-text-emphasis); min-width: 2.6rem; justify-content: center; }
.qtd-medida input { font-weight: 700; font-variant-numeric: tabular-nums; }
.medida-atalhos { display: flex; flex-wrap: wrap; gap: .35rem; margin: -.35rem 0 .75rem; }
.medida-atalhos button {
    padding: .2rem .6rem; border: 1px solid var(--bs-border-color); border-radius: var(--radius-pill);
    background: var(--bs-body-bg); color: var(--bs-body-color); font-size: .75rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.medida-atalhos button:hover { border-color: var(--bs-primary); color: var(--bs-primary-text-emphasis); }
.medida-atalhos button[aria-pressed="true"] { background: var(--bs-primary); border-color: var(--bs-primary); color: var(--on-primary); }
.medida-atalhos button:focus-visible { outline: 2px solid var(--bs-primary-text-emphasis); outline-offset: 2px; }
.medida-conta { margin: -.35rem 0 .75rem; }
.medida-conta.is-erro { border-color: rgba(var(--bs-danger-rgb), .5); background: rgba(var(--bs-danger-rgb), .06); }
.medida-conta.is-erro .medida-exemplo__titulo { color: var(--bs-danger-text-emphasis); }
.medida-conta__total dd { font-size: .95rem; color: var(--bs-primary-text-emphasis); }
.qtd-cell small { display: block; font-weight: 500; color: var(--bs-secondary-color); font-size: .7rem; }

/* ---------------------------------------------------------------------------
   Quantidade com − / + (caixa e mesas)
   O número fica numa caixa de verdade, com borda e cursor de texto: clicar
   nele já seleciona o valor para digitar por cima. Os botões somam o passo
   configurado no produto.
   ------------------------------------------------------------------------ */
.qtd-editavel { display: flex; align-items: center; justify-content: center; gap: .9rem; }
.qtd-editavel__botao {
    width: 52px; height: 52px; flex: 0 0 auto;
    display: grid; place-items: center;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-size: 1.35rem;
    transition: transform .12s ease, background-color .12s ease;
}
.qtd-editavel__botao:hover { background: var(--bs-secondary-bg); }
.qtd-editavel__botao:active { transform: scale(.92); }
.qtd-editavel__botao:focus-visible { outline: 0; box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .3); }
.qtd-editavel__campo {
    display: flex; align-items: baseline; justify-content: center; gap: .35rem;
    min-width: 8.5rem; margin: 0; padding: .35rem .9rem;
    border: 2px solid color-mix(in srgb, var(--bs-primary) 35%, var(--bs-border-color));
    border-radius: 14px;
    background: var(--bs-body-bg);
    cursor: text;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.qtd-editavel__campo:hover { border-color: var(--bs-primary); }
.qtd-editavel__campo:focus-within { border-color: var(--bs-primary); box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .22); }
.qtd-editavel__campo input {
    width: 7.2rem; min-width: 0; padding: 0;
    border: 0; outline: 0; background: transparent;
    color: var(--bs-body-color);
    font-size: 2rem; font-weight: 800; line-height: 1.15; text-align: center;
    font-variant-numeric: tabular-nums;
}
.qtd-editavel__campo span { color: var(--bs-secondary-color); font-weight: 700; font-size: 1rem; }
.qtd-editavel__dica { margin-top: .45rem; color: var(--bs-secondary-color); font-size: .78rem; }
@media (max-width: 380px) {
    .qtd-editavel { gap: .5rem; }
    .qtd-editavel__campo { min-width: 7rem; }
    .qtd-editavel__campo { padding-inline: .6rem; }
    .qtd-editavel__campo input { width: 6.4rem; font-size: 1.5rem; }
    .qtd-editavel__botao { width: 46px; height: 46px; }
}

/* =====================================================================
   COBRANÇA DA MENSALIDADE
   Faixa do topo, carnê das mensalidades (aba Assinatura, página de
   pagamento e tela de planos) e a aba Cobrança do Painel Master.
   A cor da marca preenche com texto escuro (--on-primary); texto colorido
   sobre fundo claro usa a versão "emphasis", que passa no contraste.
   ===================================================================== */
.cob-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }

/* ---- Faixa do topo: vermelha no atraso, âmbar antes de vencer ---- */
.faixa-cobranca {
    display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
    padding: .7rem clamp(1rem, 3vw, 3rem);
    color: #fff; background: linear-gradient(90deg, #a51d2a, #c42b38);
    border-bottom: 1px solid rgba(0, 0, 0, .18);
}
.faixa-cobranca[hidden] { display: none; }
.faixa-cobranca__icone { font-size: 1.35rem; flex: 0 0 auto; }
.faixa-cobranca__texto { margin: 0; flex: 1 1 18rem; font-size: .86rem; line-height: 1.4; }
.faixa-cobranca__texto strong { display: block; font-size: .94rem; }
.faixa-cobranca__texto span { opacity: .94; }
.faixa-cobranca__btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem 1rem; border-radius: var(--radius-pill);
    background: #fff; color: #a51d2a; font-weight: 800; font-size: .85rem; text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.faixa-cobranca__btn:hover, .faixa-cobranca__btn:focus-visible { color: #7f1420; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.faixa-cobranca__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.faixa-cobranca__nota { font-size: .8rem; font-weight: 700; opacity: .92; }
.faixa-cobranca__fechar {
    flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; margin-left: -.35rem;
    border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .8;
    transition: background-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.faixa-cobranca__fechar:hover { opacity: 1; background: rgba(255, 255, 255, .18); }
.faixa-cobranca__fechar:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 1px; }
.faixa-cobranca--lembrete { color: #3d2600; background: linear-gradient(90deg, var(--brand-ambar), #fdc14d); border-bottom-color: rgba(0, 0, 0, .1); }
.faixa-cobranca--lembrete .faixa-cobranca__btn { background: #3d2600; color: #fff; }
.faixa-cobranca--lembrete .faixa-cobranca__btn:hover, .faixa-cobranca--lembrete .faixa-cobranca__btn:focus-visible { color: #fff; background: #1f1300; }
.faixa-cobranca--lembrete .faixa-cobranca__btn:focus-visible { outline-color: #3d2600; }
.faixa-cobranca--lembrete .faixa-cobranca__fechar:hover { background: rgba(0, 0, 0, .1); }
@media print { .faixa-cobranca { display: none !important; } }

/* ---- Carnê: cada mensalidade é uma folha destacável ---- */
.carne-lista {
    --carne-furo: var(--bs-tertiary-bg);
    display: grid; gap: .75rem; padding: .75rem;
    background: var(--carne-furo); border-radius: var(--radius-lg);
}
.carne {
    --carne-rgb: var(--bs-primary-rgb); --carne-tinta: var(--bs-primary-text-emphasis);
    position: relative; display: grid; grid-template-columns: 5.25rem minmax(0, 1fr);
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-md); box-shadow: var(--shadow-xs); overflow: hidden;
}
.carne--atrasada { --carne-rgb: var(--bs-danger-rgb); --carne-tinta: var(--bs-danger-text-emphasis); border-color: rgba(var(--bs-danger-rgb), .45); }
.carne--vence_hoje { --carne-rgb: 217, 119, 6; --carne-tinta: #92400e; border-color: rgba(217, 119, 6, .45); }
.carne--paga { --carne-rgb: var(--bs-success-rgb); --carne-tinta: var(--bs-success-text-emphasis); }
.carne--cancelada { --carne-rgb: var(--bs-secondary-rgb); --carne-tinta: var(--bs-secondary-color); opacity: .62; }
.carne--destaque { border-width: 2px; border-color: rgba(var(--carne-rgb), .6); box-shadow: var(--shadow-md); }
[data-bs-theme="dark"] .carne--vence_hoje { --carne-tinta: #fbbf24; }

.carne__canhoto {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .1rem; padding: .9rem .35rem;
    color: var(--carne-tinta); background: rgba(var(--carne-rgb), .1);
    border-right: 2px dashed rgba(var(--carne-rgb), .4);
}
/* Os dois furos do picote, recortados na cor do fundo da lista. */
.carne__canhoto::before, .carne__canhoto::after {
    content: ''; position: absolute; right: -9px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--carne-furo, var(--bs-tertiary-bg)); border: 1px solid var(--bs-border-color);
}
.carne__canhoto::before { top: -9px; }
.carne__canhoto::after { bottom: -9px; }
.carne__mes { font-size: 1.3rem; font-weight: 800; letter-spacing: .06em; line-height: 1; }
.carne__ano { font-size: .72rem; font-weight: 600; opacity: .85; font-variant-numeric: tabular-nums; }
.carne__parcela { margin-top: .35rem; padding: .1rem .45rem; border-radius: var(--radius-pill); background: rgba(var(--carne-rgb), .16); font-size: .68rem; font-weight: 700; line-height: 1.4; }
.carne__corpo { display: flex; flex-direction: column; gap: .35rem; min-width: 0; padding: .85rem 1rem .9rem 1.1rem; }
.carne__campos { display: flex; justify-content: space-between; gap: 1rem; }
.carne__rotulo { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--bs-secondary-color); }
.carne__valor { font-size: 1.25rem; letter-spacing: -.02em; }
.carne--destaque .carne__valor { font-size: 1.55rem; }
.carne--cancelada .carne__valor { text-decoration: line-through; }
.carne__desc { margin: 0; font-size: .8rem; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carne__rodape { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; }
.carne__situacao { font-size: .78rem; font-weight: 700; color: var(--carne-tinta); }
.carne--aberta .carne__situacao { color: var(--bs-secondary-color); }
.carne__meio { font-size: .76rem; color: var(--bs-secondary-color); }
.carne__acoes { margin-top: .35rem; }
.carne__pagar { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }

/* Carimbo de "pago": borda dupla, girado, como o do caixa do banco. */
.carne__carimbo {
    position: absolute; bottom: .75rem; right: 1.1rem; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    padding: .2rem .75rem .25rem; border: 3px double currentColor; border-radius: .45rem;
    color: rgba(var(--bs-success-rgb), .8);
    font-size: 1.15rem; font-weight: 800; line-height: 1; letter-spacing: .22em; text-transform: uppercase;
    transform: rotate(-11deg); pointer-events: none;
}
.carne__carimbo small { margin-top: .15rem; font-size: .6rem; letter-spacing: .12em; }
.carne--carimbar .carne__carimbo { animation: carne-carimbo 520ms var(--ease-out) 200ms both; }
@keyframes carne-carimbo {
    0% { opacity: 0; transform: rotate(-11deg) scale(1.9); }
    70% { opacity: 1; transform: rotate(-11deg) scale(.94); }
    100% { opacity: 1; transform: rotate(-11deg) scale(1); }
}
.carne--paga .carne__rodape { padding-right: 6.5rem; }

@media (max-width: 575.98px) {
    .carne { grid-template-columns: 4.1rem minmax(0, 1fr); }
    .carne__mes { font-size: 1.05rem; }
    .carne__corpo { padding: .75rem .8rem .8rem .95rem; }
    .carne__campos { flex-direction: column; gap: .35rem; }
    .carne__campos .text-end { text-align: left !important; }
    .carne__carimbo { top: .9rem; bottom: auto; right: .6rem; font-size: .9rem; }
    .carne--paga .carne__rodape { padding-right: 0; }
    .carne__acoes .carne__pagar { width: 100%; }
}

/* ---- Aba Assinatura ---- */
.plano-resumo {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 1.1rem 2rem; align-items: center;
    margin-bottom: 1.25rem; padding: 1.35rem 1.5rem;
    border: 1px solid var(--bs-border-color); border-radius: var(--radius-xl);
    background: linear-gradient(120deg, rgba(var(--bs-primary-rgb), .09), transparent 55%), var(--bs-body-bg);
    box-shadow: var(--shadow-sm);
}
.plano-resumo__eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bs-secondary-color); }
.plano-resumo__nome { margin: .1rem 0 .55rem; font-size: clamp(1.45rem, 2.8vw, 2rem); font-weight: 800; letter-spacing: -.03em; }
.plano-selo { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: var(--radius-pill); font-size: .78rem; font-weight: 700; }
.plano-selo.is-ok { color: var(--bs-success-text-emphasis); background: var(--bs-success-bg-subtle); }
.plano-selo.is-perigo { color: var(--bs-danger-text-emphasis); background: var(--bs-danger-bg-subtle); }
.plano-selo.is-info { color: var(--bs-primary-text-emphasis); background: rgba(var(--bs-primary-rgb), .14); }
.plano-selo.is-neutro { color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); }
.plano-resumo__fatos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.plano-resumo__fatos > div { padding-left: 1rem; border-left: 1px solid var(--bs-border-color); }
.plano-resumo__fatos dt { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); }
.plano-resumo__fatos dd { margin: .2rem 0 0; font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.plano-resumo__fatos dd small { display: block; font-size: .76rem; font-weight: 500; color: var(--bs-secondary-color); }
.plano-trilho { grid-column: 1 / -1; display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.plano-trilho__marca { flex: 1 1 0; height: 8px; border-radius: var(--radius-pill); background: var(--bs-border-color); }
.plano-trilho__marca.is-paga { background: var(--bs-success); }
.plano-trilho__marca.is-atrasada { background: var(--bs-danger); }
.plano-trilho__marca.is-vence_hoje { background: #d97706; }
.plano-trilho__marca.is-aberta { background: rgba(var(--bs-primary-rgb), .35); }
.plano-trilho__marca.is-cancelada { background: repeating-linear-gradient(45deg, var(--bs-border-color) 0 3px, transparent 3px 6px); }
.plano-filtro { display: inline-flex; gap: .25rem; padding: .25rem; border: 1px solid var(--bs-border-color); border-radius: var(--radius-pill); }
.plano-filtro a { padding: .3rem .8rem; border-radius: var(--radius-pill); color: var(--bs-secondary-color); font-size: .8rem; font-weight: 700; text-decoration: none; }
.plano-filtro a span { margin-left: .2rem; font-variant-numeric: tabular-nums; opacity: .75; }
.plano-filtro a:hover { color: var(--bs-primary-text-emphasis); }
.plano-filtro a.is-ativo { background: var(--bs-primary); color: var(--on-primary); }
.plano-vazio { padding: 2.25rem 1rem; text-align: center; color: var(--bs-secondary-color); }
.plano-vazio i { display: block; margin-bottom: .5rem; font-size: 2rem; color: var(--bs-success); }
.plano-vazio strong { display: block; color: var(--bs-body-color); }
.plano-vazio p { margin: .35rem auto 0; max-width: 28rem; font-size: .85rem; }
.plano-historico { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.plano-historico li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .55rem; padding: .55rem 0; }
.plano-historico li + li { border-top: 1px dashed var(--bs-border-color); }
.plano-historico i { font-size: 1.05rem; line-height: 1.3; color: var(--bs-secondary-color); }
.plano-historico li.is-ok i { color: var(--bs-success); }
.plano-historico li.is-perigo i { color: var(--bs-danger); }
.plano-historico li.is-alerta i { color: #d97706; }
.plano-historico li.is-info i { color: var(--bs-primary-text-emphasis); }
.plano-historico p { margin: 0; font-size: .8rem; line-height: 1.45; }
.plano-historico small { color: var(--bs-secondary-color); font-size: .7rem; }
@media (max-width: 991.98px) { .plano-resumo { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) {
    .plano-resumo { padding: 1.1rem; }
    .plano-resumo__fatos { grid-template-columns: 1fr 1fr; }
    .plano-resumo__fatos > div:last-child { grid-column: 1 / -1; }
    .plano-filtro { display: flex; width: 100%; }
    .plano-filtro a { flex: 1 1 0; text-align: center; padding-inline: .4rem; }
}

/* ---- Página pública de pagamento ---- */
.pagar-shell {
    min-height: 100svh; display: grid; justify-items: center; align-content: start;
    padding: clamp(1.25rem, 6vw, 4rem) 1rem 3rem;
    background: radial-gradient(circle at 15% 0%, rgba(var(--bs-primary-rgb), .16), transparent 45%), var(--bs-tertiary-bg);
}
.pagar-wrap { width: min(480px, 100%); }
.pagar-wrap .carne { --carne-furo: var(--bs-tertiary-bg); margin-bottom: 1rem; }
.pagar-topo { display: flex; align-items: center; gap: .6rem; margin-bottom: 2.2rem; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bs-secondary-color); }
.pagar-topo img { border-radius: var(--radius-sm); object-fit: contain; }
.pagar-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bs-primary-text-emphasis); }
.pagar-titulo { margin: .15rem 0 1.25rem; font-size: clamp(1.6rem, 6vw, 2.25rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; overflow-wrap: anywhere; }
.pagar-aviso {
    display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 1rem; padding: .8rem 1rem;
    border-radius: var(--radius-md); border: 1px solid rgba(var(--bs-primary-rgb), .3);
    background: rgba(var(--bs-primary-rgb), .08); font-size: .86rem;
}
.pagar-aviso > i, .pagar-aviso > .spinner-border { flex: 0 0 auto; margin-top: .15rem; }
.pagar-aviso--ok { border-color: rgba(var(--bs-success-rgb), .35); background: rgba(var(--bs-success-rgb), .1); }
.pagar-aviso--ok > i { color: var(--bs-success); }
.pagar-aviso--erro { border-color: rgba(var(--bs-danger-rgb), .35); background: rgba(var(--bs-danger-rgb), .08); }
.pagar-aviso--erro > i { color: var(--bs-danger); }
.pagar-garantias { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1rem; margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: .76rem; color: var(--bs-secondary-color); }
.pagar-garantias i { color: var(--bs-primary-text-emphasis); }
.pagar-nota { font-size: .86rem; color: var(--bs-secondary-color); }
.pagar-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; padding-top: .5rem; border-top: 1px solid var(--bs-border-color); }
.pagar-links .btn { margin-top: .75rem; }
.pagar-vazio { text-align: center; padding: 2rem 1rem; }
.pagar-vazio > i { font-size: 2.4rem; color: var(--bs-secondary-color); }
.pagar-vazio p { color: var(--bs-secondary-color); font-size: .9rem; }

/* ---- Tela de planos: mensalidades para pagar quando bloqueada ---- */
.renovar-cobranca { max-width: 640px; margin: 0 auto var(--space-5); }

/* ---- Painel Master: aba Cobrança (tema escuro por padrão) ---- */
.cob-integracoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.cob-integracao { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border: 1px solid rgba(148, 163, 184, .16); border-radius: 14px; background: #1e293b; }
.cob-integracao > i { display: grid; place-items: center; flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 11px; font-size: 1.1rem; background: rgba(148, 163, 184, .12); color: #94a3b8; }
.cob-integracao strong { display: block; font-size: .86rem; }
.cob-integracao small { display: block; color: #94a3b8; font-size: .74rem; overflow-wrap: anywhere; }
.cob-integracao.is-on { border-color: rgba(34, 197, 94, .35); }
.cob-integracao.is-on > i { background: rgba(34, 197, 94, .14); color: #86efac; }
.cob-integracao.is-meio > i { background: rgba(245, 158, 11, .14); color: #fcd34d; }
.cob-integracao.is-off > i { background: rgba(239, 68, 68, .12); color: #fca5a5; }
.cob-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.cob-kpis .drive-kpi small { display: block; margin-top: .1rem; font-size: .72rem; }
.cob-kpi-perigo strong { color: #fca5a5; }
.cob-kpi-pausado strong { color: #cbd5e1; }
.cob-kpi-ok strong { color: #86efac; }
.cob-subnav { gap: .35rem; margin-bottom: 1rem; padding: .3rem; border: 1px solid rgba(148, 163, 184, .16); border-radius: 14px; background: rgba(30, 41, 59, .7); }
.cob-subnav .nav-link { margin: 0; padding: .55rem .9rem; border: 0; border-radius: 10px; background: transparent; font-size: .86rem; color: #cbd5e1; transform: none; }
.cob-subnav .nav-link.active, .cob-subnav .nav-link:hover { background: var(--bs-primary); color: var(--on-primary); transform: none; }
.cob-contador { display: inline-block; min-width: 1.4rem; margin-left: .25rem; padding: 0 .35rem; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: .72rem; font-variant-numeric: tabular-nums; }
.cob-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.cob-filtros button { padding: .35rem .75rem; border: 1px solid rgba(148, 163, 184, .25); border-radius: 999px; background: transparent; color: #cbd5e1; font-size: .78rem; font-weight: 600; }
.cob-filtros button.is-ativo { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .2); color: #fff; }
.cob-filtros .form-control { width: 14rem; }
.cob-tabela { --bs-table-bg: transparent; font-size: .84rem; }
.cob-tabela .cob-linha.is-pausada { --bs-table-bg: rgba(100, 116, 139, .08); }
.cob-tabela .cob-linha.is-pausada > td { border-color: rgba(148, 163, 184, .11); }
.cob-tabela thead th { color: #94a3b8; font-size: .68rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.cob-loja { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.cob-loja .empresa-codigo { margin-right: 0; }
.cob-estado-pausado { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .5rem; border: 1px solid rgba(148, 163, 184, .35); border-radius: 999px; background: rgba(100, 116, 139, .18); color: #e2e8f0; font-size: .68rem; font-weight: 750; white-space: nowrap; }
.cob-contatos { display: flex; gap: .55rem; margin-top: .3rem; color: #86efac; font-size: .82rem; }
.cob-contatos .is-falta { color: #f87171; }
.cob-valor { font-variant-numeric: tabular-nums; }
.cob-sit { display: inline-block; margin-top: .15rem; font-size: .72rem; font-weight: 700; color: #94a3b8; }
.cob-sit.is-atrasada { color: #f87171; }
.cob-sit.is-vence_hoje { color: #fbbf24; }
/* Régua: uma bolinha por aviso automático, ligadas por um fio. */
.cob-regua { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.cob-regua li { position: relative; display: grid; place-items: center; min-width: 2.3rem; height: 1.45rem; padding: 0 .3rem; border-radius: 999px; font-size: .62rem; font-weight: 700; line-height: 1; }
.cob-regua li + li { margin-left: .7rem; }
.cob-regua li + li::before { content: ''; position: absolute; right: 100%; top: 50%; width: .7rem; height: 2px; background: rgba(148, 163, 184, .3); }
.cob-regua li.is-ok { background: #16a34a; color: #fff; }
.cob-regua li.is-erro { background: #dc2626; color: #fff; }
.cob-regua li.is-alerta { background: #b45309; color: #fff; }
.cob-regua li.is-pulado { background: #475569; color: #e2e8f0; }
.cob-regua li.is-futuro { border: 1px dashed rgba(148, 163, 184, .55); color: #94a3b8; }
.cob-legenda { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; vertical-align: -.05rem; }
.cob-legenda.is-ok { background: #16a34a; } .cob-legenda.is-erro { background: #dc2626; } .cob-legenda.is-alerta { background: #b45309; }
.cob-legenda.is-pulado { background: #475569; } .cob-legenda.is-futuro { border: 1px dashed #94a3b8; }
.cob-manuais { display: inline-block; margin-top: .3rem; color: #fcd34d; font-size: .7rem; font-weight: 700; }
.cob-ultimo { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border-radius: 999px; background: rgba(148, 163, 184, .14); font-size: .74rem; font-weight: 700; white-space: nowrap; }
.cob-ultimo.is-ok { background: rgba(34, 197, 94, .16); color: #86efac; }
.cob-ultimo.is-erro { background: rgba(239, 68, 68, .16); color: #fca5a5; }
.cob-ultimo.is-alerta { background: rgba(245, 158, 11, .16); color: #fcd34d; }
.cob-ultimo.is-info { background: rgba(59, 130, 246, .16); color: #93c5fd; }
.cob-erro { max-width: 22rem; overflow-wrap: anywhere; }
.cob-acoes { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: nowrap; }
.cob-acoes .btn { white-space: nowrap; }
.cob-acoes form { display: inline; }
.cob-acoes-painel { display: grid; gap: .55rem; }
.cob-acoes-painel form { margin: 0; }
.cob-acao-painel { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; width: 100%; padding: .8rem .9rem; border: 1px solid rgba(148, 163, 184, .18); border-radius: 11px; background: rgba(30, 41, 59, .62); color: inherit; text-align: left; }
.cob-acao-painel > i:first-child { font-size: 1.15rem; text-align: center; }
.cob-acao-painel strong, .cob-acao-painel small { display: block; }
.cob-acao-painel small { margin-top: .08rem; color: #94a3b8; font-size: .74rem; }
.cob-acao-painel:hover { border-color: rgba(var(--bs-primary-rgb), .58); background: rgba(var(--bs-primary-rgb), .1); }
.cob-acao-painel.is-perigo { color: #fca5a5; }
.cob-acao-painel.is-sucesso { color: #86efac; }
.cob-filtros button:focus-visible, .cob-acao-painel:focus-visible, .cob-acoes .btn:focus-visible { outline: 3px solid rgba(var(--bs-primary-rgb), .45); outline-offset: 2px; }
.cob-copiar { display: flex; gap: .4rem; }
.cob-copiar .form-control { min-width: 0; }
.cob-preview { margin: 0; padding: .75rem .9rem; border-radius: 10px; background: rgba(2, 6, 23, .5); border: 1px solid rgba(148, 163, 184, .18); font-size: .82rem; white-space: pre-wrap; }
.cob-comando { display: block; padding: .7rem .85rem; border-radius: 10px; background: rgba(2, 6, 23, .55); color: #67e8f9; font-size: .76rem; overflow-wrap: anywhere; }
.cob-teste { display: flex; gap: .4rem; padding-top: .9rem; border-top: 1px dashed rgba(148, 163, 184, .22); }
.cob-regua-preview { color: #93c5fd; font-size: .8rem; }
.cob-faixa-previa { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .9rem; border-radius: 10px; font-size: .8rem; }
.cob-faixa-previa i { font-size: 1.1rem; }
.cob-faixa-previa strong, .cob-faixa-previa small { display: block; }
.cob-faixa-previa small { opacity: .92; font-size: .76rem; }
.cob-previa-atraso { color: #fff; background: linear-gradient(90deg, #a51d2a, #c42b38); }
.cob-previa-lembrete { color: #3d2600; background: linear-gradient(90deg, var(--brand-ambar), #fdc14d); }
.cob-driver-campos { padding: .85rem; border-radius: 12px; background: rgba(15, 23, 42, .45); border: 1px solid rgba(148, 163, 184, .14); }
.cob-salvar {
    position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; align-items: center; gap: 1rem;
    margin-top: 1rem; padding: .8rem 1rem; border: 1px solid rgba(148, 163, 184, .18); border-radius: 14px;
    background: rgba(15, 23, 42, .92); backdrop-filter: blur(8px);
}
#cobCfg fieldset.drive-panel { min-width: 0; }
#cobCfg legend.drive-panel-head { float: none; font-size: inherit; }
.cob-eventos > summary { cursor: pointer; list-style: none; }
.cob-eventos > summary::-webkit-details-marker { display: none; }
.cob-eventos[open] > summary .bi-chevron-down { transform: rotate(180deg); }
/* Tema claro do painel. */
[data-bs-theme="light"] .cob-integracao { background: #fff; border-color: #e2e8f0; }
[data-bs-theme="light"] .cob-integracao small, [data-bs-theme="light"] .cob-tabela thead th, [data-bs-theme="light"] .cob-sit { color: #64748b; }
[data-bs-theme="light"] .cob-subnav { background: #fff; border-color: #e2e8f0; }
[data-bs-theme="light"] .cob-subnav .nav-link { color: #475569; }
[data-bs-theme="light"] .cob-subnav .nav-link.active, [data-bs-theme="light"] .cob-subnav .nav-link:hover { color: var(--on-primary); }
[data-bs-theme="light"] .cob-filtros button { color: #475569; border-color: #cbd5e1; }
[data-bs-theme="light"] .cob-filtros button.is-ativo { color: #7c3a06; }
[data-bs-theme="light"] .cob-contatos { color: #15803d; }
[data-bs-theme="light"] .cob-contatos .is-falta, [data-bs-theme="light"] .cob-sit.is-atrasada { color: #b91c1c; }
[data-bs-theme="light"] .cob-sit.is-vence_hoje, [data-bs-theme="light"] .cob-manuais { color: #92400e; }
[data-bs-theme="light"] .cob-kpi-perigo strong { color: #b91c1c; }
[data-bs-theme="light"] .cob-kpi-pausado strong { color: #475569; }
[data-bs-theme="light"] .cob-kpi-ok strong { color: #15803d; }
[data-bs-theme="light"] .cob-ultimo.is-ok { color: #166534; }
[data-bs-theme="light"] .cob-ultimo.is-erro { color: #991b1b; }
[data-bs-theme="light"] .cob-ultimo.is-alerta { color: #92400e; }
[data-bs-theme="light"] .cob-ultimo.is-info { color: #1e40af; }
[data-bs-theme="light"] .cob-preview, [data-bs-theme="light"] .cob-driver-campos { background: #f8fafc; border-color: #e2e8f0; }
[data-bs-theme="light"] .cob-comando { background: #0f172a; }
[data-bs-theme="light"] .cob-regua-preview { color: #1d4ed8; }
[data-bs-theme="light"] .cob-salvar { background: rgba(255, 255, 255, .94); border-color: #e2e8f0; }
[data-bs-theme="light"] .cob-estado-pausado { border-color: #cbd5e1; background: #f1f5f9; color: #475569; }
[data-bs-theme="light"] .cob-acao-painel { border-color: #e2e8f0; background: #fff; }
[data-bs-theme="light"] .cob-acao-painel small { color: #64748b; }
@media (max-width: 1199.98px) { .cob-integracoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cob-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
    .cob-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cob-tabela thead { display: none; }
    .cob-tabela, .cob-tabela tbody, .cob-tabela tr, .cob-tabela td { display: block; width: 100%; }
    .cob-tabela tr { margin: 0 .6rem .7rem; width: auto; padding: .7rem; border: 1px solid rgba(148, 163, 184, .18); border-radius: 12px; }
    .cob-tabela tr[hidden] { display: none; }
    .cob-tabela td { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; padding: .35rem 0; border: 0; text-align: right !important; }
    .cob-tabela td::before { content: attr(data-label); flex: 0 0 auto; color: #94a3b8; font-size: .7rem; font-weight: 700; text-align: left; }
    .cob-tabela td > * { text-align: right; }
    .cob-acoes { flex-wrap: wrap; justify-content: flex-end; max-width: 19rem; }
    .cob-filtros .form-control { width: 100%; }
    .cob-subnav { flex-wrap: nowrap; overflow-x: auto; }
    .cob-subnav .nav-link { white-space: nowrap; }
}
@media (max-width: 575.98px) {
    .cob-integracoes { grid-template-columns: 1fr; }
    .cob-acoes { max-width: 15rem; }
    .cob-acoes .btn { min-height: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    .carne--carimbar .carne__carimbo { animation: none; }
    .faixa-cobranca__btn { transition: none; }
}
.carne--cortesia { --carne-rgb: var(--bs-secondary-rgb); --carne-tinta: var(--bs-secondary-color); }
.carne--cortesia .carne__situacao { color: var(--bs-secondary-color); }
/* O painel master tem regras próprias para .nav-link (inclusive no tema claro). */
#tab-cobranca .cob-subnav .nav-link.active, #tab-cobranca .cob-subnav .nav-link:hover { background: var(--bs-primary); color: var(--on-primary); }
[data-bs-theme="light"] #tab-cobranca .btn-outline-light { color: #334155; border-color: #cbd5e1; }
[data-bs-theme="light"] #tab-cobranca .btn-outline-light:hover { background: #f1f5f9; color: #0f172a; }
[data-bs-theme="light"] #tab-cobranca .dropdown-menu-dark { --bs-dropdown-bg: #fff; --bs-dropdown-link-color: #1e293b; --bs-dropdown-link-hover-bg: #f1f5f9; --bs-dropdown-link-hover-color: #0f172a; --bs-dropdown-border-color: #e2e8f0; --bs-dropdown-divider-bg: #e2e8f0; }

/* Navegação por tarefa, sobre os tokens Menuxy existentes. */
.nav-section-label { font-size: .6875rem; font-weight: 700; color: var(--bs-secondary-color); padding: .875rem .75rem .25rem; text-transform: uppercase; letter-spacing: .05em; }
.cfg-logo-row > * { min-width: 0; }
.cfg-logo-preview { flex-shrink: 0; }
.cfg-logo-preview > i { font-size: 1.75rem; color: var(--bs-secondary-color); }

.pedidos-notificacoes { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; margin:0 0 1rem; padding:.75rem 1rem; border:1px solid var(--bs-border-color); border-radius:var(--radius-md); background:var(--bs-body-bg); color:var(--bs-body-color); }
.pedidos-notificacoes[hidden] { display:none; }
.pedidos-notificacoes > span { flex:1 1 220px; font-size:.875rem; }
.pedidos-notificacoes > div { display:flex; flex-wrap:wrap; gap:.5rem; }
.pedidos-notificacoes .btn { min-height:44px; display:inline-flex; align-items:center; }
.pedidos-notificacoes.tem-novos-pedidos { border-color:var(--bs-primary-text-emphasis); }
.delivery-notificacoes-link { display:inline-flex; align-items:center; gap:.45rem; }
.delivery-notificacoes-status {
    padding:.15rem .45rem; border-radius:var(--radius-pill); background:var(--bs-tertiary-bg);
    color:var(--bs-secondary-color); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
}
.delivery-notificacoes-status.is-ativo { background:rgba(25,135,84,.12); color:var(--ui-success-ink); }
@media (max-width: 575.98px) {
    /* O aviso precisa pedir a permissão sem empurrar a fila operacional para
       fora da primeira tela de celulares compactos. */
    .pedidos-notificacoes {
        display:grid; grid-template-columns:2rem minmax(0,1fr); gap:.45rem .6rem;
        align-items:center; margin-bottom:.65rem; padding:.55rem .65rem;
    }
    .pedidos-notificacoes > i { width:2rem; height:2rem; font-size:1rem; }
    .pedidos-notificacoes > span { min-width:0; font-size:.8rem; line-height:1.3; }
    .pedidos-notificacoes > div {
        grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem;
    }
    .pedidos-notificacoes .btn {
        justify-content:center; min-width:0; min-height:44px; padding:.35rem .4rem;
        font-size:.78rem; white-space:nowrap;
    }
    .delivery-pagina-topo { align-items:flex-start !important; flex-direction:column; gap:.75rem; }
    .delivery-pagina-topo > .d-flex { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:.45rem !important; }
    .delivery-pagina-topo > .d-flex > * { min-width:0; justify-content:center; padding-inline:.4rem; font-size:.82rem; }
    .delivery-notificacoes-link { flex-wrap:wrap; }
    .delivery-notificacoes-status { font-size:.6rem; }
}

/* Alertas: painel compacto de operação, com hierarquia e controles claros. */
.notif-config { max-width:72rem; --notif-ink:var(--bs-body-color); --notif-muted:var(--bs-secondary-color); --notif-line:var(--bs-border-color); --notif-paper:var(--bs-body-bg); }
.notif-config__heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin:0 0 1.4rem; }
.notif-config__eyebrow,.notif-config__kicker { margin:0 0 .4rem; color:var(--bs-primary-text-emphasis); font-size:.72rem; font-weight:750; letter-spacing:.09em; text-transform:uppercase; }
.notif-config__eyebrow span { margin:0 .22rem; opacity:.55; }
.notif-config__heading h1,.notif-config__heading h2 { margin:0; color:var(--notif-ink); font-size:clamp(1.55rem,3vw,2rem); font-weight:760; letter-spacing:-.035em; }
.notif-config__heading > div > p:last-child { margin:.35rem 0 0; color:var(--notif-muted); }
.notif-config__scope { display:inline-flex; align-items:center; gap:.5rem; flex-shrink:0; padding:.48rem .72rem; border:1px solid var(--notif-line); border-radius:var(--radius-pill); background:var(--notif-paper); color:var(--notif-muted); font-size:.78rem; }
.notif-config__grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(17rem,.8fr); gap:1rem; align-items:stretch; }
.notif-config__grid > * { min-width:0; }
.notif-config__panel { min-width:0; overflow:hidden; border:1px solid var(--notif-line); border-radius:var(--radius-lg); background:var(--notif-paper); box-shadow:var(--shadow-sm); }
.notif-config__panel--controls { padding:clamp(1rem,2.5vw,1.5rem); }
.notif-config__panel-head { display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }
.notif-config__panel-icon { display:grid; width:2.65rem; height:2.65rem; flex:0 0 auto; place-items:center; border-radius:.8rem; background:rgba(var(--bs-primary-rgb),.16); color:var(--bs-primary-text-emphasis); font-size:1.2rem; }
.notif-config__panel-head .notif-config__kicker { margin-bottom:.15rem; font-size:.65rem; }
.notif-config__panel-head h2 { margin:0; color:var(--notif-ink); font-size:1.08rem; font-weight:730; letter-spacing:-.015em; }
.notif-config__status { display:flex; align-items:flex-start; gap:.6rem; margin-bottom:1rem; padding:.72rem .8rem; border:1px solid var(--notif-line); border-radius:var(--radius-sm); background:var(--bs-tertiary-bg); }
.notif-config__status p { margin:0; color:var(--notif-ink); font-size:.84rem; line-height:1.45; }
.notif-config__status-dot,.notif-config__preview-light { width:.55rem; height:.55rem; flex:0 0 auto; margin-top:.3rem; border-radius:50%; background:var(--bs-warning); box-shadow:0 0 0 3px rgba(var(--bs-warning-rgb),.16); }
.notif-config__preview-light { margin:0; background:var(--bs-success); box-shadow:0 0 0 3px rgba(var(--bs-success-rgb),.14); }
.notif-config__activate { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; margin-bottom:1.15rem; }
.notif-config__activate > span { display:flex; flex:1 1 10rem; align-items:center; gap:.45rem; color:var(--notif-muted); font-size:.8rem; }
.notif-config .btn { min-height:44px; }
.notif-config fieldset { min-width:0; margin:0; padding:1rem 0 0; border:0; border-top:1px solid var(--notif-line); }
.notif-config fieldset legend { float:none; width:auto; margin:0 0 .8rem; color:var(--notif-ink); font-size:.96rem; font-weight:720; }
.notif-config .form-label { color:var(--notif-ink); font-size:.86rem; font-weight:650; }
.notif-config .form-select { min-height:46px; border-color:var(--notif-line); background-color:var(--bs-body-bg); color:var(--bs-body-color); }
.notif-config__help { margin:.45rem 0 1rem; color:var(--notif-muted); font-size:.77rem; line-height:1.5; }
.notif-config__volume-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:.25rem; }
.notif-config__volume { display:inline-flex; min-width:3.7rem; justify-content:center; padding:.27rem .55rem; border:1px solid rgba(var(--bs-primary-rgb),.32); border-radius:var(--radius-pill); background:rgba(var(--bs-primary-rgb),.12); color:var(--bs-primary-text-emphasis); font-variant-numeric:tabular-nums; font-weight:750; }
.notif-config .form-range { min-height:30px; margin:0; padding:0; background:linear-gradient(to right,var(--bs-primary-text-emphasis) 0 var(--notificacao-volume-progresso,100%),var(--notif-line) var(--notificacao-volume-progresso,100%) 100%) center/100% 5px no-repeat; }
.notif-config .form-range::-webkit-slider-runnable-track { height:5px; background:transparent; }
.notif-config .form-range::-moz-range-track { height:5px; background:transparent; }
.notif-config .form-range::-webkit-slider-thumb { width:18px; height:18px; margin-top:-6.5px; border:3px solid var(--notif-paper); background:var(--bs-primary-text-emphasis); box-shadow:0 0 0 1px var(--bs-primary-text-emphasis),var(--shadow-sm); }
.notif-config .form-range::-moz-range-thumb { width:12px; height:12px; border:3px solid var(--notif-paper); background:var(--bs-primary-text-emphasis); box-shadow:0 0 0 1px var(--bs-primary-text-emphasis); }
.notif-config__scale { display:flex; justify-content:space-between; color:var(--notif-muted); font-size:.72rem; font-variant-numeric:tabular-nums; }
.notif-config__scale + .notif-config__help { margin:.4rem 0 0; }
.notif-config__actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.notif-config__actions > .btn { display:inline-flex; flex:1 1 11rem; align-items:center; justify-content:center; gap:.3rem; }
.notif-config__feedback { min-height:1.3em; margin:.75rem 0 0; color:var(--notif-muted); font-size:.78rem; line-height:1.45; }
.notif-config__panel--preview { display:flex; flex-direction:column; padding:clamp(1rem,2.5vw,1.4rem); background:linear-gradient(155deg,rgba(var(--bs-primary-rgb),.13),transparent 45%),var(--notif-paper); }
.notif-config__preview-label { display:flex; align-items:center; gap:.55rem; margin:0 0 1rem; color:var(--notif-muted); font-size:.66rem; font-weight:750; letter-spacing:.1em; }
.notif-config__sample { display:flex; align-items:flex-start; gap:.75rem; padding:1rem; border:1px solid var(--notif-line); border-radius:var(--radius-md); background:var(--notif-paper); box-shadow:var(--shadow-xs); }
.notif-config__sample-icon { display:grid; width:2.6rem; height:2.6rem; flex:0 0 auto; place-items:center; border-radius:.8rem; background:var(--bs-primary); color:var(--on-primary); font-size:1.2rem; }
.notif-config__sample-brand { color:var(--notif-muted); font-size:.64rem; font-weight:700; letter-spacing:.07em; }
.notif-config__sample strong { display:block; margin:.23rem 0; color:var(--notif-ink); font-size:.95rem; }
.notif-config__sample p { margin:0; color:var(--notif-muted); font-size:.79rem; line-height:1.45; }
.notif-config__sound-readout { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.78rem .1rem; border-bottom:1px solid var(--notif-line); font-size:.8rem; }
.notif-config__sound-readout span { color:var(--notif-muted); }
.notif-config__sound-readout strong { color:var(--notif-ink); text-align:right; }
.notif-config__privacy { display:flex; align-items:flex-start; gap:.5rem; margin:.85rem 0; color:var(--notif-muted); font-size:.76rem; line-height:1.5; }
.notif-config__privacy i { color:var(--ui-success-ink); font-size:1rem; }
.notif-config__test { display:flex; align-items:center; justify-content:center; gap:.4rem; min-height:46px !important; width:100%; }
.notif-config__requirements { display:grid; gap:.65rem; margin:1.1rem 0; padding-top:.9rem; border-top:1px solid var(--notif-line); }
.notif-config__requirements p { display:flex; align-items:flex-start; gap:.55rem; margin:0; color:var(--notif-muted); font-size:.76rem; line-height:1.45; }
.notif-config__requirements i { flex:0 0 auto; color:var(--bs-primary-text-emphasis); }
.notif-config__back { display:inline-flex; align-items:center; gap:.4rem; margin-top:auto; padding-top:.35rem; color:var(--bs-link-color); font-size:.82rem; font-weight:650; text-decoration:none; }
.notif-config__back:hover { color:var(--bs-link-hover-color); text-decoration:underline; }
.notif-config :focus-visible { outline:2px solid var(--bs-primary-text-emphasis); outline-offset:3px; }
@media (max-width:767.98px) { .notif-config__grid { grid-template-columns:minmax(0,1fr); } .notif-config__heading { flex-direction:column; gap:.75rem; } .notif-config__scope { white-space:normal; } }
@media (prefers-reduced-motion:reduce) { .notif-config *, .notif-config *::before, .notif-config *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; } }
.pedidos-notificacoes > i { display:grid; place-items:center; width:2.25rem; height:2.25rem; flex-shrink:0; border-radius:var(--radius-sm); background:var(--bs-tertiary-bg); color:var(--bs-primary-text-emphasis); font-size:1.125rem; }
.pedidos-notificacoes.tem-novos-pedidos > i { background:var(--bs-primary); color:var(--on-primary); }

/* Espaço de trabalho: contexto compacto, tarefas e foco acessível. */
.app-main { padding:24px 28px 32px; min-width:0; }
.app-skip { position:fixed; top:8px; left:8px; z-index:9999; transform:translateY(-180%); padding:12px 18px; background:var(--bs-body-bg); color:var(--bs-body-color); border:2px solid var(--bs-primary); border-radius:8px; }
.app-skip:focus { transform:none; }
.app-top-context { align-items:center; gap:12px; font-size:14px; }
.app-top-context a { color:var(--bs-secondary-color); text-decoration:none; }
.app-top-context span { font-weight:600; }.app-top-context i { font-size:10px; color:var(--bs-secondary-color); }
.app-theme-toggle { width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:10px; background:transparent; font-size:22px; }
.app-theme-toggle:hover { background:var(--bs-tertiary-bg); }
.app-theme-toggle:focus-visible { outline:3px solid var(--bs-primary); outline-offset:3px; }
.topbar { padding:8px 24px!important; box-shadow:none!important; border-bottom:1px solid var(--bs-border-color); }
.sidebar .nav-section-label { padding-top:12px; }
.sidebar .nav-link { min-height:40px; padding-top:8px; padding-bottom:8px; }
.app-page-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.app-page-heading h1 { margin:0; font-size:28px; font-weight:750; letter-spacing:-.6px; }
.app-page-heading p:not(.app-eyebrow) { margin:6px 0 0; color:var(--bs-secondary-color); font-size:14px; }
.app-eyebrow { font-size:11px; letter-spacing:.06em; color:var(--bs-primary-text-emphasis); font-weight:700; margin:0 0 5px; }
.app-date { font-size:13px; white-space:nowrap; color:var(--bs-secondary-color); }
.app-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 12px; }
.app-section-heading h2 { font-size:16px; font-weight:700; margin:0; }.app-section-heading>span { color:var(--bs-secondary-color); font-size:12px; }
.cfg-heading { margin-bottom:18px; }.cfg-heading h1 { font-size:28px; }.cfg-heading__icon { width:44px; height:44px; }
.cfg-grid--separado { grid-template-columns:minmax(0,1fr); max-width:1050px; }.cfg-grid--separado .cfg-card { min-width:0; }
.cfg-foto-info .btn { min-height:44px; display:inline-flex; align-items:center; gap:6px; }.cfg-foto-info input[type=file]:focus-visible+div label { outline:3px solid var(--bs-primary); outline-offset:3px; }
@media(max-width:767px) {
 .app-main { padding:16px!important; }.app-page-heading { align-items:flex-start; margin-bottom:18px; }.app-page-heading h1,.cfg-heading h1 { font-size:24px; }.app-date { font-size:11px; margin-top:5px; }.app-section-heading>span { display:none; }
 .cfg-foto { flex-wrap:wrap; }.cfg-foto-info { flex:1; min-width:180px; }
}
/* Evita deslocamento transitório do conteúdo sob a sidebar ao redimensionar. */
.content-wrapper { transition:none; }
/* Indicadores: leitura rápida, comparações e exploração dos dados reais. */
.analytics-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.analytics-kpi { padding:18px; background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-radius:12px; min-width:0; }
.analytics-kpi>span { display:flex; align-items:center; gap:8px; color:var(--bs-secondary-color); font-size:12px; font-weight:600; }.analytics-kpi>span i { font-size:17px; }
.analytics-kpi>strong { display:block; font-size:clamp(21px,2.1vw,30px); margin:12px 0 7px; letter-spacing:-.6px; font-variant-numeric:tabular-nums; line-height:1.2; }
.analytics-kpi>small { font-size:11px; color:var(--bs-secondary-color); display:block; line-height:1.5; }.analytics-kpi--primary { border-top:3px solid var(--bs-primary); padding-top:16px; }.analytics-kpi--primary>strong { color:var(--bs-primary-text-emphasis); }
.analytics-chart-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; }.analytics-chart-heading h2 { font-size:20px; font-weight:700; margin:0; }.analytics-period-form { max-width:180px; }
.analytics-chart-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:16px; }.analytics-chart-toolbar>span { font-size:12px; color:var(--bs-secondary-color); }
.analytics-mode { display:flex; gap:3px; padding:3px; border:1px solid var(--bs-border-color); background:var(--bs-tertiary-bg); border-radius:9px; }.analytics-mode button { border:0; background:transparent; padding:8px 12px; min-height:38px; border-radius:6px; font-size:12px; color:var(--bs-secondary-color); }.analytics-mode button[aria-pressed=true] { background:var(--bs-body-bg); color:var(--bs-primary-text-emphasis); font-weight:650; box-shadow:0 1px 4px #0001; }.analytics-mode button:focus-visible { outline:3px solid var(--bs-primary); }
.analytics-chart { position:relative; height:280px; }
.analytics-insights { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--bs-border-color); margin-top:18px; padding-top:16px; gap:16px; }.analytics-insights>span { display:grid; grid-template-columns:25px minmax(0,1fr); column-gap:6px; }.analytics-insights i { grid-row:span 2; color:var(--bs-primary-text-emphasis); }.analytics-insights small { font-size:11px; color:var(--bs-secondary-color); }.analytics-insights strong { font-size:13px; margin-top:4px; }
.analytics-data { margin-top:16px; font-size:13px; }.analytics-data summary { color:var(--bs-secondary-color); min-height:44px; padding:12px 0; cursor:pointer; }.analytics-data>.table-responsive { max-height:300px; }
@media(max-width:1199px) { .analytics-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:575px) { .analytics-kpis { gap:8px; }.analytics-kpi { padding:12px; }.analytics-kpi--primary { padding-top:10px; }.analytics-kpi>span { font-size:11px; align-items:flex-start; }.analytics-kpi>strong { font-size:22px; margin:10px 0 6px; }.analytics-chart { height:230px; }.analytics-chart-heading h2 { font-size:18px; }.analytics-insights { gap:10px; }.analytics-mode button { min-height:44px; padding:8px; }.analytics-chart-toolbar { margin-bottom:12px; } }

.produto-editar-modal .modal-content { background: var(--bs-body-bg); color:var(--bs-body-color); }
.produto-editar-modal form { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.produto-editar-modal .modal-body { overflow-y:auto; }
.produtos-nav { display:flex; gap:4px; margin-bottom:16px; padding:4px; border:1px solid var(--bs-border-color); border-radius:12px; width:fit-content; background:var(--bs-body-bg); }
.produtos-nav a { padding:9px 16px; border-radius:8px; text-decoration:none; color:var(--bs-secondary-color); font-weight:600; }
.produtos-nav a[aria-current] { background:var(--bs-primary); color:var(--bs-white); }
@media(max-width:575px){.produtos-nav{width:100%}.produtos-nav a{flex:1;text-align:center;padding:9px 8px}}

/* Navegação sobreposta: superfície legível, contexto preservado ao redor. */
.cfg-window { --cfg-surface:rgba(255,255,255,.96); --cfg-ink:#202b36; --cfg-muted:#687786; color:var(--cfg-ink); background:var(--cfg-surface); border:1px solid rgba(255,255,255,.7); border-radius:22px; box-shadow:0 28px 100px #15202d38; width:min(960px,calc(100% - 40px)); max-height:85svh; padding:0; overflow:hidden; }
.cfg-window[open] { display:flex; flex-direction:column; }
.cfg-window::backdrop { background:rgba(25,32,40,.3); backdrop-filter:blur(7px); }
.cfg-window-head { display:flex; align-items:center; gap:14px; padding:24px 26px 16px; }
.cfg-window-brand,.cfg-window-icon { display:grid; place-items:center; flex-shrink:0; background:#ff8c3412; color:#bc4d08; border:1px solid #ff8c3430; border-radius:12px; width:44px; height:44px; font-size:20px; }
.cfg-window-kicker { font-size:10px; letter-spacing:.12em; color:var(--cfg-muted); font-weight:700; margin:0 0 4px; }
.cfg-window h2 { font-size:23px; letter-spacing:-.035em; margin:0; font-weight:750; }
.cfg-window-close { margin-left:auto; border:1px solid #87909a30; border-radius:50%; background:transparent; color:inherit; min-width:44px; height:44px; }
.cfg-window-search { display:flex; align-items:center; gap:12px; margin:0 26px; border:1px solid #87909a40; border-radius:12px; padding:0 16px; background:var(--bs-body-bg,#fff); }
.cfg-window-search:focus-within { border-color:#ed792b; box-shadow:0 0 0 3px #ff8c3420; }
.cfg-window-search>i { color:#ba4d09; }
.cfg-window-search input { background:transparent; color:inherit; min-width:0; width:100%; font-size:16px; border:0; outline:0; height:52px; }
.cfg-window-search kbd { background:transparent; color:var(--cfg-muted); border:1px solid #87909a40; font-size:11px; }
.cfg-window-filters { display:flex; align-items:center; gap:6px; padding:16px 26px; }
.cfg-window-filters button { min-height:38px; border:0; padding:8px 14px; border-radius:9px; background:transparent; color:var(--cfg-muted); font-size:13px; font-weight:600; }
.cfg-window-filters button[aria-pressed=true] { background:#ff8c3420; color:#9f4108; }
.cfg-window-filters>span { margin-left:auto; font-size:12px; color:var(--cfg-muted); }
.cfg-window-results { overflow:auto; overscroll-behavior:contain; padding:0 26px 22px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.cfg-window-item { display:flex; align-items:center; gap:12px; padding:14px; min-height:78px; border:1px solid #87909a25; background:var(--bs-body-bg,#fff); border-radius:13px; color:inherit; text-decoration:none; }
.cfg-window-item[hidden],.cfg-window-empty[hidden] { display:none; }
.cfg-window-item:hover { border-color:#ed792b80; background:#ff8c3409; color:inherit; }
.cfg-window-item>span:nth-child(2) { min-width:0; }
.cfg-window-item strong { display:block; font-size:14px; }
.cfg-window-item small { display:block; font-size:12px; color:var(--cfg-muted); margin-top:3px; }
.cfg-window-item>i { margin-left:auto; color:var(--cfg-muted); }
.cfg-window-item:focus-visible,.cfg-window button:focus-visible { outline:3px solid #f28b42; outline-offset:2px; }
.cfg-window-empty { grid-column:1/-1; text-align:center; padding:38px 15px; color:var(--cfg-muted); }
.cfg-window-empty>i,.cfg-window-empty>strong { display:block; margin-bottom:10px; }
.cfg-window-foot { display:flex; justify-content:space-between; gap:12px; border-top:1px solid #87909a25; padding:14px 26px; color:var(--cfg-muted); font-size:11px; }
[data-bs-theme=dark] .cfg-window { --cfg-surface:rgba(26,33,42,.97); --cfg-ink:#edf0f4; --cfg-muted:#a7b3c0; border-color:#ffffff20; }
[data-bs-theme=dark] .cfg-window-filters button[aria-pressed=true],[data-bs-theme=dark] .cfg-window-icon,[data-bs-theme=dark] .cfg-window-brand { color:#ffb578; }
@media(max-width:767px) { .cfg-window { width:calc(100% - 16px); max-height:90svh; margin:auto auto 8px; border-radius:20px; } .cfg-window-head { padding:20px 16px 16px; gap:10px; } .cfg-window h2 { font-size:19px; } .cfg-window-search { margin:0 16px; } .cfg-window-filters { padding:12px 16px; flex-wrap:wrap; } .cfg-window-filters button { padding:9px 10px; } .cfg-window-results { grid-template-columns:1fr; padding:0 16px 16px; } .cfg-window-foot { padding:12px 16px; } .cfg-window-foot>span:last-child,.cfg-window-search kbd { display:none; } }

/* Sobrescreve componentes antigos da tela de alertas após os estilos globais. */
.notif-config-backdrop { z-index:5000; background:rgba(20,22,25,.6); }
.notif-config-backdrop .notif-config-window { width:min(100%,520px); margin:0; padding:1.25rem; border:1px solid var(--bs-border-color); border-color:color-mix(in srgb,var(--bs-border-color) 65%,transparent); background:var(--bs-body-bg); background:color-mix(in srgb,var(--bs-body-bg) 96%,transparent); border-radius:1.15rem; }
.notif-config-window .notif-config__heading { display:flex; flex-direction:row; align-items:flex-start; justify-content:flex-start; gap:.8rem; margin:0; padding-right:2rem; }
.notif-config-window .notif-config__heading > div > p:last-child { margin:0; }
.notif-config-window .notif-config__status-dot { background:#20a46a; box-shadow:0 0 0 4px rgba(32,164,106,.12); }
.notif-config-window .notif-config__status[data-estado="desligado"] .notif-config__status-dot { background:var(--bs-secondary-color); box-shadow:none; }
.notif-config-window .notif-config__status[data-estado="pendente"] .notif-config__status-dot { background:var(--bs-warning); box-shadow:0 0 0 4px rgba(var(--bs-warning-rgb),.12); }
.notif-config-window .notif-config__status[data-estado="erro"] .notif-config__status-dot { background:var(--bs-danger); box-shadow:0 0 0 4px rgba(var(--bs-danger-rgb),.12); }
.notif-config-window .notif-config__actions { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.9rem; }
.notif-config-window .notif-config__actions > .btn { min-height:42px; flex:0 0 auto; }
@media (max-width:480px) { .notif-config-backdrop { padding:.7rem; } .notif-config-backdrop .notif-config-window { padding:1rem; } .notif-config-window .notif-config__heading { flex-direction:row; } .notif-config-window .notif-config__actions { flex-direction:column; } .notif-config-window .notif-config__actions > .btn { width:100%; flex:0 0 auto; } }

/* Contador operacional compartilhado pelo desktop e pelo celular. */
.pedidos-topbar-link { position:relative; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--bs-border-color); border-radius:50%; color:var(--bs-secondary-color); background:var(--bs-body-bg); text-decoration:none; }
.pedidos-topbar-link:hover { color:var(--bs-primary-text-emphasis); border-color:var(--bs-primary); }
.pedidos-topbar-link:focus-visible { outline:3px solid rgba(var(--bs-primary-rgb),.3); outline-offset:3px; }
.pedidos-contagem { display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px; padding:0 5px; border-radius:999px; color:#fff; background:#dc2626; font-size:10px; font-weight:750; line-height:1; font-variant-numeric:tabular-nums; }
.pedidos-topbar-link .pedidos-contagem { position:absolute; top:-5px; right:-5px; box-shadow:0 0 0 2px var(--bs-body-bg); }
.pedidos-contagem--menu { margin-left:auto; flex-shrink:0; }