/* ==========================================================================
   Base e componentes — Sistema Empresarial (Pires Embalagens)
   Depende de tokens.css. Nenhuma cor literal aqui: só var().
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte-base);
  font-size: var(--txt-base);
  line-height: var(--altura-normal);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--esp-3); line-height: var(--altura-apertada); font-weight: var(--peso-semi); }
h1 { font-size: var(--txt-xl); }
h2 { font-size: var(--txt-lg); }
h3 { font-size: var(--txt-base); }
p  { margin: 0 0 var(--esp-4); }

a { color: var(--cor-marca-texto); text-decoration: none; }
a:hover { text-decoration: underline; }

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

hr { border: 0; border-top: 1px solid var(--cor-borda); margin: var(--esp-6) 0; }

code, kbd, pre { font-family: var(--fonte-mono); font-size: var(--txt-sm); }

/* Foco visível em tudo que é interativo — acessibilidade */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Logo
   A imagem troca sozinha entre claro e escuro via --logo-url.
   ========================================================================== */

.logo {
  display: block;
  width: var(--logo-largura, 150px);
  aspect-ratio: 480 / 351;
  background: var(--logo-url) center / contain no-repeat;
}
.logo--sm { --logo-largura: 110px; }
.logo--lg { --logo-largura: 240px; }

/* Versão <img>: use quando precisar de alt real (login, PDF, e-mail) */
.logo-img { width: var(--logo-largura, 150px); height: auto; }

/* ==========================================================================
   Estrutura: topo + menu lateral + conteúdo
   ========================================================================== */

.app { display: grid; grid-template-columns: var(--largura-menu) 1fr; min-height: 100vh; }

.menu {
  grid-row: 1 / -1;
  background: var(--cor-menu-fundo);
  color: var(--cor-menu-texto);
  padding: var(--esp-4) var(--esp-3);
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
  z-index: var(--z-menu);
}
.menu__marca { padding: var(--esp-2) var(--esp-2) var(--esp-6); }
/* No menu o fundo é sempre escuro — força a arte clara nos dois temas */
.menu__marca .logo { background-image: url("../img/logo-dark.webp"); }

.menu__grupo { margin-bottom: var(--esp-5); }
.menu__titulo {
  font-size: var(--txt-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--cor-texto-fraco); padding: 0 var(--esp-3) var(--esp-2);
}
.menu__item {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-md);
  color: var(--cor-menu-texto);
  font-size: var(--txt-sm);
  transition: background var(--transicao-rapida), color var(--transicao-rapida);
}
.menu__item:hover { background: var(--cor-menu-hover); color: var(--cor-menu-texto-ativo); text-decoration: none; }
.menu__item[aria-current="page"] {
  background: var(--cor-menu-ativo);
  color: var(--cor-sobre-marca);
  font-weight: var(--peso-medio);
}

.topo {
  display: flex; align-items: center; gap: var(--esp-4);
  height: var(--altura-topo);
  padding: 0 var(--esp-6);
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
  position: sticky; top: 0; z-index: var(--z-topo);
}
.topo__espaco { margin-left: auto; }

.conteudo { padding: var(--esp-6); max-width: var(--largura-conteudo); width: 100%; }

.pagina__cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-4); margin-bottom: var(--esp-6); flex-wrap: wrap;
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .menu { position: fixed; inset: 0 auto 0 0; width: var(--largura-menu); transform: translateX(-100%); transition: transform var(--transicao-media); }
  .menu[data-aberto="true"] { transform: none; }
  .conteudo { padding: var(--esp-4); }
}

/* ==========================================================================
   Tela de acesso (login e primeiro acesso)
   ========================================================================== */

.acesso { min-height: 100vh; display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1fr); }

.acesso__marca {
  position: relative; overflow: hidden;
  background: var(--neutro-800);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--esp-12);
}
/* Canelura de papelão ondulado — a textura do próprio produto da empresa */
.acesso__marca::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(236,135,5,.13) 0 2px,
    transparent 2px 7px,
    rgba(255,255,255,.04) 7px 9px,
    transparent 9px 14px);
  mask-image: linear-gradient(160deg, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 78%);
}
.acesso__marca > * { position: relative; }
/* O fundo é escuro nos dois temas — força a arte clara do logo */
.acesso__marca .logo { background-image: url("../img/logo-dark.webp"); }

