/* ===== Fonte da marca (servida pelo próprio sistema; ver docs/10-redesign-visual.md) ===== */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/manrope-latin-wght.woff2") format("woff2"); }

@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); }

/* ===== Tokens "Marca GH" — modo claro ===== */
:root {
  color-scheme: light;
  --bg: #F5F1E8;
  --card: #FFFFFF;
  --ink: #1E1B16;
  --muted: #6B6355;
  --line: #E6DFD0;
  /* ouro: preenchimento só na ação principal / item ativo; como texto usa o tom escuro */
  --accent: #C9A13B;
  --accent-ink: #16130E;
  --accent-text: #7A5C0F;
  --primary: var(--accent-text);
  --focus-ring: rgba(224, 184, 74, .35);
  /* carvão: botão secundário e painéis de destaque (total da venda, número principal) */
  --strong: #16130E;
  --strong-ink: #F3EBDA;
  /* destaque (total da venda, número principal): ouro suave, valor em tinta escura */
  --destaque-bg: #F2CF6B;
  --destaque-borda: #D2A83A;
  --destaque-ink: #1E1B16;
  --destaque-muted: #5A430A;
  --destaque-valor: #1E1B16;
  --success: #237A4B;
  --danger: #A1271F;
  --warn: #B7791F;
  --warn-ink: #7A4E0A;
  --on-color: #FFFFFF;
  /* superfícies e estados */
  --input-bg: #FFFFFF;
  --th-bg: #FAF7F0;
  --row-alt: #FAF7F0;
  --hover: #F1ECE1;
  --warn-bg: #FBEBC8;
  --hint-bg: #F7E0A0; --hint-border: #D8B654; --hint-ink: #4A360A;
  --kbd-bg: #FAF7F0; --kbd-border: #D9CFBC; --kbd-ink: var(--ink);
  --ok-bg: #E3F2E8; --ok-ink: #1F6B43;
  --erro-bg: #F8DEDB; --erro-ink: #8E1F18;
  --overlay: rgba(22, 19, 14, .55);
  /* assistente de IA */
  --chat-glow: radial-gradient(ellipse 55% 45% at 50% 42%, rgba(217, 178, 76, 0.20), transparent 70%);
  --pill-bg: #FBF5E4; --pill-shadow: 0 6px 20px rgba(0,0,0,.08);
  --rodape-ink: #A39A8A;
  /* menu lateral: carvão nos dois modos */
  --side-bg: #16130E; --side-ink: #CFC6B4; --side-ink-hover: #F3EBDA;
  --side-hover: #241F17; --side-line: #2E271C; --side-label: #8A8172; --side-pop: #1E1A13;
  /* base de estilo (docs/10, 2.1): nomes do redesenho, mapeados para os tokens acima */
  --line-soft: #EFE9DC; --ink-2: #4E473B; --muted-2: #8A8172;
  --carvao: #16130E; --carvao-ink: #F3EBDA; --carvao-muted: #9C9383;
  --ouro: var(--accent); --ouro-claro: #D9B24C; --ouro-texto: var(--accent-text); --ouro-texto-hover: #5A430A;
  --ok: #1F6B43; --erro: #A1271F; --perda: #C0574F;
  --aviso-bg: #FBF3DD; --warn-line: #EAD7A4; --perigo-line: #E8C4C1;
  --fonte-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

/* ===== Modo escuro: por escolha do usuário e por preferência do sistema ===== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0a;
  --card: #161310;
  --ink: #f5efe0;
  --muted: #a89a7c;
  --line: #4d3e1a;
  --accent-text: #e0b84a;
  --focus-ring: rgba(224, 184, 74, .3);
  --strong: #f5efe0;
  --strong-ink: #16130E;
  --destaque-bg: #4A3A12;
  --destaque-borda: #9A7A22;
  --destaque-ink: #f5efe0;
  --destaque-muted: #E6CB84;
  --destaque-valor: #F2CF6B;
  --success: #4CC283;
  --danger: #F08A80;
  --warn: #E0A23B;
  --warn-ink: #F2C873;
  --on-color: #16130E;
  --input-bg: #0e0c09;
  --th-bg: #120f0b;
  --row-alt: #120f0b;
  --hover: #1f1a12;
  --warn-bg: #2E2410;
  --hint-bg: #3A2E12; --hint-border: #7A5E1C; --hint-ink: #F2DFAE;
  --kbd-bg: #1f1a12; --kbd-border: #3a2e12; --kbd-ink: var(--ink);
  --ok-bg: #13241A; --ok-ink: #7FD3A0;
  --erro-bg: #3A1714; --erro-ink: #F7B4AC;
  --overlay: rgba(0, 0, 0, .65);
  --chat-glow: radial-gradient(50% 50% at 50% 50%, rgba(224, 184, 74, 0.12) 0%, rgba(224, 184, 74, 0.04) 45%, transparent 100%);
  --pill-bg: var(--card); --pill-shadow: 0 6px 24px rgba(0,0,0,.45);
  --rodape-ink: var(--muted);
  --side-bg: #110f0b; --side-hover: #1f1a12; --side-line: #2a2418; --side-pop: #1a160f;
  --line-soft: #382d19; --ink-2: #d8cfbb; --muted-2: #8f836b;
  --carvao: #1f1a12; --carvao-ink: #F3EBDA; --carvao-muted: #9C9383;
  --ouro-claro: #e0b84a; --ouro-texto-hover: #F2CF6B;
  --ok: #7FD3A0; --erro: #F08A80; --perda: #D9776F;
  --aviso-bg: #2E2410; --warn-line: #5A4A22; --perigo-line: #5C2A26;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a0a0a;
    --card: #161310;
    --ink: #f5efe0;
    --muted: #a89a7c;
    --line: #4d3e1a;
    --accent-text: #e0b84a;
    --focus-ring: rgba(224, 184, 74, .3);
    --strong: #f5efe0;
    --strong-ink: #16130E;
    --destaque-bg: #4A3A12;
    --destaque-borda: #9A7A22;
    --destaque-ink: #f5efe0;
    --destaque-muted: #E6CB84;
    --destaque-valor: #F2CF6B;
    --success: #4CC283;
    --danger: #F08A80;
    --warn: #E0A23B;
    --warn-ink: #F2C873;
    --on-color: #16130E;
    --input-bg: #0e0c09;
    --th-bg: #120f0b;
    --row-alt: #120f0b;
    --hover: #1f1a12;
    --warn-bg: #2E2410;
    --hint-bg: #3A2E12; --hint-border: #7A5E1C; --hint-ink: #F2DFAE;
    --kbd-bg: #1f1a12; --kbd-border: #3a2e12; --kbd-ink: var(--ink);
    --ok-bg: #13241A; --ok-ink: #7FD3A0;
    --erro-bg: #3A1714; --erro-ink: #F7B4AC;
    --overlay: rgba(0, 0, 0, .65);
    --chat-glow: radial-gradient(50% 50% at 50% 50%, rgba(224, 184, 74, 0.12) 0%, rgba(224, 184, 74, 0.04) 45%, transparent 100%);
    --pill-bg: var(--card); --pill-shadow: 0 6px 24px rgba(0,0,0,.45);
    --rodape-ink: var(--muted);
    --side-bg: #110f0b; --side-hover: #1f1a12; --side-line: #2a2418; --side-pop: #1a160f;
    --line-soft: #382d19; --ink-2: #d8cfbb; --muted-2: #8f836b;
    --carvao: #1f1a12; --carvao-ink: #F3EBDA; --carvao-muted: #9C9383;
    --ouro-claro: #e0b84a; --ouro-texto-hover: #F2CF6B;
    --ok: #7FD3A0; --erro: #F08A80; --perda: #D9776F;
    --aviso-bg: #2E2410; --warn-line: #5A4A22; --perigo-line: #5C2A26;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: "Manrope", system-ui, "Segoe UI", Arial, sans-serif;
  font-variant-numeric: tabular-nums; background: var(--bg); color: var(--ink); }
a { color: var(--primary); text-decoration: none; }
main { padding: 16px; }

/* ===== Layout com sidebar ===== */
:root { --sidebar-w: 236px; --sidebar-w-collapsed: 68px; }
.app-shell { display: flex; min-height: 100vh; align-items: stretch; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-x: hidden; }
.app-main main { flex: 1; }

.sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--side-bg); color: var(--side-ink); position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; overflow: hidden; z-index: 100;
  transition: width .16s ease, flex-basis .16s ease; }
html.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); flex-basis: var(--sidebar-w-collapsed); }

.side-top { display: flex; align-items: center; gap: 10px; padding: 16px 15px;
  height: 62px; box-sizing: border-box; }
.side-mark { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  background: #0a0a0a; box-shadow: 0 0 0 1px var(--side-line); }
.side-name { font-weight: 800; color: var(--side-ink-hover); font-size: 15px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; flex: 1; }
.side-toggle { margin-left: auto; background: transparent; border: 1px solid var(--side-line);
  color: var(--side-ink); width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  padding: 0; display: grid; place-items: center; flex: 0 0 auto; }
.side-toggle:hover { background: var(--side-hover); color: var(--side-ink-hover); }
/* Um ícone por vez: ‹ expandido, › recolhido; ☰/✕ na gaveta do celular (ver @media 900px). */
.side-toggle svg { display: none; }
.side-toggle .ic-recolher { display: block; }
html.sidebar-collapsed .side-toggle .ic-recolher { display: none; }
html.sidebar-collapsed .side-toggle .ic-expandir { display: block; }

.side-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 6px 10px; display: flex; flex-direction: column; gap: 2px;
  scrollbar-width: thin; scrollbar-color: var(--side-line) transparent; }
.side-nav::-webkit-scrollbar, .chat-janela::-webkit-scrollbar { width: 7px; }
.side-nav::-webkit-scrollbar-track, .chat-janela::-webkit-scrollbar-track { background: transparent; }
.side-nav::-webkit-scrollbar-thumb { background: var(--side-line); border-radius: 4px; }
.chat-janela::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
.side-nav::-webkit-scrollbar-thumb:hover { background: var(--side-label); }
.chat-janela.rolando::-webkit-scrollbar-thumb, .chat-janela:hover::-webkit-scrollbar-thumb { background: var(--line); }
.chat-janela::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Rótulo de seção (OPERAÇÃO, CADASTROS…); recolhido vira só uma linha fina. */
.side-secao { flex: 0 0 auto; padding: 12px 11px 4px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--side-label); white-space: nowrap;
  overflow: hidden; user-select: none; }
.side-secao:first-child { padding-top: 0; }
/* font: inherit — <button> não herda a fonte; sem isto Tour guiado saía em Arial, mais grosso. */
.side-nav a, .side-link { display: flex; align-items: center; gap: 12px;
  padding: 9px 11px; border-radius: 10px; font: inherit; color: var(--side-ink); font-weight: 600;
  font-size: 14px; white-space: nowrap; background: transparent; border: none;
  width: 100%; text-align: left; cursor: pointer; line-height: 1.2;
  transition: background .12s ease, color .12s ease; }
.side-nav a svg, .side-link svg, .side-grupo > summary > svg:not(.chevron) { flex: 0 0 auto; width: 20px; height: 20px; opacity: .9; }
.side-nav a:hover, .side-link:hover { background: var(--side-hover); color: var(--side-ink-hover); }
/* Item ativo: fundo azul suave e barrinha de 3px à esquerda (acompanha o canto arredondado). */
.side-nav a.ativo { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.side-nav a.ativo svg { opacity: 1; color: var(--accent-ink); }
.side-nav a.ativo .side-kbd { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent-ink) 35%, transparent); }
/* Atalho ao lado de "Vender". */
.side-kbd { margin-left: auto; font: inherit; font-size: 11px; font-weight: 600; line-height: 1;
  padding: 3px 5px; border: 1px solid var(--side-line); border-radius: 5px; color: var(--side-ink); }

.side-grupo { border: none; margin: 0; padding: 0; }
.side-grupo > summary { display: flex; align-items: center; gap: 12px;
  padding: 9px 11px; border-radius: 10px; font: inherit; color: var(--side-ink); font-weight: 600;
  font-size: 14px; cursor: pointer; list-style: none; user-select: none;
  transition: background .12s ease, color .12s ease; }
.side-grupo > summary::-webkit-details-marker,
.side-grupo > summary::marker { display: none; content: ""; }
.side-grupo > summary:hover { background: var(--side-hover); color: var(--side-ink-hover); }
.side-grupo > summary svg.chevron { margin-left: auto; flex: 0 0 auto; width: 14px; height: 14px;
  opacity: .7; transition: transform .15s ease; }
.side-grupo[open] > summary svg.chevron { transform: rotate(180deg); }
.side-subnav { display: flex; flex-direction: column; gap: 2px;
  margin: 2px 0 2px 19px; padding-left: 12px; border-left: 1px solid var(--side-line); }

html.sidebar-collapsed .side-grupo > summary svg.chevron { display: none; }
html.sidebar-collapsed .side-subnav { margin-left: 0; padding-left: 0; border-left: none; }
.side-link .label { overflow: hidden; text-overflow: ellipsis; }

/* Rodapé: bloco do usuário (abre o menu da conta) + sino */
.side-bottom { padding: 8px 10px 10px; border-top: 1px solid var(--side-line); display: flex;
  flex-direction: row; align-items: center; gap: 6px; flex: 0 0 auto; }
.usuario-wrap { flex: 1 1 auto; min-width: 0; }
.side-usuario { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0;
  padding: 6px 8px; border: none; border-radius: 10px; background: transparent; font: inherit;
  color: var(--side-ink-hover); text-align: left; cursor: pointer; transition: background .12s ease; }
.side-usuario:hover, .side-usuario[aria-expanded="true"] { background: var(--side-hover); }
.side-avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--side-hover);
  color: var(--accent); font-size: 12.5px; font-weight: 700; display: grid; place-items: center; }
.side-usuario-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.side-usuario-nome { font-size: 13px; font-weight: 700; color: var(--side-ink-hover);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-usuario-papel { font-size: 11.5px; color: var(--side-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Menu da conta: sempre escuro como o menu lateral; posição calculada no base.html. */
.side-usuario-menu { position: fixed; z-index: 200; min-width: 200px; padding: 6px;
  background: var(--side-pop); border: 1px solid var(--side-line); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.4); display: flex; flex-direction: column; gap: 2px; }
.side-usuario-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border: none; border-radius: 8px; background: transparent; font: inherit; font-size: 14px;
  font-weight: 600; color: var(--side-ink-hover); text-align: left; cursor: pointer; white-space: nowrap; }
.side-usuario-item svg { flex: 0 0 auto; width: 18px; height: 18px; opacity: .9; }
.side-usuario-item:hover, .side-usuario-item:focus-visible { background: var(--side-hover); color: var(--side-ink-hover); outline: none; }
.side-usuario-item.side-sair { color: var(--danger); }
.side-usuario-item.side-sair:hover, .side-usuario-item.side-sair:focus-visible { background: rgba(240,138,128,.14); color: #F08A80; }
.side-usuario-sep { height: 1px; background: var(--side-line); margin: 4px 2px; }

/* Sino de notificações */
.sino-wrap { position: relative; flex: 0 0 auto; }
.side-icone-btn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: none; border-radius: 10px; background: transparent; color: var(--side-ink); cursor: pointer;
  transition: background .12s ease, color .12s ease; }
.side-icone-btn svg { width: 20px; height: 20px; opacity: .9; }
.side-icone-btn:hover { background: var(--side-hover); color: var(--side-ink-hover); }
.sino-contador { position: absolute; top: 3px; left: 20px; background: var(--danger);
  color: var(--on-color); font-size: 10px; font-weight: 700; min-width: 16px; height: 16px;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  padding: 0 4px; line-height: 1; }
/* position:fixed (não absolute) porque .sidebar tem overflow:hidden — um painel
   absolute ficaria cortado; a posição exata é calculada por JS ao abrir. */
.sino-painel { position: fixed; width: 280px;
  max-height: 320px; overflow-y: auto; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.25); z-index: 200; padding: 6px; }
.sino-item { display: block; padding: 8px 10px; border-radius: 8px; color: var(--ink);
  font-size: 13px; text-decoration: none; }
.sino-item:hover { background: var(--hover); }
.sino-destino { color: var(--primary); font-weight: 700; white-space: nowrap; }
.sino-vazio { padding: 10px; margin: 0; }
.sino-item-dispensavel { display: flex; align-items: flex-start; gap: 4px; padding: 0; }
.sino-item-dispensavel a { flex: 1; }
.sino-dispensar { flex: none; background: none; border: none; color: var(--muted);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 8px 8px 8px 0; }
.sino-dispensar:hover { color: var(--ink); }

/* Ícone do tema: lua no claro, sol no escuro */
.icone-tema-light { display: none; }
:root[data-theme="dark"] .icone-tema-light { display: inline; }
:root[data-theme="dark"] .icone-tema-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icone-tema-light { display: inline; }
  :root:not([data-theme="light"]) .icone-tema-dark { display: none; }
}

/* Estado recolhido: só ícones, centralizados */
html.sidebar-collapsed .side-name,
html.sidebar-collapsed .side-mark,
html.sidebar-collapsed .label { display: none; }
html.sidebar-collapsed .side-top { justify-content: center; padding: 16px 8px; }
html.sidebar-collapsed .side-toggle { margin-left: 0; }
html.sidebar-collapsed .side-nav { padding: 6px 12px; }
html.sidebar-collapsed .side-nav a,
html.sidebar-collapsed .side-link,
html.sidebar-collapsed .side-grupo > summary { justify-content: center; padding: 10px 0; }
html.sidebar-collapsed .side-kbd { display: none; }
html.sidebar-collapsed .side-secao { height: 1px; padding: 0; margin: 8px 14px; background: var(--side-line);
  font-size: 0; }
html.sidebar-collapsed .side-secao:first-child { display: none; }
/* Recolhido: rodapé em coluna, só o avatar e o sino embaixo dele. */
html.sidebar-collapsed .side-bottom { flex-direction: column; gap: 4px; padding: 8px 0 10px; }
html.sidebar-collapsed .usuario-wrap { flex: 0 0 auto; }
html.sidebar-collapsed .side-usuario { justify-content: center; padding: 3px; border-radius: 50%; }
html.sidebar-collapsed .side-usuario-texto { display: none; }

/* Cards / genéricos */
.card { background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px; margin-bottom: 16px; }
.card-destaque { background: var(--hint-bg); border-color: var(--hint-border); }
.card-destaque h2 { color: var(--hint-ink); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
h1 { font-size: 28px; font-weight: 800; letter-spacing: -.01em; margin: 4px 0 18px; }
h2 { font-weight: 800; }

/* Botões (Marca GH, docs/10-redesign-visual.md): comum = neutro (cartão + borda);
   principal = ouro cheio, um por tela; secundário = carvão; crítico (cancelar,
   excluir, fechar caixa, retirar) = vermelho cheio; crítico secundário = contorno vermelho. */
.btn { border: 1px solid color-mix(in srgb, var(--ink) 18%, var(--line));
  background: var(--card); color: var(--ink); font-family: inherit;
  border-radius: 10px; padding: 10px 16px; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: background .12s, border-color .12s, filter .12s; }
.btn:hover { background: var(--hover); border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
.btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 800; }
.btn.secundario { background: var(--strong); border-color: var(--strong); color: var(--strong-ink); }
.btn.success { background: var(--success); border-color: var(--success); color: var(--on-color); }
.btn.primary:hover, .btn.success:hover, .btn.danger:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; border: 1px solid transparent; color: var(--accent-text); }
.btn.ghost:hover { background: var(--hover); border-color: var(--line); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: var(--on-color); }
.btn.danger:focus-visible { outline-color: var(--danger); }
.btn.danger.ghost { background: color-mix(in srgb, var(--danger) 8%, var(--card)); color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); filter: none; }
.btn.danger.ghost:hover { background: color-mix(in srgb, var(--danger) 18%, var(--card)); border-color: var(--danger); }
.btn.big { width: 100%; padding: 14px; font-size: 17px; }
.btn.mini { padding: 4px 9px; font-size: 13px; }

/* Confirmação por senha (ex.: cancelar venda finalizada) */
/* <summary class="btn"> — disclosure que se comporta e parece um botão comum,
   sem o triângulo padrão do navegador. Usado sempre que uma ação (corrigir,
   importar, fechar) só deve abrir um formulário ao ser clicada. */
summary.btn { list-style: none; width: fit-content; }
summary.btn::-webkit-details-marker { display: none; }

.cancelar-venda { display: inline-block; position: relative; text-align: left; }
.cancelar-venda summary { list-style: none; }
.cancelar-venda summary::-webkit-details-marker { display: none; }
.cancelar-venda[open] summary { border-color: var(--danger); }
.cancelar-venda form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5;
  background: var(--card); border: 1px solid var(--line); border-radius: 9px;
  padding: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.12); display: flex; gap: 6px; }
.cancelar-venda form input { margin: 0; width: 160px; }

/* Formulários */
label { display: block; font-size: 13px; color: var(--muted);
  font-weight: 700; margin-bottom: 12px; }
input, select, textarea { width: 100%; margin-top: 6px; padding: 12px; font-size: 15px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, var(--line)); border-radius: 10px;
  color: var(--ink); background: var(--input-bg); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input, select, textarea, button { font-family: inherit; }
textarea { resize: vertical; }

/* Login e "esqueci a senha" (R7): sempre no modo escuro da Marca GH, com os mesmos tokens
   do sistema redefinidos localmente — independe do tema claro/escuro escolhido. */
.login-wrap { --bg: #0a0a0a; --card: #161310; --line: #4d3e1a; --ink: #f5efe0; --muted: #a89a7c;
  --input-bg: #0e0c09; --accent-text: #e0b84a; --focus-ring: rgba(224, 184, 74, .3);
  --erro-bg: #3A1714; --erro-ink: #F7B4AC;
  color: var(--ink); min-height: 100vh; width: 100%; display: grid; place-items: center;
  background: var(--bg); }
