/* ==========================================================================
   Painel Duloren — folha única de estilo
   Fichas no topo. Mexer aqui muda o painel inteiro.
   ========================================================================== */

:root{
  /* cor */
  --tinta:#1d1a23;
  --tinta-suave:#6b6675;
  --tinta-fraca:#9d97a6;
  --fundo:#f6f5f8;
  --papel:#fff;
  --linha:#e9e6ee;
  --linha-forte:#d8d3e0;

  --marca:#8b3a5e;
  --marca-escura:#6e2c4a;
  --marca-clara:#fbf1f5;

  --ok:#1a6b3c;      --ok-fundo:#eaf5ee;      --ok-borda:#bfe0cc;
  --erro:#a52218;    --erro-fundo:#fdeeec;    --erro-borda:#f3c9c4;
  --alerta:#7a5600;  --alerta-fundo:#fdf5e3;  --alerta-borda:#eddcb0;

  /* forma */
  --raio:14px;
  --raio-p:10px;
  --sombra:0 1px 2px rgba(29,26,35,.05), 0 8px 24px rgba(29,26,35,.06);
  --sombra-alta:0 2px 6px rgba(29,26,35,.08), 0 20px 50px rgba(29,26,35,.14);

  /* movimento */
  --transicao:.18s cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  background:var(--fundo);
  color:var(--tinta);
  font:400 16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ========================================================== marca */

.marca{display:flex;align-items:center;gap:11px}
.marca .selo{
  width:36px;height:36px;flex:0 0 36px;border-radius:11px;
  background:linear-gradient(145deg,var(--marca),var(--marca-escura));
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:17px;
  letter-spacing:.5px;box-shadow:0 3px 10px rgba(139,58,94,.3);
}
.marca .nome{font-weight:650;font-size:16px;letter-spacing:-.01em;line-height:1.2}
.marca .nome span{display:block;font-weight:400;font-size:12px;color:var(--tinta-fraca);letter-spacing:.02em}

/* ========================================================== entrada */

body.entrada{
  display:grid;place-items:center;padding:24px;
  position:relative;overflow:hidden;
  /* fundo de reserva: aparece se a foto não existir */
  background:linear-gradient(158deg,#5f4e43 0%,#927868 45%,#4a3d34 100%);
}

/* foto de fundo, com respiração lenta */
.fundo-foto{
  position:fixed;inset:-2%;z-index:0;
  background-image:url("fundo.webp"),
                   url("data:image/jpeg;base64,/9j//gAQTGF2YzYxLjE5LjEwMQD/2wBDAAgQEBMQExYWFhYWFhoYGhsbGxoaGhobGxsdHR0iIiIdHR0bGx0dICAiIiUmJSMjIiMmJigoKDAwLi44ODpFRVP/xAB2AAACAwEBAAAAAAAAAAAAAAAGBQEEAwcCAQEBAQEAAAAAAAAAAAAAAAAEAgEFEAABAwMCBAYBBQEAAAAAAAABEQMCEgAxBCFBMiIFcZFhUlET0cGhktKBFREAAgICAwEBAAAAAAAAAAAAAAECESHwEwMSYUH/wAARCAAXACQDASIAAhEAAxEA/9oADAMBAAIRAxEAPwAZdGjIdo1MigFDfWCtQWoSim3C2E9PNxyAb1IfAkZEzp6JEop6VKgBfC7TbQeJcf0rTYckBtJZSKrvtFFHmc23ekRVOkhuEJcSUAK+GLG57g6CW5Ezmm1BI+5pkghVTpJrXmCdRH7WohChEaKlsTFM1Xfn3x6x9b6rDUMuREhEgwQCoIhTbBNjD/bdING44GQHSCahOfNVnP6XcewmUWeC5OR3lLA9sjgZQhD6HcXFR90/4j82OR14gEJb4ZlE4AHtvT/ox+W/OP8AW1WHyUXtfJ2TG0oxbBqFXMotq53BoQjBuuUa6p1JuKEIHzv82F3IxZvCL5H8DzT9zbDnWTQhXpB3TbAvRzvVJRlsUDBkoJ/yOwvng4+F7DAvFBFObr8NH11Ds3ZALMqUxi6n0i7oubUGs//Z");
  background-size:cover,cover;background-position:center,center;
  animation:respirar 34s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes respirar{
  from{transform:scale(1)}
  to  {transform:scale(1.09)}
}
/* véu: garante leitura do texto seja qual for a foto */
.fundo-foto::after{
  content:'';position:absolute;inset:0;
  background:
    /* escurece atrás do cartão e some em direção às bordas */
    radial-gradient(ellipse 52% 58% at 50% 47%,
      rgba(9,14,22,.82) 0%, rgba(9,14,22,.62) 46%, rgba(9,14,22,.22) 100%),
    /* leve véu geral, só para o texto do topo respirar */
    linear-gradient(180deg, rgba(9,14,22,.40) 0%, rgba(9,14,22,.30) 50%, rgba(9,14,22,.44) 100%);
}

.portao{position:relative;z-index:1;width:100%;max-width:404px}

.portao .topo{
  text-align:center;margin-bottom:26px;
  animation:surgir .6s cubic-bezier(.2,.7,.3,1) .05s both;
}
.portao .selo{
  width:58px;height:58px;border-radius:18px;margin:0 auto 17px;
  background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.08));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.32);
  display:grid;place-items:center;color:#fff;font-weight:600;font-size:24px;letter-spacing:.5px;
  box-shadow:0 8px 26px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.34);
}
.portao h1{
  font-size:26px;font-weight:600;margin:0 0 7px;letter-spacing:-.022em;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.portao .legenda{
  color:rgba(255,255,255,.72);font-size:13.5px;margin:0;letter-spacing:.01em;
  text-shadow:0 1px 10px rgba(0,0,0,.35);
}

/* cartão de vidro */
.portao .cartao{
  padding:30px 28px;border-radius:20px;
  background:rgba(255,255,255,.13);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 24px 64px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.24);
  color:#fff;
  animation:surgir .6s cubic-bezier(.2,.7,.3,1) .16s both;
}
/* navegador sem suporte a vidro: cartão sólido escuro, continua legível */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .portao .cartao{background:rgba(32,18,28,.86)}
  .portao .selo{background:rgba(255,255,255,.18)}
}

.portao .cartao > h2{font-size:19px;margin-bottom:7px;letter-spacing:-.012em;color:#fff}
.portao .cartao .sub{color:rgba(255,255,255,.74)}
.portao label{color:rgba(255,255,255,.9)}
.portao .dica{color:rgba(255,255,255,.6)}

.portao input[type=password],
.portao input[type=text],
.portao input[type=email]{
  background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.28);
  color:#fff;
}
.portao input::placeholder{color:rgba(255,255,255,.48)}
.portao input:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.17)}
.portao input:focus{
  border-color:rgba(255,255,255,.72);background:rgba(255,255,255,.2);
  box-shadow:0 0 0 4px rgba(255,255,255,.14);
}