.acesso__frase { max-width: 22ch; }
.acesso__frase h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  color: var(--neutro-0); font-weight: var(--peso-semi); letter-spacing: -.01em;
}
.acesso__frase p { color: var(--neutro-400); font-size: .9375rem; margin: var(--esp-4) 0 0; }

.acesso__fluxo {
  display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center;
  font-size: var(--txt-xs); letter-spacing: .04em; text-transform: uppercase;
  color: var(--neutro-500);
}
.acesso__fluxo b { color: var(--marca-400); font-weight: var(--peso-semi); }

.acesso__form {
  display: flex; align-items: center; justify-content: center;
  padding: var(--esp-8); background: var(--cor-superficie);
}
.acesso__caixa { width: 100%; max-width: 380px; }
.acesso__caixa h1 { font-size: var(--txt-xl); margin-bottom: var(--esp-1); }
.acesso__caixa .sub { color: var(--cor-texto-suave); font-size: var(--txt-sm); margin: 0 0 var(--esp-6); }

.linha-entre {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-3); margin-bottom: var(--esp-5); font-size: var(--txt-sm);
}
.lembrar { display: flex; align-items: center; gap: var(--esp-2); color: var(--cor-texto-suave); }
.lembrar input { accent-color: var(--marca-600); width: 16px; height: 16px; }
.btn--bloco { width: 100%; min-height: 42px; }

@media (max-width: 900px) {
  .acesso { grid-template-columns: 1fr; }
  .acesso__marca { padding: var(--esp-6); gap: var(--esp-6); }
  .acesso__marca::before {
    mask-image: linear-gradient(160deg, #000 0%, transparent 90%);
    -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 90%);
  }
}

/* ==========================================================================
   Topo — busca, ações e usuário
   ========================================================================== */

.busca { position: relative; flex: 1; max-width: 340px; }
.busca .input { padding-left: 32px; min-height: 34px; background: var(--cor-superficie-alt); border-color: transparent; }
.busca .lupa {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--cor-texto-fraco); font-size: var(--txt-sm); pointer-events: none;
}

.seletor-empresa {
  min-height: 34px; padding: 0 var(--esp-2); font-size: var(--txt-sm);
  background: var(--cor-superficie-alt); color: var(--cor-texto);
  border: 1px solid var(--cor-borda); border-radius: var(--r-md, var(--raio-md));
  max-width: 220px;
}

.avatar {
  width: 32px; height: 32px; border-radius: var(--raio-full); flex: none;
  background: var(--marca-500); color: var(--neutro-950);
  display: grid; place-items: center;
  font-size: var(--txt-xs); font-weight: var(--peso-bold);
}

.menu__usuario { display: flex; align-items: center; gap: var(--esp-3); }
.menu__usuario .quem { min-width: 0; flex: 1; }
.menu__usuario .nome,
.menu__usuario .papel { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu__usuario .nome  { color: var(--neutro-0); font-size: .8125rem; font-weight: var(--peso-medio); }
.menu__usuario .papel { color: var(--neutro-500); font-size: .6875rem; }

/* ==========================================================================
   Card
   ========================================================================== */

.card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
}
.card__cabecalho {
  padding: var(--esp-4) var(--esp-5);
  border-bottom: 1px solid var(--cor-borda);
  font-weight: var(--peso-semi);
}
.card__corpo { padding: var(--esp-5); }
.card__rodape {
  padding: var(--esp-4) var(--esp-5);
  border-top: 1px solid var(--cor-borda);
  display: flex; gap: var(--esp-3); justify-content: flex-end;
}