/* Tela de login ocupa a janela inteira: sem o padding do main nem fundo claro do body. */
main:has(> .login-wrap) { padding: 0; }
body:has(.login-wrap) { background: #0a0a0a; }
.login-card { width: 340px; text-align: center; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; padding: 32px 28px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.login-logo { width: 88px; height: auto; margin: 0 auto 14px; display: block;
  filter: drop-shadow(0 8px 24px rgba(224,184,74,.3)); }
.login-card h1 { margin: 0; font-size: 22px; color: var(--accent);
  font-weight: 800; letter-spacing: -.01em; }
.login-card p.muted { color: var(--muted); margin-top: 6px; }
.login-card label { color: var(--ink); text-align: left; }
.login-card input { background: var(--input-bg); border: 1px solid var(--line);
  color: var(--ink); }
.login-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.login-card .btn.primary { background: var(--accent); color: var(--accent-ink); border: none;
  font-weight: 700; }
.login-card .alert.erro { text-align: left; }
.login-card .link-login { color: var(--accent); }
.login-card .btn.primary.big { margin-top: 20px; border-radius: 11px;
  box-shadow: 0 8px 24px rgba(224,184,74,.18); transition: filter .15s, transform .15s, box-shadow .15s; }
.login-card .btn.primary.big:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(224,184,74,.28); }
.login-card .btn.primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Esqueci a senha: estado "pedido enviado" */
.login-sucesso { animation: login-entra .35s ease both; }
.login-sucesso-icone { width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%;
  display: grid; place-items: center; color: var(--accent-ink); background: var(--accent);
  box-shadow: 0 0 0 6px rgba(224,184,74,.14); }
.login-sucesso p.muted { margin: 6px 0 0; }
.login-passos { list-style: none; margin: 20px 0 0; padding: 14px; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(224,184,74,.04);
  display: flex; flex-direction: column; gap: 12px; color: var(--ink); font-size: 14px; line-height: 1.45;
  animation: login-entra .35s .08s ease both; }
.login-passos li { display: flex; gap: 10px; align-items: flex-start; }
.login-passos li > span { flex: none; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700;
  display: grid; place-items: center; color: var(--accent); border: 1px solid var(--accent); }
.login-passos b { color: var(--accent); font-weight: 700; }
@keyframes login-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .login-sucesso, .login-passos { animation: none; } }
.credito-login { text-align: center; margin-top: 16px; font-size: 11px; color: var(--muted); }
/* Regra da senha (spec 018): cada item fica verde quando a senha digitada já o cumpre. */
.regra-senha { grid-column: 1 / -1; margin: 4px 0 8px; padding-left: 18px; font-size: 13px; color: var(--muted); }
.regra-senha li.ok { color: var(--ok-ink); }
.regra-senha li.ok::marker { content: "✓ "; }
.senha-provisoria { font-family: ui-monospace, Consolas, monospace; font-size: 22px; letter-spacing: .08em;
  user-select: all; }
.credito-login a { color: inherit; text-decoration: none; }
.credito-login a:hover { text-decoration: underline; }

/* Rodapé (discreto) */
/* Mesma coluna do conteúdo (.page: max-width 1000px, alinhada à esquerda com o
   padding de 16px do main) — centralizar na área inteira deixava o texto
   deslocado pra direita em monitores largos. */
.rodape { text-align: center; color: var(--rodape-ink); font-size: 11px; padding: 14px 12px 20px; }
.rodape a { color: inherit; text-decoration: none; }
.rodape a:hover { text-decoration: underline; color: var(--primary); }

/* Alerts */
.alert { padding: 12px 16px; border-radius: 12px; margin: 10px 0; font-weight: 600;
  border: 1px solid transparent; line-height: 1.45; }
.alert.erro { background: var(--erro-bg); color: var(--erro-ink);
  border-color: color-mix(in srgb, var(--erro-ink) 18%, transparent); }
.alert.aviso { background: var(--warn-bg); color: var(--warn-ink);
  border-color: color-mix(in srgb, var(--warn-ink) 22%, transparent); }
.alert.info { background: var(--hint-bg); color: var(--hint-ink); border-color: var(--hint-border); }
.alert a { color: inherit; text-decoration: underline; font-weight: 800; }
.alert.ok { background: var(--ok-bg); color: var(--ok-ink);
  border-color: color-mix(in srgb, var(--ok-ink) 18%, transparent); }

/* Faixa do caixa na frente de caixa: fundo inicial e esperado na gaveta (spec 010). */
.caixa-status { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 24px;
  margin-top: 0; font-weight: 500; }
.caixa-status.ok { background: var(--card); color: var(--muted); border-color: var(--line); }
.caixa-status.ok strong { color: var(--ink); }
.caixa-status .caixa-aberto { color: var(--ok-ink) !important; display: inline-flex; align-items: center; gap: 8px; }
.caixa-status .caixa-aberto::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--success); }
.caixa-status .caixa-valores { display: inline-flex; flex-wrap: wrap; gap: 4px 20px; }
.caixa-valores { display: flex; flex-wrap: wrap; gap: 4px 16px; font-weight: 600; }
.caixa-valores strong { font-size: 16px; }
.valor-negativo { color: var(--danger); }
.falta { font-weight: 700; color: var(--danger); margin-top: 6px; font-size: 18px; }
.kpi-sub { margin-top: 6px; }
.modal-alerta { border-top: 5px solid var(--danger); }
.modal-alerta h2 { color: var(--danger); }

/* ===== PDV ===== */
.pdv { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.pdv-left, .pdv-right { min-width: 0; }  /* evita overflow de filhos do grid */
.scan-row { display: flex; gap: 10px; align-items: flex-start; }
.busca-wrap { flex: 1; position: relative; }
.busca-wrap #codigo { width: 100%; height: 64px; margin-top: 0; font-size: 19px; font-weight: 600; padding: 0 18px;
  border-width: 2px; border-radius: 14px; }
.busca-wrap #codigo:enabled { border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus-ring); }
.scan-row .qtd { height: 64px; margin-top: 0; font-size: 19px; font-weight: 800; text-align: center; border-radius: 14px; }
.scan-row .btn { height: 64px; border-radius: 14px; }
.scan-row .qtd { width: 90px; }
.scan-row { margin-bottom: 14px; }
.scan-row .btn { white-space: nowrap; }

/* Sugestões (autocomplete) */
.sugestoes { list-style: none; margin: 4px 0 0; padding: 4px; position: absolute;
  left: 0; right: 0; top: 100%; z-index: 50; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.14); max-height: 320px; overflow: auto; }
.sugestoes li { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.sugestoes li:hover, .sugestoes li.ativo { background: var(--hover); }
.sug-nome { font-weight: 600; }
.sug-info { font-size: 13px; color: var(--muted); white-space: nowrap; }

table.itens, table.lista { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
table.itens th, table.itens td, table.lista th, table.lista td {
  padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; }
table.itens tbody tr:last-child td, table.lista tbody tr:last-child td { border-bottom: none; }
table.lista tbody tr:hover td { background: var(--hover); }
table th { background: var(--th-bg); font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); }
.num { text-align: right; }
tr.vazio td, td.vazio { text-align: center; color: var(--muted); padding: 24px; }
tr.baixo td { background: var(--warn-bg); }
/* Linha de total no rodapé das listas (Patrimônio, Contas a pagar) */
table.lista tfoot tr.linha-total td { background: var(--hint-bg); color: var(--hint-ink);
  font-weight: 800; font-size: 15px; border-top: 2px solid var(--accent); border-bottom: none; }
table.itens tbody tr.selecionada td { background: color-mix(in srgb, var(--accent) 14%, var(--card)); }

/* Menu de ações (⋮) nas linhas de tabela — ver app/static/tabela-menu.js */
.tabela-menu-wrap { position: relative; display: inline-block; }
.tabela-menu-btn { border: none; background: transparent; color: var(--muted); font-size: 18px;
  line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.tabela-menu-btn:hover { background: var(--hover); color: var(--ink); }
/* fixed + top/left calculados no JS: não é cortado pelo overflow:hidden da tabela */
.tabela-menu-lista { position: fixed; z-index: 50; min-width: 140px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px; display: flex; flex-direction: column; }
.tabela-menu-lista a, .tabela-menu-lista button { display: block; width: 100%; text-align: left;
  border: none; background: transparent; color: var(--ink); padding: 8px 10px; border-radius: 6px;
  cursor: pointer; font-size: 13px; text-decoration: none; margin: 0; font-weight: 400; }
.tabela-menu-lista a:hover, .tabela-menu-lista button:hover { background: var(--hover); }
.tabela-menu-lista .acao-perigo { color: var(--danger); }
.tabela-menu-lista form { margin: 0; }
/* Ação com senha dentro do menu ⋮ (spec 006) */
.menu-senha summary { list-style: none; cursor: pointer; padding: 8px 10px; border-radius: 6px; font-size: 13px; }
.menu-senha summary::-webkit-details-marker { display: none; }
.menu-senha summary:hover { background: var(--hover); }
.menu-senha form { display: flex; flex-direction: column; gap: 6px; padding: 4px 10px 8px; }
.menu-senha input[type="password"] { font-size: 13px; padding: 6px 8px; }

/* Validade de lote (tela de produtos) — ver app/services/lote.py::situacao */
.validade-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.validade-vencido { background: var(--erro-bg); color: var(--erro-ink); font-weight: 700; }
.validade-vence_7d { background: var(--warn-bg); color: var(--warn-ink); font-weight: 700; }
.validade-ok { color: var(--muted); }

/* Saúde do sistema (spec 009) */
.saude-ok { color: var(--ok-ink); font-weight: 600; }
.saude-falha { color: var(--danger); font-weight: 700; }
.saude-neutro { color: var(--muted); }

/* Seção de Ajuda (spec 005) */
main { position: relative; }
.ajuda-contexto { position: absolute; top: 14px; right: 18px; z-index: 5; width: 30px; height: 30px;
  border-radius: 50%; display: grid; place-items: center; font-weight: 700; text-decoration: none;
  border: 1px solid var(--line); background: var(--card); color: var(--muted); }
.ajuda-contexto:hover { color: var(--ink); background: var(--hover); }
.ajuda-trilha { margin-bottom: 6px; }
.ajuda-busca { width: 100%; max-width: 560px; margin: 8px 0 16px; }
.ajuda-cards, .ajuda-resultados { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ajuda-card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); padding: 14px; }
.ajuda-card:hover { background: var(--hover); }
.ajuda-passos li { margin: 8px 0; line-height: 1.5; }
.ajuda-dicas ul { margin: 6px 0 0; padding-left: 20px; }
.ajuda-exemplos { list-style: none; padding: 0; }
.ajuda-exemplos li { padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; gap: 8px;
  justify-content: space-between; align-items: center; flex-wrap: wrap; }
.ajuda-etiqueta { font-size: 11px; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.ajuda-cartao { background: var(--hint-bg); color: var(--hint-ink); }
.ajuda-consulta { background: var(--hover); color: var(--muted); }
.ajuda-pergunta { margin: 8px 0; padding: 12px 14px; }
.ajuda-pergunta summary { cursor: pointer; font-weight: 600; }
.ajuda kbd, .ajuda-atalhos kbd { font-family: inherit; font-size: 12px; border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; background: var(--card); white-space: nowrap; }
@media (max-width: 600px) { .ajuda-contexto { top: 8px; right: 8px; } }

/* Cartão "Uso de IA hoje" no topo do assistente (app/services/llm/uso.py) */
.uso-ia summary { cursor: pointer; }
.lotes-produto h2 { margin-top: 0; }
.lotes-produto .lote-form { margin-top: 8px; }
.lotes-produto .lote-acoes { white-space: nowrap; }
.lotes-produto .lote-acoes form { display: inline-flex; gap: 6px; align-items: center; margin-left: 6px; }
.lotes-produto .lote-baixa input,
.lotes-produto .lote-baixa select { padding: 4px 8px; font-size: 13px; height: auto; }
.lotes-produto .lote-baixa input { width: 64px; text-align: right; }

/* Painel direito */
.totais { text-align: center; background: var(--destaque-bg); color: var(--destaque-ink);
  border: 1px solid var(--destaque-borda); }
.total-label { font-size: 12px; font-weight: 700; color: var(--destaque-muted); text-transform: uppercase; letter-spacing:.1em; }
.total-valor { font-size: 48px; font-weight: 800; margin-top: 4px; color: var(--destaque-valor); letter-spacing: -.01em;
  line-height: 1.1; }
/* Desconto do balcão (F7): subtotal/desconto sob o Total e o modal */
.totais-detalhe { margin-top: 6px; font-size: 14px; }
.totais-detalhe .totais-linha { display: flex; justify-content: space-between; gap: 8px; color: var(--destaque-muted); }
.totais-detalhe .totais-desconto { color: var(--destaque-ink); font-weight: 700; }
.totais-detalhe .totais-desconto .muted { color: var(--destaque-muted); font-weight: 400; }
.totais .btn.ghost.mini { margin-top: 8px; color: var(--destaque-ink); border-color: color-mix(in srgb, var(--destaque-ink) 30%, transparent); background: transparent; }
.modal-desconto-box { width: 420px; }
.modal-desconto-box label { display: block; margin-top: 10px; }
.desconto-modos { display: flex; gap: 16px; flex-wrap: wrap; }
.desconto-modos label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; white-space: nowrap; }
.desconto-modos input[type="radio"] { width: auto; margin: 0; }
.desconto-previa { margin: 10px 0 0; font-size: 15px; }
.pagamento label { margin-bottom: 14px; }

/* Páginas de cadastro */
.page { max-width: 1200px; }

/* Assistente de IA (chat) */
.chat-page { display: flex; flex-direction: column; height: calc(100vh - 100px); }
.chat-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.chat-topo > div { min-width: 0; flex: 1 1 280px; }
.chat-topo > form { flex: none; }  /* "Limpar conversa" nunca fica cortado (achado B4) */
.chat-janela { flex: 1; overflow-y: auto; display: flex; flex-direction: column;
  padding: 16px; margin: 12px 0; background: transparent; border: none;
  scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color 0.3s; }
.chat-janela.rolando, .chat-janela:hover { scrollbar-color: var(--line) transparent; }
/* margin-top:auto (não justify-content:flex-end no container com scroll) empurra as
   mensagens pro fundo quando sobra espaço, sem o bug clássico do flexbox que corta o
   topo do conteúdo e quebra a barra de rolagem quando o conteúdo cresce. */
.chat-mensagens { margin: auto 0; display: flex; flex-direction: column; gap: 14px; }
.chat-balao { max-width: 72%; padding: 12px 16px; border-radius: 18px; line-height: 1.55; font-size: 15px; }
/* 👎 "O que estava errado?" (spec 017) */
.chat-feedback-explicacao { margin-top: 8px; }
.chat-feedback-explicacao input { width: 100%; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); color: inherit; }
.chat-balao-texto { white-space: pre-wrap; word-break: break-word; }
.chat-usuario { align-self: flex-end; background: var(--strong); color: var(--strong-ink);
  border-bottom-right-radius: 6px; }
.chat-assistente { align-self: stretch; max-width: 100%; background: transparent;
  color: var(--ink); padding: 0; }
.chat-hero { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 20px; padding: 20px;
  background: var(--chat-glow); }
.chat-hero h2 { font-size: clamp(26px, 4vw, 40px); margin: 0; text-wrap: balance; }
.chat-hero > p { margin: 0; max-width: 480px; }
.chat-pill-form { width: 100%; max-width: 760px; margin: 0 auto; display: flex; align-items: center;
  gap: 6px; background: var(--card); border: 1px solid color-mix(in srgb, var(--ink) 14%, var(--line)); border-radius: 999px;
  padding: 6px 6px 6px 20px; box-shadow: var(--pill-shadow); }
.chat-pill-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring), var(--pill-shadow); }
.chat-pill-form input[type="text"] { flex: 1; margin-top: 0; padding: 10px 0; border: none;
  background: transparent; color: var(--ink); box-shadow: none; }
