/* ================================================================
   Caixaí — formato do TEMA NEXT (só vale quando o tema Next está ativo).
   Barra lateral cinza clara, conteúdo branco chapado, títulos grandes,
   botões em pílula azul, abas sublinhadas e tabelas em grade densa.
   ================================================================ */

/* Peças que só aparecem no Next (e as que somem nele) */
.so-next { display: none !important; }
[data-tema="next"] .so-next { display: inline-flex !important; }
[data-tema="next"] .so-next.bloco { display: block !important; }
[data-tema="next"] .nao-next { display: none !important; }
.contagem { display: none; }
[data-tema="next"] .contagem { display: inline; }

/* Barra lateral que encolhe (botão ☰ do topo da barra) */
.app.menu-recolhido { grid-template-columns: 68px 1fr; }
.app.menu-recolhido .menu a.item span, .app.menu-recolhido .menu .grupo, .app.menu-recolhido .menu .rodape,
.app.menu-recolhido .marca > div { display: none; }
.app.menu-recolhido .menu a.item { justify-content: center; padding-left: 0; padding-right: 0; }

/* ---------- Estrutura ---------- */
[data-tema="next"] body { background: #fff; }
[data-tema="next"] .app { grid-template-columns: 190px 1fr; }
[data-tema="next"] .app.menu-recolhido { grid-template-columns: 68px 1fr; }
[data-tema="next"] .menu { background: var(--menu-fundo); color: var(--menu-texto); border-right: 0; }
[data-tema="next"] .menu-hamb { width: 100%; height: 56px; border: 0; background: transparent; align-items: center; justify-content: center; cursor: pointer; color: #333; margin-top: 4px; }
[data-tema="next"] .menu-hamb:hover { background: rgba(0, 0, 0, .04); }
[data-tema="next"] .menu-hamb svg { width: 22px; height: 22px; }
[data-tema="next"] .menu nav { order: 1; padding: 8px 0 12px; gap: 0; }
[data-tema="next"] .menu .grupo { display: none; }
[data-tema="next"] .menu a.item { gap: 14px; padding: 0 20px; height: 54px; border-radius: 0; font-size: 13.5px; color: #111;
  border-top: 1px solid transparent; border-bottom: 1px solid transparent; }
[data-tema="next"] .menu a.item svg { width: 26px; height: 26px; stroke-width: 1.5; opacity: 1; }
[data-tema="next"] .menu a.item:hover { background: rgba(0, 0, 0, .035); }
[data-tema="next"] .menu a.item.ativo { background: #fff; color: #000; font-weight: 700; box-shadow: none; border-color: #cfcfcf; }
/* ícone "preenchido" no item ativo */
[data-tema="next"] .menu a.item.ativo svg { fill: currentColor; stroke-width: 1.7; }
[data-tema="next"] .menu .rodape { order: 2; margin-top: auto; padding: 10px 20px; color: #777; opacity: 1; font-size: 11.5px; }
[data-tema="next"] .menu .marca { order: 3; color: #111; padding: 14px 16px; border-top: 1px solid #dcdcdc; gap: 12px; }
[data-tema="next"] .menu .marca b { font-size: 15px; }
[data-tema="next"] .menu .marca small { color: #666; opacity: 1; }
[data-tema="next"] .menu .marca svg { width: 34px; height: 34px; border: 1px solid #ddd; border-radius: 11px; }

[data-tema="next"] .principal { background: #fff; }
[data-tema="next"] .topo { background: #fff; border-bottom: 0; padding: 22px 24px 10px 24px; min-height: 84px; gap: 14px; }
[data-tema="next"] .topo h1 { font-size: 26px; font-weight: 700; letter-spacing: -.3px; color: #000; }
[data-tema="next"] .topo .direita { gap: 12px; }
[data-tema="next"] .conteudo { padding: 10px 24px 24px; }
[data-tema="next"] .conteudo.cheio { padding: 0; }

/* Topo direito: ••• · ajuda · pílula da fila · usuário ⌄ · avatar · engrenagem */
.btn-circ { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #cfcfcf; background: #fff; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: #111; flex: none; font-weight: 600; padding: 0; }
.btn-circ:hover { border-color: #888; }
.btn-circ svg { width: 21px; height: 21px; }
.btn-circ.sem-borda { border-color: transparent; }
.btn-circ.sem-borda:hover { background: #f1f1f1; }
.btn-circ.cheio { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }
.btn-circ.cheio:hover { background: var(--cor-primaria-forte); }
.btn-circ .inicial { text-decoration: underline; text-underline-offset: 3px; font-size: 16px; font-weight: 500; }
[data-tema="next"] .sync { height: 40px; padding: 0 20px; border: 1px solid #cfcfcf; background: #fff; color: var(--cor-primaria); font-weight: 600; font-size: 13.5px; }
[data-tema="next"] .sync.off { color: var(--perigo); }
[data-tema="next"] .sync .fila { color: inherit; }
[data-tema="next"] .chave-net .txt { color: #555; }
.tp-usuario { border: 0; background: transparent; cursor: pointer; font-size: 13.5px; color: #111; align-items: center; gap: 6px; padding: 6px 4px; white-space: nowrap; }
.tp-usuario svg { width: 15px; height: 15px; }

/* ---------- Componentes ---------- */
[data-tema="next"] .card { box-shadow: none; border-color: #e3e3e3; border-radius: 12px; }
[data-tema="next"] .card h3 { font-size: 15.5px; color: #000; }
[data-tema="next"] .card h3 > svg { color: #111; }
[data-tema="next"] .kpi .rot { color: #666; letter-spacing: .02em; }
[data-tema="next"] .kpi .val { color: #000; }

[data-tema="next"] .btn { border-radius: 999px; padding: 10px 20px; font-weight: 600; border-color: #bdbdbd; color: #111; font-size: 14px; }
[data-tema="next"] .btn:hover { border-color: #111; background: #fff; }
[data-tema="next"] .btn.primario { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; font-weight: 500; }
[data-tema="next"] .btn.primario:hover { background: var(--cor-primaria-forte); }
[data-tema="next"] .btn.fantasma { border-color: transparent; }
[data-tema="next"] .btn.fantasma:hover { background: #f2f2f2; border-color: transparent; }
[data-tema="next"] .btn.pq { padding: 6px 12px; font-size: 13px; }
[data-tema="next"] .btn.grande { padding: 13px 24px; font-size: 15px; }
[data-tema="next"] .btn.perigo { color: var(--perigo); }
[data-tema="next"] .btn.perigo.cheio { color: #fff; }
[data-tema="next"] .btn .tecla, [data-tema="next"] .btn kbd { border: 0; opacity: .9; font-weight: 600; padding: 0; font-size: 13px; }
[data-tema="next"] .btn kbd::before { content: "- "; }

[data-tema="next"] input:not([type]), [data-tema="next"] input[type=text], [data-tema="next"] input[type=number], [data-tema="next"] input[type=password],
[data-tema="next"] input[type=date], [data-tema="next"] input[type=tel], [data-tema="next"] input[type=email], [data-tema="next"] select, [data-tema="next"] textarea {
  border-color: #bdbdbd; border-radius: 8px; }
/* Busca em pílula com borda preta de 2px */
[data-tema="next"] input[type=search], [data-tema="next"] .busca-pilula input {
  border: 2px solid #111; border-radius: 999px; min-height: 40px; padding: 8px 16px 8px 40px; background: #fff
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") no-repeat 14px 50% / 18px; }
[data-tema="next"] input:focus, [data-tema="next"] select:focus, [data-tema="next"] textarea:focus { border-color: var(--cor-primaria); box-shadow: inset 0 0 0 1px var(--cor-primaria); }
[data-tema="next"] input[type=search]:focus { border-color: #111; }
[data-tema="next"] .campo > span { color: #444; }
[data-tema="next"] .secao { color: #111; border-bottom-color: #e3e3e3; }

[data-tema="next"] .barra-ferramentas { gap: 12px; margin-bottom: 16px; }
[data-tema="next"] .barra-ferramentas input[type=search] { max-width: 420px !important; flex: 1 1 260px; }

/* Abas: texto preto, ativa em negrito com sublinhado azul */
[data-tema="next"] .abas { border-bottom: 0; gap: 22px; margin-bottom: 18px; }
[data-tema="next"] .abas button { padding: 8px 0 6px; color: #111; font-weight: 400; font-size: 15px; border-bottom-width: 2px; }
[data-tema="next"] .abas button.ativo { color: #000; font-weight: 700; border-bottom-color: var(--cor-primaria); }

/* Chips viram pílulas de contorno; o ativo é azul */
[data-tema="next"] .chip { border-color: #bdbdbd; padding: 7px 16px; font-weight: 600; background: #fff; }
[data-tema="next"] .chip.ativo { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }

/* Tabelas em grade densa: cabeçalho pequeno, cinza, centralizado, com divisórias */
[data-tema="next"] .tabela-wrap { border-radius: 0; border: 0; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; }
[data-tema="next"] .tabela th { background: #fff; color: #8a8a8a; font-weight: 400; font-size: 12px; text-align: center; padding: 4px 10px;
  border-bottom: 1px solid #e3e3e3; border-left: 1px solid #e8e8e8; }
[data-tema="next"] .tabela th:first-child { border-left: 0; }
[data-tema="next"] .tabela td { padding: 7px 10px; border-bottom: 1px solid #f0f0f0; font-size: 13.5px; }
[data-tema="next"] .tabela tbody tr:hover { background: #f6fbff; }
[data-tema="next"] .tabela tr.sel { background: var(--cor-primaria-suave) !important; }
[data-tema="next"] .tabela td.acoes { text-align: left; }
[data-tema="next"] .tabela .vazio { padding: 70px 20px; color: #6b6b6b; background: #fff; }
.ilustra-vazio { display: block; width: 120px; height: 96px; margin: 0 auto 10px; color: #b5b5b5; }
.vazio-titulo { color: #111; font-weight: 700; font-size: 15px; }

[data-tema="next"] .selo { border-radius: 999px; }
[data-tema="next"] .alerta { border-radius: 10px; background: #f5fafe; border-color: #cfe8fb; }
[data-tema="next"] .alerta.amarelo { background: #fffaf0; border-color: #f0dcae; }
[data-tema="next"] .alerta.vermelho { background: #fff5f5; border-color: #f3c5c6; }

/* Linha "Visualização: Resumida | por Produto" */
.visualizacao { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13.5px; margin-bottom: 10px; }
.visualizacao button { border: 0; background: none; cursor: pointer; padding: 2px 0; color: #111; }
.visualizacao button.ativo { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.visualizacao .sep { width: 1px; height: 20px; background: #ddd; }
.visualizacao select { width: auto; min-height: 30px; border: 0 !important; padding: 2px 6px; background: transparent; box-shadow: none !important; }

/* Painel de categorias à esquerda (Produtos) */
.prod-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; }
.cats-lado { display: flex; flex-direction: column; gap: 4px; }
.cats-lado button { border: 0; background: none; text-align: left; padding: 7px 6px; cursor: pointer; font-size: 15px; color: #111; border-radius: 6px; }
.cats-lado button:hover { background: #f4f4f4; }
.cats-lado button.ativo { color: var(--cor-primaria); }
.cats-lado button .n { color: #888; }
.cats-lado button.ativo .n { color: inherit; }
.cats-lado hr { border: 0; border-top: 1px solid #e3e3e3; margin: 10px 0; width: 100%; }
[data-tema="next"] .prod-layout:not(.com-lado) { display: block; }
.prod-layout:not(.com-lado) .cats-lado { display: none; }

/* Menu suspenso simples (chevron ⌄) */
.suspenso { position: absolute; z-index: 30; background: #fff; border: 1px solid #ddd; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); padding: 6px; min-width: 220px; }
.suspenso button { display: flex; width: 100%; align-items: center; gap: 10px; border: 0; background: none; padding: 9px 12px; border-radius: 8px; cursor: pointer; text-align: left; font-size: 14px; color: #111; }
.suspenso button:hover { background: #f2f2f2; }
.suspenso button svg { width: 18px; height: 18px; }

/* Modais e avisos */
[data-tema="next"] .modal { border-radius: 16px; border: 0; box-shadow: 0 24px 70px rgba(0, 0, 0, .25); }
[data-tema="next"] .modal header { border-bottom: 0; padding: 18px 22px 6px; }
[data-tema="next"] .modal header h2 { font-size: 20px; font-weight: 700; }
[data-tema="next"] .modal .corpo { padding: 14px 22px; }
[data-tema="next"] .modal footer { border-top: 0; padding: 8px 22px 20px; }
[data-tema="next"] .fundo-modal { background: rgba(0, 0, 0, .35); }
[data-tema="next"] .aviso { border-radius: 999px; padding: 11px 20px; }
[data-tema="next"] .aviso.ok { background: #111; }

/* Login */
[data-tema="next"] .login { background: #f4f4f4; }
[data-tema="next"] .login .card { border: 0; border-radius: 18px; padding: 34px; box-shadow: 0 2px 20px rgba(0, 0, 0, .06); }
[data-tema="next"] .login .btn.grande { width: 100%; }

/* ---------- PDV ---------- */
[data-tema="next"] .pdv-esq { padding: 14px 24px 18px; }
[data-tema="next"] .pdv-busca input { border: 2px solid #111; border-radius: 999px; min-height: 50px; }
[data-tema="next"] .pdv-busca input:focus { box-shadow: none; border-color: #111; }
[data-tema="next"] .pdv-qtd { border-radius: 999px; border: 1px solid #bdbdbd; }
[data-tema="next"] .pdv-qtd.ativo { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); }
[data-tema="next"] .pdv-itens { border-radius: 0; border: 0; border-top: 1px solid #e3e3e3; }
[data-tema="next"] .pdv-vazio svg { opacity: .3; }
[data-tema="next"] .atalhos { gap: 8px; }
[data-tema="next"] .atalhos button { border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; border-color: #bdbdbd; background: #fff; flex-direction: row-reverse; }
[data-tema="next"] .atalhos button:hover { border-color: #111; }
[data-tema="next"] .atalhos button kbd { border: 0; background: none; padding: 0; opacity: 1; font-size: 13.5px; }
[data-tema="next"] .atalhos button kbd::before { content: "- "; }
[data-tema="next"] .atalhos button[data-k="F4"] { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }
[data-tema="next"] .pdv-dir { border-left: 1px solid #e6e6e6; background: #fafafa; }
[data-tema="next"] .ultimo { background: #fff; border-color: #e3e3e3; border-radius: 12px; }
[data-tema="next"] .cliente-box { border-radius: 999px; background: #fff; }
[data-tema="next"] .total-grande { background: #111; color: #fff; border-radius: 14px; }
[data-tema="next"] .pdv-dir .btn.primario.grande { padding: 15px; font-size: 16px; }
[data-tema="next"] .caixa-fechado { background: rgba(255, 255, 255, .86); }
[data-tema="next"] .resultados { border-radius: 14px; }
[data-tema="next"] .tile { border-radius: 12px; }
[data-tema="next"] .formas button { border-radius: 14px; border-width: 1px; }
[data-tema="next"] .formas button.ativo { border: 2px solid var(--cor-primaria); }
[data-tema="next"] .pag-topo .bloco { border-radius: 12px; background: #fafafa; }
[data-tema="next"] .pag-topo .troco { background: #eefaf3; }
[data-tema="next"] .valor-grande { border-radius: 12px !important; }

/* Aparência / gráficos */
[data-tema="next"] .tema-card { border-radius: 14px; }
[data-tema="next"] .barras-h .trilho { background: #f0f0f0; }

/* ---------- Telas estreitas ---------- */
@media (max-width: 980px) {
  [data-tema="next"] .app { grid-template-columns: 1fr; }
  [data-tema="next"] .menu { width: 230px; }
  [data-tema="next"] .menu-hamb { justify-content: flex-start; padding-left: 22px; }
  [data-tema="next"] .topo { padding: 12px 14px 8px; min-height: 64px; }
  [data-tema="next"] .topo h1 { font-size: 21px; }
  [data-tema="next"] .tp-usuario .nm { display: none; }
  [data-tema="next"] .conteudo { padding: 8px 14px 18px; }
  [data-tema="next"] .pdv-esq { padding: 12px 14px; }
  .prod-layout.com-lado { grid-template-columns: 1fr; }
  .cats-lado { flex-direction: row; flex-wrap: wrap; }
  .cats-lado hr { display: none; }
  .cats-lado button { font-size: 13.5px; padding: 5px 10px; border: 1px solid #ddd; border-radius: 999px; }
}
@media (max-width: 620px) {
  [data-tema="next"] .topo .direita { gap: 6px; }
  [data-tema="next"] .btn-circ { width: 36px; height: 36px; }
  [data-tema="next"] .so-next.esconde-celular { display: none !important; }
  [data-tema="next"] .sync { padding: 0 12px; height: 36px; }
  [data-tema="next"] .chave-net { display: none; }
  [data-tema="next"] .btn { padding: 9px 16px; }
}

[data-tema="next"] .pr-filtros { display: none; }

/* ordem do topo direito no Next: internet · ••• · ajuda · fila · usuário · avatar · engrenagem */
[data-tema="next"] .topo .direita > .chave-net { order: 0; }
[data-tema="next"] .topo .direita > #tp-mais { order: 1; }
[data-tema="next"] .topo .direita > #tp-ajuda { order: 2; }
[data-tema="next"] .topo .direita > .sync { order: 3; }
[data-tema="next"] .topo .direita > #tp-usu { order: 4; }
[data-tema="next"] .topo .direita > #tp-av { order: 5; }
[data-tema="next"] .topo .direita > #tp-cfg { order: 6; }
/* no computador, o ☰ do topo some (o da barra lateral faz o papel) */
@media (min-width: 981px) { .topo .btn-menu { display: none !important; } }

[data-tema="next"] .cliente-box { border-radius: 12px; }

/* celular: blocos lado a lado viram um embaixo do outro; título um pouco menor */
@media (max-width: 620px) {
  .grade[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [data-tema="next"] .topo h1 { font-size: 19px; line-height: 1.15; }
}


/* ---------- Aplicativos ---------- */
.apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1120px; }
.app-card { display: flex; gap: 20px; align-items: center; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 32px 30px; min-height: 250px; }
.app-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-self: stretch; }
.app-txt h3 { font-size: 20px; font-weight: 500; margin: 0 0 8px; }
.app-txt p { margin: 0 0 12px; color: var(--texto-suave); line-height: 1.5; }
.app-botoes { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; padding-top: 10px; }
.app-btn { min-width: 120px; }
.app-end { font-weight: 700; font-size: 14px; word-break: break-all; margin-bottom: 4px; }
.app-nota { font-size: 12.5px; color: var(--aviso); }
.app-ilu { width: 140px; height: 140px; flex: none; border-radius: 6px; display: grid; place-items: center; }
.app-ilu svg { width: 120px; height: 100px; }
.menu-pe { display: flex; flex-direction: column; padding: 4px 10px 8px; }
[data-tema="next"] .apps { margin-top: 6px; }
[data-tema="next"] .app-card { border-radius: 6px; border-color: #d6d6d6; }
[data-tema="next"] .app-btn { border-radius: 2px; min-width: 120px; }
[data-tema="next"] .app-btn.primario { font-weight: 700; }
[data-tema="next"] #titulo.sem-titulo-next { visibility: hidden; }
[data-tema="next"] .menu .menu-pe { order: 2; margin-top: auto; padding: 0; border-top: 1px solid #dcdcdc; }
[data-tema="next"] .menu .rodape { order: 3; margin-top: 0; }
@media (max-width: 860px) { .apps { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 520px) {
  .app-card { flex-direction: column-reverse; align-items: stretch; padding: 22px 20px; min-height: 0; }
  .app-ilu { width: 100%; height: 120px; }
}
/* "Aplicativos" fica sempre visível no rodapé da barra lateral */
.menu .menu-pe { position: sticky; bottom: 0; background: var(--menu-fundo); z-index: 2; }
[data-tema="next"] .menu a.item { height: 48px; }

/* ================================================================
   TEMA QUADRADO — o mesmo formato do Next, mas com todos os cantos retos:
   campos, botões, cartões, janelas, abas e selos ficam quadrados.
   Só continuam redondos os círculos de verdade (avatar, botões de ícone,
   bolinha de status e o interruptor de internet).
   Também vale para qualquer tema com "Cantos: Retos" em Aparência.
   ================================================================ */
:is([data-quadrado], [data-cantos="retos"]) { --raio: 0px; --raio-p: 0px; }
:is([data-quadrado], [data-cantos="retos"]) *:not(.btn-circ):not(.avatar):not(.inicial):not(.ponto):not(.interruptor):not(.interruptor *),
:is([data-quadrado], [data-cantos="retos"]) *::before, :is([data-quadrado], [data-cantos="retos"]) *::after { border-radius: 0 !important; }
:is([data-quadrado], [data-cantos="retos"]) .interruptor::after { border-radius: 50% !important; }
:is([data-quadrado], [data-cantos="retos"]) .sync .ponto { border-radius: 50% !important; }
/* campos: borda fina e, ao clicar, borda escura mais grossa — sem brilho em volta */
:is([data-quadrado], [data-cantos="retos"]) input:not([type=checkbox]):not([type=radio]):not([type=range]), :is([data-quadrado], [data-cantos="retos"]) select, :is([data-quadrado], [data-cantos="retos"]) textarea {
  border: 1px solid color-mix(in srgb, var(--texto) 30%, var(--superficie)); box-shadow: none; }
:is([data-quadrado], [data-cantos="retos"]) input:not([type=checkbox]):not([type=radio]):not([type=range]):focus, :is([data-quadrado], [data-cantos="retos"]) select:focus, :is([data-quadrado], [data-cantos="retos"]) textarea:focus {
  outline: none; border-color: var(--texto); box-shadow: inset 0 0 0 1px var(--texto); }
:is([data-quadrado], [data-cantos="retos"]) input[type=checkbox] { border-radius: 0 !important; }
/* busca e campos grandes: retangulares, borda preta */
:is([data-quadrado], [data-cantos="retos"]) .pdv-busca input { border: 2px solid var(--texto); }
/* botões retangulares (principal azul, secundário branco com borda) */
:is([data-quadrado], [data-cantos="retos"]) .btn { padding: 9px 18px; }
/* cartão de escolha do tema mostra a miniatura com cantos retos */
.tema-card[data-tema="quadrado"] .mini, .tema-card[data-tema="quadrado"] .mini * { border-radius: 0 !important; }