/* KPI do dashboard */
.kpi { padding: var(--esp-5); }
.kpi__rotulo { font-size: var(--txt-sm); color: var(--cor-texto-suave); margin-bottom: var(--esp-1); }
.kpi__valor  { font-size: var(--txt-3xl); font-weight: var(--peso-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi__nota   { font-size: var(--txt-xs); color: var(--cor-texto-fraco); margin-top: var(--esp-2); }

/* ==========================================================================
   Botões
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-4);
  min-height: 38px;
  font: inherit; font-size: var(--txt-sm); font-weight: var(--peso-medio);
  border: 1px solid transparent;
  border-radius: var(--raio-md);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transicao-rapida), border-color var(--transicao-rapida), color var(--transicao-rapida);
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn--primario   { background: var(--cor-marca); color: var(--cor-sobre-marca); }
.btn--primario:hover { background: var(--cor-marca-hover); }

.btn--secundario { background: var(--cor-superficie); color: var(--cor-texto); border-color: var(--cor-borda-forte); }
.btn--secundario:hover { background: var(--cor-superficie-hover); }

.btn--fantasma   { background: transparent; color: var(--cor-texto-suave); }
.btn--fantasma:hover { background: var(--cor-superficie-hover); color: var(--cor-texto); }

.btn--perigo     { background: var(--cor-erro-texto); color: var(--neutro-0); }
.btn--perigo:hover { filter: brightness(1.1); }

.btn--sm { min-height: 30px; padding: var(--esp-1) var(--esp-3); font-size: var(--txt-xs); }
.btn--lg { min-height: 46px; padding: var(--esp-3) var(--esp-6); font-size: var(--txt-base); }

/* ==========================================================================
   Formulários
   ========================================================================== */

.campo { margin-bottom: var(--esp-4); }
.campo__rotulo {
  display: block; margin-bottom: var(--esp-1);
  font-size: var(--txt-sm); font-weight: var(--peso-medio); color: var(--cor-texto);
}
.campo__rotulo[data-obrigatorio]::after { content: " *"; color: var(--cor-erro-texto); }

.input, .select, .textarea {
  width: 100%;
  padding: var(--esp-2) var(--esp-3);
  min-height: 38px;
  font: inherit; font-size: var(--txt-sm);
  color: var(--cor-texto);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-md);
  transition: border-color var(--transicao-rapida), box-shadow var(--transicao-rapida);
}
.input::placeholder, .textarea::placeholder { color: var(--cor-texto-fraco); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--cor-marca);
  box-shadow: var(--anel-foco);
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--cor-superficie-alt); color: var(--cor-texto-fraco); cursor: not-allowed;
}
.input[aria-invalid="true"] { border-color: var(--cor-erro); }
.textarea { min-height: 96px; resize: vertical; }

/* Valores monetários e quantidades alinham à direita e usam cifra tabular */
.input--numero { text-align: right; font-variant-numeric: tabular-nums; }

.campo__ajuda { font-size: var(--txt-xs); color: var(--cor-texto-suave); margin-top: var(--esp-1); }
.campo__erro  { font-size: var(--txt-xs); color: var(--cor-erro-texto); margin-top: var(--esp-1); }

/* Grade de formulário — 12 colunas.
   REGRA DO PROJETO: campos ficam lado a lado sempre que couberem. Um campo por
   linha só quando o conteúdo pede a largura toda (razão social, descrição,
   observação). Formulário em coluna única obriga a rolar e cansa quem digita
   o dia inteiro. */