/* botão branco com texto da marca: contraste alto sobre o vidro */
.portao button.principal{
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.95);color:var(--marca-escura);
  box-shadow:0 6px 20px rgba(0,0,0,.24);
}
.portao button.principal:hover{background:#fff;transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(0,0,0,.3)}
.portao button.principal::after{
  content:'';position:absolute;top:0;bottom:0;left:-60%;width:42%;
  background:linear-gradient(100deg,transparent,rgba(139,58,94,.16),transparent);
  transform:skewX(-18deg);transition:left .55s ease;
}
.portao button.principal:hover::after{left:120%}

/* avisos sobre o vidro */
.portao .aviso{
  color:#fff;border-color:rgba(255,255,255,.24);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:surgir .4s ease both;
}
.portao .aviso.ok,
.portao .aviso.erro,
.portao .aviso.alerta{color:#fff;border-color:rgba(255,255,255,.26)}
.portao .aviso.ok{background:rgba(19,88,50,.62)}
.portao .aviso.erro{background:rgba(142,28,22,.64)}
.portao .aviso.alerta{background:rgba(112,76,0,.62)}

.portao .rodape{
  text-align:center;margin-top:24px;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.42);
  animation:surgir .6s ease .3s both;
}

@keyframes surgir{
  from{opacity:0;transform:translateY(16px)}
  to  {opacity:1;transform:none}
}

/* ========================================================== moldura interna */

/* A moldura tem exatamente a altura da tela e não rola. Quem rola é só o <main>.
   Assim o menu e o cabeçalho ficam travados por construção: eles estão fora da
   área de rolagem. Nada de position:sticky aqui — sticky depende da altura do
   elemento de cima e some quando essa altura é fixa, que foi o defeito anterior. */
body.app{
  display:grid;
  grid-template-columns:238px minmax(0,1fr);
  height:100vh;height:100dvh;
  overflow:hidden;
}

/* ---- menu lateral ---- */

.lateral{
  background:var(--papel);border-right:1px solid var(--linha);
  padding:20px 13px;
  display:flex;flex-direction:column;
  min-height:0;overflow-y:auto;
}
.lateral .marca{padding:4px 9px 0}

.lateral nav{display:flex;flex-direction:column;gap:2px;margin-top:28px;flex:1}
.lateral nav a{
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;border-radius:10px;
  color:var(--tinta-suave);text-decoration:none;
  font-size:14.5px;font-weight:500;line-height:1.2;
  transition:background var(--transicao),color var(--transicao);
}
.lateral nav a svg{width:19px;height:19px;flex:0 0 19px;opacity:.75}
.lateral nav a:hover{background:var(--fundo);color:var(--tinta)}
.lateral nav a:hover svg{opacity:1}
.lateral nav a.ativo{background:var(--marca-clara);color:var(--marca);font-weight:600}
.lateral nav a.ativo svg{opacity:1}
.lateral .quem{
  margin-top:auto;padding:13px 12px 11px;border-top:1px solid var(--linha);
  display:flex;flex-direction:column;gap:1px;
}
.lateral .quem .nome{font-size:13.5px;font-weight:600;line-height:1.3}
.lateral .quem .nivel{font-size:11.5px;color:var(--tinta-fraca)}
.lateral .quem .alterar-minha-senha{
  margin:0;padding:0;border:0;border-radius:0;background:transparent;
  color:var(--marca);font-family:inherit;text-align:left;box-shadow:none;
}
.lateral .quem .alterar-minha-senha:hover{text-decoration:underline;transform:none}
.lateral .quem .alterar-minha-senha:focus-visible{outline:2px solid var(--marca);outline-offset:3px}

.lateral nav a.sair{color:var(--tinta-fraca)}
.lateral nav a.sair:hover{color:var(--erro);background:var(--erro-fundo)}

/* ---- área de conteúdo ---- */

.conteudo{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}

/* Altura fixa, igual em todas as telas, com ou sem números.
   O h1 empurra o resto para a direita — sem margin auto concorrente. */
.topo-pagina{
  flex:0 0 auto;
  background:var(--papel);border-bottom:1px solid var(--linha);
  height:72px;padding:0 30px;
  display:flex;align-items:center;gap:16px;
}
.topo-pagina h1{
  font-size:19px;font-weight:650;margin:0 auto 0 0;
  letter-spacing:-.018em;white-space:nowrap;
}
.topo-pagina .selo-movel{display:none}
.topo-pagina button,
.topo-pagina .botao{padding:10px 17px;font-size:14.5px}

/* números do resumo, dentro do cabeçalho.
   Só aparecem na tela que tem números; sem eles o cabeçalho não muda de tamanho. */
.resumo-topo{
  display:flex;align-items:stretch;
  border:1px solid var(--linha);border-radius:var(--raio-p);
  background:var(--fundo);overflow:hidden;
}
.resumo-topo div{
  display:flex;flex-direction:column;justify-content:center;
  padding:5px 14px;border-left:1px solid var(--linha);line-height:1.15;
}
.resumo-topo div:first-child{border-left:0}
.resumo-topo strong{
  font-size:15.5px;font-weight:650;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.resumo-topo span{font-size:10.5px;color:var(--tinta-suave);letter-spacing:.02em}

/* única área que rola */
main{
  flex:1;min-height:0;overflow-y:auto;
  padding:26px 30px 30px;width:100%;max-width:1700px;
  display:grid;
  /* 440px é o mínimo para três botões caberem lado a lado dentro do cartão */
  grid-template-columns:repeat(auto-fit,minmax(440px,1fr));
  gap:18px;align-items:start;align-content:start;
}
/* aviso e cartão marcado como largo ocupam a linha inteira */
main > .aviso{grid-column:1 / -1}
/* cartão de tabela ou lista atravessa a linha e não tem teto de largura */
main > .cartao.largo{grid-column:1 / -1;max-width:none}

/* ---- celular: menu vira barra embaixo ---- */

@media (max-width:820px){
  /* duas faixas: conteúdo em cima ocupando o que sobra, menu embaixo */
  body.app{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .conteudo{order:1}

  .lateral{
    order:2;padding:0;overflow:visible;
    border-right:0;border-top:1px solid var(--linha);
    flex-direction:row;
    box-shadow:0 -2px 14px rgba(29,26,35,.07);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .lateral .marca{display:none}
  .lateral nav{flex-direction:row;margin:0;gap:0}
  .lateral nav a{
    flex:1;flex-direction:column;gap:4px;
    padding:9px 4px 10px;border-radius:0;
    font-size:11px;font-weight:600;text-align:center;
  }
  .lateral nav a svg{width:21px;height:21px;flex:0 0 21px}
  .lateral nav a.ativo{background:transparent}
  .lateral nav a.sair{margin-top:0}

  /* no celular os números não cabem ao lado do título: descem para a linha de baixo */
  .topo-pagina{height:auto;min-height:56px;padding:10px 16px;flex-wrap:wrap;row-gap:9px}
  .topo-pagina h1{font-size:17px}
  .resumo-topo{order:3;flex:1 1 100%}
  .resumo-topo div{flex:1;padding:5px 9px}
  .topo-pagina .selo-movel{
    display:grid;place-items:center;
    width:30px;height:30px;flex:0 0 30px;border-radius:9px;
    background:linear-gradient(145deg,var(--marca),var(--marca-escura));
    color:#fff;font-weight:700;font-size:14px;
  }

  main{padding:18px 18px 28px;grid-template-columns:1fr;gap:14px}
  .cartao{max-width:none}

  /* a tabela precisa caber em tela estreita: colunas menores e cabeçalho em duas linhas */
  form.busca{flex:1 1 100%}
  table.produtos th{white-space:normal;font-size:10.5px;letter-spacing:.03em}
  table.produtos th.ref,table.produtos td.ref{width:92px}
  table.produtos th.num,table.produtos td.num{width:66px}
  table.produtos td label{padding:10px 8px 10px 0;font-size:13.5px}
  table.produtos td.ref label{font-size:11.5px}
  .paginacao{justify-content:center}
  .paginacao .passo{min-width:32px;padding:8px 8px}
  .modal{padding:14px}
  .modal > .caixa{max-height:calc(100dvh - 28px)}

  form.filtros{gap:8px}
  form.filtros .campo{flex:1 1 46%}
  form.filtros .campo.cresce{flex:1 1 100%}
  form.filtros input,form.filtros select{width:100%}
  form.filtros .limpar{flex:1 1 100%;text-align:center}

  table.variacoes.comacoes .cor{width:auto}
  table.variacoes.comacoes .tam{width:56px}
  table.variacoes.comacoes .num{width:56px}
  table.variacoes th{padding:9px 5px 8px;font-size:10px;letter-spacing:.02em}
  table.variacoes td{padding:8px 5px}
  table.variacoes.comacoes th.acao,
  table.variacoes.comacoes td.acao{width:132px;padding-left:8px}
  form.mexer{flex-wrap:wrap;gap:5px}
  form.mexer input[type=number]{width:100%}
  form.mexer button{flex:1 1 auto;padding:7px 8px;font-size:12.5px}
  table.lista td{display:block;border-bottom:0;padding:8px 0}
  table.lista tr{display:block;border-bottom:1px solid var(--linha);padding:10px 0}
  table.lista tr:last-child{border-bottom:0}
  table.lista td.meio,
  table.lista td.acoes{width:auto;text-align:left;padding-left:0}
}

/* ========================================================== cartão */

.cartao{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  padding:26px;margin:0;box-shadow:var(--sombra);max-width:640px;
}
.cartao > h1{font-size:19px;font-weight:650;margin:0 0 6px;letter-spacing:-.015em}
.cartao > h2{font-size:15.5px;font-weight:650;margin:0 0 12px}
.cartao .sub{color:var(--tinta-suave);font-size:14px;margin:0 0 22px;line-height:1.5}
.cartao .sub:last-child{margin-bottom:0}

/* ========================================================== campos */

label{display:block;font-weight:600;font-size:13.5px;margin:18px 0 7px;letter-spacing:.005em}
label:first-of-type{margin-top:0}

input[type=text],input[type=password],input[type=url],input[type=email],select{
  width:100%;padding:13px 14px;font:inherit;font-size:15.5px;color:var(--tinta);
  background:var(--papel);border:1.5px solid var(--linha-forte);border-radius:var(--raio-p);
  transition:border-color var(--transicao),box-shadow var(--transicao);
}
input::placeholder{color:var(--tinta-fraca)}
input:hover{border-color:#c4bdcf}
input:focus{
  outline:none;border-color:var(--marca);
  box-shadow:0 0 0 4px rgba(139,58,94,.13);
}

.dica{display:block;color:var(--tinta-suave);font-size:12.5px;margin-top:7px;line-height:1.45}

/* ========================================================== botões */

.botoes{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}

button{
  padding:13px 22px;font:inherit;font-size:15px;font-weight:600;
  border:1.5px solid transparent;border-radius:var(--raio-p);cursor:pointer;
  transition:background var(--transicao),border-color var(--transicao),
             transform var(--transicao),box-shadow var(--transicao);
}
button.principal{
  background:var(--marca);color:#fff;
  box-shadow:0 2px 8px rgba(139,58,94,.26);
}
button.principal:hover{background:var(--marca-escura);transform:translateY(-1px);
  box-shadow:0 5px 15px rgba(139,58,94,.3)}
button.secundario{background:var(--papel);color:var(--tinta);border-color:var(--linha-forte)}
button.secundario:hover{background:var(--fundo);border-color:#c4bdcf}
button:active{transform:translateY(0);box-shadow:none}
button:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(139,58,94,.22)}
button.larga{width:100%}

/* ========================================================== avisos */

.aviso{
  padding:14px 16px;border-radius:var(--raio-p);margin-bottom:16px;
  font-size:14.5px;line-height:1.5;border:1px solid transparent;
  animation:surgir .3s ease both;
}
.aviso.ok{background:var(--ok-fundo);color:var(--ok);border-color:var(--ok-borda)}
.aviso.erro{background:var(--erro-fundo);color:var(--erro);border-color:var(--erro-borda)}
.aviso.alerta{background:var(--alerta-fundo);color:var(--alerta);border-color:var(--alerta-borda)}
.aviso .detalhe{
  display:block;margin-top:8px;padding-top:8px;border-top:1px solid currentColor;
  border-top-color:color-mix(in srgb, currentColor 22%, transparent);
  font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  opacity:.82;word-break:break-word;
}

/* ========================================================== lista e cabeçalho */

/* âncora ou rótulo com cara de botão, para ações que navegam ou abrem modal */
/* margin e letter-spacing zerados de propósito: como agora também vale para <label>,
   sem isso a regra geral de label empurraria o botão para baixo. */
.botao{
  display:inline-block;margin:0;padding:11px 18px;border-radius:var(--raio-p);
  font-size:14.5px;font-weight:600;letter-spacing:normal;text-transform:none;
  text-decoration:none;cursor:pointer;
  border:1.5px solid transparent;transition:background var(--transicao),border-color var(--transicao);
}
.botao.principal{background:var(--marca);color:#fff}
.botao.principal:hover{background:var(--marca-escura)}
.botao.secundario{background:var(--papel);color:var(--tinta);border-color:var(--linha-forte)}
.botao.secundario:hover{background:var(--fundo)}

table.lista{width:100%;border-collapse:collapse}
table.lista td{padding:14px 4px;border-bottom:1px solid var(--linha);vertical-align:middle}
table.lista tr:last-child td{border-bottom:0}
table.lista .nome{display:block;font-weight:600;font-size:15px;line-height:1.3}
table.lista .valor{display:block;color:var(--tinta-suave);font-size:13px;margin-top:2px}
table.lista td.meio{width:1%;white-space:nowrap;padding-left:18px}
table.lista td.acoes{width:1%;white-space:nowrap;text-align:right;padding-left:18px}
table.lista tr.apagado .nome,
table.lista tr.apagado .valor{opacity:.5}

.etiqueta{
  display:inline-block;padding:4px 10px;border-radius:99px;margin-right:5px;
  background:var(--fundo);border:1px solid var(--linha);
  font-size:12px;font-weight:600;color:var(--tinta-suave);white-space:nowrap;
}
.etiqueta.forte{background:var(--marca-clara);border-color:#f0d8e3;color:var(--marca)}

td.acoes a,
button.ligacao{
  display:inline-block;margin-left:14px;padding:0;border:0;background:none;
  font:inherit;font-size:14px;font-weight:600;color:var(--marca);
  text-decoration:none;cursor:pointer;
}
/* rótulo que abre modal, com a mesma cara das ações da linha */
td.acoes label.ligacao{
  display:inline-block;margin:0 0 0 14px;padding:0;
  font-size:14px;font-weight:600;letter-spacing:0;color:var(--marca);
  text-transform:none;cursor:pointer;
}
td.acoes a:first-child,
td.acoes label.ligacao:first-child,
td.acoes form:first-child button{margin-left:0}
td.acoes a:hover,
td.acoes label.ligacao:hover,
button.ligacao:hover{text-decoration:underline}
button.ligacao.perigo{color:var(--erro)}
.embutido{display:inline;max-width:none}
.travado{color:var(--tinta-fraca);font-size:13.5px}

/* --- caixas de permissão --- */

.caixas{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin-top:4px;
  border:1px solid var(--linha);border-radius:var(--raio-p);padding:6px;
}
label.caixa{
  display:flex;align-items:center;gap:10px;margin:0;padding:9px 10px;
  border-radius:8px;font-weight:500;font-size:14px;line-height:1.3;cursor:pointer;
  letter-spacing:normal;text-transform:none;
  transition:background var(--transicao);
}
label.caixa:hover{background:var(--fundo)}
label.caixa input{width:18px;height:18px;flex:0 0 18px;accent-color:var(--marca);cursor:pointer}

/* --- seleção --- */

select{
  width:100%;padding:13px 14px;font:inherit;font-size:15.5px;color:var(--tinta);
  background:var(--papel);border:1.5px solid var(--linha-forte);border-radius:var(--raio-p);
  transition:border-color var(--transicao),box-shadow var(--transicao);
}
select:focus{outline:none;border-color:var(--marca);box-shadow:0 0 0 4px rgba(139,58,94,.13)}

/* ========================================================== estoque */

/* busca e dica, na mesma faixa */
.linha-busca{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
form.busca{display:flex;gap:8px;flex:0 1 440px;min-width:0}
form.busca input[type=search]{
  flex:1;min-width:120px;padding:10px 13px;font:inherit;font-size:14.5px;color:var(--tinta);
  border:1.5px solid var(--linha-forte);border-radius:var(--raio-p);background:var(--papel);
}
form.busca input[type=search]:focus{
  outline:none;border-color:var(--marca);box-shadow:0 0 0 4px rgba(139,58,94,.13);
}
form.busca button,form.busca .botao{padding:10px 16px;font-size:14px}
.dica-lista{margin:0;font-size:13px;color:var(--tinta-suave)}

/* ---- tabela de produtos: uma linha por produto ---- */

table.produtos{width:100%;table-layout:fixed;border-collapse:collapse}

table.produtos th{
  padding:0 0 9px;text-align:left;white-space:nowrap;
  font-size:11.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tinta-fraca);border-bottom:1.5px solid var(--linha-forte);
}
table.produtos th.ref,table.produtos td.ref{width:150px}
table.produtos th.num,table.produtos td.num{width:170px;text-align:center}

/* só Referência e Nome ordenam; as outras duas são texto */
table.produtos th a.ordena{
  display:inline-flex;align-items:center;gap:6px;
  margin-left:-7px;padding:4px 7px;border-radius:7px;
  color:inherit;text-decoration:none;
  transition:background var(--transicao),color var(--transicao);
}
table.produtos th a.ordena:hover{background:var(--fundo);color:var(--tinta)}
table.produtos th a.ordena.ativa{color:var(--marca)}
table.produtos th .seta{font-size:8.5px;line-height:1}

table.produtos td{padding:0;border-bottom:1px solid var(--linha);vertical-align:middle}
table.produtos tbody tr:last-child td{border-bottom:0}
table.produtos tbody tr{transition:background var(--transicao)}
table.produtos tbody tr:hover{background:var(--marca-clara)}

/* a linha inteira abre o modal: cada célula é rótulo da caixa escondida */
table.produtos td label{
  display:block;margin:0;padding:11px 14px 11px 0;cursor:pointer;
  font-size:14.5px;font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
table.produtos td.ref label{
  font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--tinta-suave);
}
table.produtos td.nome label{font-weight:400}
table.produtos td.num label{padding-right:0;font-variant-numeric:tabular-nums}

/* ---- paginação ---- */

.paginacao{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--linha);
}
.paginacao .conta{font-size:13px;color:var(--tinta-suave)}
.paginacao .passos{display:flex;align-items:center;gap:4px}
.paginacao .passo{
  display:inline-block;min-width:36px;padding:8px 11px;border-radius:8px;
  font-size:14px;font-weight:600;text-align:center;text-decoration:none;
  color:var(--tinta-suave);border:1px solid transparent;
  transition:background var(--transicao),color var(--transicao),border-color var(--transicao);
}
a.passo:hover{background:var(--fundo);color:var(--tinta);border-color:var(--linha)}
.paginacao .passo.atual{background:var(--marca);color:#fff}
.paginacao .passo.desligado{color:var(--tinta-fraca);opacity:.5}
.paginacao .reticencia{color:var(--tinta-fraca);padding:0 3px}

/* ---- modal das variações, sem JavaScript ----
   A caixa de seleção escondida guarda o estado. Marcar mostra o modal; só os rótulos
   do X e do Cancelar desmarcam, então clicar fora não fecha. */

.gatilho{display:none}

.modal{
  display:none;position:fixed;inset:0;z-index:60;
  background:rgba(24,20,30,.42);
  align-items:center;justify-content:center;padding:24px;
  animation:surgir .18s ease both;
}
.gatilho:checked + .modal{display:flex}

/* filho direto de propósito: label.caixa, das permissões, usa a mesma classe */
.modal > .caixa{
  display:flex;flex-direction:column;width:100%;max-width:520px;
  /* sem altura fixa: acompanha as variações e para na altura da tela */
  max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
  background:var(--papel);border-radius:var(--raio);
  box-shadow:var(--sombra-alta);overflow:hidden;
}

.modal .topo{
  flex:0 0 auto;display:flex;align-items:flex-start;gap:14px;
  padding:17px 20px 14px;border-bottom:1px solid var(--linha);
}
.modal .topo .quem{min-width:0}
.modal .topo .ref{
  display:block;letter-spacing:.02em;color:var(--tinta-fraca);
  font:12.5px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.modal .topo .nome{
  display:block;margin-top:3px;font-size:16px;font-weight:650;line-height:1.3;
}
.modal .fechar{
  margin:0 0 0 auto;flex:0 0 32px;width:32px;height:32px;border-radius:8px;
  display:grid;place-items:center;cursor:pointer;
  font-size:22px;font-weight:400;line-height:1;color:var(--tinta-suave);
  transition:background var(--transicao),color var(--transicao);
}
.modal .fechar:hover{background:var(--fundo);color:var(--tinta)}

.modal .corpo{flex:0 1 auto;min-height:0;overflow-y:auto;padding:2px 20px 16px}
.modal .corpo .sub{margin-bottom:16px;font-size:13.5px}

.modal .rodape{
  flex:0 0 auto;display:flex;justify-content:flex-end;gap:9px;
  padding:14px 20px;border-top:1px solid var(--linha);
}
.modal .rodape button{padding:10px 20px;font-size:14.5px}
.modal .rodape label{
  display:inline-block;margin:0;padding:10px 20px;cursor:pointer;
  font-size:14.5px;font-weight:600;letter-spacing:0;text-transform:none;
  border-radius:var(--raio-p);
  background:var(--papel);color:var(--tinta);border:1.5px solid var(--linha-forte);
  transition:background var(--transicao),border-color var(--transicao);
}
.modal .rodape label:hover{background:var(--fundo);border-color:#c4bdcf}

/* --- aviso de resultado, empilhado por cima do modal em uso --- */

/* modal com duas colunas de permissões precisa de mais largura */
.modal > .caixa.larga{max-width:640px}
.modal > .caixa.acoes{max-width:740px}

.modal-resultado{z-index:70}
.modal-resultado > .caixa{max-width:420px}
.modal-resultado .titulo{
  display:block;font-size:16px;font-weight:650;line-height:1.3;color:var(--ok);
}
.modal-resultado.deu-erro .titulo{color:var(--erro)}
.modal-resultado .mensagem{margin:14px 0 0;font-size:14.5px;line-height:1.5}
.modal-resultado .detalhe{
  margin:10px 0 0;padding:10px 12px;border-radius:8px;
  background:var(--fundo);border:1px solid var(--linha);
  font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--tinta-suave);word-break:break-word;
}

/* Larguras fixas de propósito: com colunas soltas o rótulo desgruda do dado e a
   pessoa perde de vista o que é o quê. */
table.variacoes{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
table.variacoes th{
  position:sticky;top:0;background:var(--papel);
  padding:11px 8px 9px;text-align:left;vertical-align:bottom;
  font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tinta-fraca);border-bottom:1px solid var(--linha);
}
/* meio, não topo: a célula dos botões é mais alta que o texto e desalinhava a linha */
table.variacoes td{
  padding:9px 8px;border-bottom:1px solid var(--linha);vertical-align:middle;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
table.variacoes tr:last-child td{border-bottom:0}
table.variacoes tbody tr:hover{background:var(--fundo)}

/* tamanho é valor de uma ou duas letras: centralizado, rótulo e dado viram um bloco só */
table.variacoes .tam{width:96px;text-align:center}
table.variacoes .num{width:110px;text-align:center}
table.variacoes td.num{font-size:15px;font-weight:650;font-variant-numeric:tabular-nums}
table.variacoes td.num.zero{color:var(--tinta-fraca)}
table.variacoes td.cor{font-weight:500}
/* a célula dos botões não corta nem aperta: ela é a única que não é texto */
table.variacoes td.acao{overflow:visible;white-space:normal}

/* --- movimentar: campo e botões dentro da linha da variação --- */

/* com ações: os três dados ficam juntos à esquerda e os botões ocupam o resto */
table.variacoes.comacoes .cor{width:154px}
table.variacoes.comacoes .tam{width:82px}
table.variacoes.comacoes .num{width:84px}
/* a linha vertical separa o que se lê do que se faz, e desce do cabeçalho até o fim */
table.variacoes.comacoes th.acao,
table.variacoes.comacoes td.acao{
  text-align:center;border-left:1px solid var(--linha-forte);padding-left:18px;
}

form.mexer{display:flex;align-items:center;justify-content:center;gap:6px;margin:0}
form.mexer input[type=number]{
  width:62px;padding:7px 8px;font:inherit;font-size:14px;text-align:center;
  border:1.5px solid var(--linha-forte);border-radius:8px;background:var(--papel);
  font-variant-numeric:tabular-nums;
}
form.mexer input[type=number]:focus{
  outline:none;border-color:var(--marca);box-shadow:0 0 0 3px rgba(139,58,94,.13);
}
form.mexer button{padding:7px 11px;font-size:13px;border-radius:8px;white-space:nowrap}

/* valor que existe para ser copiado: fonte de máquina, quebra onde precisar */
.valor-copiar{
  margin:0;padding:10px 12px;border-radius:var(--raio-p);
  background:var(--fundo);border:1px solid var(--linha);
  font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--tinta);word-break:break-all;user-select:all;
}

.rodape-cartao{
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--linha);
  font-size:12.5px;color:var(--tinta-fraca);
}

/* ========================================================== histórico */

/* filtros sem botão: mudar o campo já busca */
form.filtros{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:18px}
form.filtros .campo{display:flex;flex-direction:column;gap:5px;min-width:0}
form.filtros .campo.cresce{flex:1 1 220px}
form.filtros label{
  margin:0;font-size:11px;font-weight:650;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tinta-fraca);
}
form.filtros input,
form.filtros select{
  width:auto;padding:9px 12px;font:inherit;font-size:14.5px;color:var(--tinta);
  background:var(--papel);border:1.5px solid var(--linha-forte);border-radius:var(--raio-p);
  transition:border-color var(--transicao),box-shadow var(--transicao);
}
form.filtros .campo.cresce input{width:100%}
form.filtros input:focus,
form.filtros select:focus{
  outline:none;border-color:var(--marca);box-shadow:0 0 0 4px rgba(139,58,94,.13);
}
form.filtros .limpar{padding:9px 15px;font-size:14px}

/* um bloco por registro, com linha divisória entre eles */
ol.historico{list-style:none;margin:0;padding:0;border-top:1px solid var(--linha)}
ol.historico li{padding:13px 2px;border-bottom:1px solid var(--linha)}
ol.historico .quando{
  margin:0 0 3px;font-size:12.5px;color:var(--tinta-fraca);
  letter-spacing:.01em;font-variant-numeric:tabular-nums;
}
ol.historico .quando .quem{font-weight:650;color:var(--tinta-suave)}
ol.historico .oque{margin:0;font-size:14.5px;line-height:1.5}

/* ========================================================== tabela */

table{width:100%;border-collapse:collapse;font-size:14.5px}
td{padding:13px 2px;border-bottom:1px solid var(--linha);vertical-align:top}
tr:last-child td{border-bottom:0}
td.estado{width:30px;text-align:center;font-size:15px;line-height:1.4}
td .nome{font-weight:600}
td .valor{color:var(--tinta-suave)}
td .ajuda{display:block;color:var(--tinta-suave);font-size:12.5px;margin-top:5px;line-height:1.45}

/* ========================================================== pedidos */

.pedidos-cartao{min-width:0}
.pedidos-cabecalho{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px;margin-bottom:22px;
}
.pedidos-cabecalho h2{margin:0;font-size:18px;font-weight:650}
.pedidos-cabecalho form{margin:0}
.pedidos-rolagem{width:100%;overflow-x:auto}
table.pedidos-tabela{width:100%;table-layout:auto}
table.pedidos-tabela th{
  padding:12px 14px;text-align:left;color:var(--tinta-suave);
  font-size:12px;font-weight:650;border-bottom:1px solid var(--linha);
}
table.pedidos-tabela td{padding:14px;vertical-align:middle}
table.pedidos-tabela th:first-child,
table.pedidos-tabela td:first-child{padding-left:0}
table.pedidos-tabela th:last-child,
table.pedidos-tabela td:last-child{padding-right:0}
/* Conteúdos curtos não quebram; a largura das colunas é calculada automaticamente. */
table.pedidos-tabela th:not(:first-child),
table.pedidos-tabela td:not(:first-child){white-space:nowrap}

.pedido-numero{font-weight:650;white-space:nowrap}
.pedidos-cartao .pedido-lista-cliente{
  display:block;width:max-content;max-width:240px;margin:4px 0 0 14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:11px;line-height:16px;color:var(--tinta-suave);
}
.pedidos-cartao .pedido-busca{margin-bottom:20px}
.pedidos-cartao .pedido-busca form.busca{flex-basis:520px}
.pedidos-cartao .pedido-nomes-carga{padding:14px 16px;margin-bottom:20px;border:1px solid var(--linha);border-radius:var(--raio-p);background:var(--fundo)}
.pedidos-cartao .pedido-nomes-carga p{margin:0 0 10px;font-size:13px;color:var(--tinta-suave)}
.pedidos-cartao .pedido-nomes-carga form{margin:0}
.pedidos-cartao .pedido-nomes-carga button{padding:9px 12px;font-size:13px}
.pedidos-cartao [data-nomes-progresso]{margin-top:12px}
.pedidos-cartao [data-nomes-progresso] progress{width:100%;max-width:520px;height:12px;accent-color:var(--marca)}
.pedidos-cartao [data-nomes-mensagem]{margin:6px 0 0}
.pedidos-cartao [data-nomes-mensagem].deu-erro{color:var(--erro)}
.pedidos-cartao [data-nomes-progresso][hidden]{display:none}
.pedido-acoes{white-space:nowrap}
.pedido-acoes button{padding:8px 12px;font-size:13px}

/* Informações da listagem: mantêm as regras existentes de layout da tabela. */
.pedidos-cartao .pedido-lista-status,
.pedidos-cartao .pedido-lista-estoque{
  display:inline-flex;align-items:center;padding:5px 11px;border-radius:20px;
  border:1px solid var(--linha-forte);background:var(--fundo);color:var(--tinta-suave);
  font-size:12px;font-weight:600;line-height:1.4;
}
.pedidos-cartao .pedido-lista-status[data-status="pending"]{background:var(--alerta-fundo);color:var(--alerta);border-color:var(--alerta-borda)}
.pedidos-cartao .pedido-lista-status[data-status="processing"]{background:var(--marca-clara);color:var(--marca);border-color:#ead2dd}
.pedidos-cartao .pedido-lista-status[data-status="on-hold"]{background:#fff3e8;color:#9a4d13;border-color:#f0d2b8}
.pedidos-cartao .pedido-lista-status[data-status="completed"]{background:var(--ok-fundo);color:var(--ok);border-color:var(--ok-borda)}
.pedidos-cartao .pedido-lista-status[data-status="refunded"]{background:#f2edf8;color:#70518d;border-color:#dfd3ed}
.pedidos-cartao .pedido-lista-status[data-status="failed"]{background:var(--erro-fundo);color:var(--erro);border-color:var(--erro-borda)}
.pedidos-cartao .pedido-lista-baixa{background:var(--ok-fundo);color:var(--ok);border-color:var(--ok-borda);font-weight:400}
.pedidos-cartao .pedido-lista-data{display:block;font-variant-numeric:tabular-nums}
.pedidos-cartao .pedido-lista-hora{display:block;font-size:12px;color:var(--tinta-suave);margin-top:2px}
.pedidos-cartao .pedido-lista-processado{color:var(--tinta-suave);font-size:13px}
.pedidos-cartao .pedido-lista-explicacao{display:block;margin-top:5px;color:var(--tinta-suave);font-size:11px;line-height:1.4}
.pedidos-cartao .pedido-lista-sem-baixa{font-size:12px;color:var(--tinta-suave)}
.pedidos-cartao .pedido-lista-itens{white-space:nowrap;color:var(--tinta-suave);font-size:12px}
.pedidos-cartao .pedido-lista-itens strong{font-size:15px;font-weight:650;color:var(--tinta);font-variant-numeric:tabular-nums}
.pedidos-cartao .pedido-acoes .pedido-lista-visualizar{background:var(--marca-clara);color:var(--marca);border-color:#ead2dd}
.pedidos-cartao .pedido-acoes .pedido-lista-visualizar:hover{background:#f5e5ed;border-color:var(--marca)}

.pedido-modal > .caixa{max-width:1200px}
.pedido-modal [hidden]{display:none!important}
.pedido-modal .topo{align-items:center;padding:22px 28px;gap:18px}
.pedido-modal .topo .quem{flex:1}
.pedido-modal .topo .ref{
  font:650 22px/1.25 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  letter-spacing:-.02em;color:var(--marca);
}
.pedido-modal .topo .nome{margin-top:4px;font-size:13px;font-weight:400;color:var(--tinta-suave)}
.pedido-modal .fechar{padding:0;border:0;background:transparent;box-shadow:none}
.pedido-modal .corpo{padding:24px 28px;background:var(--fundo)}
.pedido-modal .rodape{flex-wrap:wrap;align-items:center;padding:16px 28px}
.pedido-modal .rodape .pedido-atualizar{margin-right:auto;padding:10px 0;color:var(--tinta-suave);font-size:13px}
.pedido-modal [data-pedido-aviso]{margin:0 0 20px}
.pedido-modal [data-pedido-carregando]{margin:0;padding:18px 0}
.pedido-modal .pedido-status-etiqueta{
  display:inline-flex;align-items:center;border:1px solid var(--linha-forte);
  border-radius:20px;padding:6px 13px;font-size:12px;font-weight:600;
  background:var(--fundo);color:var(--tinta-suave);max-width:45%;overflow-wrap:anywhere;
}
.pedido-modal .pedido-status-ativo{background:var(--marca-clara);color:var(--marca);border-color:#ead2dd}
.pedido-modal .pedido-status-sucesso{background:var(--ok-fundo);color:var(--ok);border-color:var(--ok-borda)}
.pedido-modal .pedido-status-espera{background:var(--alerta-fundo);color:var(--alerta);border-color:var(--alerta-borda)}
.pedido-modal .pedido-status-erro{background:var(--erro-fundo);color:var(--erro);border-color:var(--erro-borda)}
.pedido-modal .pedido-resumo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px}
.pedido-modal .pedido-resumo p{margin:0;padding:16px 18px;background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio-p)}
.pedido-modal .pedido-rotulo{display:block;color:var(--tinta-suave);font-size:12px;font-weight:400;line-height:1.4}
.pedido-modal .pedido-valor{display:block;margin-top:5px;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.pedido-modal .pedido-historico{
  margin:0 0 20px;padding:12px 16px;border-left:3px solid var(--marca);
  border-radius:0 var(--raio-p) var(--raio-p) 0;background:var(--marca-clara);
  color:var(--tinta-suave);font-size:12px;line-height:1.6;
}
.pedido-modal .pedido-historico strong{color:var(--marca)}
.pedido-modal .pedido-bloco{min-width:0;background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio-p);padding:20px}
.pedido-modal h3{margin:0 0 16px;font-size:14px;font-weight:650;color:var(--marca)}
.pedido-modal .pedido-produtos{padding:0;overflow:hidden;margin-bottom:22px}
.pedido-modal .pedido-produtos h3{padding:18px 20px;margin:0}
.pedido-modal .pedido-itens{min-width:620px;table-layout:fixed;font-size:14px}
.pedido-modal .pedido-itens th{background:var(--fundo);text-align:left;padding:11px 16px;color:var(--tinta-suave);font-size:11px;font-weight:600;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.pedido-modal .pedido-itens td{padding:16px;vertical-align:middle}
.pedido-modal .pedido-itens td:first-child{overflow-wrap:anywhere}
.pedido-modal .pedido-itens td:first-child > strong{font-size:13px;font-weight:600;line-height:1.5}
.pedido-modal .pedido-itens th:nth-child(2),
.pedido-modal .pedido-itens td:nth-child(2){width:96px;text-align:center;font-variant-numeric:tabular-nums}
.pedido-modal .pedido-itens th:nth-child(3),
.pedido-modal .pedido-itens th:nth-child(4),
.pedido-modal .pedido-itens td:nth-child(3),
.pedido-modal .pedido-itens td:nth-child(4){width:144px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pedido-modal .pedido-itens td:last-child{font-weight:600}
.pedido-modal .pedido-atributos{display:flex;flex-wrap:wrap;gap:5px 8px;margin-top:8px;font-size:11px;color:var(--tinta-suave)}
.pedido-modal .pedido-atributos span{padding:2px 7px;background:var(--fundo);border:1px solid var(--linha);border-radius:5px}
.pedido-modal .pedido-atributos .pedido-referencia{background:transparent;border-color:transparent;padding-left:0}
.pedido-modal .pedido-nota{margin:0;padding:12px 20px;border-top:1px solid var(--linha);font-size:11px;color:var(--tinta-suave)}
.pedido-modal .pedido-inferior{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px;align-items:start}
.pedido-modal .pedido-dados-cliente{display:grid;gap:18px;min-width:0}
.pedido-modal .pedido-cliente-nome{margin:0 0 14px;font-size:17px;font-weight:600;overflow-wrap:anywhere}
.pedido-modal .pedido-contato{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px}
.pedido-modal .pedido-contato p{margin:0}
.pedido-modal .pedido-contato .pedido-valor{font-weight:400}
.pedido-modal .pedido-enderecos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pedido-modal .pedido-endereco{margin:0;font-size:13px;line-height:1.8;white-space:pre-line;overflow-wrap:anywhere}
.pedido-modal .pedido-totais p{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:14px 0}
.pedido-modal .pedido-totais .pedido-rotulo{font-size:12px}
.pedido-modal .pedido-totais .pedido-valor{margin:0;font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.pedido-modal .pedido-totais p:last-child{margin:18px -20px -20px;padding:18px 20px;background:var(--marca-clara);border-top:1px solid var(--linha);border-radius:0 0 var(--raio-p) var(--raio-p)}
.pedido-modal .pedido-totais p:last-child .pedido-rotulo{color:var(--marca);font-weight:600}
.pedido-modal .pedido-totais p:last-child .pedido-valor{font-size:21px;color:var(--marca)}
.pedido-modal .pedido-observacao{margin:0;font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.pedido-modal .pedido-edicao{max-width:none;margin:0 0 20px;padding:20px;background:var(--marca-clara);border:1px solid #ead2dd;border-radius:var(--raio-p)}
.pedido-modal .pedido-edicao-campos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
.pedido-modal .pedido-status-atual strong{display:block;margin-top:6px;font-size:15px;font-weight:600}
.pedido-modal .pedido-edicao label{margin:0 0 7px;font-size:12px;color:var(--marca)}
.pedido-modal .pedido-edicao select{padding:11px 12px;font-size:14px}
.pedido-modal .pedido-edicao .pedido-reembolso{margin:14px 0 0;font-size:12px;color:var(--alerta)}
@media (max-width:900px){
  .pedido-modal .pedido-inferior{grid-template-columns:minmax(0,1fr)}
  .pedido-modal .pedido-totais{width:100%}
}
@media (max-width:560px){
  .pedido-modal .topo{padding:16px;gap:10px;flex-wrap:wrap}
  .pedido-modal .topo .quem{flex:1 1 calc(100% - 52px);order:1}
  .pedido-modal .fechar{order:2}
  .pedido-modal .pedido-status-etiqueta{order:3;max-width:100%}
  .pedido-modal .topo .ref{font-size:20px}
  .pedido-modal .corpo{padding:16px}
  .pedido-modal .pedido-resumo{grid-template-columns:1fr;gap:8px}
  .pedido-modal .pedido-resumo p{padding:12px 14px}
  .pedido-modal .pedido-enderecos,
  .pedido-modal .pedido-contato,
  .pedido-modal .pedido-edicao-campos{grid-template-columns:1fr;gap:14px}
  .pedido-modal .pedido-bloco{padding:16px}
  .pedido-modal .pedido-produtos{padding:0}
  .pedido-modal .pedido-totais p:last-child{margin-left:-16px;margin-right:-16px;margin-bottom:-16px;padding:16px}
  .pedido-modal .rodape{padding:12px 16px}
  .pedido-modal .rodape button{flex:1 1 auto;padding:10px 12px}
  .pedido-modal .rodape .pedido-atualizar{flex:1 1 100%;padding:0 0 8px;text-align:left}
}

/* ========================================================== celular */

@media (max-width:560px){
  .cartao{padding:20px;border-radius:12px}
  .caixas{grid-template-columns:minmax(0,1fr)}
  .botoes{flex-direction:column}
  .botoes button{width:100%}
}

/* ========================================================== produtos */

/* o cadastro precisa de largura: são muitos campos e eles se distribuem na horizontal */
.modal > .caixa.enorme{max-width:min(1400px,90vw)}
.modal > .caixa > form.form-produto{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}

form.form-produto .colunas{display:flex;gap:26px;align-items:flex-start;padding-top:14px}
form.form-produto .lado-esquerdo{flex:0 0 320px;min-width:0}
form.form-produto .lado-direito{flex:1 1 auto;min-width:0}

form.form-produto .campo{display:flex;flex-direction:column;gap:5px;min-width:0;margin-bottom:14px}
form.form-produto .campo.estreito{flex:0 0 96px}
form.form-produto .campo label{
  margin:0;font-size:11px;font-weight:650;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tinta-fraca);
}
form.form-produto .campo input,
form.form-produto .campo select{
  width:100%;padding:10px 11px;font:inherit;font-size:14.5px;color:var(--tinta);
  background:var(--papel);border:1.5px solid var(--linha-forte);border-radius:var(--raio-p);
  transition:border-color var(--transicao),box-shadow var(--transicao);
}
form.form-produto .campo input:focus,
form.form-produto .campo select:focus{
  outline:0;border-color:var(--marca);box-shadow:0 0 0 3px rgba(139,58,94,.13);
}
form.form-produto .campo input:disabled,
form.form-produto .campo select:disabled{background:var(--fundo);color:var(--tinta-fraca)}
form.form-produto .campo .so-leitura{
  margin:0;padding:10px 11px;font-size:14.5px;font-weight:650;text-align:center;
  color:var(--tinta-suave);background:var(--fundo);
  border:1.5px solid var(--linha);border-radius:var(--raio-p);
}

form.form-produto .titulo-bloco{
  display:block;margin:22px 0 4px;padding-top:16px;border-top:1px solid var(--linha);
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-fraca);
}
form.form-produto .dica{display:block;margin:0 0 12px;font-size:12.5px;color:var(--tinta-fraca);line-height:1.5}

/* fotos */
form.form-produto .galeria{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
form.form-produto .galeria figure{margin:0;width:84px}
form.form-produto .galeria img{
  width:84px;height:104px;object-fit:cover;display:block;
  border:1px solid var(--linha);border-radius:var(--raio-p);background:var(--fundo);
}
form.form-produto .galeria figcaption{
  margin-top:4px;font-size:11px;text-align:center;color:var(--tinta-fraca);
}
label.escolher-fotos{
  display:inline-flex;align-items:center;gap:8px;margin:0;cursor:pointer;
  padding:10px 15px;border:1.5px dashed var(--linha-forte);border-radius:var(--raio-p);
  font-size:13.5px;font-weight:600;color:var(--tinta-suave);
  text-transform:none;letter-spacing:normal;
  transition:border-color var(--transicao),color var(--transicao);
}
label.escolher-fotos:hover{border-color:var(--marca);color:var(--marca)}
label.escolher-fotos input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* linhas de variação */
form.form-produto [data-variacoes].travado .linhas{opacity:.45;pointer-events:none}
form.form-produto .linha-var{
  display:flex;gap:10px;align-items:flex-end;
  padding:10px 0;border-bottom:1px solid var(--linha);
}
form.form-produto .linha-var:last-child{border-bottom:0}
form.form-produto .linha-var .campo{margin-bottom:0;flex:1 1 auto}
form.form-produto .linha-var .campo.estreito{flex:0 0 84px}
form.form-produto .linha-var .campo.foto{flex:0 0 128px}
form.form-produto .linha-var .miniatura{
  flex:0 0 46px;width:46px;height:58px;margin-bottom:1px;
  border:1px solid var(--linha);border-radius:var(--raio-p);
  background:var(--fundo);overflow:hidden;display:grid;place-items:center;
}
form.form-produto .linha-var .miniatura img{width:100%;height:100%;object-fit:cover;display:block}
form.form-produto .linha-var .miniatura .sem-foto{
  font-size:9px;line-height:1.2;text-align:center;color:var(--tinta-fraca);padding:0 3px;
}
/* alinhado pela base, com a mesma altura do campo ao lado — nada de sobrar embaixo */
form.form-produto .tira-linha{
  flex:0 0 38px;width:38px;height:41px;margin:0;padding:0;align-self:flex-end;
  display:grid;place-items:center;
  border:1.5px solid var(--linha);border-radius:var(--raio-p);background:var(--papel);
  color:var(--tinta-fraca);font-size:19px;line-height:1;cursor:pointer;
  transition:border-color var(--transicao),color var(--transicao);
}
form.form-produto .tira-linha:hover{border-color:#d9a5a5;color:#b04747}
form.form-produto .mais-linha{margin-top:14px}

/* lista de produtos */
ul.produtos-cartoes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
ul.produtos-cartoes li{
  display:flex;gap:18px;align-items:flex-start;
  padding:16px 0;border-bottom:1px solid var(--linha);
}
ul.produtos-cartoes li:last-child{border-bottom:0}
ul.produtos-cartoes .fotos{flex:0 0 auto}
ul.produtos-cartoes .fotos img{
  width:110px;height:140px;object-fit:cover;display:block;
  border:1px solid var(--linha);border-radius:var(--raio-p);background:var(--fundo);
}
ul.produtos-cartoes .sem-foto{
  width:110px;height:140px;display:grid;place-items:center;font-size:11px;text-align:center;
  color:var(--tinta-fraca);background:var(--fundo);
  border:1px dashed var(--linha-forte);border-radius:var(--raio-p);
}
ul.produtos-cartoes .dados{flex:1 1 auto;min-width:0}
ul.produtos-cartoes .dados .ref{
  letter-spacing:.02em;color:var(--tinta-fraca);
  font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
}
ul.produtos-cartoes .dados h3{margin:3px 0 5px;font-size:15.5px;font-weight:600;line-height:1.35}
ul.produtos-cartoes .dados .resumo{margin:0 0 8px;font-size:13px;color:var(--tinta-suave)}
ul.produtos-cartoes .pendente{color:#b07a1e;font-weight:600}
ul.produtos-cartoes .fichas{margin:0;display:flex;flex-wrap:wrap;gap:5px}
ul.produtos-cartoes .ficha{
  display:inline-flex;gap:6px;align-items:baseline;
  padding:3px 9px;border-radius:100px;font-size:12px;
  background:var(--fundo);border:1px solid var(--linha);color:var(--tinta-suave);
}
ul.produtos-cartoes .ficha b{font-weight:700;color:var(--tinta)}
ul.produtos-cartoes .ficha.zero{color:var(--tinta-fraca)}
ul.produtos-cartoes .ficha.zero b{color:var(--tinta-fraca)}
ul.produtos-cartoes .acoes{flex:0 0 auto}

@media (max-width:1100px){
  form.form-produto .colunas{flex-direction:column;gap:6px}
  form.form-produto .lado-esquerdo{flex:1 1 auto;width:100%}
}
@media (max-width:760px){
  .modal > .caixa.enorme{max-width:100%}
  form.form-produto .linha-var{flex-wrap:wrap;gap:8px}
  form.form-produto .linha-var .campo{flex:1 1 44%}
  form.form-produto .linha-var .campo.estreito{flex:1 1 44%}
  ul.produtos-cartoes li{flex-wrap:wrap;gap:12px}
  ul.produtos-cartoes .acoes{flex:1 1 100%}
}

/* ========================================================== menos movimento */

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

/* Academy: componentes exclusivos, usando a moldura e as cores do painel. */
.academy-cabecalho{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.academy-cabecalho .sub{margin:0}
.academy-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:20px}
.academy-item{min-width:0;border:1px solid var(--linha);border-radius:var(--raio-p);overflow:hidden;background:var(--papel)}
.academy-item.academy-inativo{border-style:dashed}
.academy-assistir{display:block;width:100%;padding:0;border:0;border-radius:0;background:transparent;text-align:left;color:var(--tinta);box-shadow:none}
.academy-assistir:hover{background:var(--marca-clara);transform:none}
.academy-assistir img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--fundo)}
.academy-item-titulo{display:block;padding:16px 16px 8px;font-size:16px;font-weight:650;overflow-wrap:anywhere}
.academy-descricao{margin:0;padding:0 16px 16px;font-size:13px;color:var(--tinta-suave);white-space:pre-wrap;overflow-wrap:anywhere}
.academy-situacao{margin:0;padding:0 16px 12px;font-size:12px;color:var(--tinta-suave)}
.academy-item-acoes{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 16px}
.academy-item-acoes form{margin:0}
.academy-item-acoes button{padding:8px 12px;font-size:13px}
.academy-player > .caixa{max-width:1100px}
.academy-player .corpo{padding:16px 20px}
.academy-tela{background:#111;line-height:0;border-radius:var(--raio-p);overflow:hidden}
.academy-tela video,.academy-tela iframe{display:block;width:100%;aspect-ratio:16/9;max-height:65dvh;border:0;background:#111}
.academy-tela iframe{min-height:200px}
.academy-player .fechar,.academy-form-modal .fechar{padding:0;border:0;background:transparent;box-shadow:none}
.academy-form-modal > .caixa{max-width:640px}
.academy-form-modal .corpo{padding-top:18px}
.academy-form-modal [data-academy-local],.academy-form-modal [data-academy-youtube]{margin-top:18px}
.academy-form-modal textarea{width:100%;padding:12px 14px;border:1.5px solid var(--linha-forte);border-radius:var(--raio-p);font:inherit;font-size:14px;resize:vertical}
.academy-form-modal textarea:focus{outline:2px solid var(--marca);outline-offset:1px}
.academy-form-modal input[type=file]{display:block;width:100%;font:inherit;font-size:13px;color:var(--tinta-suave)}
.academy-form-modal input[type=number]{width:120px;padding:10px 12px;border:1.5px solid var(--linha-forte);border-radius:var(--raio-p);font:inherit}
.academy-form-modal label.caixa{margin-top:18px}
.academy-form-modal progress{width:100%;height:14px;accent-color:var(--marca)}
.academy-form-modal [data-academy-progresso]{margin-top:18px}
.academy-form-modal [data-academy-progresso-texto]{margin:6px 0;font-size:13px;color:var(--tinta-suave)}
.academy-aviso{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--erro);overflow-wrap:anywhere}
.academy-aviso.academy-sucesso{color:var(--ok)}
.academy-form-modal [hidden],.academy-player [hidden]{display:none!important}
@media(max-width:560px){
  .academy-cabecalho button{width:100%}
  .academy-player .corpo{padding:12px}
  .academy-player .rodape button{padding:10px 14px}
}