/* Paleta e tipografia extraídas de sistema-inforsystem.html (fonte de verdade visual) */

/* Pedido do usuário: navegar o sistema inteiro pelo teclado — "Pular para
   o conteúdo" (ver layouts/app.php, logo após <body>) fica fora da tela
   até receber foco pelo Tab (1º elemento focável de toda página
   autenticada), então deixa de tabular pelos 13+ itens do menu lateral
   pra chegar direto no #mainContent. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    background: var(--brand-blue);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 10px 0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus { left: 0; }
/* O destino do skip-link (tabindex="-1", só pra receber foco
   programaticamente) não precisa do contorno padrão do navegador em volta
   da seção inteira — o próprio salto de posição na página já é o retorno
   visual; o foco de teclado continua normal a partir do 1º elemento
   focável DENTRO do conteúdo. */
#mainContent:focus { outline: none; }

/* Busca com lista suspensa (dropdown) — igual ao .select-search-wrap do
   protótipo (usado lá só no seletor de Produto/Peça/Serviço da OS), mas
   generalizado aqui pra todo campo de busca do sistema, com os resultados
   vindo do servidor (a pedido do usuário — no protótipo os dados já estavam
   todos carregados em memória via localStorage). Ver
   public/assets/js/app.js (initLiveSearchDropdowns). */
.select-search-wrap { position: relative; }
.select-dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: var(--card);
    color: var(--ink);
    border: 1.5px solid var(--line);
    border-radius: 9px;
    margin-top: 4px;
    z-index: 60;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}
.select-dropdown-list.open { display: block; }
.select-dropdown-list .sdl-item {
    padding: 9px 12px;
    font-size: 13.5px;
    cursor: pointer;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}
.select-dropdown-list .sdl-item:last-child { border-bottom: none; }
.select-dropdown-list .sdl-item:hover,
.select-dropdown-list .sdl-item.sdl-active { background: var(--paper); }
.select-dropdown-list .sdl-item .sdl-sub {
    display: block;
    font-size: 11.5px;
    color: var(--ink-soft);
    font-weight: 400;
    margin-top: 1px;
}
.select-dropdown-list .sdl-empty,
.select-dropdown-list .sdl-loading {
    padding: 12px;
    font-size: 12.5px;
    color: var(--ink-soft);
    text-align: center;
}

/* Dropdown customizado pra TODO <select> do sistema — pedido do usuário:
   "nas caixas de texto que tem seta com cascata... mostre um dropdown
   UX/UI". Troca a lista nativa do navegador (inconsistente entre SO/
   navegador) por uma igual à .select-dropdown-list acima (mesmo visual já
   usado nas buscas). O <select> original continua no DOM, só fica
   invisível (opacity:0, mantém o tamanho/posição pra herdar o estilo
   certo do contexto via getComputedStyle) e sem pointer-events — é ele
   quem guarda o valor de verdade (name, required, validação nativa do
   formulário continuam funcionando). Ver public/assets/js/app.js
   (enhanceCustomSelects). */
.cs-wrap { position: relative; }
.cs-wrap select.cs-native { position: relative; opacity: 0; pointer-events: none; width: 100%; max-width: 100%; }
.cs-display {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    cursor: pointer; box-sizing: border-box; overflow: hidden;
}
.cs-display-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-display svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--ink-soft); transition: transform .15s ease; }
.cs-wrap.open .cs-display svg { transform: rotate(180deg); }
.cs-wrap.open .cs-display { border-color: var(--brand-blue) !important; box-shadow: 0 0 0 3px var(--brand-blue-glow); }
/* Pedido do usuário: navegar o sistema inteiro pelo teclado — todo
   gatilho de select customizado (há 1 por <select> do sistema inteiro)
   precisa de um indicador de foco bem visível ao tabular até ele.
   !important no border-color porque o visual do gatilho é copiado via
   JS como ESTILO INLINE (ver montar() em app.js) — uma regra de classe
   normal perderia pra ele sem isso, igual à regra ".cs-wrap.open" acima. */
.cs-display:focus { outline: none; border-color: var(--brand-blue) !important; box-shadow: 0 0 0 3px var(--brand-blue-glow); }
.cs-display.cs-disabled { cursor: not-allowed; opacity: .6; }
.cs-list {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
    background: var(--card); border: 1.5px solid var(--line); border-radius: 9px;
    max-height: 260px; overflow-y: auto; box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}
.cs-wrap.open .cs-list { display: block; }
.cs-option { padding: 9px 12px; font-size: 13.5px; cursor: pointer; border-bottom: 1px solid var(--line); color: var(--ink); }
.cs-option:last-child { border-bottom: none; }
.cs-option:hover, .cs-option.cs-active { background: var(--paper); }
.cs-option.selected { font-weight: 700; color: var(--brand-blue); }
.cs-option.disabled { color: var(--ink-soft); cursor: not-allowed; }
:root{
  color-scheme: light;
  --brand-blue:#004AAB; --brand-blue-dark:#00296B;
  /* Derivadas de --brand-blue via color-mix(), para acompanhar a cor de
     marca customizável em Área da Empresa → Aparência (o protótipo usa
     valores fixos aqui, pensados só para o azul padrão). */
  --brand-blue-light: color-mix(in srgb, var(--brand-blue) 12%, white);
  --brand-blue-glow: color-mix(in srgb, var(--brand-blue) 14%, transparent);
  --accent-green:#12915B; --accent-amber:#B3781B; --accent-red:#C1352B;
  --paper:#F5F7FB; --card:#FFFFFF; --ink:#141B2E; --ink-soft:#5A6478;
  --line:#E3E8F1; --radius:12px;
  --shadow-sm:0 1px 2px rgba(20,27,46,0.05), 0 0 0 1px rgba(20,27,46,0.03);
  --shadow-md:0 2px 10px rgba(20,27,46,0.08), 0 0 0 1px rgba(20,27,46,0.03);
  --shadow-lg:0 8px 26px rgba(20,27,46,0.16), 0 0 0 1px rgba(20,27,46,0.04);
  --heading:var(--brand-blue-dark);
}

/* Modo escuro (Área da Empresa → Aparência → Modo) — mesmos valores do
   protótipo, aplicado via atributo `data-theme` no <html> (renderizado no
   servidor a partir de `settings.theme_mode`, sem flash de tela clara antes
   do JS rodar, diferente do protótipo que aplica isso via JS). */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper:#181D2B; --card:#232838; --ink:#EDF0F7; --ink-soft:#9AA5BC;
  --line:#333B4F;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-md:0 2px 10px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-lg:0 8px 26px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  --heading:#8FB8F5;
}

/* Pedido do usuário: sem isso, o navegador usa o destaque de seleção de
   texto padrão do sistema operacional (às vezes um branco quase puro,
   dependendo do dispositivo) — como a cor do TEXTO não mudava junto, ficava
   texto claro sobre fundo claro (ilegível), reproduzido tanto no painel
   quanto na Loja Virtual, mobile e desktop (ex.: linha do carrinho). Fundo
   branco explícito (pedido do usuário) + texto azul-marinho da marca, que
   contrasta em qualquer tela, clara ou escura. */
*::selection { background: #FFFFFF; color: var(--brand-blue-dark); }
*::-moz-selection { background: #FFFFFF; color: var(--brand-blue-dark); }

* { box-sizing: border-box; }

img, svg, video { max-width: 100%; height: auto; }

button, .abtn, a[role="button"], input[type=button], input[type=submit] {
    touch-action: manipulation;
}

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

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: 'Sora', sans-serif; margin: 0; }

/* O atributo `hidden` some por padrão via UA stylesheet, mas qualquer regra
   nossa com `display` (grid/flex/block) tem mais especificidade e vence —
   sem isso, um elemento como `.form-grid[hidden]` (abas internas, ex.: Área
   da Empresa) continua visível mesmo escondido pelo JS de abas. */
[hidden] { display: none !important; }

.mono { font-family: 'IBM Plex Mono', monospace; }

/* `código` inline (ex.: caminhos de arquivo longos em "Sobre o Sistema",
   extraídos de DOCUMENTACAO-ARQUITETURA.md) não tem espaço pra quebrar
   naturalmente — sem isso, uma string comprida (ex.: um caminho de
   arquivo) estoura a largura da tela em vez de quebrar linha. */
code { overflow-wrap: break-word; word-break: break-word; }

.app-shell {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

/* PDV em tela cheia (?pdv=fullscreen, ver layouts/app.php) — igual ao
   protótipo (body.pdv-fullscreen-mode), que abre o PDV numa aba nova sem
   o menu lateral nem a caixa do usuário no topo. Sem botão de "sair" aqui
   de propósito: o link de logout mora dentro de .app-sidebar, que fica
   escondida — igual ao protótipo, que também não tem saída dessa tela
   (o usuário fecha a aba). */
body.pdv-fullscreen-mode .app-sidebar,
body.pdv-fullscreen-mode .user-box,
body.pdv-fullscreen-mode .hamburger-btn,
body.pdv-fullscreen-mode .sidebar-backdrop { display: none !important; }
body.pdv-fullscreen-mode .main-panel { width: 100%; }

/* Igual ao protótipo (.app-sidebar): a barra fica com a própria altura
   travada em 100vh e position:sticky (não position:fixed — continua um
   item flex de .app-shell, então não precisa de margem/padding manual no
   conteúdo ao lado); o topo (marca+busca+recolher) e o rodapé (Sair) são
   filhos diretos, fixos, e só a lista de navegação no meio
   (.app-sidebar-scroll) rola quando os 13 itens não cabem na tela. */
.app-sidebar {
    width: 236px;
    flex-shrink: 0;
    /* O segundo stop era uma cor de marinho fixa; agora deriva de
       --brand-blue-dark (escurecida) para acompanhar cor de marca
       customizada em vez de sempre puxar para azul-marinho. */
    background: linear-gradient(180deg, var(--brand-blue-dark), color-mix(in srgb, var(--brand-blue-dark) 70%, black));
    color: #fff;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    padding: 18px 14px 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    padding-left: calc(14px + env(safe-area-inset-left));
    z-index: 10;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,0.06);
}

.app-sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.25) transparent;
}

.app-sidebar-scroll::-webkit-scrollbar { width: 5px; }
.app-sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.app-sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 999px; }
.app-sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.32); }

.app-sidebar .brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 4px 6px 12px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.app-sidebar .brand .brand-logo-img {
    width: 100%;
    max-width: 150px;
    height: auto;
    display: block;
}

.app-sidebar .brand b {
    font-family: 'Sora', sans-serif;
    font-size: 16.5px;
    letter-spacing: .03em;
}

.app-sidebar .brand span {
    display: block;
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.app-search {
    width: 100%;
    padding: 8px 13px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.07);
    color: #fff;
    font-size: 12.5px;
    margin-bottom: 10px;
    transition: background .18s ease, border-color .18s ease;
}

.app-search:focus { outline: none; background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); }
.app-search::placeholder { color: rgba(255,255,255,0.4); }

.sidebar-arrow-toggle {
    align-self: flex-end;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: 2px 2px 8px;
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.16);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s ease;
}

.sidebar-arrow-toggle:hover { background: var(--brand-blue); }
.sidebar-arrow-toggle svg { width: 13px; height: 13px; transition: transform .2s ease; }
.app-sidebar.collapsed .sidebar-arrow-toggle svg { transform: rotate(180deg); }
.app-sidebar.collapsed .sidebar-arrow-toggle { align-self: center; }

.app-sidebar.collapsed { width: 68px; padding-left: 10px; padding-right: 10px; }
.app-sidebar.collapsed .brand span,
.app-sidebar.collapsed .brand b,
.app-sidebar.collapsed .app-search,
.app-sidebar.collapsed .app-nav a .label { display: none; }
.app-sidebar.collapsed .brand .brand-logo-img { display: none; }
.app-sidebar.collapsed .app-nav a { justify-content: center; padding: 10px 6px; gap: 0; position: relative; }
.app-sidebar.collapsed .app-nav a .ico { width: 19px; height: 19px; }
.app-sidebar.collapsed .app-nav a:hover::after {
    content: attr(data-label);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 10px;
    background: #0B1530;
    color: #fff;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 50;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

.app-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.app-nav li { margin-bottom: 0; }

.app-nav a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    text-decoration: none;
    color: rgba(255,255,255,0.68);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 11px;
    border-radius: 11px;
    transition: background .2s ease, color .2s ease, transform .15s ease;
    cursor: pointer;
    text-align: left;
    position: relative;
    border-left: 3px solid transparent;
}

.app-nav a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.app-nav a:active { transform: scale(0.97); }
.app-nav a.active { background: var(--brand-blue); color: #fff; border-left-color: #4E9BFF; box-shadow: 0 2px 10px rgba(0,74,171,0.4); }
.app-nav .ico { width: 18px; height: 18px; text-align: center; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.75); }
.app-nav .ico svg { width: 18px; height: 18px; }
.app-nav a.active .ico { color: #fff; }

/* Pedido do usuário: "Ordens de Serviço" (o rótulo mais longo do menu)
   estava quebrando em 2 linhas — o <span class="label"> não tinha
   min-width:0, então um flex item não encolhe por padrão, empurrando o
   texto pra quebrar em vez de ficar numa linha só. */
.app-nav .label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.app-sair { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; }

.main-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    background: var(--card);
    border-bottom: 1px solid var(--line);
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Pedido do usuário: a barra superior (título + Caixa + usuário) fica
       fixa mesmo rolando a página — igual ao .actionbar da tela de OS, que
       já era sticky. z-index maior que o do .actionbar (30) pra ficar por
       cima dele durante a transição de rolagem. */
    position: sticky;
    top: 0;
    z-index: 40;
}

.topbar h1 {
    font-size: 22px;
    color: var(--heading);
}

.topbar-subtitle {
    display: block;
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 2px;
}

.user-box {
    background: var(--brand-blue-light);
    color: var(--brand-blue-dark);
    padding: 9px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
}

