/* Tema escuro da Primus Tech: preto, dourado e prata (identidade/design-guide.md) */
:root {
  --fundo: #0B0B0B; --fundo-2: #131313; --card: #181818; --card-2: #1F1F1F; --campo: #121212;
  --ouro: #C9A04E; --ouro-claro: #E2C27A; --texto: #ECECEC; --suave: #A9A9A9;
  --linha: rgba(201, 160, 78, .22); --linha-neutra: rgba(255, 255, 255, .09); --borda-campo: #3A3A3A;
  --ok: #8FCFA6; --alerta: #2A2312; --alerta-b: #6B5526; --perigo: #2C1616; --perigo-t: #F0A3A3; --perigo-b: #5A2A2A;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--fundo); }
body { margin: 0; min-height: 100dvh; color: var(--texto); font: 500 15px/1.5 Montserrat, system-ui, sans-serif; overscroll-behavior-y: none; -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 90% 100%, rgba(201, 160, 78, .09) 0, transparent 70%), var(--fundo); }
h1, h2 { font-family: Michroma, Montserrat, sans-serif; font-weight: 400; line-height: 1.25; margin: 0; color: var(--texto); letter-spacing: .01em; }
h1 { font-size: 22px; } h2 { font-size: 14px; color: var(--ouro-claro); text-transform: uppercase; letter-spacing: .06em; }
p { margin: 0; }
a { color: inherit; }
.carregando { padding: 40px 16px; text-align: center; color: var(--suave); }
.ic { width: 19px; height: 19px; flex: none; display: block; }

button, .botao { font: 600 15px Montserrat, system-ui, sans-serif; border: 1px solid transparent; border-radius: 999px; min-height: 48px; padding: 11px 18px; cursor: pointer; background: var(--ouro); color: #0B0B0B; }
.botao { display: flex; align-items: center; justify-content: center; text-decoration: none; }
button:hover { filter: brightness(1.08); }
button:active { filter: brightness(.92); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 2px; }
button.sec, .botao.sec { background: transparent; color: var(--ouro-claro); border-color: var(--linha); }
button.sec:hover, .botao.sec:hover { background: rgba(201, 160, 78, .1); filter: none; }
button.perigo { background: var(--perigo); color: var(--perigo-t); border-color: var(--perigo-b); }
button.icone { background: none; color: var(--ouro-claro); min-height: 44px; min-width: 44px; padding: 8px; font-size: 19px; border: 0; }
button.pequeno { min-height: 38px; padding: 6px 13px; font-size: 13px; }

label { display: block; font-weight: 600; font-size: 13px; margin: 14px 0 5px; color: var(--texto); }
label small { font-weight: 500; color: var(--suave); }
input, select, textarea { width: 100%; font: 500 16px Montserrat, system-ui, sans-serif; color: var(--texto); background: var(--campo); border: 1px solid var(--borda-campo); border-radius: 12px; padding: 11px 14px; min-height: 48px; }
input::placeholder { color: #777; }
select option { background: var(--card); color: var(--texto); }
input[type=checkbox] { width: 22px; height: 22px; min-height: 0; flex: none; margin: 1px 0 0; accent-color: var(--ouro); }
input[type=color] { padding: 3px; width: 48px; flex: none; cursor: pointer; }
.marcar { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }

/* Estrutura: barra lateral e conteúdo */
.casca { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 22px; max-width: 1360px; margin: 0 auto; padding: 24px; }
.lateral { position: sticky; top: 24px; align-self: start; }
.principal { min-width: 0; }
.marca { display: flex; align-items: center; gap: 10px; padding: 6px 8px 20px; }
.marca img { width: 40px; height: 40px; display: block; }
.marca b { font: 400 13px/1.25 Michroma, Montserrat, sans-serif; color: var(--texto); letter-spacing: .1em; }
.marca b span { color: var(--ouro); }
.lateral nav { display: grid; gap: 6px; }
.lateral nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 999px; color: var(--suave); font-weight: 600; text-decoration: none; border: 1px solid transparent; }
.lateral nav a:hover { color: var(--texto); background: var(--card); }
.lateral nav a.ativo { background: rgba(201, 160, 78, .13); color: var(--ouro-claro); border-color: var(--linha); }
.lateral .separa { height: 1px; background: var(--linha-neutra); margin: 8px 10px; }
.num-fora { margin-left: auto; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--card-2); color: var(--ouro-claro); }
.barra-cel { display: none; }