.chat-pill-form input[type="text"]:focus { outline: none; box-shadow: none; }
.chat-pill-enviar { width: 44px; height: 44px; border-radius: 50%; border: none; flex: none;
  background: var(--accent); color: var(--accent-ink); font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.chat-pill-enviar:disabled { opacity: .5; cursor: not-allowed; }
.chat-janela + .chat-pill-form { margin-top: 4px; }
.chat-pill-mic { width: 44px; height: 44px; border-radius: 50%; border: none; flex: none;
  background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.chat-pill-mic.gravando { background: var(--danger); color: var(--on-color); animation: chat-mic-pulso 1s infinite; }
@keyframes chat-mic-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.chat-pill-mic-pausar, .chat-pill-mic-excluir { width: 36px; height: 36px; border-radius: 50%;
  border: none; flex: none; background: var(--hover); color: var(--ink); font-size: 14px;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-pill-mic-excluir { color: var(--danger); }
.chat-balao-pensando-linha { opacity: .6; font-style: italic; }
.chat-balao-pensando-linha + .chat-balao-pensando-linha { margin-top: 2px; }

/* Cartão de ação do assistente (Fase G) — precisa se destacar de uma resposta
   normal, já que representa algo que ainda vai acontecer de verdade. */
.chat-balao-proposta { background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 18px; max-width: 540px; }
.chat-proposta-titulo { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px; }
.chat-proposta-descricao { color: var(--ink); }
.chat-proposta-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chat-proposta-status { font-style: italic; opacity: .8; margin-top: 10px; }
/* Cartão genérico de proposta (spec 003): linhas de→para, itens, avisos */
.chat-proposta-linhas { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.chat-proposta-linhas td { padding: 3px 8px 3px 0; vertical-align: top; }
.chat-proposta-linhas td:first-child { color: var(--muted); white-space: nowrap; }
.chat-proposta-de { text-decoration: line-through; opacity: .65; margin-right: 6px; }
.chat-proposta-itens { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; max-height: 260px; overflow-y: auto; }
.chat-proposta-itens li { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; gap: 8px; align-items: flex-start; }
.chat-proposta-itens input[type="checkbox"] { margin-top: 3px; }
.chat-proposta-aviso { color: var(--danger); font-size: 12px; font-weight: 600; }
.chat-proposta-avisos { margin-top: 8px; }
/* Anexo no chat (spec 004) */
.chat-anexo { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; font-size: 13px; font-weight: 700;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 12px; flex: none; }
.chat-anexo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-anexo button { border: none; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; color: var(--muted); }
.chat-so-celular { display: none; }
@media (pointer: coarse) { .chat-so-celular { display: inline-block; } }

.chat-balao-rodape { display: flex; align-items: center; gap: 2px; margin-top: 8px; }
.chat-balao-acao { border: none; background: transparent; color: inherit; opacity: .55;
  cursor: pointer; line-height: 1; padding: 6px; border-radius: 6px; display: flex;
  align-items: center; justify-content: center; }
.chat-balao-acao:hover { opacity: 1; background: rgba(127,127,127,.15); }
.chat-balao-acao.selecionada { opacity: 1; color: var(--primary); }
.chat-balao-acao.selecionada svg { fill: currentColor; }
.chat-balao-mais-wrap { position: relative; display: inline-block; }
.chat-balao-mais-menu { position: absolute; top: 100%; left: 0; z-index: 20; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.2);
  padding: 4px; white-space: nowrap; }
.chat-balao-mais-menu button { display: block; width: 100%; text-align: left; border: none;
  background: transparent; color: var(--ink); padding: 6px 10px; border-radius: 6px; cursor: pointer;
  font-size: 13px; }
.chat-balao-mais-menu button:hover { background: var(--hover); }
.chat-aviso { text-align: center; margin: 6px auto 0; max-width: 640px; }
.grid-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; }
.grid-form .form-actions { grid-column: 1 / -1; }
/* Ações do formulário (R6 — modelo M4): barra no rodapé, separada por uma linha. */
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.grid-form .form-actions { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.aviso-codigo-barras { display: block; color: var(--danger); font-size: 12px; margin-top: -8px; }
.aviso-codigo-barras a { color: inherit; text-decoration: underline; }
.campo-com-botao { display: flex; gap: 6px; align-items: center; }
.campo-com-botao input { flex: 1; margin-top: 0; }
.video-scanner { width: 100%; max-width: 440px; border-radius: 8px; background: #000;
  display: block; margin: 0 auto; }
.campo-checkbox { display: flex; align-items: center; gap: 6px; align-self: end;
  padding-bottom: 2px; }
.campo-checkbox input[type="checkbox"] { width: auto; flex: none; margin: 0; }
/* Linha de ajuste simples: campos e botão lado a lado, alinhados pela base. */
.linha-config { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; }
.linha-config label { margin-bottom: 0; display: flex; flex-direction: column; }
.linha-config input[type="time"] { width: 130px; }
.linha-config .campo-checkbox { flex-direction: row; height: 42px; padding: 0; }
/* Botões de ação do inventário: lado a lado, com espaço pra não clicar no errado. */
.acoes-inventario { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin: 18px 0 26px; }
summary { cursor: pointer; font-weight: 700; }
.busca { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.busca input { flex: 1; }
.busca-separador { width: 1px; align-self: stretch; background: var(--line); margin: 0 2px; }
.busca-exportar-rotulo { color: var(--muted); font-size: 13px; white-space: nowrap; }
.acoes { white-space: nowrap; }
.acoes a { margin-right: 8px; }

/* Botões de exportar/importar planilha lado a lado (o conteúdo do "Importar"
   ainda abre pra baixo, sem empurrar o botão de exportar). */
.acoes-planilha { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin: 14px 0; }
.acoes-planilha .importar-planilha .card { margin-top: 8px; margin-bottom: 0; }

/* Balão de confirmação (ex.: "produto cadastrado"), flutuante e some sozinho. */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  padding: 12px 22px; border-radius: 10px; font-weight: 700;
  box-shadow: 0 10px 30px rgba(0,0,0,.2); z-index: 500;
  animation: toast-entra .25s ease; }
.toast-ok { background: var(--ok-bg); color: var(--ok-ink); }
.toast-erro { background: var(--erro-bg); color: var(--erro-ink); }
.toast-saindo { opacity: 0; transform: translateX(-50%) translateY(10px);
  transition: opacity .35s ease, transform .35s ease; }
@keyframes toast-entra {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Pagamento por teclado */
.pagto-hint { background: var(--hint-bg); border: 1px dashed var(--hint-border); color: var(--hint-ink);
  border-radius: 9px; padding: 12px; font-size: 13px; margin-top: 4px; }
.kbd { display: inline-block; min-width: 20px; text-align: center; padding: 1px 6px;
  border: 1px solid var(--kbd-border); border-bottom-width: 2px; border-radius: 6px;
  background: var(--kbd-bg); color: var(--kbd-ink); font-weight: 700; font-family: monospace; font-size: 13px; }
.pay-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.pay-titulo { font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.pay-op { display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--th-bg); color: var(--ink); font-family: inherit;
  font-size: 16px; font-weight: 600; cursor: pointer; }
.pay-op:hover { background: var(--hover); border-color: var(--accent); }
.pay-op .kbd { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pay-op.voltar { justify-content: center; color: var(--muted); font-weight: 500; }
.pay-op.voltar .kbd { background: var(--kbd-bg); color: var(--ink); border-color: var(--kbd-border); }
.pay-escolhido { background: var(--ok-bg); color: var(--ok-ink); font-weight: 700;
  border-radius: 9px; padding: 10px 12px; margin: 6px 0; text-align: center; }
.troco { font-weight: 700; color: var(--success); margin-top: 6px; font-size: 18px; }

.pay-combo-status { background: var(--input-bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; margin: 6px 0; }
.combo-lista { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.combo-restante { font-weight: 700; margin-top: 6px; font-size: 15px; color: var(--primary); }

.pix-qrcode-box { background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px; margin: 6px 0; text-align: center; }
.pix-qrcode-box .pix-qr-svg { width: 260px; margin: 0 auto; }
.pix-qrcode-box .pix-qr-svg svg { width: 100%; height: auto; display: block; }
.pix-qrcode-box .pix-qr-valor { font-weight: 700; font-size: 20px; margin-top: 8px; }
.pix-qrcode-box .pix-qr-contador { font-size: 13px; color: var(--muted); margin-top: 2px; }
.pix-qrcode-box .pix-qr-copia { display: flex; align-items: center; gap: 8px;
  margin-top: 10px; justify-content: center; flex-wrap: wrap; }
.pix-qrcode-box .pix-qr-copia code { font-size: 11px; color: var(--muted);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Modal */
.modal { position: fixed; inset: 0; background: var(--overlay); z-index: 9000;
  display: flex; align-items: center; justify-content: center; }
.modal-box { background: var(--card); border-radius: 14px; padding: 22px; width: 380px;
  max-width: 92vw; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal-box h2 { margin: 0 0 8px; font-size: 19px; }
.modal-acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* Atalhos de teclado: modal mais largo e em 2 colunas (horizontal), pra não
   estourar a altura da tela com uma lista vertical comprida. Usa CSS columns
   (não grid) de propósito: cada item flui livre pela coluna, sem ficar preso
   à altura do item vizinho na mesma "linha" — os itens com submenu (mais
   altos) não deixam espaço vazio embaixo do item mais curto ao lado. */
.modal-atalhos-box { width: 640px; }
.atalhos-grade { column-count: 2; column-gap: 28px; margin-top: 8px; }
.atalho-item { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px;
  break-inside: avoid; }
.atalho-teclas { flex: none; white-space: nowrap; }
.atalho-desc { color: var(--muted); text-align: right; }
.atalho-item-com-sub { flex-direction: column; align-items: stretch; }
.atalho-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.atalho-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--muted); }

/* Tour guiado */
.tour-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 9998; }
.tour-alvo { position: relative; z-index: 9999; outline: 3px solid var(--accent);
  outline-offset: 3px; border-radius: 6px; }
.tour-balao { position: fixed; z-index: 10001; width: 300px; background: var(--card);
  border-radius: 12px; padding: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.tour-balao h3 { margin: 4px 0 6px; font-size: 16px; }
.tour-balao p { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.tour-passo { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.tour-botoes { display: flex; align-items: center; gap: 8px; }

/* Dashboard */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; margin-bottom: 16px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.kpi.principal { background: var(--destaque-bg); border-color: var(--destaque-borda); color: var(--destaque-ink); }
.kpi.principal .kpi-label, .kpi.principal .kpi-sub { color: var(--destaque-muted); }
.kpi.principal .kpi-valor { color: var(--destaque-valor); }
.kpi-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.kpi-valor { font-size: 30px; font-weight: 800; margin-top: 6px; letter-spacing: -.01em; }
.kpi-valor.ok { color: var(--ok-ink); }
.kpi-valor.erro { color: var(--erro-ink); }
.kpi-valor.destaque { color: var(--accent-text); }
.secao-retiradas { margin: 18px 0; padding: 14px; background: var(--th-bg);
  border: 1px solid var(--line); border-radius: 12px; }
.secao-retiradas h2 { margin-top: 0; }
.secao-retiradas .sangria { margin: 12px 0 0; }
.badge { display: inline-block; background: var(--ok-bg); color: var(--ok-ink);
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-left: 6px; }
.badge.aviso { background: var(--warn-bg); color: var(--warn-ink); }
.badge.erro { background: var(--erro-bg); color: var(--erro-ink); }
.badge.neutro { background: var(--hover); color: var(--muted); }
.badge.ouro { background: color-mix(in srgb, var(--accent) 22%, var(--card)); color: var(--accent-text); }
.editar-abertura, .sangria, .fechar-caixa { margin: 10px 0 16px; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cols2 h2, .card h2 { font-size: 17px; margin: 0 0 12px; }

/* Tablets e telas médias: sidebar vira barra de topo e gaveta (overlay). */
@media (max-width: 900px) {
  .pdv { grid-template-columns: 1fr; }
  .grid-form { grid-template-columns: 1fr; }
  .cols2 { grid-template-columns: 1fr; }

  .app-shell { flex-direction: column; }
  html .sidebar, html.sidebar-collapsed .sidebar { width: 100%; flex: none; flex-basis: auto; height: auto; border-right: none; border-bottom: 1px solid var(--side-line); position: sticky; top: 0; z-index: 100; }
  .side-top { padding: 12px 16px; }
  
  html:not(.sidebar-mobile-open) .side-nav { display: none; }
  /* Menu fechado: do rodapé só o sino fica, na barra do topo ao lado do ☰ (o contador de avisos continua à vista). */
  html:not(.sidebar-mobile-open) .side-bottom { position: absolute; top: 12px; right: 56px; padding: 0; border-top: none; }
  html:not(.sidebar-mobile-open) .side-bottom > :not(.sino-wrap) { display: none; }
  /* Botão do topo: ☰ com a gaveta fechada, ✕ com ela aberta. */
  .side-toggle .ic-recolher, html.sidebar-collapsed .side-toggle .ic-expandir { display: none; }
  .side-toggle .ic-abrir { display: block; }
  html.sidebar-mobile-open .side-toggle .ic-abrir { display: none; }
  html.sidebar-mobile-open .side-toggle .ic-fechar { display: block; }
  html.sidebar-mobile-open body { overflow: hidden; } /* Evita rolar a página por trás do menu */
  html.sidebar-mobile-open .sidebar { position: fixed; inset: 0; height: 100vh; z-index: 9999; }
  /* Painel do sino acima da gaveta aberta e dentro da tela (posição calculada no base.html). */
  .sino-painel { z-index: 10000; max-width: calc(100vw - 16px); }
  .side-usuario-menu { z-index: 10000; }
  /* A barra recolhida do computador (só ícones) não vale aqui: a gaveta mostra sempre o logotipo e os nomes. */
  html.sidebar-collapsed .side-mark { display: grid; }
  html.sidebar-collapsed .side-name { display: block; }
  html.sidebar-collapsed .label { display: inline; }
  html.sidebar-collapsed .side-top { justify-content: flex-start; padding: 12px 16px; }
  html.sidebar-collapsed .side-toggle { margin-left: auto; }
  html.sidebar-collapsed .side-nav { padding: 6px 10px; }
  html.sidebar-collapsed .side-nav a, html.sidebar-collapsed .side-link, html.sidebar-collapsed .side-grupo > summary { justify-content: flex-start; padding: 9px 11px; }
  html.sidebar-collapsed .side-kbd { display: inline; }
  html.sidebar-collapsed .side-secao { height: auto; padding: 12px 11px 4px; margin: 0; background: none; font-size: 10.5px; }
  html.sidebar-collapsed .side-secao:first-child { display: block; padding-top: 0; }
  html.sidebar-collapsed.sidebar-mobile-open .side-bottom { flex-direction: row; gap: 6px; padding: 8px 10px 10px; }
  html.sidebar-collapsed .usuario-wrap { flex: 1 1 auto; }
  html.sidebar-collapsed .side-usuario { justify-content: flex-start; padding: 6px 8px; border-radius: 10px; }
  html.sidebar-collapsed .side-usuario-texto { display: flex; }
  html.sidebar-collapsed .side-grupo > summary svg.chevron { display: block; }
  html.sidebar-collapsed .side-subnav { margin: 2px 0 2px 19px; padding-left: 12px; border-left: 1px solid var(--side-line); }

  main { padding: 12px; }
  .page { max-width: 100%; }
  /* Tabelas largas rolam na horizontal em vez de estourar a tela. */
  table.lista, table.itens { display: block; overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch; }
}

/* Celulares: ajustes finos de espaçamento e formulário de venda. */
@media (max-width: 560px) {
  .scan-row { flex-wrap: wrap; }
  .scan-row .busca-wrap { flex: 1 1 100%; }
  .scan-row .qtd { flex: 0 0 72px; width: 72px; }
  .scan-row .btn { flex: 1 1 auto; }
  .total-valor { font-size: 32px; }
  .login-card { width: 100%; max-width: 92vw; }
  .busca { flex-wrap: wrap; }
  .modal-box { width: 92vw; }
  .atalhos-grade { column-count: 1; }
  /* Carrinho no celular (achado B6): sem a coluna Unit. e com nome quebrando linha,
     a coluna Total cabe na tela sem rolar para o lado. */
  #carrinho table.itens { display: table; white-space: normal; }
  #carrinho table.itens th:nth-child(3), #carrinho table.itens td:nth-child(3) { display: none; }
  #carrinho table.itens th, #carrinho table.itens td { padding: 9px 6px; }
  #carrinho table.itens td.num { white-space: nowrap; }
}

/* ===== Spec 011: padrões de tela ===== */

/* Paginação das listas */
.paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; margin: 10px 0 18px; }
.paginacao-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.paginacao-links a.btn, .paginacao-links span.btn, .paginacao-links button.btn { min-width: 34px; text-align: center; text-decoration: none; }
.paginacao-reticencias { color: var(--muted); padding: 0 4px; }

/* "?" com balão de explicação (hover, foco ou toque) */
.dica { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 6px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--muted);
  font-size: 12px; font-weight: 700; cursor: help; position: relative; vertical-align: middle;
  text-transform: none; letter-spacing: 0; }
.dica:hover, .dica:focus { color: var(--accent-text); border-color: var(--accent); outline: none; }
.dica::after { content: attr(data-dica); position: absolute; left: 50%; top: calc(100% + 8px);
  transform: translateX(-50%); width: max-content; max-width: min(340px, 80vw); white-space: normal;
  background: var(--ink); color: var(--card); font-size: 13px; font-weight: 500; line-height: 1.45;
  text-align: left; padding: 10px 12px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.2);
  opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 60; pointer-events: none; }
.dica:hover::after, .dica:focus::after { opacity: 1; visibility: visible; }
/* Célula com balão (ex.: vencimento das contas com observação) */
.com-dica { position: relative; cursor: help; text-decoration: underline dotted var(--muted);
  text-underline-offset: 3px; }
.com-dica:focus { outline: none; }
.com-dica::after { content: attr(data-dica); position: absolute; left: 0; top: calc(100% + 6px);
  width: max-content; max-width: min(320px, 80vw); white-space: normal; background: var(--ink);
  color: var(--card); font-size: 13px; font-weight: 500; line-height: 1.4; padding: 8px 10px;
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.2); opacity: 0; visibility: hidden;
  transition: opacity .12s; z-index: 60; pointer-events: none; }
.com-dica:hover::after, .com-dica:focus::after { opacity: 1; visibility: visible; }

/* Texto longo em tabela: uma linha com "…", inteiro ao focar/tocar */
.truncar { display: inline-block; max-width: 32ch; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom; }
.truncar:focus { white-space: normal; overflow: visible; outline: none; max-width: 48ch; }

/* Cores de linha */
table.lista tr.linha-paga td { background: var(--ok-bg); }
table.lista tr.linha-paga td:first-child { box-shadow: inset 4px 0 0 var(--success); }
table.lista tr.linha-vencida td { background: var(--erro-bg); }
table.lista tr.linha-vencida td:first-child { box-shadow: inset 4px 0 0 var(--danger); }
table.lista tr.linha-inativa td { background: var(--row-alt); color: var(--muted); }
table.lista tr.linha-inativa td:first-child { box-shadow: inset 4px 0 0 var(--muted); }
.selo-inativo { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; background: var(--erro-bg); color: var(--erro-ink); }
.selo-restrito { display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 13px;
  font-weight: 800; letter-spacing: .08em; background: var(--erro-bg); color: var(--erro-ink);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); }

/* Botões de ação coloridos nas linhas (Contas) */
.acoes-linha { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.acoes-linha form { margin: 0; }
.btn.editar { background: var(--warn-bg); color: var(--warn-ink);
  border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); text-decoration: none; }
.btn.editar:hover { background: color-mix(in srgb, var(--warn) 26%, var(--card)); border-color: var(--warn); }
.btn.pago { background: var(--success); border-color: var(--success); color: var(--on-color); }
.btn.pago:hover { filter: brightness(1.1); }

/* Contador de caracteres */
.contador { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; }
.contador-fim { color: var(--danger); }

/* Senha com botão de olho */
.campo-com-olho { position: relative; display: block; }
.campo-com-olho input { padding-right: 42px; }
.btn-olho { position: absolute; right: 6px; top: calc(50% + 2px); transform: translateY(-50%);
  border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 6px;
  border-radius: 6px; display: grid; place-items: center; }
.btn-olho:hover, .btn-olho.ativo { color: var(--primary); background: var(--hover); }

/* Caixa de ação flutuante (excluir/cancelar/editar numa linha) — ver tabela-menu.js */
.cancelar-venda form.caixa-flutuante { position: fixed; right: auto; z-index: 60; }
/* Editar entrada: mesmo espaçamento dos formulários de cadastro (achado N5) */
.cancelar-venda form.grid-form { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 6px 16px; width: min(560px, 92vw); padding: 18px 18px 14px; }
.cancelar-venda form.grid-form label { margin-bottom: 8px; }
.cancelar-venda form.grid-form input, .cancelar-venda form.grid-form select { width: 100%; margin-top: 6px; }
@media (max-width: 560px) { .cancelar-venda form.grid-form { grid-template-columns: 1fr; } }

/* Abas da área Sistema */
.abas-sistema { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 18px; }
.abas-sistema a { padding: 10px 16px; border-radius: 9px 9px 0 0; text-decoration: none; color: var(--muted);
  font-weight: 600; border: 1px solid transparent; border-bottom: none; margin-bottom: -1px; }
.abas-sistema a:hover { color: var(--ink); background: var(--hover); }
.abas-sistema a.ativa { color: var(--ink); font-weight: 800; background: var(--card); border-color: var(--line);
  box-shadow: inset 0 -3px 0 var(--accent); }

/* Título com ações à direita (exportar) */
.titulo-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin-bottom: 8px; }
.titulo-acoes .acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.titulo-acoes .trilha { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: -14px; }
.titulo-acoes h1, .titulo-acoes h2 { margin-bottom: 8px; }
.aviso-campo { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--warn-ink); }

/* Busca com sugestões (Nova entrada) — ver busca-sugestao.js */
.busca-sugestao { position: relative; display: block; min-width: 200px; }
.busca-sugestao .sugestoes { min-width: 280px; }
.busca-sugestao .sug-vazio { color: var(--muted); cursor: default; }
.bs-invalido { border-color: var(--danger) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 20%, transparent); }

/* Assistente sem título (spec 011): topo só com o aviso de limite e "Limpar conversa" */
.chat-topo.chat-topo-sem-titulo { justify-content: flex-end; align-items: center; min-height: 34px; gap: 12px; }
/* O "?" da ajuda fica fixo no canto de cima à direita: o topo do assistente reserva o espaço dele para
   não cobrir o botão "Conversas" (achado de 07/10, em qualquer largura). */
.chat-page .chat-topo { padding-right: 44px; }
/* Celular: o campo de texto ganha a linha inteira e os botões descem para a linha de baixo, à direita —
   antes os 4 botões de 42 px espremiam o campo e o "Peça à Óptima…" sumia. */
@media (max-width: 600px) {
  .chat-pill-form { flex-wrap: wrap; gap: 6px; border-radius: 22px; padding: 6px 6px 6px 14px; }
  .chat-pill-form input[type="text"] { flex: 1 1 100%; min-width: 0; }
  .chat-pill-form [data-btn-anexo] { margin-left: auto; }
  .chat-pill-mic, .chat-pill-enviar { width: 38px; height: 38px; }
  .chat-hero { padding: 16px 8px; }
  /* Frente de caixa: a faixa do caixa (primeira linha) deixa o canto do "?" livre. */
  .pdv .caixa-status { margin-right: 36px; }
}
.chat-aviso-limite { margin: 0 auto 0 0; padding: 4px 10px; border-radius: 999px; background: var(--warn-bg); }
.chat-pill-mic svg, .chat-pill-mic-pausar svg { display: block; margin: auto; }
.ajuda-contexto.tour-alvo { position: absolute; }
/* Botões de ação na linha: o <summary class="btn"> (Excluir) sem a margem de baixo, alinhado aos outros. */
.acoes-linha summary.btn { margin-bottom: 0; }
.acoes-linha details.cancelar-venda { vertical-align: middle; }
.ajuda-voltar { margin: 6px 0 14px; }

/* Conversas do assistente (spec 012, A3) */
.conversas-ia { position: relative; }
.conversas-ia > summary { list-style: none; margin: 0; }
.conversas-ia > summary::-webkit-details-marker { display: none; }
.conversas-ia-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: min(340px, 90vw);
  max-height: 360px; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18); padding: 6px; }
.conversas-ia-lista ul { list-style: none; margin: 0; padding: 0; }
.conversas-ia-lista li { display: flex; align-items: center; gap: 4px; border-radius: 8px; }
.conversas-ia-lista li.ativa { background: var(--hint-bg); }
.conversas-ia-lista li a { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  color: var(--ink); text-decoration: none; border-radius: 8px; }
.conversas-ia-lista li a:hover { background: var(--hover); }
.conversa-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13px; }
.conversas-ia-lista li form { margin: 0; }
.conversa-excluir { border: none; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer;
  padding: 4px 8px; border-radius: 6px; }
.conversa-excluir:hover { color: var(--danger); background: var(--hover); }
.conversas-vazio { padding: 10px; }
.chat-topo.chat-topo-sem-titulo > form { margin: 0; }
/* Botão de enviar enquanto a IA pensa: vira "Parar" */
.chat-pill-enviar.parar { background: var(--danger); color: var(--on-color); font-size: 14px; }

/* ===== Lucro no Painel (pedidos de 05/10, item 6) ===== */
.lucro { margin: 18px 0; scroll-margin-top: 16px; }
.lucro-cabeca { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.lucro-cabeca h2 { margin: 0; font-size: 20px; }
.lucro-avisos { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.lucro-avisos li { background: var(--warn-bg); border-left: 4px solid var(--warn); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; }
.lucro-grade { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 14px; align-items: start; margin-bottom: 14px; }
/* Cartões de lucro sem faixa colorida no topo (Marca GH): a cor fica só no número. */
.lucro-cartao { position: relative; overflow: hidden; padding-top: 20px; }
.lucro-rotulo { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.lucro-valor { font-size: 34px; font-weight: 800; margin: 4px 0 2px; color: var(--ok-ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.lucro-valor.negativo { color: var(--erro-ink); }
.lucro-margem { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.lucro-linhas { margin: 12px 0 0; }
.lucro-linhas > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0;
  border-top: 1px dashed var(--line); font-size: 14px; }
.lucro-linhas dt { margin: 0; }
.lucro-linhas dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.lucro-linhas .lucro-subtotal { border-top: 1px solid var(--line); font-weight: 700; }
.lucro-linhas .lucro-total { border-top: 2px solid var(--ink); font-weight: 800; font-size: 16px;
  background: var(--ok-bg); color: var(--ok-ink); margin: 2px -8px 0; padding: 8px; border-radius: 0 0 8px 8px; }
.lucro-linhas .lucro-info { color: var(--muted); font-size: 13px; }
.lucro-linhas .lucro-info dd { font-weight: 500; }
.lucro-nota { margin: 10px 0 0; }
/* Barra "para onde foi cada real do faturamento" */
.lucro-barra { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--line);
  margin: 12px 0 6px; transform-origin: left; animation: lucro-cresce .9s cubic-bezier(.2,.8,.2,1) both; }
.lucro-barra span { display: block; height: 100%; }
.seg-custo { background: var(--muted); }
.seg-taxa { background: var(--warn); }
.seg-despesa { background: var(--danger); }
.seg-lucro { background: var(--success); }
.lucro-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.lucro-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
/* Retirada do dono */
.lucro-progresso { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 8px 0 2px; }
.lucro-progresso span { display: block; height: 100%; background: var(--accent); border-radius: 4px;
  transform-origin: left; animation: lucro-cresce .9s cubic-bezier(.2,.8,.2,1) both; }
.lucro-retirar { margin: 14px 0 10px; }
.lucro-retirar[open] summary { margin-bottom: 10px; }
.lucro-retirar .grid-form { grid-template-columns: 1fr; }
.lucro-origem { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; margin: 6px 0 8px; }
.lucro-origem legend { font-size: 13px; color: var(--muted); padding: 0 4px; }
.lucro-origem label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; color: var(--ink); }
.lucro-origem input[type="radio"] { width: auto; margin: 0; }
.lucro-retiradas { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.lucro-retiradas li { display: grid; grid-template-columns: auto 1fr auto 24px; gap: 8px; align-items: center;
  padding: 7px 0; border-top: 1px dashed var(--line); }
.lucro-retiradas b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lucro-retirada-origem { min-width: 0; overflow-wrap: anywhere; }
.lucro .lista td.num { white-space: nowrap; }
/* Descontos no balcão e taxas */
.lucro-descontos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lucro-desconto-valor { font-size: 22px; font-weight: 800; margin: 2px 0 6px; color: var(--erro-ink);
  font-variant-numeric: tabular-nums; }
.lucro-taxas { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 4px 12px; }
.lucro-taxas .form-actions { grid-column: 1 / -1; }
.lucro-taxas:has(.taxas-grade) { display: block; }
.taxas-grade { display: grid; grid-template-columns: max-content repeat(3, minmax(96px, 1fr)); gap: 10px 14px; align-items: center; margin-bottom: 18px; }
.taxas-col { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.taxas-maquina { font-weight: 800; color: var(--ink); padding-right: 6px; }
.taxas-grade .campo-sufixo span { margin-top: 0; }
.taxa-campo { min-width: 0; }
.taxa-rotulo { display: none; }
/* Celular: as três colunas não cabem ao lado do nome; cada maquininha vira um bloco (nome em cima, campos embaixo
   com o rótulo em cima de cada um). */
@media (max-width: 560px) {
  .taxas-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; }
  .taxas-grade > span:first-child, .taxas-col { display: none; }
  .taxas-maquina { grid-column: 1 / -1; padding: 10px 0 0; }
  .taxa-rotulo { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
  .taxas-grade .campo-sufixo input { min-width: 0; }
}
.campo-sufixo { display: flex; align-items: center; gap: 6px; }
.campo-sufixo input { text-align: right; }
.campo-sufixo span { color: var(--muted); font-weight: 600; margin-top: 4px; }
@keyframes lucro-cresce { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .lucro-barra, .lucro-progresso span { animation: none; } }
/* Barras horizontais (forma de pagamento, mais vendidos, limites...): degradê da esquerda para a direita e
   entrada crescendo, uma depois da outra (--i = posição na lista). */
.barra > span, .forma-barra span, .lucro-barra span, .lucro-progresso span { position: relative; }
.barra > span::after, .forma-barra span::after, .lucro-barra span::after, .lucro-progresso span::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.42), rgba(255,255,255,0) 75%); }
.barra > span, .forma-barra span { transform-origin: left;
  animation: lucro-cresce .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 80ms); }
/* Relatório: pagamento empilhado cresce da esquerda; mapa de calor aparece em onda na diagonal (--i = linha + coluna). */
.rl-empilhada { transform-origin: left; animation: lucro-cresce .9s cubic-bezier(.2,.8,.2,1) both; }
.rl-empilhada span { position: relative; }
.rl-empilhada span::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)); }
.calor-celula { animation: calor-surge .5s ease-out both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes calor-surge { from { opacity: 0; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .barra > span, .forma-barra span, .rl-empilhada, .calor-celula { animation: none; } }
@media (max-width: 1100px) { .lucro-grade { grid-template-columns: 1fr 1fr; } .lucro-mes { grid-column: 1 / -1; grid-row: 1; } }
@media (max-width: 700px) {
  .lucro-grade, .lucro-descontos { grid-template-columns: 1fr; }
  .lucro-valor { font-size: 28px; }
}

/* Cadastro de produto (07/10): obrigatórios marcados; a confirmação mostra o resumo em linhas. */
.obrigatorio { color: var(--danger); }
.form-obrigatorios { grid-column: 1 / -1; margin: 0; }
#modal-confirmar-msg { white-space: pre-line; }

/* ---------- Câmera do celular na frente de caixa (spec 020) ---------- */
/* O botão só aparece em tela de toque (celular/tablet); no computador vale o leitor USB. */
.camera-venda-abrir { display: none; }
@media (pointer: coarse) {
  .camera-venda-abrir { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 44px; }
}
body.camera-venda-aberta { overflow: hidden; }
.camera-venda { position: fixed; inset: 0; z-index: 20000; background: #000; color: #fff;
  display: flex; flex-direction: column; }
.camera-venda[hidden] { display: none; }
.camera-venda video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Só na câmera da venda: Conversas da IA também usa .cv-topo e herdava esta faixa escura. */
.camera-venda .cv-topo { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px; background: linear-gradient(rgba(0,0,0,.65), transparent); }
.cv-sacola { font-size: 16px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.9); background: rgba(0,0,0,.45); padding: 6px 12px; border-radius: 999px; }
.cv-sacola b { font-size: 20px; }
.cv-fechar { width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer; }
/* Moldura no meio; fora dela a imagem fica escurecida (sombra gigante). */
.cv-moldura { position: absolute; left: 50%; top: 42%; width: min(78vw, 420px); height: min(30vw, 170px);
  transform: translate(-50%, -50%); border: 3px solid rgba(255,255,255,.9); border-radius: 14px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); pointer-events: none; }