.content {
    padding: 24px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.stat-card, .panel {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    border: 1px solid var(--line);
}

/* .card já tinha margin-bottom:18px pra separar os próximos da fila — .panel
   nunca teve o equivalente (só .stats-grid, que embrulha os .stat-card, dava
   esse respiro via gap+margin-bottom do próprio grid). Toda tela com dois ou
   mais <div class="panel"> seguidos direto um do outro (Dashboard, Vitrine
   Virtual, Caixa etc.) ficava com as caixas coladas, sem respiro nenhum
   entre elas — só a borda de 1px separando. Fica só em .panel (não em
   .stat-card) de propósito: .stat-card já ganha espaçamento do `gap` do
   grid que o contém, e um margin-bottom aqui também somaria em cima disso,
   empurrando a próxima LINHA do grid mais longe do que a de verdade entre
   colunas (gap e margin não colapsam entre si dentro de grid). */
.panel { margin-bottom: 18px; }

.stat-card span {
    display: block;
    font-size: 11px;
    color: var(--ink-soft);
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .03em;
}

.stat-card strong {
    font-family: 'Sora', sans-serif;
    font-size: 26px;
    color: var(--heading);
}

.panel h2 {
    margin-bottom: 14px;
    font-size: 16px;
}

.alert {
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 13.5px;
}

.alert.error {
    background: #FBEAE8;
    color: var(--accent-red);
    border: 1px solid #F3C9C4;
}

.alert.success {
    background: #E6F6ED;
    color: var(--accent-green);
    border: 1px solid #BEE7D1;
}

.alert.warning {
    background: #FBEFE0;
    color: var(--accent-amber);
    border: 1px solid #F3DCB3;
}

/* Pedidos da Loja Virtual (item 220) — mesmas classes do renderPedidos() do
   protótipo (cards .prazo-parcela-item em vez de tabela). flex-wrap foi
   acrescentado em .prazo-parcela-item (ausente no protótipo) porque aqui a
   linha de ações tem mais botões reais (Faturar com forma de pagamento,
   Cancelar, Imprimir cupom) do que o protótipo, que não teria onde encaixar
   tudo numa única linha em telas estreitas. */
.dash-empty-box { text-align: center; padding: 26px 10px; color: var(--ink-soft); font-size: 13px; }
.dash-empty-box .ic { font-size: 24px; opacity: .5; margin-bottom: 8px; display: flex; justify-content: center; }
.dash-empty-box .ic svg { width: 28px; height: 28px; }
.prazo-filtro-tabs { display: flex; background: var(--paper); border-radius: 9px; padding: 3px; gap: 3px; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prazo-filtro-tabs button { background: none; border: none; padding: 7px 12px; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--ink-soft); cursor: pointer; font-family: 'Inter', sans-serif; white-space: nowrap; flex-shrink: 0; }
.prazo-filtro-tabs button.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.prazo-parcela-item { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--line); flex-wrap: wrap; row-gap: 8px; }
.prazo-parcela-item:last-child { border-bottom: none; }
.prazo-parcela-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.prazo-parcela-info { flex: 1; min-width: 220px; }
.prazo-parcela-info b { font-size: 13px; color: var(--ink); display: block; }
.prazo-parcela-info span { font-size: 11.5px; color: var(--ink-soft); }
.prazo-parcela-valor { text-align: right; margin-right: 8px; }
.prazo-parcela-valor b { font-size: 14px; color: var(--ink); display: block; }
.prazo-parcela-valor span { font-size: 10.5px; color: var(--ink-soft); }
.prazo-badge { font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.prazo-badge.pendente { background: var(--brand-blue-light); color: var(--brand-blue); }
.prazo-badge.atrasada { background: #FBEAE8; color: var(--accent-red); }
.prazo-badge.paga { background: #E6F6ED; color: var(--accent-green); }
.pedido-faturado-tag { font-size: 9.5px; font-weight: 700; color: var(--accent-green); background: #E6F6ED; padding: 2px 8px; border-radius: 999px; margin-left: 6px; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 13.5px;
}

.data-table th,
.data-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.data-table th {
    background: var(--paper);
    color: var(--ink-soft);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .03em;
}

.data-table td.actions-cell {
    white-space: nowrap;
    text-align: right;
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Sem isso, um item de grid não encolhe abaixo do min-content do seu
   conteúdo (ex.: .tabs-nav com overflow-x:auto) — o item (e a página
   inteira) estoura a largura da tela em vez de deixar só o conteúdo
   interno rolar horizontalmente, como já era a intenção do .tabs-nav. */
.two-col > * {
    min-width: 0;
}

.list-box {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.list-box li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
}

.list-box strong,
.list-box small {
    display: block;
}

.list-box small {
    color: var(--ink-soft);
    grid-column: 1 / -1;
}

/* Botões — reproduzem .btn/.btn-primary/.btn-ghost/.btn-danger/.btn-sm do protótipo */
.btn, .button-link, .primary-btn, .secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    border-radius: 9px;
    padding: 10px 16px;
    font-weight: 700;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    border: none;
    cursor: pointer;
    margin: 0;
    line-height: 1.2;
}

.button-link,
.primary-btn,
.btn-primary {
    background: var(--brand-blue);
    color: white;
}

.button-link:hover,
.primary-btn:hover,
.btn-primary:hover {
    background: var(--brand-blue-dark);
}

.secondary-btn,
.btn-ghost {
    background: var(--brand-blue-light);
    color: var(--brand-blue-dark);
    border: 1px solid var(--brand-blue-light);
}

.btn-danger {
    background: #FBEAE8;
    color: var(--accent-red);
    border: 1px solid #F3C9C4;
}

.btn-danger:hover {
    background: var(--accent-red);
    color: #fff;
}

/* Faltava — .btn-success já era usado em sales/form.php e no checklist
   técnico público, mas sem regra nenhuma (caía no botão cinza padrão do
   navegador). Valor exato do protótipo. */
.btn-success {
    background: var(--accent-green);
    color: #fff;
}

.btn-success:hover {
    opacity: 0.9;
}

/* Pedido do usuário: botão "Serviço concluído" (Checklist Técnico) só
   habilita com o check-out 100% marcado — sem isso, um .btn-success
   desabilitado ficava com a mesma cor sólida de sempre, parecendo
   clicável. */
.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.btn:disabled:hover {
    opacity: 0.45;
}

.btn-sm {
    padding: 7px 12px;
    font-size: 12px;
}

/* Select compacto pra ficar lado a lado com .btn-sm num toolbar (ex.: filtro
   de mês em "Imprimir movimento:" do Caixa, status rápido nas listas de
   Compras e Encomendas, forma de pagamento num pedido da Vitrine) — pedido
   do usuário: o <select> sem nenhuma classe cai no estilo cru do navegador
   (borda grossa quadrada, fonte/altura desalinhada dos botões ao lado),
   e é justamente esse estilo cru que o dropdown customizado do sistema
   (.cs-wrap/.cs-display, ver enhanceCustomSelects() em app.js) copia pra
   cima do gatilho visível — sem classe aqui, o dropdown bonito existe, só
   que "vestido" com a aparência feia do navegador por baixo. Não leva seta
   própria nem appearance:none: TODO select do sistema já ganha a seta e o
   dropdown customizados via JS por cima deste; redeclarar uma aqui só
   reservaria espaço em dobro (a seta do JS, com seu próprio gap, fica
   DENTRO do padding-right definido aqui). */
.select-sm {
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: var(--ink);
    background: var(--card);
    cursor: pointer;
}

.select-sm:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px var(--brand-blue-glow);
}

.button-link,
.primary-btn,
.secondary-btn {
    margin: 10px 0 16px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-group label {
    font-weight: 700;
    font-size: 12.5px;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.field-group input,
.field-group select,
.field-group textarea {
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    background: var(--card);
    color: var(--ink);
}

.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px var(--brand-blue-glow);
}

.actions-row {
    display: flex;
    gap: 12px;
    grid-column: 1 / -1;
}

/* Badges genéricos de status (base para os badges específicos de cada módulo) */
.badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.badge-green { background: #E6F6ED; color: var(--accent-green); }
.badge-red { background: #FBEAE8; color: var(--accent-red); }
.badge-amber { background: #FBEFE0; color: var(--accent-amber); }
.badge-blue { background: var(--brand-blue-light); color: var(--brand-blue); }
.badge-gray { background: var(--paper); color: var(--ink-soft); }

/* Itens do menu lateral que precisam de atenção agora (leads em negligência,
   pedido novo na Vitrine ainda não visto) — igual ao nav-pulsando/
   nav-pulsando-vitrine do protótipo.
   Pedido do usuário (redesenhado como UX/UI sênior): "uma luz brilhante,
   moderno e minimalista" — o contorno percorrendo a borda (tentativa
   anterior) tinha motion de menos "calma"/mais "chamativo-chamativo" do
   que o pedido, mesmo já acompanhando o formato certo do botão. Um brilho
   suave RESPIRANDO atrás do ÍCONE (não o botão inteiro) é a linguagem
   visual mais comum em painéis modernos pra "isso aqui tem algo novo" —
   um halo radial que cresce/encolhe e entra/sai de foco devagar, sem
   nenhuma borda ou traço duro, e o mesmo tom quente usado no anel do
   badge (um só idioma de cor pra "precisa de atenção" no menu inteiro,
   em vez do vermelho antigo do badge competindo com o dourado do halo). */
.app-nav a.nav-pulsando .ico, .app-nav a.nav-pulsando-vitrine .ico { position: relative; z-index: 1; }
.app-nav a.nav-pulsando .ico::after, .app-nav a.nav-pulsando-vitrine .ico::after {
    content: ''; position: absolute; inset: -7px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,184,64,.65) 0%, rgba(255,184,64,0) 72%);
    animation: navIconGlow 2.4s ease-in-out infinite; z-index: -1; pointer-events: none;
}
@keyframes navIconGlow {
    0%, 100% { opacity: .35; transform: scale(.82); }
    50% { opacity: 1; transform: scale(1.18); }
}
.app-nav a.nav-pulsando .badge, .app-nav a.nav-pulsando-vitrine .badge { animation: pulsarNavBadge 1.6s ease-in-out infinite; }
@keyframes pulsarNavBadge { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,184,64,.55); } 50% { box-shadow: 0 0 0 5px rgba(255,184,64,0); } }

.empty { padding: 30px; text-align: center; color: var(--ink-soft); font-size: 13.5px; }

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }

/* Caixa de busca — pílula com brilho na cor de marca, lupa clicável e botão
   de limpar, baseada numa imagem de referência enviada pelo usuário (outro
   app, fundo preto/borda amarela) — só que na cor de marca configurável do
   sistema (--brand-blue) em vez de amarelo fixo, pra continuar consistente
   com o resto do sistema (decisão tomada com o usuário). O ".searchbox-wrap"
   around the input é o que permite o ícone/botão de limpar serem elementos
   de verdade (clicáveis), em vez da imagem de fundo decorativa de antes. */
.searchbox-wrap { position: relative; flex: 1; min-width: 200px; display: flex; }

.searchbox {
    flex: 1;
    min-width: 200px;
    width: 100%;
    padding: 11px 15px 11px 40px;
    border: 1.5px solid var(--brand-blue-light);
    border-radius: 999px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    background: var(--paper);
    box-shadow: 0 0 0 3px var(--brand-blue-glow);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.searchbox-wrap .searchbox { padding-right: 38px; }

.searchbox:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 5px var(--brand-blue-glow); background-color: var(--card); }

.searchbox-icon-btn {
    position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    color: var(--brand-blue); padding: 0;
}
.searchbox-icon-btn svg { width: 17px; height: 17px; }
.searchbox-icon-btn:hover { background: var(--brand-blue-light); }

.searchbox-clear-btn {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; border-radius: 50%; border: none;
    background: var(--brand-blue-light); color: var(--brand-blue);
    display: none; align-items: center; justify-content: center; cursor: pointer;
    font-size: 13px; line-height: 1; padding: 0;
}
.searchbox-clear-btn.show { display: flex; }
.searchbox-clear-btn:hover { background: var(--brand-blue); color: #fff; }

/* ===== Chat da Equipe — igual ao protótipo (.chat-container etc.) ===== */
.chat-container { background: var(--card); border-radius: 14px; border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; height: calc(100vh - 110px); min-height: 480px; max-height: 720px; box-shadow: 0 2px 14px rgba(0,0,0,0.06); }
/* Removida a barra genérica "hero" desta tela (pedido do usuário — igual
   ao já feito na Loja Virtual): esta virou a única barra do topo, então
   ganhou o mesmo "escape" do padding de .content que o hero tinha
   (margin negativa até a borda) e position:sticky, pra ficar fixa
   enquanto só a página rola por baixo dela. */
.chat-topbar {
    background: var(--brand-blue-dark); color: #fff; padding: 14px 24px;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 20;
    margin: -24px -24px 20px;
}
@media (max-width: 768px) {
    .chat-topbar { margin-left: -90px; padding-left: 66px; }
}
.chat-topbar-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.chat-topbar-texts { min-width: 0; }
.chat-avatar-group { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat-avatar-group svg { width: 19px; height: 19px; }
.chat-topbar-title { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-topbar-sub { font-size: 11.5px; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-topbar-actions { display: flex; gap: 6px; flex-shrink: 0; }
.chat-topbar-btn { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.14); border: none; color: #fff; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-topbar-btn:hover { background: rgba(255,255,255,0.25); }
.chat-os-panel { padding: 12px 16px; background: var(--paper); border-bottom: 1px solid var(--line); flex-shrink: 0; }

.chat-messages-area {
    flex: 1; overflow-y: auto; padding: 18px;
    background-color: #E9E1D3;
    background-image:
        radial-gradient(circle at 15px 15px, rgba(0,0,0,0.025) 1.5px, transparent 1.5px),
        radial-gradient(circle at 55px 55px, rgba(0,0,0,0.025) 1.5px, transparent 1.5px);
    background-size: 70px 70px;
    display: flex; flex-direction: column; gap: 3px;
}

.chat-empty { margin: auto; text-align: center; color: var(--ink-soft); font-size: 13px; background: rgba(255,255,255,0.6); padding: 14px 20px; border-radius: 10px; }

.chat-bubble-row { display: flex; gap: 8px; align-items: flex-end; max-width: 76%; margin-bottom: 5px; }
.chat-bubble-row.own { align-self: flex-end; flex-direction: row-reverse; }
.chat-bubble-row.other { align-self: flex-start; }
.chat-avatar-mini { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; flex-shrink: 0; }
.chat-bubble { background: var(--card); border-radius: 12px; padding: 7px 10px 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.12); min-width: 60px; }
.chat-bubble-row.own .chat-bubble { background: #D9FDD3; }
.chat-bubble .chat-autor { font-size: 12px; font-weight: 700; color: var(--brand-blue); margin-bottom: 2px; }
.chat-bubble-row.own .chat-autor { display: none; }
.chat-bubble p { margin: 0; font-size: 13.5px; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.chat-bubble img.chat-media, .chat-bubble video.chat-media,
.chat-bubble img, .chat-bubble video { max-width: 230px; max-height: 230px; border-radius: 8px; display: block; margin-top: 2px; cursor: pointer; }
.chat-bubble audio { margin-top: 2px; height: 34px; max-width: 220px; }

/* Baixar mídia enviada no chat (pedido do usuário) — botão de download
   sobreposto no canto da imagem/vídeo, e ao lado do player de áudio (não
   dá pra sobrepor um <audio> nativo do jeito que dá numa imagem). */
.chat-media-wrap { position: relative; display: inline-block; }
.chat-media-wrap .chat-media { margin-top: 2px; }
.chat-media-download {
    position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(0,0,0,0.55); color: #fff; display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: background .12s ease;
}
.chat-media-download:hover { background: rgba(0,0,0,0.8); }
.chat-media-download svg { width: 14px; height: 14px; }
.chat-media-audio-wrap { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.chat-media-download-audio { position: static; background: var(--brand-blue); flex-shrink: 0; }
.chat-hora { font-size: 10px; color: var(--ink-soft); text-align: right; margin-top: 3px; }

.chat-gravando { background: #FDEAEA; color: var(--accent-red); font-size: 12.5px; padding: 8px 16px; text-align: center; flex-shrink: 0; }

/* Aviso de mensagem nova (som + visual), aparece em cima de QUALQUER tela
   do painel — ver app.js (polling em /chat/poll). Clicável (abre o Chat da
   Equipe), some sozinho depois de um tempo ou ao clicar no "×". */
.chat-toast {
    position: fixed; right: 20px; bottom: 20px; z-index: 200;
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.22); padding: 14px 16px; max-width: 320px;
    cursor: pointer; opacity: 0; transform: translateY(16px);
    transition: opacity .2s ease, transform .2s ease;
}
.chat-toast.open { opacity: 1; transform: translateY(0); }
.chat-toast-icon {
    width: 36px; height: 36px; border-radius: 50%; background: var(--brand-blue); color: #fff;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chat-toast-icon svg { width: 17px; height: 17px; }
.chat-toast-body { min-width: 0; }
.chat-toast-title { font-weight: 700; font-size: 13px; color: var(--heading); }
.chat-toast-preview { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.chat-toast-close {
    background: none; border: none; color: var(--ink-soft); font-size: 16px; cursor: pointer;
    line-height: 1; padding: 2px; margin-left: auto; flex-shrink: 0;
}
.chat-toast-close:hover { color: var(--ink); }
@media (max-width: 480px) {
    .chat-toast { left: 14px; right: 14px; max-width: none; }
    .chat-toast-preview { max-width: none; }
}

/* Aviso de pedido novo da Loja Virtual (som + visual, card no canto
   SUPERIOR direito — pedido do usuário, igual ao protótipo) — aparece em
   cima de QUALQUER tela do painel (ver app.js, polling em /store/poll).
   Diferente do .chat-toast (canto inferior, só texto): mostra itens/
   entrega/total e um botão de ação, e não some sozinho — fica até o
   usuário fechar ou clicar em "Visualizar e Aceitar" (um pedido novo
   merece mais atenção que uma mensagem de chat). */
.store-order-toast {
    position: fixed; top: 90px; right: 20px; z-index: 200;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.22); padding: 14px 16px; width: 300px;
    opacity: 0; transform: translateX(24px) scale(.97);
    transition: opacity .2s ease, transform .2s ease;
}
.store-order-toast.open { opacity: 1; transform: translateX(0) scale(1); }
.store-order-toast-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.store-order-toast-icon {
    width: 32px; height: 32px; border-radius: 50%; background: var(--brand-blue); color: #fff;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.store-order-toast-icon svg { width: 15px; height: 15px; }
.store-order-toast-title { font-weight: 700; font-size: 13px; color: var(--heading); }
.store-order-toast-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; }
.store-order-toast-close {
    background: none; border: none; color: var(--ink-soft); font-size: 16px; cursor: pointer;
    line-height: 1; padding: 2px; margin-left: auto; flex-shrink: 0;
}
.store-order-toast-close:hover { color: var(--ink); }
.store-order-toast-linha { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; margin-bottom: 6px; color: var(--ink); }
.store-order-toast-linha span:last-child { text-align: right; }
.store-order-toast-btn { margin-top: 10px; text-align: center; text-decoration: none; display: block; }
@media (max-width: 480px) {
    .store-order-toast { left: 14px; right: 14px; width: auto; top: auto; bottom: 16px; }
}
.chat-input-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--paper); border-top: 1px solid var(--line); flex-shrink: 0; }
.chat-icon-btn { background: none; border: none; font-size: 19px; cursor: pointer; color: var(--ink-soft); padding: 6px; border-radius: 50%; flex-shrink: 0; line-height: 1; display: flex; align-items: center; justify-content: center; }
.chat-icon-btn:hover { background: rgba(0,0,0,0.06); }
.chat-icon-btn.recording { color: var(--accent-red); background: rgba(193,53,43,0.12); }
.chat-icon-btn svg { width: 18px; height: 18px; }
.chat-text-input { flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: 999px; padding: 10px 16px; font-size: 16px; font-family: 'Inter', sans-serif; }
.chat-text-input:focus { outline: none; border-color: var(--brand-blue); }
.chat-send-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-blue); color: #fff; border: none; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat-send-btn:hover { opacity: 0.9; }
.chat-send-btn svg { width: 17px; height: 17px; }
.addline { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.addline input[type=text], .addline input[type=number] {
    flex: 1; min-width: 200px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; color: var(--ink); background: var(--card);
}
.addline input:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px var(--brand-blue-glow); }

.kanban-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.kanban-column {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
}

.kanban-column h3 {
    margin-bottom: 10px;
    font-size: 13px;
}

.kanban-item {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
    color: var(--ink);
    font-size: 13px;
    cursor: grab;
    transition: box-shadow .15s ease, opacity .15s ease;
}

.kanban-item:active { cursor: grabbing; }
.kanban-item.dragging { opacity: .4; }
.kanban-column.drag-over { background: var(--brand-blue-light); }

/* Abas genéricas ([data-tabs]/[data-tab-btn]/[data-tab-panel]) */
.tabs-nav {
    position: relative;
    display: flex;
    gap: 4px;
    background: var(--paper);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 16px;
    overflow-x: auto;
}

.tabs-nav button,
.tabs-nav a {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-soft);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.tabs-nav button.active,
.tabs-nav a.active {
    background: var(--card);
    color: var(--brand-blue);
    box-shadow: var(--shadow-sm);
}

/* Barra de navegação entre as páginas de um mesmo grupo do menu lateral
   (ex.: Clientes/Usuários/Fornecedores dentro de "Pessoas") — cada aba é um
   link de verdade para a página real (não é JS trocando painel na mesma
   página, já que cada uma é uma rota/controller próprio), igual ao
   .tabs-nav genérico, só que navegando de fato. */
.group-tabs-wrap {
    margin-bottom: 18px;
}

/* Efeito deslizante entre abas (pedido do usuário) — um "pill" que desliza
   até a aba sob o mouse (.subtabs, .tabs-nav, .caixa-pill-tabs,
   .empresa-tabs, ver enhanceTabSlider() em app.js) ou com foco de teclado
   (Tab chega numa aba, ou ←/→ move entre elas). Só aparece durante o
   hover/foco — some ao sair, deixando a aba realmente ativa com o próprio
   destaque dela (.active), sem duplicar efeito. position:relative + z-index
   nos itens de cada barra (ver cada regra acima) garante que o texto/ícone
   sempre fica por cima do indicador, nunca escondido atrás dele. */
.tab-slide-indicator {
    position: absolute;
    top: 0; left: 0; width: 0; height: 0;
    border-radius: 8px;
    background: var(--brand-blue-light);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: left .2s cubic-bezier(.4,0,.2,1), top .2s cubic-bezier(.4,0,.2,1),
        width .2s cubic-bezier(.4,0,.2,1), height .2s cubic-bezier(.4,0,.2,1),
        opacity .15s ease;
}

/* ===== Toasts / modais / confirmação (public/assets/js/app.js) ===== */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 26, 0.55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay.open { display: flex; }

.modal-box {
    background: var(--card);
    border-radius: 16px;
    padding: 24px 26px;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-lg);
    text-align: center;
    /* Sem isso, um modal com formulário comprido (ex.: "+ Cliente" da tela
       de OS) simplesmente vazava pra fora da tela em cima/embaixo, sem
       nenhum jeito de rolar até os campos escondidos — achado em produção
       pelo usuário. Com max-height + scroll, qualquer modal (mesmo os
       pequenos de confirmação, que nunca chegam a precisar disso) fica
       sempre inteiro dentro da tela, não importa o tamanho do conteúdo. */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.modal-box h3 {
    font-size: 17px;
    margin-bottom: 8px;
}

.modal-box p {
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 18px;
}

.modal-box .modal-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 22px;
    font-weight: 800;
}

.modal-box.aviso .modal-icon { background: #FBEFE0; color: var(--accent-amber); }
.modal-box.confirmacao .modal-icon { background: var(--brand-blue-light); color: var(--brand-blue); }

/* Modal de sucesso (ex.: "Produto cadastrado!") — layout exato do protótipo
   (sistema-inforsystem.html): sem título, ícone de check em SVG desenhado
   com animação em vez do "✓" de texto estático num círculo preenchido,
   mensagem alinhada à esquerda dentro do card centralizado, e botão "OK"
   limitado a 140px/centralizado em vez de esticado como os outros modais. */
.modal-box.sucesso {
    padding: 34px 38px;
    border-radius: 18px;
    max-width: 320px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.sucesso-check-wrap { display: flex; justify-content: center; }
.sucesso-check-circle { stroke: #12915B; stroke-width: 2.5; fill: none; stroke-dasharray: 166; stroke-dashoffset: 166; animation: sucessoCircle .5s ease-out forwards; }
.sucesso-check-mark { stroke: #12915B; stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: sucessoMark .35s .45s ease-out forwards; }
@keyframes sucessoCircle { to { stroke-dashoffset: 0; } }
@keyframes sucessoMark { to { stroke-dashoffset: 0; } }

.modal-box.sucesso .sucesso-msg { font-family: 'Sora', sans-serif; font-size: 15.5px; font-weight: 600; color: var(--ink); margin: 16px 0 20px; white-space: pre-line; text-align: left; }

.modal-box.sucesso .btn-entrar {
    display: block;
    width: 100%;
    max-width: 140px;
    margin: 0 auto;
    border: none;
    background: var(--brand-blue);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 13px;
    border-radius: 9px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: opacity .15s ease;
}

.modal-box.sucesso .btn-entrar:hover { opacity: .9; }

/* ===== Área da Empresa — cabeçalho "hero" e cards, igual ao protótipo =====
   Classes extraídas literalmente de sistema-inforsystem.html (.hero,
   .empresa-*, .loja-perfil-*, .card, .field, .grid-2/3, .btn-ico, .h3-ico).
   label/input/select/textarea do protótipo são seletores de tag GLOBAIS —
   aqui ficam escopados dentro de .card pra não mudar a aparência das
   telas que já usam .field-group (padrão usado no resto do MVC). */
header.hero {
    background: var(--card);
    color: var(--ink);
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
    /* .content (layout compartilhado) sempre tem padding:24px — aqui o
       hero "escapa" desse respiro pra ficar rente às bordas da área de
       conteúdo, igual ao protótipo (lá o hero é filho direto da view,
       sem nenhum container com padding em volta). */
    margin: -24px -24px 20px;
    border-radius: 0;
}

@media (max-width: 768px) {
    header.hero { margin: -24px -24px 20px -66px; padding-left: 66px; }
}

.hero-inner {
    max-width: 1220px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-inner h1 { font-size: 19px; font-weight: 700; color: var(--ink); margin: 0; }
.hero-inner span { font-size: 12px; color: var(--ink-soft); }

.empresa-icone-box {
    width: 38px; height: 38px; border-radius: 10px; background: var(--brand-blue); color: #fff;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.empresa-icone-box svg { width: 18px; height: 18px; }

/* .content (compartilhado) já dá os 24px horizontais — aqui só centraliza
   e controla o respiro vertical, sem dobrar o padding lateral. */
main.pagewrap { max-width: 1220px; margin: 0 auto; padding: 22px 0 36px; }

.h3-ico { display: inline-flex; vertical-align: -3px; margin-right: 2px; }
.h3-ico svg { width: 17px; height: 17px; }
.btn-ico { display: inline-flex; vertical-align: -2px; }
.btn-ico svg { width: 14px; height: 14px; }

.loja-perfil-card {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
    border-radius: 16px; padding: 20px 24px; display: flex; align-items: center; gap: 16px; margin-bottom: 18px;
}
.loja-perfil-avatar {
    width: 56px; height: 56px; border-radius: 14px; background: rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff;
}
.loja-perfil-avatar svg { width: 26px; height: 26px; }
.loja-perfil-info b { font-family: 'Sora', sans-serif; font-size: 18px; color: #fff; display: block; }
.loja-perfil-info span { font-size: 12.5px; color: rgba(255,255,255,0.75); }

.empresa-tabs-scroll { overflow-x: auto; margin-bottom: 20px; -webkit-overflow-scrolling: touch; }
.empresa-tabs { position: relative; display: flex; gap: 6px; width: max-content; min-width: 100%; box-sizing: border-box; }
.empresa-tabs button, .empresa-tabs a {
    position: relative; z-index: 1;
    background: none; border: none; padding: 9px 16px; border-radius: 9px; font-size: 12.5px; font-weight: 700;
    color: var(--ink-soft); cursor: pointer; white-space: nowrap; font-family: 'Inter', sans-serif;
    transition: background .2s ease, color .2s ease; text-decoration: none; display: inline-flex; align-items: center;
}
.empresa-tabs button:hover, .empresa-tabs a:hover { color: var(--ink); }
.empresa-tabs button.active, .empresa-tabs a.active { background: #141B2E; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }

.empresa-2col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-bottom: 16px; align-items: start; }
.empresa-2col-stretch { align-items: stretch; }
.empresa-col-empilhada { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) { .empresa-2col { grid-template-columns: 1fr; } }

/* Pedido do usuário: "Central de Suporte" portada 1:1 do protótipo (mesmo
   método já usado em Config/"Perfil da Loja" e na tela de OS) — classes
   extraídas literalmente de sistema-inforsystem.html. */
.suporte-icone-box { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.suporte-icone-box svg { width: 19px; height: 19px; }
.suporte-acoes-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 900px) { .suporte-acoes-grid { grid-template-columns: 1fr; } }
.suporte-acao-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-decoration: none; display: block; transition: box-shadow .12s ease, border-color .12s ease; }
.suporte-acao-card:hover { border-color: var(--brand-blue); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.suporte-acao-icone { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; margin-bottom: 10px; }
.suporte-acao-icone svg { width: 18px; height: 18px; }
.suporte-acao-card b { font-size: 13.5px; color: var(--ink); display: block; margin-bottom: 2px; }
.suporte-acao-card span { font-size: 11.5px; color: var(--ink-soft); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: none; }
.faq-pergunta { display: flex; justify-content: space-between; align-items: center; padding: 12px 2px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink); }
.faq-seta { transition: transform .2s ease; color: var(--ink-soft); font-size: 12px; }
.faq-item.open .faq-seta { transform: rotate(180deg); }
.faq-resposta { display: none; padding: 0 2px 14px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.faq-item.open .faq-resposta { display: block; }
.diag-linha { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.diag-linha:last-child { border-bottom: none; }
.diag-linha span:first-child { color: var(--ink-soft); }
.diag-linha span:last-child { font-weight: 700; }
.diag-badge-ok { color: var(--accent-green); }
.diag-badge-alerta { color: var(--accent-amber); }
.suporte-card-flex { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; overflow: hidden; }
.suporte-card-conteudo { flex: 1; min-height: 0; overflow-y: auto; }
.suporte-textarea-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.suporte-textarea-wrap textarea { flex: 1; min-height: 70px; width: 100%; box-sizing: border-box; resize: none; }

.config-opcao-titulo { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink); }

/* Pedido do usuário: comparação com o protótipo na aba "Impressão" e
   "Aparência" (Área da Empresa) — CSS portado do protótipo pra essas
   classes, que nunca tinham sido trazidas pro MVC (telas eram bem mais
   simples que no protótipo até agora). */
.modo-tema-opcoes { display: flex; gap: 14px; flex-wrap: wrap; }
.modo-tema-opcao { background: none; border: 2px solid var(--line); border-radius: 16px; padding: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; color: var(--ink); transition: border-color .2s ease, transform .18s ease; }
.modo-tema-opcao:hover { transform: translateY(-2px); }
.modo-tema-opcao.selecionado { border-color: var(--brand-blue); box-shadow: 0 0 0 3px var(--brand-blue-glow); }
.modo-tema-preview { width: 130px; height: 80px; border-radius: 11px; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 8px; box-shadow: var(--shadow-sm); }
.modo-tema-preview span { display: block; border-radius: 5px; }
.modo-tema-preview-light { background: #F5F7FB; }
.modo-tema-preview-light span:first-child { height: 14px; background: #0B1530; width: 60%; }
.modo-tema-preview-light span:last-child { flex: 1; background: #fff; border: 1px solid #E3E8F1; }
.modo-tema-preview-dark { background: #060B18; }
.modo-tema-preview-dark span:first-child { height: 14px; background: #181D2B; width: 60%; }
.modo-tema-preview-dark span:last-child { flex: 1; background: #232838; border: 1px solid #333B4F; }

/* Pedido do usuário: no celular, "Modo Claro" e "Modo Escuro" (Área da
   Empresa → Aparência) lado a lado numa linha só — antes, a largura fixa de
   130px de .modo-tema-preview (pensada pro desktop) não cabia duas vezes
   numa tela de celular, então quebrava pra 2 linhas (um card embaixo do
   outro). flex:1 + min-width:0 fazem os dois cards dividirem igualmente a
   largura disponível (min-width:0 é necessário — sem isso o flexbox não
   encolhe um item abaixo do tamanho do seu conteúdo); .modo-tema-preview
   em 100% (em vez de 130px fixo) acompanha esse encolhimento. */
@media (max-width: 768px) {
    .modo-tema-opcoes { flex-wrap: nowrap; gap: 10px; }
    .modo-tema-opcao { flex: 1 1 0; min-width: 0; padding: 10px; }
    .modo-tema-preview { width: 100%; height: 64px; }
}

.empresa-2col-fixa { align-items: start; }
#pdfPreviewCard { display: flex; flex-direction: column; }
#pdfPreviewCard #pdfPreviewBox { flex: 1; display: flex; align-items: center; }
#pdfPreviewCard #pdfPreviewBox .preview-mock { width: 100%; }
.empresa-preview-fixa { position: sticky; top: 20px; }
.impressao-titulo-destaque { font-size: 20px; font-weight: 800; color: var(--heading); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }

.impressao-opcoes { display: flex; flex-direction: column; gap: 8px; }
.impressao-opcoes button { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; font-weight: 700; color: var(--ink); cursor: pointer; font-family: 'Inter', sans-serif; }
.impressao-opcoes button.active { background: var(--brand-blue-light); border-color: var(--brand-blue); color: var(--brand-blue); }

.config-opcao-grupo { margin-bottom: 18px; }
.config-opcao-grupo:last-child { margin-bottom: 0; }
.config-opcao-desc { font-size: 11.5px; color: var(--ink-soft); margin-top: 8px; line-height: 1.4; }
.config-subtitulo { font-size: 12px; font-weight: 800; color: var(--heading); margin: 18px 0 4px; }

.chip-opcoes { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-opcoes button { background: var(--paper); border: 1.5px solid var(--line); border-radius: 9px; padding: 9px 14px; font-size: 12.5px; font-weight: 700; color: var(--ink); cursor: pointer; font-family: 'Inter', sans-serif; }
.chip-opcoes button.active { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }

/* Prévias (Impressão/PDF) — só mock visual, sem dado real por trás (igual
   ao protótipo: valores fixos de exemplo, não dados reais da OS). */
.preview-mock { display: flex; justify-content: center; padding: 14px 0; }
.preview-cupom { width: 200px; background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0,0,0,0.08); padding: 14px 12px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #333; line-height: 1.6; transition: width .2s ease; }
.preview-cupom .titulo { text-align: center; font-weight: 700; font-size: 11px; margin-bottom: 2px; }
.preview-cupom .pc-sub { text-align: center; font-size: 8.5px; color: #777; }
.preview-cupom hr { border: none; border-top: 1px dashed #ccc; margin: 6px 0; }
.preview-cupom .pc-center-bold { text-align: center; font-weight: 700; font-size: 9.5px; margin-bottom: 2px; }
.preview-cupom .pc-center { text-align: center; }
.preview-cupom .pc-label { font-weight: 700; font-size: 9.5px; margin-bottom: 1px; }
.preview-cupom .pc-linha { display: flex; justify-content: space-between; }
.preview-cupom .pc-total { font-weight: 700; font-size: 11px; }
.preview-cupom .pc-via-tag { text-align: center; margin-top: 8px; font-size: 7.5px; color: #999; text-transform: uppercase; letter-spacing: .03em; }
.preview-etiqueta { background: #fff; border: 1.5px solid var(--ink); border-radius: 6px; padding: 8px 10px; text-align: left; transition: width .2s ease, height .2s ease; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; overflow: hidden; box-sizing: border-box; }
.preview-etiqueta.etq-os-layout { flex-direction: row; align-items: center; gap: 6px; }
.preview-etiqueta .etq-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.preview-etiqueta .barras { width: 100%; height: 32px; background: repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px); }
.preview-etq-barras-wrap { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; margin-top: 2px; }
.preview-etq-numeros { font-size: 9px; letter-spacing: 1.5px; color: #111; margin-top: 3px; font-family: 'Courier New', monospace; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: clip; }
.preview-etq-qr { flex-shrink: 0; width: 40px; height: 40px; margin: 0; background-image: linear-gradient(0deg,#222 50%,transparent 50%), linear-gradient(90deg,#222 50%,transparent 50%); background-size: 6px 6px; background-color: #fff; border: 2px solid #222; }
/* flex-shrink:0 abaixo: um item de flex column com overflow != visible vira
   elegível pro "automatic minimum size" do flexbox ir a ZERO — sem isso, se
   o conteúdo não coubesse na altura da etiqueta (ex.: 50x30), o navegador
   zerava a altura dessas linhas de texto em vez de encolher o código de
   barras/QR, que fica invisível por inteiro em vez de só truncar o texto. */
.preview-etq-empresa { color: #5578B0; text-transform: uppercase; letter-spacing: .02em; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; align-self: stretch; flex-shrink: 0; }
.preview-etq-empresa.os { color: #5A6478; text-transform: none; letter-spacing: normal; }
.preview-etq-preco { font-weight: 800; color: #0052CC !important; margin-top: 2px; display: block; flex-shrink: 0; }
.preview-etq-cat { color: #5578B0 !important; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; align-self: stretch; flex-shrink: 0; }
.preview-etq-os-linha { color: #3A6EA5 !important; display: block; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; flex-shrink: 0; }
.preview-etiqueta b { color: #141B2E; display: block; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; align-self: stretch; flex-shrink: 0; }
.preview-etiqueta span { color: var(--ink-soft); display: block; }

.preview-a4-interno { width: 280px; min-height: 395px; background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0,0,0,0.08); font-size: 7.5px; color: #333; overflow: hidden; }
.a4i-topbar { height: 5px; background: var(--brand-blue); }
.a4i-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 14px 10px; border-bottom: 1px solid #eee; }
.a4i-header-left { display: flex; align-items: center; gap: 7px; }
.a4i-icon { width: 20px; height: 20px; border-radius: 6px; background: var(--brand-blue-light); display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; }
.a4i-icon svg { width: 11px; height: 11px; }
.a4i-header-left b { font-size: 9.5px; color: var(--brand-blue); display: block; }
.a4i-header-left span { font-size: 7px; color: #999; }
.a4i-header-right { text-align: right; }
.a4i-header-right b { font-size: 11px; color: var(--brand-blue); display: block; }
.a4i-badge { background: var(--brand-blue-light); color: var(--brand-blue); font-size: 6.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; display: inline-block; margin: 3px 0; }
.a4i-header-right small { display: block; font-size: 6.5px; color: #999; }
.a4i-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 8px 14px; border-bottom: 1px solid #eee; }
.a4i-grid div { padding: 3px 6px 3px 0; }
.a4i-grid label { display: block; font-size: 6px; color: #999; text-transform: uppercase; font-weight: 700; letter-spacing: .02em; }
.a4i-grid span { font-size: 8px; color: #333; }
.a4i-secao { padding: 8px 14px; border-bottom: 1px solid #eee; }
.a4i-secao label { display: block; font-size: 6px; color: #999; text-transform: uppercase; font-weight: 700; letter-spacing: .02em; margin-bottom: 3px; }
.a4i-secao p { font-size: 7.5px; line-height: 1.4; margin: 0; }
.a4i-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.a4i-chips span { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; font-size: 6.5px; }
.a4i-servicos-linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.a4i-servicos-linha > span { font-size: 7.5px; flex: 1; }
.a4i-total-box { background: var(--paper); border-radius: 6px; padding: 5px 9px; text-align: right; flex-shrink: 0; }
.a4i-total-box span { display: block; font-size: 6px; color: #999; text-transform: uppercase; }
.a4i-total-box b { font-size: 10px; color: var(--heading); }
.a4i-pagamento { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid #eee; }
.a4i-pagamento label { font-size: 6px; color: #999; text-transform: uppercase; font-weight: 700; }
.a4i-pagamento b { font-size: 8px; }
.a4i-valor { margin-left: auto; font-weight: 700; font-size: 9px; color: var(--accent-green); }
.a4i-garantia { padding: 8px 14px; background: var(--paper); }
.a4i-garantia label { display: block; font-size: 6px; color: #999; text-transform: uppercase; font-weight: 700; margin-bottom: 2px; }
.a4i-garantia p { font-size: 6.5px; color: #777; line-height: 1.4; margin: 0; }
.a4i-via-label { font-size: 6.5px; font-weight: 800; color: var(--brand-blue); text-transform: uppercase; margin-bottom: 6px; letter-spacing: .02em; }
.a4i-linha-simples { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed #eee; font-size: 7px; }

.iphone15-wrap { display: flex; justify-content: center; padding: 10px 0; }
.iphone15-frame { width: 260px; height: 530px; background: #111; border-radius: 46px; padding: 9px; position: relative; box-shadow: 0 20px 45px rgba(0,0,0,0.3); }
.iphone15-frame::after { content: ''; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 84px; height: 24px; background: #000; border-radius: 16px; z-index: 6; }
.iphone15-screen { width: 100%; height: 100%; background: #F4F6FB; border-radius: 38px; overflow: hidden; position: relative; padding: 38px 10px 12px; box-sizing: border-box; }
.iphone15-screen-content { overflow-y: auto; height: 100%; font-family: 'Inter', sans-serif; }
.ip-lgpd-box { background: #FFF8E1; border: 1px solid #F5E1A0; border-radius: 8px; padding: 8px; font-size: 7px; color: #8A6D1F; line-height: 1.4; margin-bottom: 10px; display: flex; gap: 5px; }
.ip-empresa-info { text-align: center; margin-bottom: 10px; }
.ip-empresa-icone { width: 26px; height: 26px; background: #fff; border: 1px solid var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin: 0 auto 4px; font-size: 12px; }
.ip-empresa-icone svg { width: 13px; height: 13px; }
.ip-empresa-info b { font-size: 9px; display: block; }
.ip-empresa-info span { font-size: 7.5px; color: var(--ink-soft); }
.ip-status-card { background: #fff; border-radius: 10px; padding: 9px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 8px; }
.ip-status-topo { display: flex; justify-content: space-between; align-items: flex-start; }
.ip-status-topo .info span { font-size: 7px; color: var(--ink-soft); text-transform: uppercase; font-weight: 700; }
.ip-status-topo .info b { font-size: 10px; display: block; }
.ip-status-topo .info small { font-size: 7px; color: var(--ink-soft); }
.ip-progress-linha { display: flex; justify-content: space-between; font-size: 6.5px; color: var(--ink-soft); margin: 8px 0 3px; }
.ip-progress-barra { background: var(--line); border-radius: 999px; height: 5px; overflow: hidden; }
.ip-progress-barra div { background: var(--brand-blue); height: 100%; }
.ip-prazo-card { background: #fff; border-radius: 10px; padding: 9px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ip-prazo-icone { width: 22px; height: 22px; background: var(--brand-blue); color: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; }
.ip-prazo-icone svg { width: 12px; height: 12px; }
.ip-prazo-card span { font-size: 6.5px; color: var(--ink-soft); text-transform: uppercase; font-weight: 700; display: block; }
.ip-prazo-card b { font-size: 9px; }
.ip-extra-chip { display: inline-block; background: var(--brand-blue-light); color: var(--brand-blue); font-size: 6.5px; font-weight: 700; padding: 3px 7px; border-radius: 999px; margin: 2px 3px 0 0; }
.ip-footer-txt { text-align: center; font-size: 6.5px; color: #B8C0CC; margin-top: 8px; }
@media (max-width: 900px) { .empresa-2col-fixa { grid-template-columns: 1fr; } .empresa-preview-fixa { position: static; } }

.card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px; margin-bottom: 18px; box-shadow: var(--shadow-sm);
}
.card h3 { font-size: 15px; color: var(--heading); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }

/* Mesmo conjunto de regras reaproveitado dentro de .modal-box — os modais
   de Caixa (Abertura/Fechamento/Suprimento-Sangria) usam os mesmos
   .field/.grid-2/label soltos do protótipo, só que dentro de um modal em
   vez de um card da página. */
.card label, .modal-box label {
    display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-soft); margin-bottom: 6px; text-align: left;
}
.card input[type=text]:not(.searchbox), .card input[type=tel], .card input[type=email], .card input[type=number],
.card input[type=date], .card input[type=password], .card input[type=file], .card select, .card textarea,
.modal-box input[type=text]:not(.searchbox), .modal-box input[type=tel], .modal-box input[type=email], .modal-box input[type=number],
.modal-box input[type=date], .modal-box input[type=password], .modal-box input[type=file], .modal-box select, .modal-box textarea {
    width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; color: var(--ink); background: var(--card);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.card input:not(.searchbox):focus, .card select:focus, .card textarea:focus,
.modal-box input:not(.searchbox):focus, .modal-box select:focus, .modal-box textarea:focus {
    outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px var(--brand-blue-glow);
}
.card textarea, .modal-box textarea { min-height: 80px; resize: vertical; }
.card .field, .modal-box .field { margin-bottom: 14px; }
.card .grid-2, .modal-box .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.card .grid-3, .modal-box .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .card .grid-2, .card .grid-3, .modal-box .grid-2, .modal-box .grid-3 { grid-template-columns: 1fr; } }
.modal-box.confirmacao.perigo .modal-icon { background: #FBEAE8; color: var(--accent-red); }

/* OS: teclado numérico (desbloqueio tipo "código") e grade de padrão
   (tipo "padrão") — mesmos estilos/dimensões do protótipo. */
.senha-tipos{display:flex;gap:8px;margin-bottom:14px;}
.senha-tipos button{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;background:var(--card);color:var(--ink-soft);border:1.5px solid var(--line);border-radius:8px;padding:8px 14px;cursor:pointer;}
.senha-tipos button.on{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);}
.senha-display{font-family:'IBM Plex Mono',monospace;font-size:20px;letter-spacing:6px;text-align:center;background:var(--card);border:1.5px solid var(--line);border-radius:9px;padding:12px;margin-bottom:12px;min-height:20px;color:var(--heading);}
.keypad{display:grid;grid-template-columns:repeat(3,64px);gap:8px;justify-content:center;}
.keypad button{height:50px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);font-size:17px;font-weight:700;cursor:pointer;color:var(--ink);}
.keypad button:hover{background:var(--brand-blue-light);}
.keypad .wide{grid-column:span 3;background:var(--brand-blue);color:#fff;border:none;}
.padrao-grid{display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,54px);gap:20px;justify-content:center;padding:10px;position:relative;}
.padrao-dot{width:20px;height:20px;border-radius:50%;background:var(--card);border:2.5px solid var(--line);cursor:pointer;justify-self:center;align-self:center;transition:all .1s ease;position:relative;z-index:1;}
.padrao-dot.on{background:var(--brand-blue);border-color:var(--heading);}
/* Pedido do usuário: o caminho da senha-padrão tem que aparecer desenhado
   (linha ligando os pontos na ordem tocada), igual ao protótipo — antes só
   existia a lista de números em texto, sem nenhum traço visual. */
#padraoSvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}

/* Tela da Ordem de Serviço (Nova/Editar) — barra de ações, abas com sublinhado
   e demais classes extraídas de sistema-inforsystem.html (#view-os), que não
   tinham NENHUM equivalente no sistema até aqui (a tela usava um formulário
   genérico .panel/.form-grid, bem diferente do protótipo). */
.actionbar {
    display: flex; gap: 5px; margin-bottom: 18px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
    /* top:90px (não 0) pra não ficar embaixo da .topbar — que também é
       sticky agora (pedido do usuário) e tem 90px de altura. */
    position: sticky; top: 90px; z-index: 30; background: var(--paper); padding: 12px 0; box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}
.actionbar::-webkit-scrollbar { height: 4px; }
.actionbar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 999px; }
.abtn { display: inline-flex; align-items: center; gap: 5px; border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11.5px; border-radius: 8px; padding: 7px 11px; color: #fff; white-space: nowrap; flex-shrink: 0; text-decoration: none; }
.abtn svg { width: 13px; height: 13px; flex-shrink: 0; }
.abtn:hover { opacity: 0.9; }
.abtn.faturar { background: var(--accent-green); }
.abtn.visualizar { background: var(--brand-blue); }
.abtn.a4 { background: var(--brand-blue-dark); }
.abtn.cupom { background: #5C4A99; }
.abtn.etiqueta { background: var(--accent-amber); }
.abtn.zap { background: #1EA355; }
.abtn.recibo { background: #0E7C86; }
.abtn.garantia { background: #8B5E3C; }
/* Pedido do usuário: botão "Garantia" fixo da barra de ações (ao lado de
   "Lista de OS") fica cinza/desativado até a OS ser faturada. */
.abtn:disabled { background: var(--line) !important; color: var(--ink-soft) !important; cursor: not-allowed; opacity: 1; }
.abtn:disabled:hover { opacity: 1; }

.tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1.5px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabs button { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 13.5px; background: none; border: none; color: var(--ink-soft); padding: 10px 16px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1.5px; white-space: nowrap; flex-shrink: 0; }
.tabs button.active { color: var(--heading); border-bottom-color: var(--brand-blue); }

.impressao-toggle { display: flex; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; }
.field-label-standalone { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 13.5px; color: var(--heading); margin: 22px 0 10px; text-transform: uppercase; letter-spacing: .03em; }
.impressao-toggle button { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .03em; background: var(--brand-blue-light); color: var(--brand-blue); border: 1.5px solid transparent; border-radius: 9px; padding: 10px 16px; cursor: pointer; text-transform: uppercase; }
.impressao-toggle button.on { background: var(--brand-blue); color: #fff; }

.input-icon-wrap { position: relative; }
.input-icon-wrap input { padding-right: 34px; }
.input-icon-wrap .input-icon { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--ink-soft); pointer-events: none; }
.input-icon-btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 14px; color: var(--ink-soft); padding: 6px 7px; border-radius: 6px; }
.input-icon-btn:hover { background: var(--paper); color: var(--brand-blue); }
.input-icon-btn svg { width: 15px; height: 15px; display: block; }

.savebar { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

.ficha-os-item { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.ficha-os-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ficha-os-topo b { font-size: 13px; }
.padrao-seq{text-align:center;font-family:'IBM Plex Mono',monospace;color:var(--ink-soft);font-size:12.5px;margin-top:8px;}

/* Tabela genérica sem classe própria (igual ao protótipo: table/thead th/
   tbody td "soltos", sem precisar de .data-table) — faltava inteira, usada
   nas abas Produtos/Peças/Serviços da Ordem de Serviço (achado na
   verificação visual: sem isso, cabeçalho e dado não alinhavam, e a
   quantidade ficava colada no nome do item, sem espaçamento nenhum). */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); border-bottom: 1.5px solid var(--line); padding: 8px 10px; }
tbody td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr { transition: background .12s ease; }
/* Pedido do usuário: esse hover genérico vazava pra fora do painel
   administrativo — qualquer <table> de página pública/"solta" (Loja
   Virtual, Checklist Técnico) que não define data-theme também herdava
   --paper no valor claro padrão (#F5F7FB), e como o texto dessas páginas
   é claro sobre fundo escuro, o hover virava um retângulo quase branco
   com texto branco em cima — ilegível. Escopado só pro painel
   administrativo (.app-shell, onde --paper sempre acompanha o tema
   claro/escuro escolhido); as páginas públicas ganharam seu próprio hover
   com a cor da marca (ver .store-cart-table/.tec-pub-minhas-os-scroll). */
.app-shell tbody tr:hover { background: var(--paper); }
.totalrow { font-weight: 700; color: var(--heading); }

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.modal-actions .btn { flex: 1; }

.hamburger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: calc(14px + env(safe-area-inset-top));
    left: calc(14px + env(safe-area-inset-left));
    z-index: 90;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background: var(--brand-blue-dark);
    color: #fff;
    font-size: 19px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

.sidebar-backdrop { display: none; }

@media (max-width: 768px) {
    .two-col {
        grid-template-columns: 1fr;
    }

    .topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding-left: 66px;
    }

    /* Topbar fica mais alta no mobile (título em cima, Caixa/usuário
       embaixo) — ajusta o offset do .actionbar (ver regra base) pra não
       ficar embaixo dela quando os dois estão "grudados" no topo. */
    .actionbar {
        top: 150px;
    }

    /* Menu lateral vira off-canvas (some da tela, entra ao clicar no
       hambúrguer) em vez de empilhar 26+ links acima do conteúdo — igual ao
       protótipo (.app-sidebar/#hamburgerBtn/#sidebarBackdrop). */
    .app-shell {
        flex-direction: row;
    }

    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh;
        width: 270px;
        z-index: 85;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 8px 0 30px rgba(0,0,0,0.3);
    }

    .app-sidebar.open { transform: translateX(0); }

    .hamburger-btn { display: flex; }

    .sidebar-backdrop.open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(5,10,25,0.55);
        z-index: 80;
    }

    /* Regra global: qualquer tabela do sistema vira rolável horizontalmente
       em telas pequenas, em vez de forçar a página inteira a ficar mais
       larga que o celular. */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    table thead, table tbody, table tfoot {
        display: table;
        width: 100%;
    }
}

/* ===== Subabas dentro de uma view (Pessoas/Produtos/CRM/PDV) — igual ao
   .subtabs do protótipo. Estendido pra aceitar <a> além de <button>, igual
   ao .tabs-nav genérico, porque pdv-tabs.php usa links reais. ===== */
.subtabs { position: relative; display: flex; gap: 6px; margin-bottom: 16px; background: var(--paper); border-radius: 14px; padding: 4px; width: max-content; max-width: 100%; overflow-x: auto; }
.subtabs button, .subtabs a {
    position: relative; z-index: 1;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; font-weight: 600; font-size: 13px;
    background: none; color: var(--ink-soft); border: none; border-radius: 11px; padding: 8px 16px; cursor: pointer;
    white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
}
.subtabs button.active, .subtabs a.active { background: var(--card); color: var(--brand-blue); box-shadow: var(--shadow-sm); }

/* ===== PDV (Vendas) — igual ao protótipo (.pdv-grid dentro de #view-vendas) ===== */
.pdv-grid { display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: start; }
.pdv-grid > * { min-width: 0; }
@media (max-width: 900px) { .pdv-grid { grid-template-columns: 1fr; } }

.leitor-status-ativo { background: #E6F6ED; color: var(--accent-green); font-size: 12px; font-weight: 700; text-align: center; padding: 10px 12px; border-radius: 9px; margin-bottom: 14px; animation: pulsarLeitor 1.6s ease-in-out infinite; }
@keyframes pulsarLeitor { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
/* Botão "Ativar/Desativar Leitor de Código de Barras" (PDV) — pedido do
   usuário: botão era clicável mas não tinha estado nenhum (não "ativava"
   nada de verdade, só focava o campo). Igual ao protótipo. */
#btnAtivarLeitor.on { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }

/* Pedido do usuário: câmera como leitor de QR Code/código de barras no
   celular (PDV, com o Leitor ativo) — tela cheia em cima de tudo
   (z-index maior que .modal-overlay, 1000, pra nunca ficar escondida
   atrás de outro modal aberto), moldura central só decorativa (indica
   onde apontar o código, não recorta o vídeo de verdade). */
.pdv-scanner-overlay {
    position: fixed; inset: 0; z-index: 1100; background: #000;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    padding: 20px; padding-top: calc(20px + env(safe-area-inset-top)); padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.pdv-scanner-video-wrap { position: relative; width: 100%; max-width: 480px; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: #111; }
.pdv-scanner-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdv-scanner-frame {
    position: absolute; inset: 14% 10%; border: 3px solid rgba(255,255,255,0.85); border-radius: 14px;
    box-shadow: 0 0 0 999px rgba(0,0,0,0.35); pointer-events: none;
}
.pdv-scanner-dica { color: #fff; font-size: 13px; text-align: center; opacity: .85; max-width: 320px; }
.pdv-scanner-fechar { color: #fff; border-color: rgba(255,255,255,0.3); }

.catbar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.catbar button { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12.5px; background: var(--brand-blue-light); color: var(--brand-blue); border: none; border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.catbar button.on, .catbar button.active { background: var(--brand-blue); color: #fff; }

.prodlista { max-height: 380px; overflow-y: auto; }
.prodlinha { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s ease; }
.prodlinha:hover { background: var(--paper); }
.prodlinha img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; background: var(--brand-blue-light); flex-shrink: 0; }
.prodlinha .info { flex: 1; min-width: 0; }
.prodlinha .nome { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prodlinha .cat { font-size: 10.5px; color: var(--ink-soft); }
.prodlinha .preco { font-family: 'IBM Plex Mono', monospace; font-weight: 700; color: var(--heading); font-size: 13.5px; white-space: nowrap; }
.prodlinha .estoque { font-size: 10.5px; white-space: nowrap; }
.prodlinha .estoque.baixo { color: var(--accent-amber); }
.prodlinha .estoque.zero { color: var(--accent-red); }

/* Pedido do usuário: "Sobre o Sistema" mostra só as 10 últimas
   implementações, rolando pra ver as demais — mesma técnica do .prodlista
   acima (max-height + overflow-y:auto sobre a lista inteira já
   carregada, sem paginação no servidor). 1040px medido ao vivo (não
   chutado): cada <details> colapsado aqui varia bastante de altura, já
   que o título é a frase completa que a pessoa pediu (às vezes 1 linha,
   às vezes um parágrafo inteiro) — bem diferente da altura fixa de linha
   do .prodlista. Valor cobre as 10 primeiras + uma fatia da 11ª de
   propósito, sinalizando que tem mais pra rolar. */
.system-updates-list { max-height: 1040px; overflow-y: auto; }

.resumo-linha { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 8px; color: var(--ink-soft); }
.resumo-linha.total { font-size: 19px; font-weight: 800; color: var(--heading); font-family: 'Sora', sans-serif; border-top: 1.5px solid var(--line); padding-top: 10px; margin-top: 6px; }
.troco-linha { background: #E6F6ED; border-radius: 9px; padding: 10px 12px; margin-top: 8px; font-weight: 800; font-size: 15px; color: var(--accent-green); }
.pagtipos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.pagtipos button { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12.5px; background: var(--card); color: var(--ink-soft); border: 1.5px solid var(--line); border-radius: 9px; padding: 9px; cursor: pointer; }
.pagtipos button.on { background: var(--brand-blue-dark); color: #fff; border-color: var(--heading); }
.empty-cart { text-align: center; color: var(--ink-soft); font-size: 13px; padding: 24px 0; }

/* ===== Caixa (abertura/fechamento/timeline) — igual ao protótipo ===== */
.caixa-header-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.caixa-header-left { display: flex; align-items: center; gap: 14px; }
.caixa-icon-box { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-blue); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.caixa-icon-box svg { width: 21px; height: 21px; }
.caixa-header-left h3 { font-family: 'Sora', sans-serif; font-size: 17px; color: var(--ink); margin: 0; }
.caixa-header-left span { font-size: 12.5px; color: var(--ink-soft); }
.caixa-pill-tabs { position: relative; display: flex; background: var(--paper); border-radius: 10px; padding: 4px; gap: 4px; }
.caixa-pill-tabs button, .caixa-pill-tabs a { position: relative; z-index: 1; border: none; background: none; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; font-family: 'Inter', sans-serif; text-decoration: none; }
.caixa-pill-tabs button.active, .caixa-pill-tabs a.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }

.caixa-status-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.caixa-status-left { display: flex; align-items: center; gap: 14px; }
.caixa-status-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.caixa-status-icon svg { width: 21px; height: 21px; }
.caixa-status-icon.aberto { background: #E6F6ED; color: var(--accent-green); }
.caixa-status-icon.fechado { background: #FBEAE8; color: var(--accent-red); }
.caixa-status-titulo { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 6px; }
.caixa-status-titulo .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green); flex-shrink: 0; }
.caixa-status-sub { font-size: 12px; color: var(--ink-soft); display: flex; gap: 14px; margin-top: 3px; flex-wrap: wrap; }

.caixa-2col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-bottom: 16px; align-items: stretch; }
@media (max-width: 900px) { .caixa-2col { grid-template-columns: 1fr; } }
.caixa-dinheiro-card { background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%); border-radius: 14px; padding: 20px; color: #fff; }
.caixa-dinheiro-titulo { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; opacity: 0.9; margin-bottom: 10px; }
.caixa-dinheiro-titulo svg { width: 16px; height: 16px; flex-shrink: 0; }
.caixa-dinheiro-valor { font-family: 'Sora', sans-serif; font-size: 32px; font-weight: 800; margin-bottom: 16px; }
.caixa-dinheiro-sub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.caixa-dinheiro-sub div { background: rgba(255,255,255,0.14); border-radius: 9px; padding: 8px 10px; }
.caixa-dinheiro-sub label { display: block; font-size: 9px; text-transform: uppercase; opacity: 0.85; margin-bottom: 2px; letter-spacing: .02em; }
.caixa-dinheiro-sub b { font-size: 13px; }

.caixa-acoes-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 700px) { .caixa-acoes-2col { grid-template-columns: 1fr; } }
.caixa-acao-btn { display: flex; align-items: center; gap: 14px; border: none; border-radius: 14px; padding: 16px 18px; cursor: pointer; text-align: left; font-family: 'Inter', sans-serif; width: 100%; }
.caixa-acao-btn.suprimento { background: var(--accent-green); color: #fff; }
.caixa-acao-btn.sangria { background: #FDEEEC; color: var(--accent-red); border: 1.5px solid #F5CFC9; }

/* ===== CRM & Marketing (.crm-*, extraído de sistema-inforsystem.html) ===== */
.crm-graficos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.crm-graficos-grid-2x1 { grid-template-columns: 1.6fr 1fr; }
@media (max-width: 900px) { .crm-graficos-grid-2x1 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .crm-graficos-grid { grid-template-columns: 1fr; } }

.crm-dash-topo { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 18px; }
@media (max-width: 900px) { .crm-dash-topo { grid-template-columns: 1fr; } }
.crm-grad-card { border-radius: 18px; padding: 20px 22px; color: #fff; min-height: 96px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 10px 26px rgba(0,0,0,0.15); }
.crm-grad-roxo { background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%); }
.crm-grad-azul { background: linear-gradient(135deg, #22D3EE 0%, #2563EB 100%); }
.crm-grad-label { font-size: 12px; font-weight: 700; opacity: .9; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.crm-grad-card b { font-family: 'Sora', sans-serif; font-size: 28px; font-weight: 800; }
.crm-badge-mini-col { display: flex; flex-direction: column; gap: 12px; }
.crm-badge-mini { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; flex: 1; }
.crm-badge-mini span:first-child { font-size: 11.5px; color: var(--ink-soft); font-weight: 600; }
.crm-badge-mini div { display: flex; align-items: center; gap: 8px; }
.crm-badge-mini b { font-family: 'Sora', sans-serif; font-size: 17px; color: var(--heading); }
.crm-badge-variacao { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.crm-badge-variacao.up { background: #DCFCE7; color: #15803D; }
.crm-badge-variacao.down { background: #FEE2E2; color: #B91C1C; }

.card.crm-card-escuro { background: linear-gradient(160deg, #0E1B3D 0%, #132A5E 55%, #0B1730 100%); border: 1px solid rgba(255,255,255,0.08); }
.crm-card-escuro h3 { color: #fff; }
.crm-card-escuro p { color: #8A8FA0 !important; }

.crm-area-svg text { font-family: 'Inter', sans-serif; fill: #8A8FA0; font-size: 9px; }
.crm-area-total { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 800; color: #fff; }
.crm-area-sub { font-size: 11.5px; color: #8A8FA0; margin-bottom: 6px; }

.crm-resumo-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.crm-resumo-item:last-child { border-bottom: none; }
.crm-resumo-item span { font-size: 12px; color: #8A8FA0; }
.crm-resumo-item b { font-family: 'Sora', sans-serif; font-size: 15px; color: #fff; }

.crm-linha-legenda { display: flex; gap: 18px; margin-bottom: 12px; font-size: 11.5px; }
.crm-linha-legenda span { display: flex; align-items: center; gap: 6px; color: #8A8FA0; }
.crm-linha-legenda .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.crm-donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; }
.crm-donut-legenda { display: flex; flex-direction: column; gap: 8px; }
.crm-donut-legenda-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #C7CBD4; }
.crm-donut-legenda-item .dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

.crm-top-cliente-item { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.crm-top-cliente-item:last-child { border-bottom: none; }
.crm-top-cliente-posicao { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-blue-light); color: var(--brand-blue); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; flex-shrink: 0; }
.crm-top-cliente-info { flex: 1; min-width: 0; }
.crm-top-cliente-info b { display: block; font-size: 13px; }
.crm-top-cliente-info span { font-size: 11px; color: var(--ink-soft); }
.crm-top-cliente-valor { font-family: 'Sora', sans-serif; font-weight: 800; color: var(--accent-green); font-size: 14px; }
.caixa-acao-icone { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.caixa-acao-btn.sangria .caixa-acao-icone { background: rgba(193,53,43,0.12); }
.caixa-acao-btn b { font-size: 14.5px; display: block; }
.caixa-acao-btn small { font-size: 12px; opacity: 0.85; font-weight: 500; }

.caixa-metodos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 900px) { .caixa-metodos-grid { grid-template-columns: 1fr 1fr; } }
.caixa-metodo-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.caixa-metodo-icone { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; margin-bottom: 8px; color: #fff; }
.caixa-metodo-icone svg { width: 16px; height: 16px; }
.caixa-metodo-label { font-size: 12px; color: var(--ink-soft); font-weight: 600; margin-bottom: 2px; }
.caixa-metodo-valor { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 800; color: var(--ink); }

.caixa-totais-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 700px) { .caixa-totais-grid { grid-template-columns: 1fr; } }
.caixa-total-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.caixa-total-card .ic { font-size: 16px; flex-shrink: 0; }
.caixa-total-card .txt { flex: 1; min-width: 0; }
.caixa-total-label { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.caixa-total-valor { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 800; color: var(--ink); }

.caixa-mov-empty { text-align: center; padding: 30px 20px; color: var(--ink-soft); }
.caixa-mov-empty .ic { font-size: 26px; margin-bottom: 8px; display: flex; justify-content: center; }
.caixa-mov-empty .ic svg { width: 28px; height: 28px; }
.caixa-mov-empty small { display: block; color: var(--brand-blue); font-size: 12px; margin-top: 4px; }
.caixa-mov-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.caixa-mov-item:last-child { border-bottom: none; }
.caixa-mov-item .tag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-right: 8px; }
.caixa-mov-item .tag.suprimento { background: #E6F6ED; color: var(--accent-green); }
.caixa-mov-item .tag.sangria { background: #FBEAE8; color: var(--accent-red); }

/* ===== Vitrine Virtual — cabeçalho "hero" igual ao protótipo ===== */
.vitrine-icone-box { width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid var(--brand-blue); color: var(--brand-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vitrine-icone-box svg { width: 18px; height: 18px; }
.vitrine-status-card { display: flex; align-items: center; justify-content: space-between; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.vitrine-status-card .esquerda { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.vitrine-status-card .link-preview { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--brand-blue); background: var(--paper); padding: 6px 12px; border-radius: 8px; word-break: break-all; }

/* Pedido do usuário ("deixe exatamente como no protótipo"): classes que
   faltavam no módulo admin da Vitrine Virtual — carrossel de banners em
   grade de miniaturas (em vez de cartões retangulares soltos), lista de
   Produtos em Destaque/Promoção em cartões (em vez de tabela), áreas de
   entrega em cartões, e a galeria de visualização "Produtos Publicados na
   Vitrine" (busca + categoria + paginação), que não existia antes. */
.vitrine-carrossel-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.vitrine-carrossel-item { position: relative; width: 110px; height: 70px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); }
.vitrine-carrossel-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vitrine-carrossel-item-acoes { position: absolute; top: 3px; right: 3px; display: flex; gap: 3px; }
.vitrine-carrossel-item-acoes button { width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; border: none; font-size: 11px; cursor: pointer; line-height: 1; padding: 0; }
.vitrine-carrossel-item-badge { position: absolute; bottom: 3px; left: 3px; font-size: 8.5px; font-weight: 800; padding: 2px 6px; border-radius: 999px; }
.vitrine-carrossel-item-badge.ativo { background: #E6F6ED; color: var(--accent-green); }
.vitrine-carrossel-item-badge.inativo { background: #F1F2F5; color: var(--ink-soft); }

/* Pedido do usuário ("igual à visualização dos produtos do PDV"): linhas
   agora reusam .prodlista/.prodlinha de verdade (ver store/index.php) — só
   .vitrine-destaque-toggle-label/.vitrine-destaque-promo-preco (os controles
   extras que o PDV não tem) continuam aqui. */
.vitrine-destaque-toggle-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.vitrine-destaque-toggle-label input { accent-color: var(--brand-blue); cursor: pointer; }
.vitrine-destaque-promo-preco { width: 100px; border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; font-size: 12px; }

.frete-zona-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.frete-zona-info b { display: block; font-size: 13px; color: var(--heading); }
.frete-zona-info span { font-size: 11.5px; color: var(--ink-soft); }
.frete-zona-valor { font-size: 13.5px; font-weight: 800; color: var(--brand-blue); white-space: nowrap; }

.vitrine-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.vitrine-toolbar .searchbox { max-width: 320px; flex: 1; min-width: 200px; }
.vitrine-categorias { display: flex; gap: 8px; flex-wrap: wrap; }
.vitrine-categorias button { background: var(--card); border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 12px; font-weight: 700; color: var(--ink-soft); cursor: pointer; font-family: 'Inter', sans-serif; }
.vitrine-categorias button.active { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }

.vitrine-lista-item { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.vitrine-lista-item:last-child { border-bottom: none; }
.vitrine-lista-icone { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-blue-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--brand-blue); }
.vitrine-lista-icone svg { width: 20px; height: 20px; }
.vitrine-lista-info { flex: 1; min-width: 0; }
.vitrine-lista-info b { display: block; font-size: 13.5px; color: var(--ink); }
.vitrine-lista-info span { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; font-weight: 700; letter-spacing: .02em; }
.vitrine-lista-preco { font-family: 'Sora', sans-serif; font-size: 14.5px; font-weight: 800; color: var(--heading); min-width: 80px; text-align: right; }
.vitrine-card-estoque-badge { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; flex-shrink: 0; }
.vitrine-card-estoque-badge.disponivel { background: #E6F6ED; color: var(--accent-green); }
.vitrine-card-estoque-badge.esgotado { background: #FBEAE8; color: var(--accent-red); }

.vitrine-paginacao { display: flex; align-items: center; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.vitrine-paginacao button { min-width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.vitrine-paginacao button.active { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.vitrine-paginacao button:disabled { opacity: .4; cursor: not-allowed; }
.vitrine-paginacao-info { font-size: 11.5px; color: var(--ink-soft); margin-left: 10px; }

/* Switch on/off — igual ao protótipo (.switch-toggle/.trilho/.bolinha) */
.switch-toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; cursor: pointer; }
.switch-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch-toggle .trilho { position: absolute; inset: 0; background: var(--line); border-radius: 999px; cursor: pointer; transition: background .18s ease; }
.switch-toggle .bolinha { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .18s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.switch-toggle input:checked + .trilho { background: var(--accent-green); }
.switch-toggle input:checked + .trilho .bolinha { transform: translateX(18px); }
.switch-toggle-lg { width: 50px; height: 28px; }
.switch-toggle-lg .bolinha { width: 22px; height: 22px; }
.switch-toggle-lg input:checked + .trilho .bolinha { transform: translateX(22px); }

.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 2px; vertical-align: 1px; flex-shrink: 0; }
.status-dot.verde { background: var(--accent-green); box-shadow: 0 0 0 3px rgba(18,145,91,0.15); }
.status-dot.cinza { background: #9AA5BC; box-shadow: 0 0 0 3px rgba(154,165,188,0.15); }
.status-dot.vermelho { background: #E23744; box-shadow: 0 0 0 3px rgba(226,55,68,0.15); }

/* ===== Bancada de Reparo — igual ao protótipo ===== */
.bancada-icone-box { width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid var(--brand-blue); color: var(--brand-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bancada-icone-box svg { width: 18px; height: 18px; }
.bancada-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.bancada-toolbar .searchbox-wrap { max-width: 340px; flex: 1; min-width: 200px; }
.bancada-resumo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 20px; }
@media (max-width: 900px) { .bancada-resumo-grid { grid-template-columns: repeat(2, 1fr); } }
.bancada-resumo-card { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 16px; cursor: pointer; text-align: center; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; border-top: 4px solid var(--cor-etapa); text-decoration: none; display: block; }
.bancada-resumo-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.08); transform: translateY(-1px); }
.bancada-resumo-card.selecionado { border-color: var(--cor-etapa); background: var(--paper); box-shadow: 0 4px 14px rgba(0,0,0,0.1); }
.bancada-resumo-num { font-family: 'Sora', sans-serif; font-size: 26px; font-weight: 800; color: var(--cor-etapa); }
.bancada-resumo-label { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .02em; margin-top: 4px; }

.bancada-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.bancada-board > * { min-width: 0; }
.bancada-empty { text-align: center; padding: 80px 20px; width: 100%; grid-column: 1/-1; }
.bancada-empty .circ { width: 64px; height: 64px; border-radius: 50%; background: var(--paper); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--ink-soft); }
.bancada-empty p { color: var(--ink-soft); font-size: 14px; }

.bancada-card { position: relative; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--cor-etapa, var(--brand-blue)); border-radius: 12px; padding: 14px 14px 12px; transition: box-shadow .12s ease, border-left-color .3s ease; }
.bancada-card.etapa-ofuscada { opacity: .35; }
.bancada-card-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.bancada-card-badge { background: var(--paper); color: var(--ink-soft); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.bancada-card-menu-wrap { position: relative; }
.bancada-card-menu-btn { background: none; border: none; color: var(--ink-soft); font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 6px; line-height: 1; }
.bancada-card-menu-btn:hover { background: var(--paper); }
.bancada-card-dropdown { display: none; position: absolute; right: 0; top: 26px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 26px rgba(0,0,0,0.15); z-index: 20; min-width: 190px; padding: 6px; }
.bancada-card-dropdown.open { display: block; }
.bancada-card-dropdown button, .bancada-card-dropdown a { display: block; width: 100%; text-align: left; background: none; border: none; padding: 8px 10px; font-size: 12.5px; border-radius: 7px; cursor: pointer; color: var(--ink); font-family: 'Inter', sans-serif; text-decoration: none; box-sizing: border-box; }
.bancada-card-dropdown button:hover, .bancada-card-dropdown a:hover { background: var(--paper); }
.bancada-card-dropdown .divisor { height: 1px; background: var(--line); margin: 5px 2px; }
.bancada-card-cliente { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.bancada-card-os-linha { font-size: 12.5px; color: var(--brand-blue); font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.bancada-card-defeito2 { font-size: 12px; color: var(--brand-blue); opacity: .85; margin-bottom: 10px; }
.bancada-card-pessoas { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.bancada-card-pessoas span { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.pill-ent { background: var(--brand-blue-light); color: var(--brand-blue); }
.pill-exec { background: #F1E9FB; color: #7C4DBF; }
.bancada-card-total-box { background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; font-size: 12px; color: var(--ink-soft); font-weight: 600; margin-bottom: 10px; }
.bancada-card-total-box b { color: var(--ink); font-size: 13.5px; }

/* Pedido do usuário: botão de ação visível no card da OS "Concluído" pra
   avisar o cliente pelo WhatsApp que o aparelho está pronto pra retirada
   (link wa.me, não envio automático) — mesmo tom de verde já usado em
   todo o sistema pra ações de WhatsApp (ver .suporte-icone-box/.badge-green
   etc.), só que em botão de largura cheia pra ficar bem visível no card,
   não um ícone pequeno. */
.bancada-aviso-retirada-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; background: #E6F6ED; color: var(--accent-green);
    border-radius: 9px; padding: 9px 10px; margin-bottom: 10px;
    font-size: 12px; font-weight: 700; text-decoration: none; text-align: center;
    box-sizing: border-box;
}
.bancada-aviso-retirada-btn:hover { opacity: .85; }
.bancada-aviso-retirada-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.bancada-aviso-retirada-indisponivel { font-size: 11px; color: var(--ink-soft); background: var(--paper); border: 1px dashed var(--line); border-radius: 9px; padding: 8px 10px; margin-bottom: 10px; text-align: center; }

.bancada-stepper { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 10px; }
.bancada-step { text-align: center; font-size: 8.5px; font-weight: 700; letter-spacing: .01em; padding: 5px 2px; border-radius: 6px; background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line); line-height: 1.2; min-width: 0; overflow-wrap: break-word; }
.bancada-step.atual { color: #fff; border-color: transparent; background: var(--cor-etapa); }
.etapa-analise { --cor-etapa: #004AAB; }
.etapa-peca { --cor-etapa: #B3781B; }
.etapa-servico { --cor-etapa: #7C4DBF; }
.etapa-concluido { --cor-etapa: #12915B; }
.etapa-pago { --cor-etapa: #0EA5A5; }

.bancada-card-rodape2 { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 9px; }
.bancada-card-data { font-size: 10.5px; color: var(--ink-soft); }
.bancada-card-data small { display: block; color: #B8C0CC; }
.bancada-arrows { display: flex; gap: 6px; }
.bancada-arrow-btn { width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.bancada-arrow-btn svg { width: 15px; height: 15px; }
.bancada-arrow-btn.back { background: var(--paper); color: var(--ink-soft); }
.bancada-arrow-btn.back:hover { background: var(--line); }
.bancada-arrow-btn.forward { background: var(--brand-blue); color: #fff; }
.bancada-arrow-btn.forward:hover { opacity: .9; }
.bancada-arrow-btn:disabled { opacity: .35; cursor: not-allowed; }

/* Pedido do usuário: no celular, os cards do fluxo de trabalho da Bancada
   de Reparo têm que ficar menores e em 2 colunas lado a lado (mesmo
   espírito do item 174, grade da Loja Virtual) — com só "auto-fill,
   minmax(300px,1fr)" acima, a largura de tela de um celular (~360-390px)
   não cabe nem 1 card e meio, então a grade ficava sempre em 1 coluna só.
   Força 2 colunas abaixo de 768px (mesmo ponto de corte "mobile" já usado
   no resto do sistema) e encolhe proporcionalmente o conteúdo do card
   (nada é removido, só reduzido) pra continuar legível nessa largura —
   principalmente o stepper de 5 etapas, o trecho mais apertado. */
@media (max-width: 768px) {
    .bancada-board { grid-template-columns: 1fr 1fr; gap: 10px; }
    .bancada-card { padding: 10px 10px 8px; border-left-width: 4px; }
    .bancada-card-topo { margin-bottom: 7px; }
    .bancada-card-badge { font-size: 9.5px; padding: 2px 7px; }
    .bancada-card-menu-btn { font-size: 13px; padding: 1px 4px; }
    .bancada-card-dropdown { min-width: 160px; font-size: 11px; }
    .bancada-card-cliente { font-size: 12px; margin-bottom: 3px; }
    .bancada-card-os-linha { font-size: 10.5px; margin-bottom: 4px; }
    .bancada-card-defeito2 { font-size: 10px; margin-bottom: 7px; }
    .bancada-card-pessoas { gap: 4px; margin-bottom: 7px; }
    .bancada-card-pessoas span { font-size: 8.5px; padding: 2px 6px; max-width: 72px; }
    .bancada-card-total-box { font-size: 10.5px; padding: 6px 8px; margin-bottom: 7px; }
    .bancada-card-total-box b { font-size: 11.5px; }
    /* Pedido do usuário: no mobile, o botão vira um ícone compacto (igual ao
       botão verde de WhatsApp da listagem de Clientes, .cliente-card-btn-whats)
       em vez do botão de largura cheia com texto usado no desktop — a tela é
       estreita demais (board em 2 colunas) pro texto "Avisar que está pronto"
       caber sem espremer o resto do card. */
    .bancada-aviso-retirada-btn { width: 32px; height: 32px; padding: 0; margin-bottom: 7px; gap: 0; }
    .bancada-aviso-retirada-btn svg { width: 15px; height: 15px; }
    .bancada-aviso-retirada-texto { display: none; }
    .bancada-aviso-retirada-indisponivel { font-size: 9.5px; padding: 6px 8px; margin-bottom: 7px; }
    .bancada-stepper { gap: 2px; margin-bottom: 7px; }
    .bancada-step { font-size: 6.5px; padding: 3px 1px; border-radius: 4px; }
    .bancada-card-rodape2 { padding-top: 7px; }
    .bancada-card-data { font-size: 9px; }
    .bancada-arrows { gap: 4px; }
    .bancada-arrow-btn { width: 24px; height: 24px; }
    .bancada-arrow-btn svg { width: 12px; height: 12px; }
}

/* ===== Base de Clientes — igual ao protótipo ===== */
.clientes-header-topo { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.clientes-header-topo h2 { font-family: 'Sora', sans-serif; font-size: 17px; color: var(--ink); margin-bottom: 4px; }
.clientes-header-topo p { font-size: 12.5px; color: var(--ink-soft); }
.clientes-header-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.clientes-busca-linha { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin: 18px 0 16px; }
.clientes-busca-linha span { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.clientes-busca-linha .searchbox-wrap { max-width: 300px; }
.clientes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cliente-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.cliente-card-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cliente-card-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; }
.cliente-card-nome { font-size: 14px; font-weight: 700; color: var(--ink); }
.cliente-card-fone { font-size: 12px; color: var(--ink-soft); }
.cliente-card-mini-stats { display: flex; gap: 8px; margin-bottom: 12px; }
.cliente-card-mini-stat { flex: 1; background: var(--paper); border-radius: 9px; padding: 8px 10px; text-align: center; }
.cliente-card-mini-stat b { display: block; font-size: 14px; color: var(--heading); font-family: 'Sora', sans-serif; }
.cliente-card-mini-stat span { font-size: 9.5px; color: var(--ink-soft); text-transform: uppercase; font-weight: 700; }
.cliente-card-acoes { display: flex; gap: 8px; }
.cliente-card-btn { flex: 1; width: auto; background: var(--brand-blue-light); color: var(--brand-blue); border: none; border-radius: 9px; padding: 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; text-align: center; text-decoration: none; display: block; }
.cliente-card-btn:hover { opacity: .85; }
.cliente-card-btn-whats { flex-shrink: 0; width: 42px; background: #E6F6ED; color: var(--accent-green); border: none; border-radius: 9px; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.cliente-card-btn-whats:hover { opacity: .85; }
.cliente-card-btn-whats.disabled { background: var(--paper); color: var(--ink-soft); opacity: .5; cursor: not-allowed; pointer-events: none; }
.cliente-card-btn-desc { font-size: 10.5px; color: var(--ink-soft); text-align: center; margin-top: 5px; }

/* ===== Checklist Técnico (chips, subpainéis, painel público) — extraído de
   sistema-inforsystem.html. As classes .subpanel/.chiplist/.chip/
   .tec-cliente-info/.tec-checkin-box/.tec-checkout-box também servem pro
   checklist do lado admin (ordens/bancada), não só pro link público. */
.subpanel { border: 1.5px dashed var(--line); border-radius: 12px; padding: 16px; margin-bottom: 16px; background: var(--paper); }
.subpanel h4 { font-size: 13px; color: var(--heading); margin-bottom: 12px; }
.chiplist { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px; background: var(--card); color: var(--ink-soft); border: 1.5px solid var(--line); border-radius: 9px; padding: 9px 14px; cursor: pointer; transition: all .12s ease; }
.chip.on { background: var(--brand-blue-dark); color: #fff; border-color: var(--heading); }
/* Pedido do usuário: navegar pelo teclado — chip (label) agora recebe
   tabindex via app.js, então precisa de indicador de foco visível ao
   tabular até ele (:focus-visible, não :focus simples, pra não aparecer
   num clique de mouse comum, só em navegação pelo teclado). */
.chip:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.tec-cliente-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.tec-cliente-info div { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.tec-cliente-info label { display: block; font-size: 10px; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin-bottom: 2px; }
.tec-cliente-info b { font-size: 13px; color: var(--ink); }
.tec-checkin-box, .tec-checkout-box { border: 1.5px dashed var(--line); border-radius: 12px; padding: 16px; margin-bottom: 16px; background: var(--paper); }
.tec-checkin-box h4, .tec-checkout-box h4 { font-size: 13.5px; color: var(--heading); margin-bottom: 12px; }
.tec-checkin-box h4 span, .tec-checkout-box h4 span { font-size: 11px; font-weight: 400; color: var(--ink-soft); }
.tec-fotos-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.tec-foto-thumb { width: 90px; height: 90px; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); }
.tec-foto-wrap { position: relative; }
.tec-foto-wrap button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-red); color: #fff; border: 2px solid var(--card); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.tec-foto-wrap button svg { width: 11px; height: 11px; }
.tec-fotos-vazio { font-size: 12px; color: var(--ink-soft); }
.tec-nota-item { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin-bottom: 6px; }
.tec-nota-data { font-size: 10px; color: var(--ink-soft); margin-bottom: 2px; }

/* Checklist Técnico Público (#tecnico) — mesma estrutura de fundo escuro
   cheio das outras 2 telas públicas (login de Área do Cliente/Checklist),
   com um cabeçalho fixo (marca + Sair) que essas duas telas de LOGIN não
   têm, porque aqui já existe uma sessão ativa pra encerrar. */
.tec-pub-root { font-family: 'Inter', system-ui, sans-serif; background: #0A0E1A; min-height: 100vh; min-height: 100dvh; color: #fff; }
.tec-pub-header { position: sticky; top: 0; z-index: 20; background: rgba(10,14,26,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.08); }
.tec-pub-header-inner { max-width: 760px; margin: 0 auto; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; }
.tec-pub-brand { display: flex; align-items: center; gap: 10px; font-family: 'Sora', sans-serif; font-size: 15px; color: #fff; text-decoration: none; }
.tec-pub-brand svg { width: 1em; height: 1em; }
.tec-pub-sair-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #fff; border-radius: 999px; padding: 8px 16px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tec-pub-main { max-width: 760px; margin: 0 auto; padding: 40px 24px 60px; }
.tec-pub-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 24px; margin-bottom: 16px; }
.tec-pub-card h2 { font-family: 'Sora', sans-serif; font-size: 19px; margin-bottom: 6px; }
.tec-pub-card > p { font-size: 12.5px; color: rgba(255,255,255,0.55); margin-bottom: 18px; }
/* Pedido do usuário: "Minhas OS" mostra só as 5 últimas, rolando pra ver
   as demais — mesma técnica já usada na grade de produtos do PDV
   (.prodlista acima: max-height + overflow-y:auto sobre a lista inteira
   já carregada, sem paginação no servidor). 265px medido ao vivo (não
   chutado): cabeçalho + 5 linhas da tabela + uma fatia da 6ª linha de
   propósito, pra sinalizar visualmente que tem mais itens pra rolar.
   Cabeçalho fixo (sticky) com fundo sólido — não dá pra usar o mesmo
   translúcido do .tec-pub-card por trás (rgba(255,255,255,0.04) sobre o
   #0A0E1A da página, aproximado aqui em sólido) porque, rolando, o
   conteúdo passaria por baixo meio visível através do cabeçalho. */
.tec-pub-minhas-os-scroll { max-height: 265px; overflow-y: auto; }
.tec-pub-minhas-os-scroll thead th { position: sticky; top: 0; background: #141821; }
/* Pedido do usuário: mesma correção do hover branco-sobre-branco do
   carrinho da Loja Virtual, aplicada aqui — essa tabela também é "solta"
   (sem .app-shell), então herdava o hover genérico claro. Usa a cor da
   marca (--brand-blue) em baixa opacidade, legível tanto em hover (mouse)
   quanto em toque (:active, que fica "preso" em navegadores mobile ao
   tocar numa linha). */
.tec-pub-minhas-os-scroll tbody tr:hover,
.tec-pub-minhas-os-scroll tbody tr:active {
    background: color-mix(in srgb, var(--brand-blue) 22%, transparent);
}
.tec-pub-erro { color: #F29C93; font-size: 12px; margin-top: 8px; min-height: 14px; }
.tec-pub-main .addline { display: flex; gap: 8px; }
.tec-pub-main .addline input { flex: 1; }
.tec-pub-nome-logado { font-size: 14px; }
.tec-pub-nome-logado svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
/* Reaproveita .tec-cliente-info/.tec-checkin-box/.tec-checkout-box/.chip/.chiplist/.subpanel
   já definidas acima (usadas também no painel admin), com paleta clara sobre fundo escuro. */
#tecPubResultado { color: #141B2E; }
#tecPubResultado .tec-cliente-info div, #tecPubResultado .tec-checkin-box, #tecPubResultado .tec-checkout-box, #tecPubResultado .subpanel { background: #F5F7FB; }
#tecPubResultado .subpanel h4 { color: #00296B; }

/* Tela de carregamento ("splash") ao abrir o sistema instalado como app
   (PWA — "Baixar APP") — pedido do usuário, mesmo efeito que apps como
   Instagram/Facebook mostram ao abrir: marca centralizada sobre fundo
   sólido em vez do branco em branco (FOUC) enquanto o HTML/CSS/imagens da
   página carregam. Só aparece no modo STANDALONE (app instalado, via
   @media (display-mode:standalone) — suportado também no "Adicionar à
   Tela de Início" do iOS Safari) — numa aba normal do navegador, o
   carregamento continua exatamente como sempre foi; ninguém que só visita
   o site pelo link vê isso. Fundo branco igual ao `background_color` do
   manifest.json (PwaController::manifest()) de propósito: a tela nativa
   que o sistema operacional já mostra brevemente ANTES desta (gerada a
   partir do manifest) usa a mesma cor — sem essa continuidade, haveria um
   "pulo" de cor entre a splash nativa e esta. Presente em dois lugares —
   layouts/app.php (toda tela autenticada) e auth/login.php (quem abre o
   app já deslogado cai aqui primeiro) — mesma marcação/classes nos dois,
   pra cobrir o app inteiro, não só o painel depois do login. */
.app-splash {
    display: none;
    position: fixed; inset: 0; z-index: 99999;
    background: #fff;
    flex-direction: column; align-items: center; justify-content: center; gap: 26px;
    opacity: 1; transition: opacity .35s ease;
}
.app-splash img { width: 96px; height: 96px; object-fit: contain; animation: appSplashPulse 1.8s ease-in-out infinite; }
.app-splash-dots { display: flex; gap: 8px; }
.app-splash-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-blue, #004AAB); animation: appSplashDot 1.2s ease-in-out infinite; }
.app-splash-dots span:nth-child(2) { animation-delay: .15s; }
.app-splash-dots span:nth-child(3) { animation-delay: .3s; }
.app-splash.app-splash-hide { opacity: 0; pointer-events: none; }
@keyframes appSplashPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .85; } }
@keyframes appSplashDot { 0%, 80%, 100% { transform: scale(.6); opacity: .35; } 40% { transform: scale(1); opacity: 1; } }
@media (display-mode: standalone) { .app-splash { display: flex; } }
@media (prefers-reduced-motion: reduce) {
    .app-splash img, .app-splash-dots span { animation: none; }
}

/* Tooltip ao passar o mouse nos gráficos de barra (SvgChart::barChart —
   "Evolução de Faturamento" do Dashboard, e também CRM & Marketing/
   Tráfego, que reusam o mesmo gerador) — pedido do usuário. .chart-hit é
   uma área invisível cobrindo a coluna INTEIRA (não só a barra visível,
   fina demais em dias de valor baixo pra acertar o mouse); .chart-bar
   clareia um pouco no hover como retorno visual de qual coluna está
   selecionada. O tooltip em si (.app-chart-tooltip) é UM elemento só,
   reaproveitado e reposicionado via JS (ver app.js) pra qualquer gráfico
   da página — por isso position:fixed (segue o cursor na tela toda, não
   só dentro do SVG) e não faz parte do SVG. */
.app-barchart .chart-hit { cursor: pointer; }
.app-barchart .chart-col .chart-bar { transition: filter .1s ease; }
.app-barchart .chart-col:hover .chart-bar { filter: brightness(1.18); }
.app-chart-tooltip {
    position: fixed; z-index: 200; pointer-events: none;
    background: #181B24; color: #fff; font-family: 'Inter', sans-serif;
    padding: 7px 12px; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.28);
    opacity: 0; transform: translate(-50%, -100%) translateY(-10px);
    transition: opacity .12s ease; white-space: nowrap;
}
.app-chart-tooltip.visible { opacity: 1; }
.app-chart-tooltip b { display: block; font-size: 13px; font-family: 'IBM Plex Mono', monospace; }
.app-chart-tooltip span { display: block; font-size: 10.5px; color: rgba(255,255,255,0.6); margin-top: 2px; }

/* Pills de segmento da aba "Clientes" do CRM & Marketing (item 254/259) —
   no desktop seguem lado a lado (flex-wrap, largura pelo texto de cada
   uma); no celular, grade de 2 colunas iguais, com a última pill ("Em
   risco — sem compra há 90+ dias") ocupando sozinha as duas colunas (mesmo
   ponto de corte "mobile" já usado no resto do sistema, ver .bancada-board
   acima). .crm-segmento-pill-badge solta do inline style de antes — só pra
   dar pra zerar a margem no mobile sem precisar de !important. */
.crm-segmentos-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.crm-segmento-pill-badge { margin-left: 6px; }
@media (max-width: 768px) {
    /* Pedido do usuário (item 268): pills "desorganizadas" no mobile —
       causa real era o rótulo + badge ficarem lado a lado (flex-direction
       padrão do .btn é linha) dentro de uma coluna de ~160px; rótulos
       longos ("Aniversariantes do mês", "Em risco (sem compra há 90+
       dias)") quebravam em 2 linhas enquanto os curtos ("Inadimplentes")
       ficavam numa só — cada botão com uma altura diferente, grade com
       cara de bagunçada. Empilhar texto+badge em coluna, com largura e
       altura mínima iguais pra TODOS, resolve de vez: toda pill fica com o
       mesmo "molde", texto centralizado podendo quebrar em 2 linhas sem
       derrubar o badge pro lado. */
    .crm-segmentos-pills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .crm-segmentos-pills .btn {
        width: 100%; flex-direction: column; gap: 4px; text-align: center;
        white-space: normal; font-size: 11px; padding: 10px 8px; min-height: 56px;
    }
    .crm-segmentos-pills .btn:last-child { grid-column: 1 / -1; }
    .crm-segmento-pill-badge { margin-left: 0; }
}

/* Linha de cliente dentro de cada painel de segmento (nome + motivo de um
   lado, ações do outro) — no desktop lado a lado; pedido do usuário: no
   celular empilhado (nome/motivo em cima, WhatsApp/Ver ficha embaixo,
   dividindo a largura toda igualmente), em vez de deixar o flex-wrap
   padrão jogar as ações numa 2ª linha alinhada à esquerda (bagunçado,
   sem relação visual com o texto acima). */
.crm-segmento-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.crm-segmento-motivo { font-size: 12px; color: var(--ink-soft); }
.crm-segmento-acoes { display: flex; gap: 6px; }
@media (max-width: 768px) {
    .crm-segmento-linha { flex-direction: column; align-items: stretch; gap: 8px; }
    .crm-segmento-acoes { width: 100%; }
    .crm-segmento-acoes .btn { flex: 1; }
}