/* Topo */
.saudacao { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.saudacao .suave { margin-top: 4px; }
.atalhos { display: flex; align-items: center; gap: 6px; }
.atalhos a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--ouro-claro); text-decoration: none; }
.atalhos .avatar { background: var(--ouro); color: #0B0B0B; font-weight: 700; font-size: 15px; }
.topo { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.topo h1 { flex: 1; font-size: 17px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo.fixo { position: sticky; top: 10px; z-index: 5; padding: 4px 16px 4px 5px; border-radius: 999px; background: rgba(24, 24, 24, .92); backdrop-filter: blur(10px); border: 1px solid var(--linha-neutra); }

/* Abas e ações */
.abas { display: flex; gap: 24px; padding: 13px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--linha-neutra); margin-bottom: 10px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.abas a { color: var(--suave); font-weight: 600; text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.abas a:hover { color: var(--texto); }
.abas a.ativa { color: var(--ouro-claro); border-bottom-color: var(--ouro); }
.abas span { font-weight: 500; opacity: .7; margin-left: 5px; }
.barra-acoes { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.barra-acoes button { white-space: nowrap; flex: none; }
.campo-busca { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 16px; min-height: 48px; background: var(--campo); border: 1px solid var(--borda-campo); border-radius: 999px; color: var(--suave); font-weight: 500; font-size: 15px; }
.campo-busca:focus-within { outline: 2px solid var(--ouro-claro); outline-offset: 2px; }
.campo-busca input { border: 0; padding: 0; min-height: 44px; border-radius: 0; background: none; }
.campo-busca input:focus-visible { outline: none; }
select.filtro { flex: none; width: 210px; border-radius: 999px; padding-inline: 16px; }
.contagem { margin: 0 0 10px 6px; }

/* Tabela de produtos */
.tabela { background: var(--card); border: 1px solid var(--linha-neutra); border-radius: 18px; padding: 10px; }
.cabecalho, .item { display: grid; grid-template-columns: minmax(240px, 2.4fr) 1.1fr 1.1fr .9fr .9fr 44px; gap: 12px; align-items: center; }
.cabecalho { padding: 9px 12px; font-size: 12px; font-weight: 600; color: var(--suave); border-bottom: 1px solid var(--linha-neutra); }
.lista { display: grid; }
.item { min-height: 68px; padding: 9px 12px; font-size: 14px; border-bottom: 1px solid var(--linha-neutra); cursor: pointer; border-radius: 0; }
.item:last-child { border-bottom: 0; }
.item:hover { background: var(--card-2); border-radius: 12px; }
.prod { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.prod img { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; background: #121212; flex: none; padding: 3px; display: block; }
.txt { min-width: 0; }
.nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; line-height: 1.25; }
.det { display: block; color: var(--suave); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat, .qtd { color: var(--suave); font-size: 13px; }
.preco { color: var(--ouro-claro); font-weight: 700; white-space: nowrap; }
.preco small { display: block; color: var(--suave); font-weight: 500; font-size: 11px; }
.sit { font-size: 12px; font-weight: 600; white-space: nowrap; }
.sit::before { content: '● '; font-size: 9px; vertical-align: 1px; }
.sit.no { color: var(--ok); } .sit.fora { color: var(--perigo-t); } .sit.esg { color: var(--ouro-claro); }
.linha-menu { position: relative; justify-self: center; }
button.tres { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border-radius: 50%; background: none; color: var(--suave); font-size: 20px; line-height: 1; border: 0; }
button.tres:hover, button.tres[aria-expanded=true] { background: var(--card-2); color: var(--ouro-claro); filter: none; }
.menu-produto { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: grid; gap: 2px; width: 196px; padding: 6px; background: #222; border: 1px solid var(--linha); border-radius: 14px; box-shadow: 0 14px 32px rgb(0 0 0 / .6); }
.menu-produto.acima { top: auto; bottom: calc(100% + 4px); }
.menu-produto button { width: 100%; min-height: 42px; padding: 8px 12px; text-align: left; border-radius: 10px; border: 0; background: none; color: var(--texto); font-size: 14px; font-weight: 500; }
.menu-produto button:hover { background: rgba(201, 160, 78, .13); filter: none; }
.menu-produto button.perigo { color: var(--perigo-t); }
.menu-produto button.perigo:hover { background: var(--perigo); }
.vazio { padding: 28px 14px; text-align: center; }
.paginas { display: flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; margin-top: 14px; }
.paginas button { min-width: 38px; min-height: 36px; padding: 2px 8px; background: var(--card); color: var(--suave); font-size: 14px; }
.paginas button.ativa { background: var(--ouro); color: #0B0B0B; }
.paginas span { color: var(--suave); padding-inline: 2px; }

/* Cartões e formulário */
.conteudo { max-width: 760px; }
.conteudo.larga { max-width: none; }
.topo.fixo:has(+ .conteudo:not(.larga)) { max-width: 760px; }
.cartao { background: var(--card); border: 1px solid var(--linha-neutra); border-radius: 18px; padding: 18px; margin-bottom: 12px; }
.suave { color: var(--suave); font-size: 13px; }
.cartao > .suave { margin-top: 6px; }
.grade-form { display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-areas: 'foto dados' 'foto acoes'; gap: 14px; align-items: start; }
.col-dados { grid-area: dados; } .col-dados > .cartao:last-child { margin-bottom: 0; }
.col-acoes { grid-area: acoes; } .col-acoes .acoes { margin-top: 0; }
.col-foto { grid-area: foto; position: sticky; top: 76px; margin-bottom: 0; max-height: calc(100dvh - 92px); overflow-y: auto; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acoes { display: grid; gap: 8px; margin-top: 16px; }
.mais { width: 100%; margin-top: 12px; }
.mais-campos summary { cursor: pointer; font-weight: 600; color: var(--ouro-claro); padding: 10px 0; }
.mais-campos[open] summary { margin-bottom: 4px; }
.cartao > .mais-campos > summary { font: 400 14px Michroma, Montserrat, sans-serif; text-transform: uppercase; letter-spacing: .06em; padding: 0; }
.cartao > .mais-campos[open] > summary { margin-bottom: 8px; }
.cartao > .marcar, .cartao div > .marcar { margin-top: 14px; }

.lista-cores { display: grid; gap: 8px; margin-top: 12px; }
.linha-cor { display: flex; gap: 8px; align-items: center; }
.linha-cor input:not([type=color]) { flex: 1; min-width: 0; }
.lista-ficha { display: grid; gap: 8px; margin-top: 10px; }
.linha-ficha { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 44px; gap: 8px; align-items: center; }

.lista-opcoes { display: grid; gap: 10px; margin-top: 12px; }
.linha-opcao { background: var(--fundo-2); border: 1px solid var(--linha-neutra); border-radius: 14px; padding: 12px 14px 14px; }
.linha-opcao.esgotada { border-color: var(--alerta-b); }
.opcao-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.opcao-topo b { font-size: 13px; color: var(--ouro-claro); }
.botoes-linha { margin-left: auto; display: flex; gap: 6px; }
.grade-opcao { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 10px; align-items: end; }
.campinho.largo { grid-column: span 2; }
label.marcar.campinho { margin: 0 0 13px; }

.bloco-foto { padding: 12px 0; border-bottom: 1px solid var(--linha-neutra); }
.bloco-foto:last-child { border-bottom: 0; padding-bottom: 0; }
.foto-titulo { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.bolinha { width: 14px; height: 14px; border-radius: 50%; display: block; border: 1px solid rgba(255, 255, 255, .25); }
.miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin-bottom: 8px; }
.mini-foto { position: relative; aspect-ratio: 1; }
.mini-abre { width: 100%; height: 100%; min-height: 0; padding: 4px; border-radius: 10px; background: radial-gradient(circle at 50% 62%, rgba(201, 160, 78, .18), transparent 64%), #121212; border: 1px solid var(--linha-neutra); display: block; }
.primeira .mini-abre { border-color: var(--ouro); }
.mini-abre img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mini-tira { position: absolute; top: -5px; right: -5px; width: 24px; height: 24px; min-height: 0; padding: 0; line-height: 1; font-size: 15px; background: #333; color: #fff; border-radius: 50%; }
.mini-botoes { display: flex; gap: 6px; flex-wrap: wrap; }

.login { min-height: 100dvh; display: grid; place-items: center; padding: 20px 16px; }
.login form { width: min(100%, 400px); background: var(--card); border: 1px solid var(--linha); border-radius: 20px; padding: 24px 22px; }
.login .marca { padding: 0 0 18px; }
.login h1 { font-size: 18px; margin-bottom: 4px; }
.login button:not(.icone) { width: 100%; margin-top: 18px; }
.campo-senha { position: relative; }
.campo-senha input { padding-right: 52px; }
.login .ver-senha { position: absolute; top: 2px; right: 2px; width: 44px; margin: 0; display: grid; place-items: center; border-radius: 12px; }

.aviso-caixa { border-radius: 12px; padding: 10px 12px; font-size: 14px; margin: 10px 0; background: var(--alerta); border: 1px solid var(--alerta-b); }
.aviso-caixa.erro { background: var(--perigo); border-color: var(--perigo-b); color: var(--perigo-t); }
.aviso-caixa.ok { background: #14261B; border-color: #2F5A40; color: var(--ok); }

.grade-fotos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
@media (min-width: 620px) { .grade-fotos { grid-template-columns: repeat(3, 1fr); } }
.opcao-foto { display: block; width: 100%; min-height: 0; padding: 8px; background: #121212; color: var(--suave); border: 1px solid var(--linha-neutra); border-radius: 12px; text-align: left; font-weight: 500; font-size: 12px; line-height: 1.25; }
.opcao-foto:hover { border-color: var(--ouro); filter: none; }
.opcao-foto img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; margin-bottom: 6px; }
.opcao-foto b { display: block; color: var(--texto); margin-bottom: 2px; }

.corte { width: min(100%, 420px); margin: 0 auto; }
.corte canvas { display: block; width: 100%; aspect-ratio: 1; border-radius: 14px; border: 1px solid var(--linha); background: radial-gradient(circle at 50% 62%, rgba(201, 160, 78, .2), transparent 64%), #121212; touch-action: none; cursor: grab; }
input[type=range] { min-height: 32px; padding: 0; border: 0; background: none; accent-color: var(--ouro); }

dialog { border: 1px solid var(--linha); border-radius: 20px; padding: 20px; width: min(calc(100% - 32px), 460px); max-height: calc(100dvh - 24px); color: var(--texto); background: var(--card); }
dialog.grande { width: min(calc(100% - 24px), 700px); }
dialog::backdrop { background: rgb(0 0 0 / .72); }
dialog h2 { margin-bottom: 10px; }
dialog p { font-size: 14px; }
dialog .acoes { margin-top: 14px; }

.lista-estoque { display: grid; gap: 8px; margin-top: 12px; }
.linha-estoque { display: grid; gap: 8px; padding: 12px; background: var(--fundo-2); border: 1px solid var(--linha-neutra); border-radius: 12px; }
.linha-estoque.esgotada { border-color: var(--alerta-b); }
.linha-estoque .info { display: grid; font-size: 14px; }
.unidades { display: flex; flex-wrap: wrap; gap: 6px; }

.hist { padding: 10px 0; border-bottom: 1px solid var(--linha-neutra); }
.hist:last-child { border-bottom: 0; }
.hist .acao { font-weight: 600; }
.hist button { margin-top: 6px; min-height: 38px; padding: 6px 14px; font-size: 13px; }

#aviso { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(92px, calc(env(safe-area-inset-bottom) + 84px)); z-index: 30; background: var(--ouro); color: #0B0B0B; padding: 10px 16px; border-radius: 12px; width: max-content; max-width: calc(100% - 32px); text-align: center; font-weight: 600; box-shadow: 0 6px 20px rgb(0 0 0 / .5); }
@media (prefers-reduced-motion: no-preference) { button { transition: filter .1s, background-color .12s; } .item { transition: background-color .12s; } }

/* Tabela vira cartões */
@media (max-width: 1080px) {
  .cabecalho { display: none; }
  .tabela { padding: 4px 12px; }
  .item { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'p p t' 'v q s'; gap: 6px 10px; padding: 12px 2px; }
  .item:hover { background: none; border-radius: 0; }
  .prod { grid-area: p; } .linha-menu { grid-area: t; }
  .preco { grid-area: v; padding-left: 60px; } .qtd { grid-area: q; } .sit { grid-area: s; justify-self: end; }
  .cat { display: none; }
  .barra-acoes { flex-wrap: wrap; }
  .campo-busca { order: -1; flex: 1 1 100%; }
  .barra-acoes .novo, select.filtro { flex: 1 1 0; width: auto; min-width: 0; }
}

/* Celular */
@media (max-width: 820px) {
  .casca { display: block; padding: max(14px, env(safe-area-inset-top)) 14px calc(96px + env(safe-area-inset-bottom)); }
  .casca.sem-barra { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .lateral { position: static; }
  .lateral nav { display: none; }
  .marca { padding: 0 0 12px; }
  h1 { font-size: 19px; }
  .saudacao { align-items: flex-start; }
  .so-grande { display: none !important; }
  .abas { gap: 20px; padding: 12px 16px; }
  .grade-form { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'dados' 'foto' 'acoes'; }
  .col-foto { position: static; max-height: none; }
  .grade-opcao { grid-template-columns: 1fr 1fr; }
  label.marcar.campinho { margin-top: 14px; }
  .topo.fixo { top: max(8px, env(safe-area-inset-top)); }
  .paginas { margin-inline: auto; }
  .paginas button { min-width: 40px; min-height: 40px; }
  .barra-cel { position: fixed; z-index: 6; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px; border-radius: 20px; background: #1C1C1C; border: 1px solid var(--linha); box-shadow: 0 8px 28px rgb(0 0 0 / .6); }
  .barra-cel a { display: grid; justify-items: center; gap: 2px; padding: 7px 2px; border-radius: 14px; font-size: 12px; font-weight: 600; color: var(--suave); text-decoration: none; }
  .barra-cel a.ativo { background: rgba(201, 160, 78, .16); color: var(--ouro-claro); }
  .barra-cel .ic { width: 20px; height: 20px; }
}