.cv-dica { position: absolute; left: 0; right: 0; top: calc(42% + min(15vw, 85px) + 18px); margin: 0;
  text-align: center; font-size: 16px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.8); padding: 0 16px; }
.cv-dica[hidden] { display: none; }
.cv-aviso { position: absolute; left: 50%; top: calc(70px + env(safe-area-inset-top)); transform: translateX(-50%);
  max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 10px; font-weight: 700; text-align: center;
  background: var(--ok-bg); color: var(--ok-ink); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.cv-aviso.erro { background: var(--erro-bg); color: var(--erro-ink); }
.cv-aviso[hidden] { display: none; }
.cv-concluir { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  min-width: 200px; min-height: 52px; font-size: 18px; }
/* Gaveta de baixo com o produto lido: botões na zona do polegar, mínimo 48 px. */
.cv-gaveta { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 560px; z-index: 1;
  background: var(--card); color: var(--ink); border-radius: 20px 20px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(0,0,0,.4); display: flex; flex-direction: column; gap: 12px; min-height: 40vh; }
.cv-gaveta[hidden] { display: none; }
.cv-nome { font-size: 22px; font-weight: 800; line-height: 1.2; }
.cv-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cv-preco { font-size: 26px; font-weight: 800; color: var(--success); }
.cv-estoque { color: var(--muted); font-size: 15px; }
.cv-erro { background: var(--erro-bg); color: var(--erro-ink); border-radius: 10px; padding: 10px 12px; font-weight: 700; }
.cv-erro[hidden] { display: none; }
.cv-qtd { display: flex; align-items: center; justify-content: center; gap: 14px; }
.cv-qtd-btn { width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--line); background: var(--input-bg);
  color: var(--ink); font-size: 30px; line-height: 1; cursor: pointer; }
#cv-quantidade { width: 100px; height: 60px; text-align: center; font-size: 28px; font-weight: 800; }
.cv-acoes { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; margin-top: auto; }
.cv-acoes .btn { min-height: 56px; font-size: 18px; }
/* Gaveta aberta: o Concluir some para não ficar por cima dos botões. */
.cv-gaveta:not([hidden]) ~ .cv-concluir { display: none; }
/* A sombra da moldura escurece só a imagem: topo, dicas, avisos e botões ficam por cima dela. */
.cv-moldura { z-index: 0; }
.camera-venda .cv-topo, .cv-dica, .cv-concluir { z-index: 2; }
.cv-aviso, .cv-gaveta { z-index: 3; }

/* Lançar conta por foto (spec 021). */
.foto-conta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0; }
.foto-conta-avisos { margin: 0 0 10px; padding: 10px 12px 10px 28px; border-radius: 9px; background: var(--warn-bg);
  color: var(--ink); font-size: 14px; }
.foto-conta-avisos[hidden] { display: none; }

/* Histórico de caixas (spec 023). */
.txt-ok { color: var(--ok-ink); }
.txt-erro { color: var(--erro-ink); }
.tabela-rolagem { overflow-x: auto; }

/* ===== Componentes Marca GH (R2 — docs/10-redesign-visual.md §3.4) ===== */
/* Filtros rápidos: pílulas com contagem; a ativa em carvão. */
.filtros-rapidos { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.filtro { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; }
.filtro:hover { background: var(--hover); }
.filtro.ativo, .filtro[aria-pressed="true"] { background: var(--strong); border-color: var(--strong); color: var(--strong-ink); }
.filtro .contagem { font-weight: 600; opacity: .75; }

/* Seletor de período (Hoje · Ontem · Este mês · Escolher data). */
.periodo { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); }
.periodo a, .periodo button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: inherit;
  font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.periodo a:hover, .periodo button:hover { background: var(--hover); }
.periodo .ativo, .periodo [aria-current="true"] { background: var(--strong); color: var(--strong-ink); font-weight: 700; }

/* Painel lateral de formulário (cadastro/edição abre à direita; no celular, tela cheia). */
.painel-lateral { position: fixed; inset: 0; z-index: 9000; display: flex; justify-content: flex-end;
  background: var(--overlay); }
.painel-lateral[hidden] { display: none; }
.painel-lateral-caixa { width: min(560px, 100%); height: 100%; overflow-y: auto; background: var(--card);
  border-left: 1px solid var(--line); padding: 22px 24px 0; display: flex; flex-direction: column;
  box-shadow: -20px 0 60px rgba(0,0,0,.25); }
.painel-lateral-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.painel-lateral-topo h2 { margin: 0; font-size: 20px; }
.painel-lateral-rodape { position: sticky; bottom: 0; margin: auto -24px 0; padding: 14px 24px;
  background: var(--card); border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }

/* Botão fechar redondo (painéis, modais). */
.btn-fechar { width: 44px; height: 44px; border-radius: 10px; border: 0; background: transparent;
  color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.btn-fechar:hover { background: var(--hover); color: var(--ink); }

/* Código de barras / documento embaixo do nome, em mono. */
.codigo { display: block; font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--muted);
  font-variant-numeric: normal; }

@media (max-width: 600px) {
  .painel-lateral-caixa { width: 100%; padding: 18px 16px 0; }
  .painel-lateral-rodape { margin: auto -16px 0; padding: 12px 16px; }
}

/* ===== Frente de caixa (R3 — modelo M1 Operação) ===== */
table.itens td { font-size: 15px; }
table.itens td:first-child { font-weight: 700; }
table.itens td.num:nth-child(4) { font-weight: 800; }
/* Último item bipado: realce em ouro suave (o F3 usa .selecionada, que tem prioridade). */
table.itens tbody tr[data-recem-bipado] td { background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.btn-remover { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent;
  color: var(--muted); font-size: 15px; cursor: pointer; }
.btn-remover:hover, .btn-remover:focus-visible { background: var(--erro-bg); color: var(--erro-ink); outline: none; }
.pdv-right { display: flex; flex-direction: column; gap: 14px; }
.pdv-right > .card, .pdv-right > form { margin-bottom: 0; }
.pdv-right .totais { border-radius: 16px; padding: 22px 20px; }
.btn.btn-finalizar { min-height: 64px; font-size: 19px; border-radius: 14px; display: inline-flex;
  align-items: center; justify-content: center; gap: 12px; }
.btn.btn-finalizar .kbd { background: transparent; color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent-ink) 40%, transparent); }
.pdv-atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
.pdv-atalhos .btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; min-height: 44px; }
#btn-ir-pagamento { display: inline-flex; align-items: center; gap: 6px; }
/* Barra do rodapé da venda: só no celular, onde o total e o Pagar desceriam para depois do carrinho. */
.pdv-barra { display: none; }
@media (max-width: 900px) {
  .pdv { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .pdv-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 16px max(10px, env(safe-area-inset-bottom));
    background: var(--card); border-top: 2px solid var(--accent); box-shadow: 0 -6px 20px rgba(0,0,0,.12); }
  .pdv-barra-total { display: flex; flex-direction: column; min-width: 0; }
  .pdv-barra-total span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .pdv-barra-total b { font-size: 28px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .pdv-barra .btn-pagar { flex: 0 0 auto; width: auto; min-height: 52px; min-width: 132px; padding: 0 22px; font-size: 18px; border-radius: 14px; }
  .pdv-barra .btn-pagar[hidden] { display: none; }
  /* Em modo de leitura o cartão de pagamento só teria o Pagar repetido: some até o pagamento abrir. */
  .pagamento-card:has(#pagto-hint:not([hidden])) { display: none; }
  .pagamento-card { scroll-margin-top: 76px; }
  /* O Finalizar venda vai para a barra (o do formulário ficava embaixo dela). */
  .pdv-right .btn-finalizar { display: none; }
  body:has(.pdv-barra) .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
}
.pagto-hint { border-style: solid; }

/* ===== Listas e cadastros (R4 — modelo M2) ===== */
/* "+ Cadastrar …" fechado: só o botão, sem a moldura de cartão vazia em volta. */
details.card:not([open]):has(> summary.btn) { background: transparent; border-color: transparent; padding: 0; }
details.card[open] > summary.btn { margin-bottom: 16px; }
/* Aberto, o "+ Cadastrar" vira só o título do formulário: o ouro fica no botão de salvar. */
details.card[open] > summary.btn.primary { background: var(--card); border-color: color-mix(in srgb, var(--ink) 18%, var(--line));
  color: var(--ink); font-weight: 700; }
/* Busca + ações da lista na mesma linha. */
.barra-lista { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 14px; }
.barra-lista .busca { flex: 1 1 360px; margin: 0; }
.busca input, .busca select { margin-top: 0; }
.barra-lista .acoes-planilha { margin: 0; align-items: center; }
.importar-planilha { position: relative; }
.importar-planilha > .card { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  width: min(560px, 92vw); max-height: 70vh; overflow: auto; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
/* Linha com estoque no mínimo: marca discreta na primeira célula além do fundo. */
table.lista tr.baixo td:first-child { box-shadow: inset 4px 0 0 var(--warn); }

/* ===== Telas avulsas (R7 — modelo M6): acesso restrito e erro ===== */
.tela-aviso .card, .card.tela-aviso { max-width: 440px; padding: 30px 28px; }
.tela-aviso h1 { font-size: 26px; margin: 0 0 8px; }
.tela-aviso p { line-height: 1.55; }
.tela-aviso-icone { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 20%, var(--card)); color: var(--accent-text); }
.tela-aviso-icone.erro { background: var(--erro-bg); color: var(--erro-ink); }
.tela-aviso .form-actions { border-top: 0; padding-top: 0; margin-top: 18px; }

/* Ondas da gravação de voz no assistente (assistente.js): barrinhas no lugar do campo. */
.chat-ondas { flex: 1; min-width: 0; height: 44px; display: flex; align-items: center; justify-content: center; gap: 3px;
  overflow: hidden; }
.chat-ondas[hidden] { display: none; }
.chat-ondas i { display: block; width: 3px; height: 3px; border-radius: 3px; background: var(--accent);
  transition: height .08s linear; }
@media (prefers-reduced-motion: reduce) { .chat-ondas i { transition: none; } }

/* ===== Frente de caixa — layout final (modelo M1, docs/10) ===== */
.pdv { grid-template-columns: minmax(0, 1fr) 400px; }
.pdv-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; }
.pdv-topo .caixa-status { flex: 1 1 320px; margin: 0; padding: 0; background: transparent; border: 0;
  justify-content: flex-start; gap: 6px 28px; }
.pdv-topo .caixa-status.erro { color: var(--erro-ink); }
.pdv-topo .pdv-atalhos { flex: 0 0 auto; flex-wrap: nowrap; }
.pdv-topo .pdv-atalhos .btn { flex: 0 0 auto; min-height: 40px; padding: 8px 16px; border-radius: 12px; font-size: 14px; }

.scan-row { align-items: stretch; gap: 12px; }
.busca-icone { position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  color: var(--accent-text); pointer-events: none; }
.scan-row .busca-wrap #codigo { height: 72px; padding-left: 66px; font-size: 21px; font-weight: 500; }
.scan-row .qtd-box { display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 120px; margin: 0;
  padding: 10px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.scan-row .qtd-box .qtd { width: 100%; height: auto; padding: 0; margin: 0; border: 0; background: transparent;
  box-shadow: none; text-align: left; font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: 0; }
.scan-row .btn.btn-adicionar-oculto { position: absolute; width: 1px; height: 1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
.scan-row .btn.camera-venda-abrir { height: auto; }

.carrinho-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.carrinho-card table.itens { border: 0; border-radius: 0; }
.carrinho-card table.itens th { padding: 16px 20px; letter-spacing: .1em; }
.carrinho-card table.itens td { padding: 14px 20px; }
.carrinho-card table.itens th:nth-child(2), table.itens td.item-qtd { text-align: center; }
.carrinho-card table.itens td.item-qtd { font-weight: 800; }
.carrinho-card table.itens td:nth-child(3) { color: var(--muted); }
.item-produto .item-nome { font-size: 17px; font-weight: 700; }
.item-produto[data-codigo]::after { content: attr(data-codigo); display: block; margin-top: 2px;
  font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; font-weight: 400; color: var(--muted); }
table.itens tbody tr[data-recem-bipado] .item-nome::after { content: "Último"; margin-left: 10px; padding: 3px 8px;
  border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--accent) 28%, var(--card)); color: var(--accent-text); vertical-align: 2px; }
.carrinho-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 20px; border-top: 1px solid var(--line); }
.carrinho-contagem { color: var(--muted); font-size: 14px; }
.carrinho-rodape form { margin: 0; }
.btn-cancelar-link { background: none; border: 0; padding: 6px 4px; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--danger); cursor: pointer; }
.btn-cancelar-link:disabled { opacity: .4; cursor: not-allowed; }
.btn-cancelar-link .kbd { border: 0; background: none; padding: 0; min-width: 0; font-family: inherit; font-size: inherit;
  color: inherit; }
.btn-cancelar-link .kbd::before { content: "("; }
.btn-cancelar-link .kbd::after { content: ")"; }

/* Total no tom dos cartões de destaque, alinhado à esquerda */
.pdv-right .totais { text-align: left; padding: 22px 24px; }
.pdv-right .total-label { letter-spacing: .12em; }
.pdv-right .total-valor { font-size: 56px; margin-top: 6px; }
.totais-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: 10px; }
.totais-rodape .totais-detalhe { flex: 1 1 160px; min-width: 0; margin: 0; display: flex; flex-direction: column;
  align-items: flex-start; gap: 6px; }
.totais-detalhe .totais-linha { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 2px 8px; font-size: 14px; }
.totais-detalhe .totais-linha b { color: var(--destaque-ink); font-weight: 600; }
.totais-detalhe .totais-desconto { font-weight: 400; color: var(--destaque-muted); }
.totais .btn.mini:not(.ghost) { background: var(--card); color: var(--ink); border-color: var(--destaque-borda);
  font-weight: 700; padding: 6px 12px; }
.totais .btn.mini .kbd { margin-left: 4px; font-size: 12px; }

/* Pagamento e cliente em cartões separados */
.pdv-right .pagamento { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.pdv-right .pagamento .card { margin: 0; }
.cartao-titulo, .pay-titulo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin-bottom: 10px; }
.pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pay-grid .pay-titulo { grid-column: 1 / -1; margin-bottom: 0; }
.pay-grid .pay-op { flex-direction: column; justify-content: center; align-items: center; gap: 2px; text-align: center;
  padding: 12px 8px; border-radius: 12px; font-size: 16px; font-weight: 600; background: var(--th-bg); }
.pay-grid .pay-op .kbd { min-width: 0; padding: 0; border: 0; background: none; color: var(--muted);
  font-family: inherit; font-size: 11px; font-weight: 600; }
.pay-grid .pay-op:hover, .pay-grid .pay-op:focus-visible { border-color: var(--ink); outline: none; }
.pay-grid .pay-op.voltar { grid-column: 1 / -1; }
.cliente-card label { margin-bottom: 10px; }
.cliente-card label:last-child { margin-bottom: 0; }

/* ===== Painel (modelo M3, docs/10) ===== */
.page.painel { max-width: 1280px; }
.painel-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; margin-bottom: 16px; }
.painel-topo h1 { margin-bottom: 4px; }
.painel-sub { margin: 0; font-size: 15px; }
.painel-sub b.ok { color: var(--ok-ink); }
.painel-sub b.erro { color: var(--erro-ink); }
.seg-periodo { display: inline-flex; align-items: center; gap: 2px; padding: 5px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; }
.seg-periodo a { padding: 9px 16px; border-radius: 10px; color: var(--ink); font-weight: 600; font-size: 15px; }
.seg-periodo a:hover { background: var(--hover); }
.seg-periodo a.ativo { background: var(--strong); color: var(--strong-ink); }
.seg-calendario { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 0;
  color: var(--ink); cursor: pointer; border-radius: 10px; }
.seg-calendario:hover { background: var(--hover); }
.seg-calendario input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }

.kpis-painel { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.kpis-painel .kpi { padding: 20px 22px; border-radius: 16px; }
.kpis-painel .kpi-valor { font-size: 34px; }
.kpis-painel .kpi-sub { margin-top: 8px; font-size: 14px; color: var(--muted); }
.kpis-painel .kpi-sub b { color: var(--ink); }
.kpis-painel .kpi.principal .kpi-sub b.ok { color: var(--ok-ink); }
.kpis-painel .kpi.principal .kpi-sub b.erro { color: var(--erro-ink); }
.kpis-painel .kpi-sub a { color: var(--accent-text); text-decoration: underline; }

.painel-grade { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.painel-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.painel-col .card { margin: 0; border-radius: 16px; padding: 22px 24px; }
.card-cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 14px; }
.card-cabeca h2 { margin: 0; font-size: 20px; }
.link-ouro { color: var(--accent-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.atencao-lista .link-ouro, .contador-atencao + * { text-decoration: none; }

.legenda-grafico { display: inline-flex; gap: 16px; font-size: 14px; color: var(--muted); }
.legenda-grafico i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.lg-fat { background: #E3CF94; }
.lg-lucro { background: var(--success); }
.grafico-wrap { position: relative; min-height: 190px; }

.lucro-linha-principal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 14px; }
.lucro-grande { font-size: 38px; font-weight: 800; letter-spacing: -.01em; color: var(--ok-ink); line-height: 1.1; }
.lucro-grande.erro { color: var(--erro-ink); }
.painel .lucro-barra { height: 14px; margin: 0 0 16px; }
.seg-custo { background: #8A8172; }
.seg-taxa { background: var(--ouro-claro); }
.seg-despesa { background: #C0524A; }
.seg-perda { background: #9B3A33; }
.seg-lucro { background: var(--success); }
.lucro-quebra { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; margin: 0; }
.lucro-quebra > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lucro-quebra dt { margin: 0; display: flex; align-items: center; }
.lucro-quebra dt i { width: 12px; height: 12px; border-radius: 3px; margin-right: 10px; flex: none; }
.lucro-quebra dd { margin: 0; font-weight: 600; white-space: nowrap; }
.painel .lucro-nota { margin: 14px 0 0; }

.lista-simples th { background: transparent; padding: 10px 0; }
.lista-simples td { padding: 14px 0; }
table.lista.lista-simples { border: 0; border-radius: 0; background: transparent; }
table.lista.lista-simples tbody tr:hover td { background: transparent; }

.contador-atencao { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; display: inline-grid; place-items: center;
  background: var(--danger); color: var(--on-color); font-size: 13px; font-weight: 800; }
.atencao-lista { list-style: none; margin: 0; padding: 0; }
.atencao-lista li { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: start; padding: 14px 0;
  border-bottom: 1px solid var(--line); }
.atencao-lista li:last-child { border-bottom: 0; }
.atencao-lista .ponto { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--muted); }
.atencao-lista .nivel-erro .ponto { background: var(--danger); }
.atencao-lista .nivel-aviso .ponto { background: var(--warn); }
.atencao-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atencao-texto b { font-weight: 600; overflow-wrap: anywhere; }
.atencao-lista .link-ouro { text-decoration: none; font-size: 14px; }
.vazio-atencao { display: block !important; padding: 16px 0 !important; }

.painel .lucro-progresso { height: 10px; border-radius: 5px; margin: 14px 0 10px; background: var(--line-soft); }
.painel .btn.secundario.big { margin-top: 8px; }

.formas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.forma-linha { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.forma-barra { height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.forma-barra span { display: block; height: 100%; background: var(--strong); border-radius: 4px; }
.forma-barra span.fiado { background: var(--perda); }

.detalhes-lucro { margin-top: 18px; }
.detalhes-lucro > summary { cursor: pointer; font-weight: 700; list-style: none; }
.detalhes-lucro > summary::-webkit-details-marker { display: none; }
.detalhes-lucro > summary::before { content: "▸"; margin-right: 8px; color: var(--muted); }
.detalhes-lucro[open] > summary::before { content: "▾"; }

@media (max-width: 1100px) {
  .painel-grade { grid-template-columns: 1fr; }
  .kpis-painel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .kpis-painel { grid-template-columns: 1fr; }
  .lucro-quebra { grid-template-columns: 1fr; }
}

/* ===== Base de estilo do redesenho (docs/10, 2.3) — classes reutilizáveis, usadas pelas telas conforme cada etapa ===== */
.mono { font-family: var(--fonte-mono); font-weight: 500; }
.rotulo { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.btn-principal, .btn-secundario, .btn-neutro, .btn-perigo { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent; font: inherit; font-size: 15px;
  cursor: pointer; text-decoration: none; transition: filter .12s, background .12s, border-color .12s; }
.btn-principal { background: var(--ouro); border-color: var(--ouro); color: var(--carvao); font-weight: 800; }
.btn-secundario { background: var(--carvao); border-color: var(--carvao); color: var(--carvao-ink); font-weight: 700; }
.btn-neutro { background: var(--card); border-color: var(--line); color: var(--ink); font-weight: 700; }
.btn-perigo { background: var(--card); border-color: var(--perigo-line); color: var(--erro); font-weight: 700; }
.btn-principal:hover, .btn-secundario:hover { filter: brightness(1.08); }
.btn-neutro:hover { background: var(--hover); }
.btn-perigo:hover { background: var(--erro-bg); }
.btn-principal:focus-visible, .btn-secundario:focus-visible, .btn-neutro:focus-visible, .btn-perigo:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.btn-principal:disabled, .btn-secundario:disabled, .btn-neutro:disabled, .btn-perigo:disabled { opacity: .45; cursor: not-allowed; }
.btn-destaque { min-height: 60px; font-size: 18px; border-radius: 14px; }

.cartao { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.cartao-destaque { background: var(--carvao); color: var(--carvao-ink); border-radius: 16px; padding: 22px; }
.cartao-destaque .rotulo { color: var(--carvao-muted); }
.cartao-destaque .valor-destaque { color: var(--ouro-claro); }
.valor-destaque { font-size: 40px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }

.etiqueta { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap;
  background: var(--hover); color: var(--muted); }
.etiqueta-ok { background: var(--ok-bg); color: var(--ok-ink); }
.etiqueta-warn { background: var(--warn-bg); color: var(--warn-ink); }
.etiqueta-erro { background: var(--erro-bg); color: var(--erro-ink); }
.etiqueta-neutra { background: var(--hover); color: var(--muted); }

.aviso { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; font-size: 14px; line-height: 1.45;
  background: var(--aviso-bg); border: 1px solid var(--warn-line); color: var(--ink); }
.aviso > svg { flex: none; margin-top: 2px; color: var(--warn-ink); }
.aviso > :nth-child(2) { flex: 1; min-width: 0; }
.aviso a { color: var(--ouro-texto); font-weight: 700; }
.aviso a:hover { color: var(--ouro-texto-hover); }

.segmentado { display: inline-flex; align-items: center; gap: 2px; padding: 4px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; }
.segmentado > a, .segmentado > button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent;
  color: var(--ink); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; }
.segmentado > .ativo, .segmentado > [aria-pressed="true"] { background: var(--carvao); color: var(--carvao-ink); }

.filtro-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none; }
.filtro-chip.ativo, .filtro-chip[aria-pressed="true"] { background: var(--carvao); border-color: var(--carvao); color: var(--carvao-ink); }
.filtro-chip.atencao { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }

.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { padding: 12px 14px; background: var(--th-bg); color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; text-align: left; white-space: nowrap; }
.tabela td { padding: 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

.barra { height: 8px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.barra > span { display: block; height: 100%; border-radius: 999px; background: var(--ouro); }
.barra.fina { height: 6px; }
.barra.grossa { height: 10px; }

.estado-vazio { padding: 28px 20px; border: 1px dashed var(--line); border-radius: 14px; text-align: center; color: var(--muted); }

.menu-acoes { position: relative; display: inline-block; }
.menu-acoes > summary, .menu-acoes > button { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; list-style: none; }
.menu-acoes > summary::-webkit-details-marker { display: none; }
.menu-acoes > summary:hover, .menu-acoes > button:hover { background: var(--hover); color: var(--ink); }
.menu-acoes-lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; min-width: 160px; padding: 6px; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.menu-acoes-lista a, .menu-acoes-lista button { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.menu-acoes-lista a:hover, .menu-acoes-lista button:hover { background: var(--hover); }
.menu-acoes-lista .perigo { color: var(--erro); }
/* Dentro de área com rolagem (tabela), o menu abre solto na tela para não ser cortado — ver menu-fora.js */
.menu-acoes-lista.menu-solto { position: fixed; right: auto; top: auto; z-index: 60; }

/* ===== Caixa (docs/10, 3.2 e 3.3) e Configurações › Loja (3.7) ===== */
.caixa-tela { max-width: 1220px; display: flex; flex-direction: column; gap: 18px; }
.caixa-tela h1 { margin: 0; font-size: 26px; }
.caixa-tela h2 { margin: 0; font-size: 18px; }
.caixa-tela p { margin: 0; }
.caixa-cabeca { display: flex; align-items: center; gap: 16px; min-width: 0; }
.caixa-icone { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; }
.caixa-icone-ok { background: var(--ok-bg); color: var(--ok); }
.caixa-icone-neutro { background: var(--hover); color: var(--muted); }
.caixa-titulo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.caixa-titulo-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.caixa-titulo p { font-size: 14px; }
.caixa-faixa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: 18px; }
.caixa-acoes-topo { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-alto { min-height: 56px; border-radius: 14px; padding: 0 22px; font-size: 15px; }
.caixa-acoes-topo .btn-secundario { font-weight: 800; font-size: 16px; padding: 0 26px; }

/* painéis que os botões do topo abrem: ficam escondidos até serem chamados */
.caixa-painel:not([open]) { display: none; }
.caixa-painel > summary { font-weight: 800; font-size: 17px; cursor: pointer; list-style: none; margin-bottom: 12px; }
.caixa-painel > summary::-webkit-details-marker { display: none; }
.caixa-painel .grid-form { max-width: 480px; }

.caixa-linha { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.caixa-linha-baixo { align-items: flex-start; }
.caixa-gaveta { flex: 3 1 460px; border-radius: 18px; padding: 24px 26px; display: flex; flex-direction: column; gap: 18px; }
.caixa-gaveta-valor { font-size: 54px; font-weight: 800; line-height: 1.05; color: var(--ouro-claro); margin-top: 4px; }
.caixa-gaveta-valor.negativo { color: #F0A49C; }
.caixa-conta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: center; }
.caixa-conta > div { display: flex; flex-direction: column; gap: 2px; }
.caixa-conta span { font-size: 12px; color: var(--carvao-muted); }
.caixa-conta strong { font-size: 18px; font-weight: 800; }
.caixa-conta .mais { color: #8FD3A8; }
.caixa-conta .menos { color: #F0A49C; }
.link-claro { font-size: 13px; font-weight: 700; color: var(--ouro-claro); }
.link-claro:hover { color: var(--carvao-ink); }

.caixa-recebido { flex: 2 1 320px; border-radius: 18px; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.caixa-secao-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.caixa-total { font-size: 32px; font-weight: 800; }
.caixa-forma { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.caixa-forma-nome { width: 84px; font-weight: 600; }
.caixa-forma .barra { flex: 1; }
.caixa-forma .barra > span { background: var(--carvao); }
.caixa-forma .barra > span.perda { background: var(--perda); }
.caixa-forma strong { width: 92px; text-align: right; }

.caixa-lucro, .caixa-retiradas { border-radius: 18px; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.caixa-lucro { flex: 3 1 460px; }
.caixa-retiradas { flex: 2 1 320px; }
.caixa-linhas { margin: 0; display: flex; flex-direction: column; font-size: 15px; }
.caixa-linhas > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.caixa-linhas > div:last-child { border-bottom: 0; }
.caixa-linhas dt { margin: 0; color: var(--muted); }
.caixa-linhas dd { margin: 0; font-weight: 700; text-align: right; }
.caixa-linhas .suave dt, .caixa-linhas .suave dd { color: var(--muted); font-weight: 500; }
.caixa-lucro-faixa { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px;
  background: var(--ok-bg); color: var(--ok); }
.caixa-lucro-faixa span { font-weight: 800; }
.caixa-lucro-faixa strong { font-size: 24px; font-weight: 800; }
.caixa-lucro-faixa.negativo { background: var(--erro-bg); color: var(--erro); }

/* caixa fechado */
.caixa-fechado { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; justify-content: center; padding-top: 12px; }
.caixa-abrir { flex: 1 1 440px; max-width: 520px; border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 20px; }
.caixa-abrir-form { display: flex; flex-direction: column; gap: 14px; }
.caixa-abrir-form label { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.campo-fundo { height: 64px; margin: 0; padding: 0 18px; border: 2px solid var(--ouro); border-radius: 14px; font-size: 26px; font-weight: 800;
  box-shadow: 0 0 0 4px var(--focus-ring); letter-spacing: 0; text-transform: none; color: var(--ink); }
.caixa-dica { margin: 0; }
.btn-abrir-caixa { width: 100%; min-height: 64px; font-size: 19px; }
.caixa-ultimo { flex: 1 1 300px; max-width: 380px; border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.caixa-ultimo h2 { font-size: 16px; }
.caixa-ultimo .caixa-linhas { font-size: 14px; }
.caixa-ultimo .caixa-linhas > div { align-items: center; padding: 8px 0; }

/* Configurações › Loja */
.loja-tela { max-width: 1000px; }
.loja-tela h1 { margin-bottom: 4px; }
.loja-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; margin-top: 18px; align-items: start; }
.loja-grade .cartao h2 { margin: 0 0 4px; font-size: 18px; }
.loja-grade .aviso { margin: 12px 0; }
.loja-grade .linha-config, .loja-grade .lucro-taxas { margin-top: 14px; }

@media (max-width: 700px) {
  .caixa-conta { grid-template-columns: 1fr 1fr; }
  .caixa-gaveta-valor { font-size: 42px; }
  .caixa-acoes-topo { width: 100%; }
  .caixa-acoes-topo > button { flex: 1 1 auto; }
  .loja-grade { grid-template-columns: 1fr; }
}

/* ===== Histórico de caixas (docs/10, 3.4) ===== */
.hc-tela { max-width: 1220px; display: flex; flex-direction: column; gap: 18px; }
.hc-topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.hc-topo h1 { margin: 2px 0 0; font-size: 28px; }
.hc-voltar { font-size: 13px; font-weight: 700; }
.hc-exportar { display: flex; gap: 8px; }

.hc-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; margin: 0; }
.hc-periodo { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.hc-periodo > a, .hc-intervalo > summary { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 9px;
  color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer; list-style: none; text-decoration: none; }
.hc-intervalo > summary::-webkit-details-marker { display: none; }
.hc-periodo > a:hover, .hc-intervalo > summary:hover { background: var(--hover); }
.hc-periodo > a.ativo, .hc-intervalo > summary.ativo { background: var(--carvao); color: var(--carvao-ink); font-weight: 700; }
.hc-intervalo { position: relative; }
.hc-intervalo-caixa { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.16); min-width: 300px; }
.hc-intervalo-caixa label { margin: 0; flex: 1 1 130px; }
.hc-sep { width: 1px; height: 28px; background: var(--line); }
.hc-operador { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 500; color: var(--muted); }
.hc-operador select { height: 40px; margin: 0; padding: 0 10px; width: auto; min-width: 150px; border-radius: 9px; }
.hc-espaco { flex: 1; }
.hc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hc-chips .filtro-chip { min-height: 36px; padding: 0 12px; font-size: 13px; font-weight: 700; }

.hc-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.hc-kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 14px; }
.hc-kpi strong { font-size: 26px; font-weight: 800; }
.hc-kpi-aviso { background: var(--aviso-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); border-radius: 14px; }
.hc-kpi-aviso .rotulo { color: var(--warn-ink); }

.hc-turnos, .hc-operadores { padding: 0; border-radius: 16px; overflow: hidden; }
.hc-turnos h2, .hc-operadores h2 { margin: 0; padding: 18px 20px 6px; font-size: 18px; }
.hc-tabela { min-width: 760px; }
.hc-tabela th:first-child, .hc-tabela td:first-child { padding-left: 20px; }
.hc-forte { font-weight: 700; }
.hc-seta { width: 52px; padding: 4px 12px !important; text-align: right; }
.hc-expande { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 20px; cursor: pointer;
  transition: transform .12s; }
.hc-expande:hover { background: var(--hover); color: var(--ink); }
.hc-expande.aberto { transform: rotate(90deg); }
.hc-linha:has(+ .hc-detalhe:not([hidden])) td { background: var(--th-bg); }
.hc-detalhe td { background: var(--th-bg); padding: 4px 20px 16px; }
.hc-detalhe-grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; font-size: 13px; margin-bottom: 10px; }
.hc-detalhe-grade > div { display: flex; flex-direction: column; gap: 2px; }
.hc-detalhe-grade span { color: var(--muted); }
.hc-turnos .paginacao { padding: 12px 20px; border-top: 1px solid var(--line-soft); }
.hc-operadores .tabela-rolagem { padding: 0 20px 14px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 700px) {
  .hc-detalhe-grade { grid-template-columns: 1fr 1fr; }
  .hc-sep { display: none; }
  .hc-espaco { display: none; }
}

/* Detalhes do lucro no Painel (a conta, descontos por operador, retirada do dono) */
.detalhes-lucro .lucro { margin: 14px 0 0; }
.lucro-detalhe-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-bottom: 18px; }
.lucro-detalhe-bloco h3 { margin: 0 0 8px; font-size: 16px; font-weight: 800; }
.lucro-descontos-tabela tfoot td { font-weight: 800; border-top: 1px solid var(--line); border-bottom: 0; }
.lucro-descontos-tabela { font-size: 14px; }
.detalhes-lucro .lucro-retirar > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 12px;
  cursor: pointer; list-style: none; font-weight: 700; }
.detalhes-lucro .lucro-retirar > summary::-webkit-details-marker { display: none; }

/* ===== Painel lateral reaproveitável (docs/10, 3.5) — Produtos agora; Clientes e Fornecedores depois ===== */
.painel-fundo { position: fixed; inset: 0; z-index: 8000; background: var(--overlay); }
.painel-dialogo { position: fixed; z-index: 8001; top: 0; right: 0; bottom: 0; width: 600px; max-width: 100%; display: flex; flex-direction: column;
  background: var(--card); box-shadow: -20px 0 50px rgba(0,0,0,.18); }
.painel-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 26px; border-bottom: 1px solid var(--line-soft); }
.painel-cabeca h2 { margin: 0; font-size: 22px; font-weight: 800; }
.painel-dialogo .btn-fechar { background: var(--bg); }
.painel-corpo { flex: 1; overflow-y: auto; padding: 22px 26px; display: flex; flex-direction: column; gap: 22px; }
.painel-form { display: flex; flex-direction: column; gap: 22px; }
.painel-rodape { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 14px 26px; border-top: 1px solid var(--line-soft); background: var(--card); }
.painel-rodape > button { min-height: 50px; padding: 0 18px; border-radius: 12px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.painel-rodape .btn-principal { padding: 0 22px; font-size: 15px; font-weight: 800; }
.painel-rodape .pf-cancelar { border: 0; background: transparent; color: var(--ink-2); }
body.painel-aberto { overflow: hidden; }

.pf-bloco { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pf-bloco legend { padding: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ouro-texto); }
.pf-opcional { color: var(--muted-2); font-weight: 600; letter-spacing: 0; text-transform: none; }
.pf-bloco label, .pf-fiscal label { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.pf-bloco input, .pf-bloco select, .pf-fiscal input { margin: 0; height: 46px; padding: 0 12px; border-radius: 10px; }
.pf-bloco input.pf-nome:focus { border-color: var(--ouro); }
.pf-bloco .pf-venda { font-weight: 700; }
.pf-grade { display: grid; gap: 10px; }
.pf-grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-bloco .campo-com-botao { display: flex; gap: 8px; }
.pf-bloco .campo-com-botao input { flex: 1; }
.pf-camera { width: 46px; min-height: 46px; padding: 0; border-radius: 10px; }
.margem-faixa { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 700;
  background: var(--ok-bg); color: var(--ok-ink); }
.margem-faixa.negativa { background: var(--erro-bg); color: var(--erro-ink); }
.pf-fiscal { border: 1px solid var(--line); border-radius: 12px; background: var(--th-bg); padding: 0 16px; }
.pf-fiscal > summary { display: flex; align-items: center; min-height: 52px; font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.pf-fiscal > summary::-webkit-details-marker { display: none; }
.pf-fiscal[open] { padding-bottom: 16px; }
.pf-fiscal .pf-grade { margin-top: 4px; }
.pf-lotes { border-top: 1px solid var(--line-soft); padding-top: 18px; }
.pf-lotes h3 { margin: 0 0 10px; font-size: 16px; }
.pf-lotes .lote-acoes form { display: inline-flex; gap: 6px; align-items: center; margin-left: 6px; }

/* ===== Lista de Produtos ===== */
.produtos-tela { max-width: 1220px; display: flex; flex-direction: column; gap: 16px; }
.produtos-tela > .alert, .produtos-tela > .toast { margin: 0; }
.pr-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pr-topo h1 { margin: 0; font-size: 28px; }
.pr-total { font-size: 16px; font-weight: 600; color: var(--muted); }
.pr-acoes { display: flex; align-items: center; gap: 10px; }
.pr-acoes .btn-alto { min-height: 48px; border-radius: 12px; }
.pr-planilha > summary { list-style: none; cursor: pointer; }
.pr-planilha > summary::-webkit-details-marker { display: none; }
.pr-planilha .menu-acoes-lista { min-width: 200px; }
.pr-planilha .menu-acoes-lista a { text-decoration: none; }
.sob-demanda:not([open]) { display: none; }
.sob-demanda > summary { font-size: 17px; font-weight: 800; cursor: pointer; list-style: none; margin-bottom: 10px; }
.sob-demanda > summary::-webkit-details-marker { display: none; }
.aviso > span { flex: 1; min-width: 0; }

.pr-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pr-busca { flex: 1 1 280px; margin: 0; }
.pr-busca input { margin: 0; width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; font-size: 15px; }
.pr-categoria { position: relative; }
.pr-categoria > summary { list-style: none; }
.pr-categoria > summary::-webkit-details-marker { display: none; }
.pr-categoria .menu-acoes-lista { left: 0; right: auto; max-height: 320px; overflow-y: auto; }
.pr-categoria .menu-acoes-lista a { text-decoration: none; }

.pr-lista { padding: 0; border-radius: 14px; overflow: hidden; }
.pr-tabela { min-width: 640px; }
.pr-tabela th:first-child, .pr-tabela td:first-child { padding-left: 20px; }
.pr-nome { font-weight: 700; color: var(--ink); text-decoration: none; }
.pr-nome:hover { color: var(--ouro-texto); }
.pr-codigo { font-size: 12px; color: var(--muted-2); margin-top: 2px; }
.pr-forte { font-weight: 700; }
.pr-acao { width: 56px; text-align: right; padding-right: 12px !important; }
.pr-tabela .tabela-menu-btn { width: 44px; height: 44px; font-size: 20px; border-radius: 10px; }
.pr-lista .paginacao { padding: 12px 20px; border-top: 1px solid var(--line-soft); }
.pr-lista .estado-vazio { margin: 8px 0; }

@media (max-width: 700px) {
  .painel-dialogo { width: 100%; }
  .painel-cabeca, .painel-corpo, .painel-rodape { padding-left: 16px; padding-right: 16px; }
  .pf-grade-3 { grid-template-columns: 1fr 1fr; }
  .pf-grade-3 > label:first-child { grid-column: 1 / -1; }
  .painel-rodape > button { flex: 1 1 auto; }
}
@media (max-width: 480px) {
  .pf-grade-2 { grid-template-columns: 1fr; }
  .pr-acoes { width: 100%; }
  .pr-acoes > * { flex: 1 1 auto; }
}

/* ===== Entrada de estoque (docs/10, 3.6) ===== */
.entrada-tela { max-width: 1220px; display: flex; flex-direction: column; gap: 16px; }
.entrada-tela h1 { margin: 0; font-size: 28px; }
.entrada-tela h2 { margin: 0; font-size: 16px; font-weight: 800; }
.en-titulo { display: flex; flex-direction: column; gap: 2px; }
.en-nota-corrigir { margin: 0; }
.en-formas { display: flex; flex-wrap: wrap; gap: 14px; }
.en-drop { flex: 3 1 420px; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 16px;
  background: var(--card); border: 2px dashed var(--ouro); transition: background .12s, border-color .12s; }
.en-drop.sobre { background: var(--aviso-bg); border-style: solid; }
.en-drop-icone { flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--aviso-bg); color: var(--ouro-texto); }
.en-drop-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.en-drop-texto strong { font-size: 16px; font-weight: 800; }
.en-drop-texto span { font-size: 13px; color: var(--muted); }
.en-mao { flex: 2 1 280px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 18px 20px; border-radius: 16px; }
.en-mao strong { font-size: 16px; font-weight: 800; }
#aviso-nfe { margin: 0; }

.en-dados, .en-itens { padding: 20px 22px; border-radius: 16px; }
.en-dados { display: flex; flex-direction: column; gap: 14px; }
.en-dados-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.en-dados label, .en-senha { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.en-dados input, .en-senha input { margin: 0; height: 46px; padding: 0 12px; border-radius: 10px; }
.en-fornecedor { grid-column: span 2; }
.en-link { align-self: flex-start; border: 0; background: transparent; padding: 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--ouro-texto); cursor: pointer; }
.en-link:hover { color: var(--ouro-texto-hover); }

.en-itens { padding: 0; overflow: hidden; }
.en-itens h2 { padding: 18px 22px 8px; }
.en-tabela { min-width: 820px; }
.en-tabela th:first-child, .en-tabela td:first-child { padding-left: 22px; }
.en-tabela td { padding: 10px 8px; vertical-align: middle; }
.en-col-qtd { width: 90px; } .en-col-custo { width: 130px; } .en-col-lote { width: 190px; } .en-col-x { width: 52px; }
.en-produto { min-width: 260px; }
.en-produto .busca-sugestao { display: block; }
.en-nome { margin: 0; height: 34px; padding: 0 4px; border: 1px solid transparent; background: transparent; font-weight: 700; font-size: 15px; border-radius: 8px; }
.en-nome:hover, .en-nome:focus { border-color: var(--line); background: var(--card); }
.en-apoio { color: var(--muted); padding-left: 4px; min-height: 18px; font-size: 12px; }
.en-sobe { color: var(--erro); font-weight: 700; }
.en-cai { color: var(--ok); font-weight: 700; }
.en-igual { color: var(--muted); }
.en-tabela .en-qtd, .en-tabela .en-custo-campo { margin: 0; height: 42px; padding: 0 10px; border-radius: 9px; font-weight: 700; }
.en-tabela .en-qtd { width: 72px; }
.en-tabela .en-custo-campo { width: 108px; font-weight: 500; }
.en-lote-btn { height: 42px; padding: 0 12px; border: 1px dashed var(--line); border-radius: 9px; background: var(--card); font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.en-lote-btn.preenchido { border-style: solid; color: var(--ink); font-weight: 700; }
.en-lote-campos { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.en-lote-campos[hidden] { display: none; }
.en-lote-campos input { margin: 0; height: 38px; padding: 0 10px; border-radius: 8px; font-size: 13px; }
.en-sub { font-weight: 800; white-space: nowrap; }
.en-remover { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted-2); font-size: 16px; cursor: pointer; }
.en-remover:hover { background: var(--erro-bg); color: var(--erro-ink); }
.en-nova td { background: var(--th-bg); padding: 12px 22px; }
.en-nova .busca-sugestao { display: block; max-width: 460px; }
.en-nova input { margin: 0; width: 100%; height: 44px; padding: 0 12px; border: 1.5px solid var(--ouro); border-radius: 10px; background: var(--card); font-size: 15px; }
.en-aviso-lote, .en-senha { margin: 12px 22px 0; }
.en-senha { max-width: 320px; }
.en-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 18px; padding: 16px 22px; border-top: 1px solid var(--line); background: var(--th-bg); margin-top: 12px; }
.en-total { margin-left: 6px; font-size: 24px; font-weight: 800; color: var(--ink); }
.en-salvar { min-height: 52px; padding: 0 24px; font-size: 16px; font-weight: 800; }

.en-ultimas { padding: 18px 22px 8px; border-radius: 16px; display: flex; flex-direction: column; gap: 6px; }
.en-ultimas-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.en-lista td { padding: 11px 8px; }
.en-lista td:first-child { padding-left: 0; }
.en-data { width: 150px; white-space: nowrap; }
.en-forte { font-weight: 700; }
.en-acao { width: 52px; text-align: right; }
.en-ultimas .tabela-menu-btn { width: 40px; height: 40px; font-size: 20px; border-radius: 10px; }
.tabela-menu-lista .menu-editar-entrada form { width: 270px; }
.en-ultimas .paginacao { padding: 12px 0; }

.en-lote-par { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.en-lote-rotulo { display: none; }
@media (max-width: 700px) {
  /* Cada produto da nota vira um cartão: produto (✕ no canto), Qtd e Custo lado a lado, Lote e Validade lado a
     lado, subtotal no pé. Os rótulos vêm do data-rotulo das células (a linha de títulos some). */
  .en-tabela { min-width: 0; }
  .en-tabela, .en-tabela tbody { display: block; }
  .en-tabela thead { display: none; }
  .en-tabela tr.linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px;
    grid-template-areas: "prod prod x" "qtd custo custo" "lote lote lote" "sub sub sub";
    gap: 10px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
  .en-tabela tr.en-nova { display: block; padding: 12px 16px; }
  .en-tabela tr.en-nova td { display: block; padding: 0; }
  .en-tabela td, .en-tabela th:first-child, .en-tabela td:first-child { padding: 0; border: 0; }
  .en-tabela td[data-rotulo]::before { content: attr(data-rotulo); display: block; margin-bottom: 4px;
    font-size: 12px; font-weight: 700; color: var(--muted); }
  .en-produto { grid-area: prod; min-width: 0; }
  .en-c-qtd { grid-area: qtd; }
  .en-c-custo { grid-area: custo; }
  .en-lote { grid-area: lote; }
  .en-sub { grid-area: sub; display: flex; justify-content: space-between; align-items: baseline; }
  .en-tabela td.en-sub::before { margin: 0; }
  .en-c-x { grid-area: x; justify-self: end; }
  .en-tabela .en-qtd, .en-tabela .en-custo-campo { width: 100%; }
  .en-lote-btn { width: 100%; }
  .en-lote-campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
  .en-lote-rotulo { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
  .en-lote-campos input { width: 100%; height: 42px; }
  .en-fornecedor { grid-column: auto; }
  .en-drop { flex-wrap: wrap; }
  .en-rodape { justify-content: space-between; }
  .en-salvar { width: 100%; }
}

/* ===== Inventário (docs/10, 3.8) ===== */
.inventario-tela { max-width: 1220px; display: flex; flex-direction: column; gap: 18px; }
.inventario-tela h1 { margin: 0; font-size: 28px; }
.inventario-tela h2 { margin: 0; font-size: 18px; font-weight: 800; }
.inventario-tela > .toast, .inventario-tela > .alert { margin: 0; }
.inv-andamento { border-radius: 18px; padding: 24px 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.inv-andamento h2 { font-size: 24px; }
.inv-info { flex: 1 1 360px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.inv-barra { background: color-mix(in srgb, var(--carvao-ink) 14%, var(--carvao)); }
.inv-barra > span { background: var(--ouro-claro); }
.inv-apoio { font-size: 14px; color: var(--carvao-muted); }
.inv-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.inv-acoes .btn-alto { min-height: 56px; border-radius: 14px; padding: 0 26px; font-size: 16px; font-weight: 800; }
.inv-contorno { display: inline-flex; align-items: center; min-height: 56px; padding: 0 18px; border: 1px solid color-mix(in srgb, var(--carvao-ink) 24%, var(--carvao));
  border-radius: 14px; color: var(--carvao-ink); font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; }
.inv-contorno:hover { background: color-mix(in srgb, var(--carvao-ink) 10%, var(--carvao)); }
.inv-descartar > summary::-webkit-details-marker, .inv-descartar-todas > summary::-webkit-details-marker { display: none; }
.inv-descartar form { display: flex; gap: 8px; margin-top: 8px; }
.inv-descartar input, .inv-descartar-todas input { margin: 0; height: 44px; padding: 0 12px; border-radius: 10px; width: 170px; }
.inv-confirmar { min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--erro); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.inv-abrir input { margin: 0; height: 56px; width: 240px; padding: 0 14px; border-radius: 14px; background: var(--card); }

.inv-antigas { align-items: center; flex-wrap: wrap; border-radius: 14px; padding: 16px 18px; }
.inv-antigas > div { flex: 1 1 320px; display: flex; flex-direction: column; gap: 2px; }
.inv-antigas strong { font-weight: 800; }
.inv-antigas .small { color: var(--warn-ink); }
.btn-baixo { min-height: 40px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.inv-descartar-todas > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.inv-descartar-todas form { display: flex; gap: 8px; margin-top: 8px; }
.inv-forte { font-weight: 800; }

.inv-concluidos { padding: 0; border-radius: 16px; overflow: hidden; }
.inv-concluidos-cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 14px; padding: 18px 22px 8px; }
.inv-tabela { min-width: 760px; }
.inv-tabela th:first-child, .inv-tabela td:first-child { padding-left: 22px; }
.inv-tabela th:last-child, .inv-tabela td:last-child { padding-right: 22px; }
.inv-neg { font-weight: 800; color: var(--erro); }
.inv-pos { font-weight: 800; color: var(--ok); }
.inv-acoes-linha { white-space: nowrap; }
.inv-acoes-linha > * { display: inline-block; vertical-align: middle; margin-left: 6px; }
.inv-acoes-linha > a.btn-neutro { display: inline-flex; }  /* inline-block tirava a centralização do texto */
.inv-acoes-linha > a.btn-neutro, .inv-acoes-linha .inv-baixar > summary { height: 40px; min-height: 40px; font-size: 14px; }
.inv-baixar > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; width: auto; height: 40px; }
.inv-baixar .menu-acoes-lista { text-align: left; }
.inv-baixar .menu-acoes-lista a { text-decoration: none; }
.inv-concluidos .paginacao { padding: 12px 22px; border-top: 1px solid var(--line-soft); }
.inventario-tela .sob-demanda { margin: 0; }

/* ===== Relatório de vendas (docs/10, 3.13) ===== */
:root { --calor-0: #F5EFE1; --calor-1: #EAD7A4; --calor-2: #D9B24C; --calor-3: #A57F1F; --calor-4: #5C4710; }
:root[data-theme="dark"] { --calor-0: #1f1a12; --calor-1: #4a3a14; --calor-2: #8a6d1f; --calor-3: #c9a13b; --calor-4: #f2cf6b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --calor-0: #1f1a12; --calor-1: #4a3a14; --calor-2: #8a6d1f; --calor-3: #c9a13b; --calor-4: #f2cf6b; }
}
.relatorio-tela { max-width: 1220px; display: flex; flex-direction: column; gap: 18px; }
.relatorio-tela h1 { margin: 0; font-size: 28px; }
.relatorio-tela h2 { margin: 0; font-size: 18px; font-weight: 800; }
.relatorio-tela > .alert { margin: 0; }
.rl-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.rl-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rl-periodo-form { margin: 0; }
.rl-periodo-form .segmentado > a, .rl-intervalo > summary { min-height: 40px; }
.rl-baixar > summary { list-style: none; cursor: pointer; }
.rl-baixar > summary::-webkit-details-marker { display: none; }
.btn-alto-medio { min-height: 48px; padding: 0 16px; border-radius: 12px; font-size: 14px; }
.rl-baixar .menu-acoes-lista a { text-decoration: none; }

.rl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.rl-kpi { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 16px; }
.rl-kpi strong { font-size: 28px; font-weight: 800; letter-spacing: -.01em; }
.rl-kpi .valor-destaque { font-size: 28px; }
.rl-apoio { font-size: 13px; color: var(--muted); }
.rl-apoio.escuro { color: var(--carvao-muted); }
.rl-pos { color: var(--ok); }
.rl-neg { color: var(--erro); }
.rl-forte { font-weight: 700; color: var(--ink); }

.rl-bloco { padding: 20px 22px; border-radius: 16px; display: flex; flex-direction: column; gap: 12px; margin: 0; }
.rl-bloco-cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.rl-grafico { position: relative; min-height: 210px; }
.rl-duas { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.rl-calor-bloco { flex: 3 1 520px; min-width: 0; }
.rl-lateral { flex: 2 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.rl-extras > .cartao { flex: 1 1 360px; }

.calor { display: flex; flex-direction: column; gap: 4px; min-width: 560px; }
.calor-linha { display: flex; gap: 4px; align-items: center; }
.calor-dia { flex: 0 0 40px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.calor-hora { flex: 1; text-align: center; font-size: 11px; font-weight: 700; color: var(--muted-2); }
.calor-celula { flex: 1; height: 26px; border-radius: 4px; }
.calor-celula.calor-0, .calor-legenda i.calor-0 { background: var(--calor-0); }
.calor-celula.calor-1, .calor-legenda i.calor-1 { background: var(--calor-1); }
.calor-celula.calor-2, .calor-legenda i.calor-2 { background: var(--calor-2); }
.calor-celula.calor-3, .calor-legenda i.calor-3 { background: var(--calor-3); }
.calor-celula.calor-4, .calor-legenda i.calor-4 { background: var(--calor-4); }
.calor-legenda { display: flex; align-items: center; gap: 8px; padding-left: 44px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.calor-legenda i { width: 18px; height: 12px; border-radius: 3px; display: inline-block; }

.rl-top { display: flex; flex-direction: column; gap: 4px; }
.rl-top-linha { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.rl-top-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-top-linha > span:last-child { white-space: nowrap; }
/* Painel: Mais vendidos do período (mesmas linhas e barras do Relatório). */
.painel-top { display: flex; flex-direction: column; gap: 14px; }
.painel-top .card-cabeca { margin-bottom: 0; }
.painel-top-pos { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%;
  background: var(--line-soft); color: var(--muted); font-size: 12px; font-weight: 800; vertical-align: 1px; }
.painel-top .rl-top.primeiro .painel-top-pos { background: var(--destaque-bg); color: var(--destaque-ink); }
.rl-empilhada { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px; }
.rl-empilhada span { display: block; min-width: 3px; }
.rl-legenda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; font-size: 13px; }
.rl-legenda span { display: flex; align-items: center; gap: 6px; }
.rl-legenda i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.rl-legenda strong { margin-left: auto; }

.rl-vendas { padding: 0; border-radius: 16px; overflow: hidden; margin: 0; }
.rl-vendas-cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 22px 10px; }
.rl-contagem { font-size: 14px; font-weight: 600; color: var(--muted); }
.rl-busca { margin: 0; }
.rl-busca input { margin: 0; width: 300px; max-width: 100%; height: 42px; padding: 0 12px; border-radius: 10px; font-size: 14px; }
.rl-tabela { min-width: 760px; }
.rl-tabela th:first-child, .rl-tabela td:first-child { padding-left: 22px; }
.rl-acao { width: 150px; text-align: right; white-space: nowrap; padding-right: 16px !important; }
.rl-acao > * { display: inline-block; vertical-align: middle; }
.rl-acao .tabela-menu-btn { width: 38px; height: 38px; font-size: 18px; border-radius: 9px; }
.rl-vendas .paginacao { padding: 12px 22px; border-top: 1px solid var(--line-soft); }
.rl-nota { margin: 0; padding: 0 22px 14px; }

@media (max-width: 700px) {
  .rl-periodo-form .segmentado { flex-wrap: wrap; }
  .rl-busca input { width: 100%; }
}

/* ===== Reposição (docs/10, 3.9) ===== */
.reposicao-tela { max-width: 1220px; display: flex; flex-direction: column; gap: 18px; }
.reposicao-tela h1 { margin: 0; font-size: 28px; }
.reposicao-tela h2 { margin: 0; font-size: 18px; font-weight: 800; }
.rp-topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.rp-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rp-janela { margin: 0; }
.rp-janela label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 500; color: var(--muted); }
.rp-janela select { margin: 0; height: 44px; padding: 0 10px; border-radius: 12px; width: auto; font-size: 14px; }
.rp-controles .btn-alto-medio { min-height: 44px; text-decoration: none; }
.rp-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.rp-cartoes .rl-kpi strong { font-size: 30px; }
.aviso > span strong { font-weight: 800; }
.rp-tabela { min-width: 720px; }
.rp-tabela th:first-child, .rp-tabela td:first-child { padding-left: 22px; }
.rp-col-comprar { width: 130px; padding-right: 22px !important; }
.rp-estoque { font-weight: 800; }
.rp-estoque.zerado { color: var(--erro); }
.rp-estoque.abaixo { color: var(--warn-ink); }
.rp-qtd { margin: 0; width: 76px; height: 42px; padding: 0 10px; border-radius: 9px; font-size: 15px; font-weight: 800; text-align: right; }
.rp-rodape { margin-top: 0; }
.rp-parados-titulo { display: flex; flex-direction: column; gap: 2px; }
.rp-parado { display: flex; align-items: center; gap: 10px; }
.rp-parado strong { min-width: 96px; }
.rp-parado .barra { flex: 1; max-width: 160px; }
.rp-ver-todos { padding: 12px 22px; border-top: 1px solid var(--line-soft); font-size: 13px; }
#form-lista { margin: 0; }

/* ===== Clientes e Fornecedores (docs/10, 3.10 e 3.11): reaproveitam a lista e o painel lateral de Produtos ===== */
.clientes-tela .rp-cartoes, .fornecedores-tela .rp-cartoes { margin: 0; }
.cl-nome { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.cl-nome .etiqueta { font-size: 11px; padding: 3px 8px; }
.cl-doc { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.cl-caderneta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cl-caderneta strong { min-width: 74px; }
.cl-caderneta .barra { width: 90px; }
.barra > span.media { background: var(--ouro); }
.barra > span.critica { background: var(--erro); }
.pf-ativo { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 600 !important; }
.pf-ativo input { width: auto; height: auto !important; margin: 0 !important; }
.pf-dica { margin: 0; }
.pf-cnpj.pf-invalido { border: 1.5px solid var(--erro); }
.pf-erro { font-size: 13px; font-weight: 600; color: var(--erro); }
.pf-erro[hidden] { display: none; }
.painel-corpo > .alert { margin: 0; }

/* Juntar cadastros (R7) */
.jt-grupo { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.jt-membros { display: flex; flex-direction: column; gap: 8px; }
.jt-membro { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-weight: 500; color: var(--ink); cursor: pointer; }
.jt-membro:has(input[type="radio"]:checked) { border-color: var(--ouro); background: var(--aviso-bg); }
.jt-membro input[type="radio"] { width: auto; height: auto; margin: 0; }
.jt-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.jt-acoes input { margin: 0; height: 40px; padding: 0 12px; border-radius: 10px; width: 180px; }
.aviso .en-link { align-self: center; white-space: nowrap; }
.tabela-menu-lista form[data-confirm] button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px;
  border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--ink); }
.tabela-menu-lista form[data-confirm] button:hover { background: var(--hover); }
.tabela-menu-lista form[data-confirm] button.acao-perigo { color: var(--erro); }

/* ===== Contas a pagar (docs/10, 3.12) ===== */
.contas-tela .en-titulo h1 { margin: 0; }
.etiqueta-aviso { background: var(--aviso-bg); color: var(--ouro-texto); }
.ct-filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ct-categoria { margin: 0; }
.ct-categoria select { margin: 0; height: 44px; padding: 0 10px; border-radius: 12px; width: auto; font-size: 14px; }
.ct-lista { display: flex; flex-direction: column; gap: 10px; }
.ct-mes { margin: 8px 0 0; font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.ct-conta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 18px; }
.ct-conta.paga { background: var(--th-bg); }
.ct-data { flex: none; width: 58px; height: 58px; border-radius: 12px; background: var(--th-bg); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ct-data strong { font-size: 22px; font-weight: 800; line-height: 1; }
.ct-data span { font-size: 11px; font-weight: 700; color: var(--muted); }
.ct-info { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ct-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.ct-titulo strong { font-size: 16px; font-weight: 800; }
.ct-titulo .etiqueta { font-size: 11px; padding: 3px 8px; }
.ct-clipe { text-decoration: none; }
.ct-prazo { font-size: 13px; color: var(--muted); }
.ct-prazo.breve { font-weight: 700; color: var(--warn-ink); }
.ct-prazo.vencida { font-weight: 700; color: var(--erro); }
.ct-prazo.paga { color: var(--ok); font-weight: 600; }
.ct-valor { font-size: 20px; font-weight: 800; min-width: 110px; text-align: right; }
.ct-pagar { margin: 0; min-width: 170px; display: flex; justify-content: flex-end; }
.ct-btn-paga { min-height: 44px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--card)); border-radius: 12px;
  background: var(--ok-bg); color: var(--ok); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; white-space: nowrap; }
.ct-btn-paga:hover { filter: brightness(.96); }
.ct-conta .tabela-menu-btn { width: 44px; height: 44px; font-size: 20px; border-radius: 12px; }
.ct-totais { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; color: var(--muted); }
.ct-totais strong { color: var(--ink); font-size: 16px; margin-left: 4px; }
.tabela-menu-lista button[data-copiar] { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px;
  border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--ink); }
.tabela-menu-lista button[data-copiar]:hover { background: var(--hover); }
.contas-tela .foto-conta-avisos, .painel-corpo .foto-conta-avisos { margin: 0 0 4px; }
label.btn-neutro[for] { cursor: pointer; }

@media (max-width: 700px) {
  .ct-valor { text-align: left; min-width: 0; }
  .ct-pagar { justify-content: flex-start; min-width: 0; }
}

/* ===== Patrimônio (docs/10, 3.14) ===== */
.patrimonio-tela .en-titulo h1 { margin: 0; }
.pt-cartoes .hc-kpi-aviso { padding: 18px 20px; border-radius: 16px; }
.pt-cartoes .hc-kpi-aviso strong { font-size: 30px; font-weight: 800; color: var(--warn-ink); }
.pt-cartoes .hc-kpi-aviso .rl-apoio { color: var(--warn-ink); }
.pt-hoje { min-width: 92px; font-weight: 800; }
.barra > span.critica-ambar { background: var(--warn); }
.pt-total td { padding: 13px 14px; background: var(--th-bg); border-top: 1px solid var(--line); font-weight: 800; }
.pt-total td:first-child { padding-left: 20px; }
.tabela-menu-lista form button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px;
  border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--ink); }
.tabela-menu-lista form button:hover { background: var(--hover); }
.tabela-menu-lista form button.acao-perigo { color: var(--erro); }

/* ===== Ajuda (docs/10, 3.16 e 3.17) ===== */
.aj-tela { max-width: 1220px; display: flex; flex-direction: column; gap: 26px; }
.aj-tela h1 { margin: 0; }
.aj-cabeca { background: var(--carvao); color: var(--carvao-ink); border-radius: 20px; padding: 30px 32px; display: flex; flex-direction: column; gap: 16px; }
.aj-cabeca h1 { font-size: 30px; font-weight: 800; color: var(--carvao-ink); }
.aj-cabeca p { margin: 6px 0 0; font-size: 15px; color: #B7AE9C; }
.aj-busca { display: flex; align-items: center; gap: 12px; height: 58px; max-width: 720px; margin: 0; padding: 0 18px; background: #FFFFFF; border-radius: 14px; color: #6B6355; }
.aj-busca input { flex: 1; min-width: 0; margin: 0; height: 100%; padding: 0; border: 0; box-shadow: none; background: transparent; color: #1E1B16; font-size: 17px; width: auto; }
.aj-busca input:focus { box-shadow: none; }
.aj-busca:focus-within { box-shadow: 0 0 0 3px rgba(224, 184, 74, .55); }
.aj-procurados { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--carvao-muted); }
.aj-procurados a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid #3A3226; border-radius: 999px;
  color: #E9DFC8; font-weight: 700; text-decoration: none; }
.aj-procurados a:hover { background: #241F17; }
.aj-grupos { display: flex; flex-direction: column; gap: 26px; }
.aj-grupo { display: flex; flex-direction: column; gap: 12px; }
.aj-grupo h2 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.aj-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.aj-cartao { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; text-decoration: none; color: var(--ink); }
.aj-cartao:hover { background: var(--hover); }
.aj-icone { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--aviso-bg); color: var(--ouro-texto); display: grid; place-items: center; }
.aj-cartao-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aj-cartao-texto strong { font-size: 15px; font-weight: 800; }
.aj-cartao-texto span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.aj-rodape { display: flex; flex-wrap: wrap; gap: 12px; }
.aj-rodape-cartao { flex: 1 1 300px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 18px; }
.aj-rodape-cartao > div { flex: 1 1 180px; display: flex; flex-direction: column; gap: 2px; }
.aj-rodape-cartao span { font-size: 13px; color: var(--muted); }
.aj-rodape-cartao .btn-baixo { text-decoration: none; }
#ajuda-resultados.ajuda-resultados { gap: 12px; }

/* Guia */
.aj-guia { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.aj-artigo { flex: 3 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.aj-migalha { font-size: 13px; color: var(--muted); }
.aj-migalha a { font-weight: 700; }
.aj-titulo-linha { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; }
.aj-titulo { flex: 1 1 360px; display: flex; flex-direction: column; gap: 6px; }
.aj-titulo h1 { font-size: 30px; font-weight: 800; }
.aj-titulo p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.aj-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.aj-passo { display: flex; gap: 16px; margin: 0 !important; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px;
  scroll-margin-top: 16px; }
.aj-numero { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--carvao); color: var(--ouro-claro); display: grid; place-items: center; font-weight: 800; }
.aj-passo h2 { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.aj-passo p { margin: 0; font-size: 15px; line-height: 1.7; }
.ui { display: inline-block; padding: 1px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--th-bg); font-weight: 700; font-size: 14px; white-space: nowrap; }
.aj-dicas { padding: 18px 20px; border-radius: 14px; gap: 14px; }
.aj-dicas > svg { color: var(--warn-ink); }
.aj-dicas > div { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.55; }
.aj-dicas strong { font-size: 15px; }
.aj-peca { display: flex; flex-direction: column; gap: 10px; }
.aj-peca h2 { margin: 0; font-size: 16px; font-weight: 800; }
.aj-pedidos { display: flex; flex-wrap: wrap; gap: 8px; }
.aj-pedido { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600; }
.aj-pedido.acao { border-color: var(--warn-line); background: var(--aviso-bg); }
.aj-pedido:hover { filter: brightness(.97); }
.aj-pedido .etiqueta { font-size: 11px; background: var(--hover); color: var(--ink-2); }
.aj-pedido.acao .etiqueta { background: var(--card); color: var(--ouro-texto); }
.aj-lateral { flex: 1 1 240px; max-width: 300px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
.aj-lateral-cartao { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.aj-lateral-cartao .rotulo { margin-bottom: 4px; }
.aj-indice-passos a { padding: 8px 10px; border-radius: 8px; color: var(--ink-2); font-weight: 600; font-size: 14px; text-decoration: none; }
.aj-indice-passos a:hover { background: var(--hover); }
.aj-indice-passos a.atual { background: var(--aviso-bg); color: var(--ink); font-weight: 700; }
.aj-rel { font-weight: 700; font-size: 14px; }
.aj-revisado { font-size: 12px; color: var(--muted); line-height: 1.5; }

@media (max-width: 900px) {
  .aj-lateral { display: none; }
  .aj-cabeca { padding: 22px 18px; }
}

/* ===== Assistente — tela inicial (docs/10, 3.15) ===== */
.chat-topo.chat-topo-sem-titulo { justify-content: space-between; }
.as-conversas-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--ink); font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; }
.as-conversas-btn:hover { background: var(--hover); }
.conversas-ia > summary.as-conversas-btn { margin: 0; }
.conversas-ia-lista { left: 0; right: auto; }
.chat-topo-sem-titulo { gap: 12px; }
.as-contador { margin-left: auto; font-size: 13px; color: var(--muted); }
.as-contador strong { color: var(--ink); }
.as-contador.perto strong { color: var(--warn-ink); }
.chat-page .chat-topo { padding-right: 44px; }
.as-ola { font-size: 15px; font-weight: 600; color: var(--muted); margin-bottom: -10px; }
.chat-hero h2 { font-weight: 800; letter-spacing: -.01em; }
.as-sugestoes { width: 100%; max-width: 760px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; text-align: left; }
.as-sugestoes > div { display: flex; flex-direction: column; gap: 8px; }
.as-sug-titulo { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.as-sug-titulo.acao { color: var(--ouro-texto); }
.as-sug { text-align: left; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: color-mix(in srgb, var(--card) 85%, transparent); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.as-sug:hover { background: var(--hover); }
.as-sug.acao { border-color: var(--warn-line); background: color-mix(in srgb, var(--aviso-bg) 90%, transparent); }
.chat-aviso a { font-weight: 700; }
@media (max-width: 700px) { .as-contador { margin-left: 0; width: 100%; } }

/* ===== Usuários (docs/10, 3.18) ===== */
.us-trilha { display: block; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--muted); margin-bottom: 2px; }
.us-pessoa { display: flex; align-items: center; gap: 12px; }
.us-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--carvao); color: var(--ouro-claro); display: grid; place-items: center; font-weight: 800; }
.etiqueta.us-nivel-super { background: var(--carvao); color: var(--ouro-claro); }
.us-aviso { margin: 0; }
.us-desativados > summary { cursor: pointer; font-weight: 700; }
.us-desativados[open] > summary { margin-bottom: 10px; }
.us-niveis h2 { margin: 0 0 12px; font-size: 17px; }
.us-niveis-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.us-niveis-grade p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.us-ajuda-nivel { margin: 0; }

/* ===== Sistema: abas e Saúde (docs/10, 3.19 e 3.20) ===== */
.si-abas { align-self: flex-start; flex-wrap: wrap; margin-bottom: 4px; }
.si-tela { display: flex; flex-direction: column; gap: 18px; max-width: 1220px; }
.si-tela h1 { margin: 0; }
.si-resumo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.si-resumo-texto { display: flex; flex-direction: column; gap: 4px; }
.si-resumo-titulo { font-size: 22px; font-weight: 800; color: var(--carvao-ink); }
.si-resumo-sub { font-size: 13px; color: var(--carvao-muted); }
.si-check { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #3F9B6A; color: #fff; font-size: 15px; margin-right: 6px; }
.si-resumo-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.si-btn-claro { background: transparent; border-color: #3A3226; color: var(--carvao-ink); text-decoration: none; }
.btn.si-btn-claro:hover { background: #241F17; }
.si-atencao { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.si-item { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--perda, #B3382C); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.si-item.sem-monitor { border-top-color: var(--ouro); }
.si-item-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.si-item p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.si-item-acao { font-weight: 700; font-size: 14px; }
.si-verificado-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.si-verificado-cabeca h2 { margin: 0; font-size: 17px; }
.si-oks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.si-ok-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 12px; min-width: 0; }
.si-ok-icone { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); font-size: 12px; font-weight: 800; }
.si-ok-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.si-ok-texto strong { font-size: 14px; color: var(--ink); }
.si-ok-texto span { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.si-como { margin-top: 14px; }
.si-como > summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--ouro-texto); }
.si-como ul { margin: 10px 0 8px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.si-como p { margin: 0; }
.si-backup { display: flex; flex-wrap: wrap; gap: 18px 28px; justify-content: space-between; }
.si-backup h2, .si-alertas h2 { margin: 0 0 8px; font-size: 17px; }
.si-backup-texto { flex: 2 1 380px; }
.si-backup-acoes { flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.si-backup-texto p { margin: 0 0 10px; line-height: 1.55; }
.si-backup-status { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 14px;
  background: color-mix(in srgb, var(--success) 8%, transparent); color: var(--ink); }
.si-baixar { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.si-baixar label { font-weight: 800; font-size: 14px; color: var(--ink); margin: 0; }
.si-arquivo { font-family: var(--mono, monospace); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.si-baixar-linha { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.si-baixar-linha input { flex: 1 1 150px; min-width: 0; margin: 0; }
.si-baixar-linha button { flex: 0 0 auto; }
.si-copia-feita, .si-copia-feita .btn-principal { width: 100%; }
.si-nunca { color: var(--perda, #B3382C); }
.si-alerta-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.si-alerta { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.si-alerta:last-child { border-bottom: 0; }
.si-bolinha { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--perda, #B3382C); }
.si-alerta-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.si-contador { font-weight: 800; font-family: var(--mono, monospace); color: var(--muted); }
.si-historico { margin-top: 12px; }
.si-historico > summary { cursor: pointer; font-weight: 700; }

/* ===== Sistema › Logs (docs/10, 3.21) ===== */
.si-subtitulo { margin: 0; font-size: 20px; }
.lg-filtros { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; }
.lg-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lg-form input[type="search"] { flex: 1 1 260px; min-width: 0; margin: 0; }
.lg-form select, .lg-form input[type="date"] { margin: 0; width: auto; }
.lg-chips { margin: 0; }
.lg-chip-seg { background: var(--erro-bg); border-color: var(--erro-ink); color: var(--erro-ink); }
.lg-dia { padding: 6px 18px 10px; margin-bottom: 14px; }
.lg-dia-titulo { margin: 12px 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.lg-lista { list-style: none; margin: 0; padding: 0; }
.lg-linha { display: grid; grid-template-columns: 52px 104px minmax(0, 1fr) 150px 110px; gap: 12px; align-items: start; padding: 10px 8px; border-bottom: 1px solid var(--line-soft); }
.lg-linha:last-child { border-bottom: 0; }
.lg-linha.seguranca { background: var(--erro-bg); border-radius: 8px; }
.lg-hora { font-family: var(--mono, monospace); font-size: 13px; color: var(--muted); padding-top: 2px; }
.lg-tipo { justify-self: start; font-size: 11px; background: var(--hover); color: var(--ink-2); }
.lg-tipo-vendas { background: var(--ok-bg); color: var(--ok-ink); }
.lg-tipo-caixa { background: var(--aviso-bg); color: var(--ouro-texto); }
.lg-tipo-seguranca { background: var(--erro-bg); color: var(--erro-ink); }
.lg-tipo-usuarios { background: var(--carvao); color: var(--ouro-claro); }
.lg-acao { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-detalhe { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.lg-quem { font-size: 14px; }
.lg-ip { font-size: 12px; color: var(--muted); font-family: var(--mono, monospace); }
@media (max-width: 800px) {
  .lg-linha { grid-template-columns: 48px minmax(0, 1fr); }
  .lg-linha .lg-tipo { grid-column: 2; }
  .lg-linha .lg-acao, .lg-linha .lg-quem, .lg-linha .lg-ip { grid-column: 2; }
}

/* ===== Sistema › Uso da IA (docs/10, 3.22) ===== */
.si-h2 { margin: 0 0 12px; font-size: 17px; }
.ui-fora { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.ui-falhou { color: var(--perda, #B3382C); font-weight: 700; font-size: 13px; }
.ui-sub-escuro { font-size: 13px; color: var(--carvao-muted); }
.ui-barras { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 4px; align-items: end; height: 190px; padding-top: 6px; }
.ui-barra { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; gap: 3px; }
.ui-total { font-size: 10px; font-weight: 700; color: var(--ink-2); line-height: 1; }
.ui-coluna { width: 100%; max-height: 135px; min-height: 0; display: flex; flex-direction: column; border-radius: 4px 4px 0 0; overflow: hidden; }
.ui-certo { background: var(--line); }
.ui-falha { background: var(--perda, #B3382C); }
.ui-coluna .ui-certo, .ui-coluna .ui-falha { display: block; min-height: 2px; }
.ui-data { font-size: 9px; color: var(--muted); writing-mode: vertical-rl; transform: rotate(180deg); height: 28px; white-space: nowrap; }
.ui-legenda { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.ui-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
@media (max-width: 700px) { .ui-barras { height: 160px; gap: 2px; } .ui-total { display: none; } }

/* ===== Sistema › Memória da IA (docs/10, 3.24) ===== */
.mi-como { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.mi-passo { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; }
.mi-passo p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.mi-num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--carvao); color: var(--ouro-claro); display: grid; place-items: center; font-weight: 800; }
.mi-colunas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
@media (max-width: 960px) { .mi-colunas { grid-template-columns: 1fr; } }
.mi-form form { display: flex; flex-direction: column; gap: 14px; }
.mi-form textarea { width: 100%; resize: vertical; min-height: 84px; }
.mi-vale { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mi-vale legend { font-weight: 700; font-size: 14px; padding: 0; margin-bottom: 6px; }
.mi-pilulas { flex-wrap: wrap; align-self: flex-start; }
.mi-pilula { margin: 0; }
.mi-pilula input { position: absolute; opacity: 0; pointer-events: none; }
.mi-pilula span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; color: var(--ink-2); }
.mi-pilula.ativo span { background: var(--carvao); color: var(--carvao-ink); }
.mi-pilula input:focus-visible + span { outline: 2px solid var(--ouro); outline-offset: 2px; }
.mi-escolha select { width: 100%; max-width: 360px; margin: 0; }
.mi-botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.mi-sinais { display: flex; flex-direction: column; gap: 12px; }
.mi-sinais .si-h2 { margin-bottom: 0; }
.mi-sinal { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--card); }
.mi-sinal-topo { display: flex; flex-direction: column; gap: 2px; }
.mi-sinal-detalhe { white-space: pre-wrap; color: var(--ink-2); }
.mi-sinal-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mi-sinal-form input[type="text"] { flex: 1 1 100%; margin: 0; }
.mi-vale-mais { flex: 1 1 100%; }
.mi-vale-mais > summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.mi-vale-mais select { margin: 6px 6px 0 0; width: auto; }
.mi-descartar { align-self: flex-start; }
.mi-vazio { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; }
.mi-vazio p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.mi-exemplos { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.mi-exemplo { text-align: left; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.mi-exemplo:hover { background: var(--hover); }

/* ===== Sistema › Conversas da IA (docs/10, 3.23) ===== */
.cv-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.cv-filtros { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
@media (max-width: 700px) { .cv-filtros { flex-wrap: wrap; } }
.cv-filtros input[type="search"] { margin: 0; min-width: 240px; }
.cv-filtros select { margin: 0; width: auto; }
.cv-painel { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.cv-lista { padding: 6px 10px 12px; max-height: 70vh; overflow-y: auto; }
.cv-lista .lg-dia-titulo { margin: 12px 8px 4px; }
.cv-item { display: flex; gap: 10px; align-items: center; padding: 10px 8px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.cv-item:hover { background: var(--hover); }
.cv-item.atual { background: var(--aviso-bg); }
.cv-item-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cv-item-texto strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-conversa { min-height: 320px; display: flex; flex-direction: column; gap: 14px; }
.cv-cabeca { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.cv-cabeca h2 { margin: 0; font-size: 18px; }
.cv-cabeca p { margin: 2px 0 0; }
.cv-cabeca > div { flex: 1; min-width: 0; }
.cv-voltar { display: none; font-weight: 700; text-decoration: none; }
.cv-mensagens { display: flex; flex-direction: column; gap: 10px; }
.cv-balao { max-width: 78%; padding: 10px 14px; border-radius: 14px; display: flex; flex-direction: column; gap: 3px; }
.cv-balao.usuario { align-self: flex-end; background: var(--carvao); color: var(--carvao-ink); border-bottom-right-radius: 4px; }
.cv-balao.assistente { align-self: flex-start; background: var(--hover); border-bottom-left-radius: 4px; }
.cv-balao.falha { background: var(--erro-bg); color: var(--erro-ink); }
.cv-quem { font-size: 11px; font-weight: 700; opacity: .7; }
.cv-texto { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; }
.cv-vazio { margin: auto; }
@media (max-width: 800px) {
  .cv-painel { grid-template-columns: 1fr; }
  .cv-painel.com-conversa .cv-lista { display: none; }
  .cv-painel:not(.com-conversa) .cv-conversa { display: none; }
  .cv-voltar { display: inline; }
  .cv-balao { max-width: 92%; }
}

/* ===== Minha conta (docs/10, 3.26) ===== */
.mc-perfil { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.mc-avatar { flex: none; width: 72px; height: 72px; border-radius: 50%; background: #241F17; color: var(--ouro-claro); display: grid; place-items: center; font-size: 30px; font-weight: 800; border: 2px solid #3A3226; }
.mc-perfil-texto { flex: 1 1 240px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mc-nome { font-size: 22px; font-weight: 800; color: var(--carvao-ink); }
.mc-email { color: var(--carvao-muted); overflow-wrap: anywhere; }
.mc-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.mc-nivel { background: var(--ouro); color: #1E1B16; }
.mc-acesso { font-size: 13px; color: var(--carvao-muted); }
.mc-colunas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .mc-colunas { grid-template-columns: 1fr; } }
.mc-form { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.mc-form label { margin: 0; }
.mc-form .regra-senha { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.mc-form .regra-senha li::before { content: "○"; display: inline-block; width: 22px; color: var(--muted); }
.mc-form .regra-senha li.ok::before { content: "✓"; color: var(--ok-ink); font-weight: 800; }
.mc-form .regra-senha li.ok::marker { content: ""; }
.mc-forca { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mc-forca span { height: 6px; border-radius: 3px; background: var(--line); }
.mc-forca span.n1 { background: var(--perda, #B3382C); }
.mc-forca span.n2 { background: #D9822B; }
.mc-forca span.n3 { background: var(--ouro); }
.mc-forca span.n4 { background: #3F9B6A; }
.mc-forca-texto { margin: 0; min-height: 18px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.mc-form input:-webkit-autofill, .mc-form input:-webkit-autofill:focus { -webkit-box-shadow: inset 0 0 0 40px var(--card); -webkit-text-fill-color: var(--ink); box-shadow: inset 0 0 0 40px var(--card); }
.mc-form button:disabled { opacity: .5; cursor: not-allowed; }
.mc-aparencia { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mc-temas { display: flex; gap: 10px; flex-wrap: wrap; }
.mc-tema { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.mc-tema[aria-checked="true"] { border-color: var(--ouro); }
.mc-mini { display: block; width: 84px; height: 54px; border-radius: 8px; border: 1px solid var(--line); }
.mc-mini-claro { background: linear-gradient(90deg, #E8E1D2 0 28%, #FBF8F1 28%); }
.mc-mini-escuro { background: linear-gradient(90deg, #14110D 0 28%, #1E1B16 28%); }
.mc-mini-auto { background: linear-gradient(105deg, #FBF8F1 0 50%, #1E1B16 50%); }

/* ===== Suporte (docs/10, 3.25) ===== */
.su-colunas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .su-colunas { grid-template-columns: 1fr; } }
.su-form { display: flex; flex-direction: column; gap: 12px; }
.su-form label { margin: 0; }
.su-form textarea { width: 100%; resize: vertical; }
.su-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .su-duas { grid-template-columns: 1fr; } }
.su-chamados { display: flex; flex-direction: column; gap: 10px; }
.su-chamado { padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; }
.su-chamado-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.su-relato { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.su-chamado-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.su-rodape { text-align: center; margin: 0; }

/* ===== Ajustes pós-redesign — Fase 0: base compartilhada ===== */
/* 1. Cartão de destaque dourado (um por linha de cartões). Dentro dele, as variáveis "carvão" viram as do destaque,
   então todo texto/borda que antes era claro-sobre-escuro passa a escuro-sobre-dourado sem mexer em cada regra. */
.cartao-destaque, .aj-cabeca {
  --carvao: var(--destaque-bg); --carvao-ink: var(--destaque-ink); --carvao-muted: var(--destaque-muted); --ouro-claro: var(--destaque-valor);
  background: var(--destaque-bg); color: var(--destaque-ink); border: 1px solid var(--destaque-borda);
}
.cartao-destaque { border-radius: 16px; padding: 22px; }
.cartao-destaque .rotulo, .cartao-destaque .rl-apoio { color: var(--destaque-muted); }
.cartao-destaque strong, .cartao-destaque .valor-destaque { color: var(--destaque-valor); }
.cartao-destaque .muted, .cartao-destaque .small { color: var(--destaque-muted); }
.btn.si-btn-claro { border-color: color-mix(in srgb, var(--destaque-ink) 35%, transparent); color: var(--destaque-ink); background: transparent; }
.btn.si-btn-claro:hover { background: color-mix(in srgb, var(--destaque-ink) 10%, transparent); }
/* Mais procurados: mesmo botão escuro com texto ouro dos cartões em destaque (ex.: + Abrir novo inventário). */
.aj-procurados a { background: #1E1B16; border-color: #1E1B16; color: #F2CF6B; font-weight: 800; text-decoration: none; }
.aj-procurados a:hover { background: #1E1B16; filter: brightness(1.25); }
.aj-cabeca p, .aj-procurados { color: var(--destaque-muted); }
.mc-avatar { background: color-mix(in srgb, var(--destaque-ink) 12%, var(--destaque-bg)); border-color: var(--destaque-borda); color: var(--destaque-valor); }
/* Foto de perfil (Minha conta): a foto preenche o círculo; sem foto ficam as iniciais. */
.side-avatar.com-foto, .us-avatar.com-foto, .mc-avatar.com-foto { overflow: hidden; padding: 0; background: var(--line-soft); }
.com-foto > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mc-foto { position: relative; flex: none; margin: 0; }
.mc-foto-camera { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 30px; height: 30px; min-height: 0; margin: 0; padding: 0;
  border-radius: 50%; background: #1E1B16; color: #F2CF6B; border: 2px solid var(--destaque-bg); cursor: pointer; }
.mc-foto-camera:hover { filter: brightness(1.25); }
.mc-foto-camera:focus-visible, .mc-foto-acao:focus-visible { outline: 2px solid var(--destaque-ink); outline-offset: 2px; }
.mc-foto-acoes { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; }
.mc-foto-acao { margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--destaque-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mc-nivel, .mc-perfil .etiqueta.us-nivel-super { background: var(--destaque-ink); color: var(--destaque-bg); }
.si-check { background: #2F7D54; }

/* 2. Botão "secundário" (era preto) passa para o dourado de destaque. */
.btn-secundario { background: var(--destaque-bg); border-color: var(--destaque-borda); color: var(--destaque-ink); font-weight: 800; }
.btn-secundario:hover { filter: brightness(1.05); }

/* 3. "Cancelar" dos painéis laterais com borda de botão. */
.painel-rodape .pf-cancelar { border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.painel-rodape .pf-cancelar:hover { background: var(--hover); }

/* 4. Menus "Baixar ▾": no celular a lista vira folha embaixo da tela, sem sair do quadro. */
.pr-planilha > summary, .rl-baixar > summary, .inv-baixar > summary { width: auto; height: auto; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--ink); border: 1px solid var(--line); background: var(--card); }
.pr-planilha > summary:hover, .rl-baixar > summary:hover, .inv-baixar > summary:hover { background: var(--hover); }
@media (max-width: 700px) {
  .menu-acoes[open] > .menu-acoes-lista { position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto; min-width: 0; z-index: 400;
    padding: 8px; box-shadow: 0 -8px 40px rgba(0,0,0,.35); }
  .menu-acoes[open] > .menu-acoes-lista a, .menu-acoes[open] > .menu-acoes-lista button { padding: 14px 12px; font-size: 16px; }
  .pr-acoes { flex-wrap: wrap; }
}

/* 5. Campo de arquivo em português ("Selecionar arquivo" / "Nenhum arquivo selecionado"), montado por arquivo.js. */
.campo-arquivo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.campo-arquivo > input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.campo-arquivo-botao { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.campo-arquivo-botao:hover { background: var(--hover); }
.campo-arquivo-nome { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.campo-arquivo:focus-within .campo-arquivo-botao { outline: 2px solid var(--ouro); outline-offset: 2px; }

/* 6. Menus em <details> fechados por clique fora (menu-fora.js): sem estilo próprio. */

/* Faturamento por dia: altura própria (antes crescia com a largura da tela). */
.rl-grafico { height: 190px; min-height: 0; }
@media (max-width: 640px) { .rl-grafico { height: 160px; } }

/* Mapa de calor: cada cor da legenda mostra a faixa de valor por hora. */
.calor-legenda { flex-wrap: wrap; gap: 6px 16px; padding-left: 0; }
.calor-faixa { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.calor-legenda .calor-faixa i { flex: none; }

/* ===== Ajustes pós-redesign — Vender ===== */
/* Botão Pagar em destaque (F9). */
.pagto-hint { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.btn-pagar { width: 100%; min-height: 64px; font-size: 20px; border-radius: 16px; box-shadow: 0 6px 18px color-mix(in srgb, var(--ouro) 35%, transparent); }
.btn-pagar .kbd { margin-left: 4px; background: color-mix(in srgb, var(--carvao) 12%, transparent); border-color: color-mix(in srgb, var(--carvao) 30%, transparent); color: var(--carvao); }
.pagto-hint .small { text-align: center; }
/* Celular/tablet: o grid da venda tem de voltar a uma coluna DEPOIS da regra de 400 px (que vinha por último e vencia). */
@media (max-width: 900px) {
  .pdv { grid-template-columns: minmax(0, 1fr); }
  .pdv-topo .pdv-atalhos { flex-wrap: wrap; }
}
.pagto-hint { background: transparent; border: 0; padding: 0; }

/* ===== Caixa: "Deve ter na gaveta agora" — dourado especial com mini-gráficos ===== */
.cartao-destaque.caixa-gaveta {
  background: linear-gradient(135deg, #F8E08F 0%, #EFC85A 55%, #DFAE35 100%); border-color: #C9A13B;
  box-shadow: 0 10px 28px color-mix(in srgb, #DFAE35 35%, transparent), inset 0 1px 0 rgba(255,255,255,.55);
  position: relative; overflow: hidden; justify-content: space-between; --destaque-ink: #1E1B16; --destaque-muted: #5A430A; --destaque-valor: #1E1B16;
  color: #1E1B16;
}
.cartao-destaque.caixa-gaveta::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.45), transparent 70%); pointer-events: none; }
:root[data-theme="dark"] .cartao-destaque.caixa-gaveta { background: linear-gradient(135deg, #6B5316 0%, #53400F 55%, #3E2F0A 100%); border-color: #9A7A22; box-shadow: 0 10px 28px rgba(0,0,0,.45); color: #f5efe0; --destaque-ink: #f5efe0; --destaque-muted: #E6CB84; --destaque-valor: #F7D774; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cartao-destaque.caixa-gaveta { background: linear-gradient(135deg, #6B5316 0%, #53400F 55%, #3E2F0A 100%); border-color: #9A7A22; color: #f5efe0; --destaque-ink: #f5efe0; --destaque-muted: #E6CB84; --destaque-valor: #F7D774; } }
.caixa-gaveta .caixa-gaveta-valor { color: var(--destaque-valor); }
.caixa-gaveta .caixa-conta .mais, .caixa-gaveta .caixa-conta .menos { color: var(--destaque-ink); }
.caixa-gaveta .caixa-gaveta-valor.negativo { color: #8E1F14; }
.caixa-conta > div { gap: 6px; }
.mini-barra { display: block; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--destaque-ink) 14%, transparent); overflow: hidden; }
.mini-barra > b { display: block; height: 100%; border-radius: 4px; background: var(--destaque-ink); min-width: 3px; }
.mini-barra.mais > b { background: #2F7D54; }
.mini-barra.menos > b { background: #B3382C; }
.caixa-conta-link { align-self: end; }

/* ===== Painel: números do período como cartões de dashboard ===== */
.kpis-painel { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpis-painel .kpi { display: flex; flex-direction: column; gap: 4px; border-radius: 16px; padding: 20px 22px; box-shadow: 0 1px 2px rgba(30,27,22,.05); }
.kpis-painel .kpi-valor { font-size: 32px; margin-top: 4px; }
.kpis-painel .kpi-sub { margin-top: auto; padding-top: 6px; font-size: 13px; }
.kpis-painel .kpi.principal { box-shadow: 0 6px 18px color-mix(in srgb, var(--destaque-borda) 30%, transparent); }
@media (max-width: 600px) { .kpis-painel { grid-template-columns: 1fr 1fr; gap: 10px; } .kpis-painel .kpi { padding: 14px 16px; } .kpis-painel .kpi-valor { font-size: 24px; } .kpis-painel .kpi.principal { grid-column: 1 / -1; } }

/* ===== Usuários: aviso responsivo ===== */
.us-aviso { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.us-aviso-nomes { display: flex; flex-wrap: wrap; gap: 6px; }

/* ===== Menu ⋯ das tabelas: todos os itens (link, botão, "Excluir"/"Corrigir" em details) com o mesmo alinhamento ===== */
.tabela-menu-lista > a, .tabela-menu-lista > form > button, .tabela-menu-lista > button, .tabela-menu-lista .menu-senha > summary {
  display: block; width: 100%; box-sizing: border-box; padding: 9px 12px; margin: 0; border-radius: 8px; font-size: 14px; line-height: 1.3; text-align: left; text-decoration: none; }
.tabela-menu-lista .menu-senha { margin: 0; }
.tabela-menu-lista .menu-senha form { padding: 4px 12px 8px; }

/* ===== Listas no celular: linhas viram cartões (tabela-empilha.js põe data-rotulo nas células) ===== */
@media (max-width: 700px) {
  .pr-tabela, .rl-tabela { min-width: 0; }
  table.empilha, table.empilha tbody, table.empilha tr, table.empilha td { display: block; width: 100%; box-sizing: border-box; }
  table.empilha thead { display: none; }
  table.empilha tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); position: relative; }
  table.empilha tbody tr:last-child { border-bottom: 0; }
  table.empilha td { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 5px 0 !important; border: 0; text-align: right; }
  table.empilha td::before { content: attr(data-rotulo); flex: none; font-size: 12px; font-weight: 700; color: var(--muted); text-align: left; }
  table.empilha td:first-child { display: block; text-align: left; font-weight: 700; padding-right: 48px !important; }
  table.empilha td:first-child::before, table.empilha td[colspan]::before { content: none; }
  table.empilha td.pr-acao, table.empilha td.acoes { position: absolute; top: 8px; right: 8px; width: auto; padding: 0 !important; display: block; }
  table.empilha td.pr-acao::before, table.empilha td.acoes::before { content: none; }
  table.empilha td .estado-vazio { width: 100%; }
}

/* Contagem do título ("3 cadastrados") numa linha própria, em vez de um número solto ao lado do nome. */
.pr-total.pr-total-linha { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; letter-spacing: 0; }
table.empilha td::before { font-family: inherit; }

/* ===== Conversas da IA: aviso de retenção em destaque ===== */
.cv-retencao { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 10px 18px; border-radius: 999px; font-size: 16px; font-weight: 600;
  background: var(--destaque-bg); border: 1px solid var(--destaque-borda); color: var(--destaque-ink); }
.cv-retencao strong { color: var(--destaque-valor); font-weight: 800; }

/* ===== Memória da IA: pílula "Vale para" ativa em dourado, arredondada ===== */
.mi-pilulas { border-radius: 999px; }
.mi-pilula span { border-radius: 999px; }
.mi-pilula.ativo span { background: var(--destaque-bg); color: var(--destaque-ink); box-shadow: inset 0 0 0 1px var(--destaque-borda); }

/* ===== Revisão visual: itens do menu ⋯ idênticos; "?" da ajuda não cobre os botões do topo ===== */
.tabela-menu-lista > a, .tabela-menu-lista > form > button, .tabela-menu-lista > button, .tabela-menu-lista .menu-senha > summary {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); }
.tabela-menu-lista .acao-perigo, .tabela-menu-lista .menu-senha > summary.acao-perigo { color: var(--erro-ink, var(--erro)); }
.pr-topo, .painel-topo { padding-right: 48px; }
@media (max-width: 900px) { .pr-topo, .painel-topo { padding-right: 0; } }

/* Rótulo + asterisco de obrigatório na mesma linha (antes o * caía sozinho numa linha e empurrava o campo). */
.pf-bloco label, .pf-fiscal label, .en-dados label { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 4px; row-gap: 6px; }
.pf-bloco label > *:not(b):not(.muted):not(.small), .pf-fiscal label > *:not(b):not(.muted):not(.small),
.en-dados label > *:not(b):not(.muted):not(.small) { flex: 0 0 100%; margin-top: 0; }
.rl-topo, .caixa-topo, .pt-topo { padding-right: 48px; }
@media (max-width: 900px) { .rl-topo, .caixa-topo, .pt-topo { padding-right: 0; } }
/* Botão dourado dentro de cartão dourado: o texto continua escuro (o remapeamento de --carvao do cartão o deixava ilegível). */
.cartao-destaque .btn-principal, .aj-cabeca .btn-principal { color: #1E1B16; background: var(--ouro); border-color: var(--ouro); }
.cartao-destaque .btn-principal, .aj-cabeca .btn-principal { background: #1E1B16; border-color: #1E1B16; color: #F2CF6B; }

/* ===== Ajustes (rodada 2): efeito dourado em todos os cartões de destaque, botões pretos, tamanhos ===== */
:root { --destaque-grad: radial-gradient(circle at 100% 0%, rgba(255,255,255,.5), transparent 52%), linear-gradient(135deg, #F8E08F 0%, #EFC85A 55%, #DFAE35 100%); --destaque-sombra: 0 8px 22px color-mix(in srgb, #DFAE35 32%, transparent), inset 0 1px 0 rgba(255,255,255,.55); }
:root[data-theme="dark"] { --destaque-grad: radial-gradient(circle at 100% 0%, rgba(247,215,116,.16), transparent 52%), linear-gradient(135deg, #6B5316 0%, #53400F 55%, #3E2F0A 100%); --destaque-sombra: 0 8px 22px rgba(0,0,0,.45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --destaque-grad: radial-gradient(circle at 100% 0%, rgba(247,215,116,.16), transparent 52%), linear-gradient(135deg, #6B5316 0%, #53400F 55%, #3E2F0A 100%); --destaque-sombra: 0 8px 22px rgba(0,0,0,.45); } }
.cartao-destaque, .kpi.principal, .totais, .aj-cabeca, .cartao-destaque.caixa-gaveta { background: var(--destaque-grad); box-shadow: var(--destaque-sombra); }
.cartao-destaque.caixa-gaveta::after { content: none; }
:root[data-theme="dark"] .cartao-destaque.caixa-gaveta, :root:not([data-theme="light"]) .cartao-destaque.caixa-gaveta { background: var(--destaque-grad); }

/* Botões dentro de cartão de destaque: sempre pretos, texto dourado. */
.cartao-destaque :is(.btn, .btn-principal, .btn-secundario, .btn-neutro, .btn-alto, .inv-contorno, button:not(.link-claro, .mc-foto-acao)):not(.tabela-menu-btn),
.aj-cabeca :is(.btn, .btn-principal, .btn-secundario, .btn-neutro, button),
.totais .btn:not(.ghost) { background: #1E1B16; border-color: #1E1B16; color: #F2CF6B; font-weight: 800; }
.cartao-destaque :is(.btn, .btn-principal, .btn-secundario, .btn-neutro, .inv-contorno):hover { filter: brightness(1.25); background: #1E1B16; }
.cartao-destaque .inv-confirmar { background: var(--erro); color: #fff; }
.btn.si-btn-claro { background: #1E1B16; border-color: #1E1B16; color: #F2CF6B; }
.btn.si-btn-claro:hover { background: #1E1B16; filter: brightness(1.25); }

/* Caixa: gaveta compacta (não estica até a altura do cartão ao lado) */
.caixa-linha { align-items: flex-start; }
.cartao-destaque.caixa-gaveta { padding: 16px 22px; gap: 12px; }
.caixa-gaveta-valor { font-size: 40px; margin-top: 2px; }
.caixa-conta { gap: 8px 14px; }
.caixa-conta strong { font-size: 16px; }
.mini-barra { height: 6px; }
@media (max-width: 700px) { .caixa-gaveta-valor { font-size: 34px; } }

/* Painel: cartões de número mais compactos */
.kpis-painel { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.kpis-painel .kpi { padding: 14px 18px; border-radius: 14px; gap: 2px; }
.kpis-painel .kpi-valor { font-size: 26px; margin-top: 2px; }
.kpis-painel .kpi-sub { padding-top: 2px; font-size: 12px; }
@media (max-width: 600px) { .kpis-painel .kpi-valor { font-size: 21px; } }

/* Memória da IA: o rótulo ativo não ganha o fundo preto do .segmentado; só o texto em destaque dourado */
.segmentado > .mi-pilula.ativo, .segmentado > .mi-pilula { background: transparent; }

/* Assistente no celular: topo (Conversas / contador) não cobre mais o cumprimento */
.chat-page .chat-topo, .chat-topo.chat-topo-sem-titulo { flex: none; height: auto; min-height: 34px; }
@media (max-width: 600px) {
  .chat-topo.chat-topo-sem-titulo { flex-wrap: wrap; row-gap: 6px; padding-bottom: 6px; }
  .as-contador { order: 3; flex: 1 1 100%; margin: 0; padding-left: 2px; }
  .chat-hero { padding-top: 18px; }
  .as-ola { margin-bottom: 0; }
}

/* ===== Rodada 3 ===== */
/* Gaveta do Caixa: cartão padrão, igual ao "Recebido no turno" ao lado. */
.caixa-linha { align-items: stretch; }
/* R5: gaveta fechada pelo sistema sem contagem */
.caixa-contagem { border-top: 4px solid var(--ouro); display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.caixa-contagem h2 { margin: 0; font-size: 18px; }
.hc-correcao { margin: 8px 0; color: var(--ink-2); }
.caixa-contagem p { margin: 0; }
.caixa-contagem-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.caixa-contagem-linha > span { flex: 1 1 260px; }
.caixa-contagem-linha input { flex: 0 1 180px; margin: 0; }
.cartao.caixa-gaveta { flex: 2 1 320px; border-radius: 18px; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.caixa-gaveta .caixa-forma-nome { width: 150px; }
.caixa-total.negativo { color: var(--erro-ink); }
.caixa-gaveta .caixa-forma .barra > span { background: var(--carvao); }
@media (max-width: 560px) { .caixa-gaveta .caixa-forma-nome { width: 110px; font-size: 13px; } }

/* Controles ativos (abas do Sistema, chips de filtro, períodos, pílulas): dourado de destaque em todo o sistema. */
.segmentado > .ativo, .segmentado > [aria-pressed="true"], .filtro-chip.ativo, .filtro-chip[aria-pressed="true"],
.hc-periodo > a.ativo, .hc-intervalo > summary.ativo, .seg-periodo a.ativo, .periodo .ativo, .filtro.ativo {
  background: var(--destaque-bg); color: var(--destaque-ink); border-color: var(--destaque-borda); box-shadow: inset 0 0 0 1px var(--destaque-borda); font-weight: 800; }
.mi-pilula.ativo span { box-shadow: inset 0 0 0 1px var(--destaque-borda); }
/* "Vale para" (Memória da IA) igual ao seletor de período do Painel: o rótulo não desenha caixa (a regra de
   .ativo acima pintava um quadrado em volta da pílula); só o texto vira a pílula dourada. */
.segmentado.mi-pilulas { border-radius: 14px; padding: 5px; gap: 2px; }
.segmentado > .mi-pilula, .segmentado > .mi-pilula.ativo { background: transparent; border: 0; box-shadow: none; padding: 0; min-height: 0; }
.mi-pilula span { min-height: 0; padding: 9px 16px; border-radius: 10px; font-weight: 600; font-size: 15px; color: var(--ink); }
.mi-pilula span:hover { background: var(--hover); }
.mi-pilula.ativo span, .mi-pilula.ativo span:hover { background: var(--destaque-bg); color: var(--destaque-ink); box-shadow: inset 0 0 0 1px var(--destaque-borda); font-weight: 800; }
.mi-licoes-topo { margin-bottom: 16px; padding-right: 0; }
.mi-form-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.mi-form-cabeca .si-h2 { margin-bottom: 12px; }

/* Assistente (tela inicial) no celular: sugestões recolhidas e só 2 por coluna */
.as-sug-resumo { display: none; }
@media (max-width: 600px) {
  .as-sug-resumo { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 4px auto 0; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--card); color: var(--ink); font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; width: fit-content; }
  .as-sug-resumo::-webkit-details-marker { display: none; }
  .as-sug-caixa[open] > .as-sug-resumo { margin-bottom: 10px; }
  .as-sug-caixa[open] > .as-sug-resumo::after { content: "▴"; }
  .as-sug-caixa:not([open]) > .as-sug-resumo::after { content: "▾"; }
  .as-sugestoes > div > .as-sug:nth-child(n+4) { display: none; }
  .chat-aviso { font-size: 11px; }
}

/* Gaveta do Caixa: mesmo cartão do "Recebido no turno", com o efeito dourado de destaque */
.cartao.cartao-destaque.caixa-gaveta { padding: 22px 24px; background: var(--destaque-grad); border: 1px solid var(--destaque-borda); box-shadow: var(--destaque-sombra); }
.caixa-gaveta h2, .caixa-gaveta .caixa-forma, .caixa-gaveta .caixa-forma-nome { color: var(--destaque-ink); }
.caixa-gaveta .caixa-total { color: var(--destaque-valor); }
.caixa-gaveta .muted, .caixa-gaveta .small, .caixa-gaveta a { color: var(--destaque-muted); }
.caixa-gaveta .caixa-forma .barra { background: color-mix(in srgb, var(--destaque-ink) 16%, transparent); }
.caixa-gaveta .caixa-forma .barra > span { background: var(--destaque-ink); }
.caixa-gaveta .caixa-forma .barra > span.perda { background: #B3382C; }
.editar-abertura .form-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ===== Revisão no celular (19/10, PLANO.md seção M), fases 2 e 3 ===== */
/* M4. O iPhone amplia a tela ao tocar num campo com letra abaixo de 16 px: em tela de toque, todo campo fica com 16 px
   (os que já são maiores, como a busca da venda e a quantidade, ficam como estão). O zoom manual continua liberado. */
@media (pointer: coarse) {
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], #codigo, .qtd, .campo-fundo, .aj-busca input),
  select, textarea { font-size: 16px !important; }
}

/* M5. Painel › Últimas vendas: no celular a forma de pagamento desce para baixo do cliente e o Total cabe. */
.uv-forma { display: none; }
@media (max-width: 600px) {
  table.uv-tabela { display: table; width: 100%; white-space: normal; overflow: visible; }
  .uv-tabela .uv-pagto { display: none; }
  .uv-tabela .uv-forma { display: block; margin-top: 2px; }
  .uv-tabela td.num, .uv-tabela td:first-child { white-space: nowrap; }
}

/* M6. Mapa "Quando a loja vende mais": no celular as 15 horas cabem (células estreitas, hora só nas pares) e o toque
   numa célula escreve o valor embaixo (relatorio.html). */
.calor-celula.tocada { outline: 2px solid var(--ink); outline-offset: 1px; }
.calor-detalhe { margin: 10px 0 0; }
.calor-detalhe:empty { display: none; }
@media (max-width: 640px) {
  .calor { min-width: 0; gap: 3px; }
  .calor-linha { gap: 2px; }
  .calor-dia { flex: 0 0 30px; font-size: 11px; }
  .calor-hora { min-width: 0; font-size: 10px; white-space: nowrap; overflow: visible; }
  .calor-horas .calor-hora:nth-child(odd) { visibility: hidden; }
  .calor-horas .calor-hora:last-child { text-align: right; }  /* o texto é mais largo que a célula: não sai do cartão */
  .calor-celula { min-width: 0; height: 22px; border-radius: 3px; }
}

/* M7. Mais vendidos (Painel e Relatório): nome em até 2 linhas antes do "…" — "Coca-Cola 2L" e "Coca-Cola Lata" se
   distinguem. */
.rl-top-linha { align-items: flex-start; }
.rl-top-nome { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }

/* M8. Tela de toque: área mínima de 44 × 44 px no ⋯, nos botões pequenos, na paginação e nos itens do menu ⋯. */
@media (pointer: coarse) {
  .tabela-menu-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn.mini, .btn-baixo, .filtro-chip, .conversa-excluir, .hc-intervalo > summary { min-height: 44px; }
  .btn.mini, .conversa-excluir { min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .tabela-menu-lista > a, .tabela-menu-lista > form > button, .tabela-menu-lista > button, .tabela-menu-lista .menu-senha > summary {
    min-height: 44px; display: flex; align-items: center; }
  .btn-cancelar-link, .en-link, .pdv-topo .pdv-atalhos .btn { min-height: 44px; }
  .paginacao-links a.btn, .paginacao-links span.btn, .paginacao-links button.btn { min-width: 44px; }
  .menu-acoes-lista a, .menu-acoes-lista button { min-height: 44px; display: flex; align-items: center; }
  .lucro-retiradas li { grid-template-columns: auto 1fr auto 44px; }
}

/* M9. Relatório: o inline-block da coluna de ações tirava a centralização do "Cupom" (texto colado no topo). */
.rl-acao > .btn-baixo { display: inline-flex; align-items: center; }

/* M10. Produtos no celular: cartão de 2 linhas — nome em cima (⋯ no canto) e, embaixo, venda · estoque · validade. */
@media (max-width: 700px) {
  .pr-tabela.empilha tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 10px 16px; }
  .pr-tabela.empilha td:first-child { flex: 1 1 100%; padding: 2px 52px 2px 0 !important; }
  .pr-tabela.empilha .pr-codigo { display: none; }
  .pr-tabela.empilha td:not(:first-child, .pr-acao, [colspan]) { display: inline-flex; width: auto; gap: 5px; align-items: baseline; padding: 0 !important; }
  .pr-tabela.empilha td.pr-acao { top: 50%; transform: translateY(-50%); }
}

/* M11. Contas a pagar no celular: data, descrição e valor em cima; "Marcar como paga" e ⋯ lado a lado embaixo. */
@media (max-width: 700px) {
  .ct-conta { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; grid-template-areas: "data info valor" "pagar pagar menu";
    gap: 10px 12px; padding: 12px 14px; }
  .ct-data { grid-area: data; }
  .ct-info { grid-area: info; }
  /* A descrição (com o "…" do .truncar, de até 32 letras) passava por baixo do valor: fica na largura da coluna. */
  .ct-titulo strong, .ct-titulo .truncar { max-width: 100%; }
  .ct-valor { grid-area: valor; align-self: start; text-align: right; font-size: 17px; }
  .ct-pagar { grid-area: pagar; display: block; }
  .ct-pagar .ct-btn-paga { width: 100%; }
  .ct-conta > .tabela-menu-wrap { grid-area: menu; }
  .ct-conta.paga { grid-template-columns: 58px minmax(0, 1fr) auto auto; grid-template-areas: "data info valor menu"; }
  .ct-conta.paga .ct-pagar { display: none; }
}

/* M12. Tela só de toque (sem mouse): sem as dicas de teclado (F1, F7, F9, Enter, Ctrl+L) nem o botão Atalhos. Tablet
   com teclado e mouse continua vendo. */
@media (hover: none) and (pointer: coarse) {
  .kbd, .side-kbd, #btn-atalhos, .pagto-hint > .muted { display: none !important; }
}