.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--esp-4); }
.col-1 { grid-column: span 1; } .col-2  { grid-column: span 2; }
.col-3 { grid-column: span 3; } .col-4  { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-6  { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-8  { grid-column: span 8; }
.col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; }
.col-11{ grid-column: span 11;} .col-12 { grid-column: span 12; }

@media (max-width: 860px) {
  /* No estreito, o que era pequeno vira metade; o que era grande ocupa tudo */
  .form-grid > .col-1, .form-grid > .col-2, .form-grid > .col-3,
  .form-grid > .col-4, .form-grid > .col-5, .form-grid > .col-6 { grid-column: span 6; }
  .form-grid > .col-7, .form-grid > .col-8, .form-grid > .col-9,
  .form-grid > .col-10, .form-grid > .col-11, .form-grid > .col-12 { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .form-grid > [class*="col-"] { grid-column: 1 / -1; }
}

/* Título de seção dentro de formulário */
.secao-titulo {
  grid-column: 1 / -1;
  font-size: var(--txt-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--cor-texto-suave); font-weight: var(--peso-semi);
  margin: var(--esp-5) 0 var(--esp-3);
  padding-bottom: var(--esp-2); border-bottom: 1px solid var(--cor-borda);
}
.secao-titulo:first-child { margin-top: 0; }

/* ==========================================================================
   Tabelas — listagens de produtos, pedidos, títulos
   ========================================================================== */

.tabela-wrap { overflow-x: auto; }

.tabela { width: 100%; border-collapse: collapse; font-size: var(--txt-sm); }
.tabela th {
  text-align: left; font-weight: var(--peso-semi);
  color: var(--cor-texto-suave);
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--cor-borda-forte);
  background: var(--cor-superficie-alt);
  white-space: nowrap;
}
.tabela td { padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--cor-borda); }
.tabela tbody tr:hover { background: var(--cor-superficie-hover); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela .acoes { text-align: right; white-space: nowrap; }
.tabela__vazia { padding: var(--esp-10); text-align: center; color: var(--cor-texto-suave); }

.valor--entrada { color: var(--cor-entrada); font-weight: var(--peso-medio); }
.valor--saida   { color: var(--cor-saida);   font-weight: var(--peso-medio); }

/* ==========================================================================
   Badges de status
   ========================================================================== */

.badge {
  display: inline-flex; align-items: center; gap: var(--esp-1);
  padding: 2px var(--esp-2);
  font-size: var(--txt-xs); font-weight: var(--peso-medio);
  border-radius: var(--raio-full);
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge--neutro  { background: var(--cor-superficie-alt); color: var(--cor-texto-suave); border-color: var(--cor-borda); }
.badge--sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); border-color: var(--cor-sucesso-borda); }
.badge--aviso   { background: var(--cor-aviso-fundo);   color: var(--cor-aviso-texto);   border-color: var(--cor-aviso-borda); }
.badge--erro    { background: var(--cor-erro-fundo);    color: var(--cor-erro-texto);    border-color: var(--cor-erro-borda); }
.badge--info    { background: var(--cor-info-fundo);    color: var(--cor-info-texto);    border-color: var(--cor-info-borda); }
.badge--marca   { background: var(--cor-marca-suave);   color: var(--cor-marca-texto);   border-color: var(--cor-marca-borda); }

/* ==========================================================================
   Alertas
   ========================================================================== */

.alerta {
  display: flex; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid transparent;
  border-radius: var(--raio-md);
  font-size: var(--txt-sm);
  margin-bottom: var(--esp-4);
}
.alerta--sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); border-color: var(--cor-sucesso-borda); }
.alerta--aviso   { background: var(--cor-aviso-fundo);   color: var(--cor-aviso-texto);   border-color: var(--cor-aviso-borda); }
.alerta--erro    { background: var(--cor-erro-fundo);    color: var(--cor-erro-texto);    border-color: var(--cor-erro-borda); }
.alerta--info    { background: var(--cor-info-fundo);    color: var(--cor-info-texto);    border-color: var(--cor-info-borda); }

/* ==========================================================================
   Alternador de tema
   ========================================================================== */

.tema-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
  cursor: pointer;
}
.tema-toggle:hover { background: var(--cor-superficie-hover); color: var(--cor-texto); }
/* Mostra o ícone do tema que será aplicado ao clicar */
.tema-toggle .icone-escuro { display: none; }
:root[data-tema="escuro"] .tema-toggle .icone-claro  { display: none; }
:root[data-tema="escuro"] .tema-toggle .icone-escuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema-toggle .icone-claro  { display: none; }
  :root:not([data-tema="claro"]) .tema-toggle .icone-escuro { display: block; }
}

/* ==========================================================================
   Utilitários
   ========================================================================== */

.grid { display: grid; gap: var(--esp-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.flex { display: flex; gap: var(--esp-3); align-items: center; }
.flex--fim { justify-content: flex-end; }
.texto-suave { color: var(--cor-texto-suave); }
.texto-sm { font-size: var(--txt-sm); }
.num { font-variant-numeric: tabular-nums; }

.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Impressão — relatórios e documentos saem sempre em tema claro
   ========================================================================== */

@media print {
  :root { --cor-fundo: #FFF; --cor-superficie: #FFF; --cor-texto: #000; --cor-borda: #CCC; }
  .menu, .topo, .tema-toggle, .acoes, .btn { display: none !important; }
  .app { display: block; }
  .conteudo { padding: 0; max-width: none; }
  .card { border: 0; box-shadow: none; }
  .logo { background-image: url("../img/logo.webp"); }
  a[href]::after { content: ""; }
}