/* Identidade visual do portal = a do painel v15 (Agile · Segmento Armazém · Grupo Level): faixa grafite com o
 * logo, kicker, titulo em Montserrat e a ilustracao animada; navegacao em pilulas; vermelho #EF2C2C so como
 * destaque; Roboto no texto. Fontes e imagens locais (sem requisicao externa).
 *
 * PORTADO DE: painel-semanal/template/painel_armazem.html (somente leitura) — variaveis (linhas 10-17), base e
 * tipografia (24-30), hero (35-45), tabnav (46-50), botoes (.topbar/.printbtn, 135-139, 252), rodape (249-251) e a
 * animacao do cabecalho (348-420). Mudancas: nav e botoes viram links/forms do Django; hero mostra o usuario logado
 * no lugar de "Gerado em"; paleta de login/erro/aviso do portal reescrita com os mesmos tokens.
 */
@import url("fontes.css");

:root {
  color-scheme: light;
  --red: #EF2C2C; --graphite: #2A2727; --graphite2: #3A3A3A; --ink: #2A2727; --body: #3A3A3A;
  --surface: #F0F0F0; --line: #EAE6E6; --line-strong: #D3D3D3; --data-gray: #8A8A8A; --bg: #FFFFFF;
  --red-tint: rgba(239, 44, 44, .08); --green: #1E7D46; --green-tint: rgba(30, 125, 70, .08);
  --blue: #3A6EA5; --ambar: #E8A33D; --ambar-tint: rgba(232, 163, 61, .12);
  --blue-tint: rgba(58, 110, 165, .10); --soon-tint: rgba(58, 58, 58, .05); --ambar-escuro: #CE8A26;
  /* tokens de forma e tipografia do painel v15 (linhas 51-57, 119-125, 149-152, 213-219, 252) */
  --fonte-titulo: "Montserrat", "Segoe UI", Arial, sans-serif; --fonte-texto: "Roboto", "Segoe UI", Arial, sans-serif;
  --raio-painel: 12px; --raio-cartao: 10px; --raio-campo: 8px; --raio-pilula: 999px;
  --sombra-flutuante: 0 10px 30px rgba(0, 0, 0, .22); --sombra-dica: 0 6px 18px rgba(0, 0, 0, .22);
  /* nomes antigos usados pelas paginas de administracao */
  --grafite: var(--graphite); --vermelho: var(--red); --vermelho-escuro: #C41E1E; --fundo: var(--surface);
  --borda: var(--line-strong); --texto: var(--ink);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: "Roboto", "Segoe UI", Arial, sans-serif; background: var(--bg); color: var(--ink); font-size: 13.5px; }
h1, h2, h3 { font-family: "Montserrat", "Segoe UI", Arial, sans-serif; font-weight: 700; }

/* ---- cabecalho (hero) ---- */
.hero { background: var(--graphite); color: #fff; padding: 10px 20px; position: relative; }
.hero-inner { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;
    gap: 20px; flex-wrap: wrap; }
.hero-text { min-width: 260px; }
.hero-brand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.hero-logo { height: 34px; width: auto; display: block; }
.hero .kicker { display: inline-flex; align-items: center; font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .08em; color: rgba(255, 255, 255, .7); }
.hero h1 { display: inline; margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: .005em; }
.hero .sub { display: inline-block; color: rgba(255, 255, 255, .72); margin-left: 10px; font-size: 12px; }
.hero-art { height: 78px; overflow: hidden; display: flex; justify-content: flex-end; flex: 0 1 auto; min-width: 220px; }
.hero-art svg { display: block; height: 78px; width: auto; }
.tag-red { color: var(--red); }
.faixa-vermelha { height: 3px; background: var(--red); }

/* ---- navegacao em pilulas, agrupadas (Visao | Financeiro | Armazem | Controle) ---- */
.tabnav { max-width: 1280px; margin: 0 auto; padding: 14px 20px 0; display: flex; gap: 10px 14px; align-items: center; }
.tabnav-trilho { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; }
.tab-grupo { display: flex; align-items: center; gap: 6px; flex: none; padding: 0 14px; border-left: 1px solid var(--line-strong); }
.tab-grupo:first-child { padding-left: 0; border-left: 0; }
.tab-grupo-rotulo { font: 700 10px "Montserrat", "Segoe UI", Arial, sans-serif; text-transform: uppercase;
    letter-spacing: .09em; color: var(--data-gray); margin-right: 2px; white-space: nowrap; }
.tab-grupo:has(a.on) .tab-grupo-rotulo { color: var(--red); }
.tabnav-acoes { display: flex; gap: 6px; align-items: center; flex: none; margin-left: auto; }
.tabnav a, .tabnav button, .pilula { background: #fff; border: 1px solid var(--line-strong); border-radius: 999px;
    padding: 8px 16px; font: 600 12.5px "Roboto", "Segoe UI", Arial, sans-serif; color: var(--body); cursor: pointer;
    text-decoration: none; transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s;
    white-space: nowrap; }
.tabnav a:hover, .tabnav button:hover, .pilula:hover { color: var(--red); border-color: var(--red); }
.tabnav a.on { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 2px 8px rgba(239, 44, 44, .35); }
.tabnav a:focus-visible, .tabnav button:focus-visible, .tabnav summary:focus-visible, .pilula:focus-visible {
    outline: 2px solid var(--red); outline-offset: 2px; }
.tabnav form { margin: 0; display: inline; }
.tabnav .espaco { flex: 1; }
.tabnav .escura { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.tabnav .escura:hover { background: var(--red); border-color: var(--red); color: #fff; }
/* telas medias e pequenas: as abas rolam na horizontal (sem quebrar linha) e os botoes descem para a direita */
@media (max-width: 1100px) {
  .tabnav { flex-wrap: wrap; }
  .tabnav-trilho { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
      scroll-behavior: smooth; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
      scrollbar-width: thin; padding: 2px 2px 8px; }
  .tab-grupo { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .tabnav-trilho { scroll-behavior: auto; } }

/* ---- conteudo, cartoes de formulario e administracao ---- */
/* .cartao = .panel do painel v15 (fundo branco, borda --line, raio 12, padding 18); o filete vermelho no topo marca as
 * telas de acesso/erro do portal. */
main.conteudo { max-width: 960px; margin: 24px auto; padding: 0 20px; }
.cartao { background: var(--bg); border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: var(--raio-painel);
    padding: 26px 28px; max-width: 420px; margin: 40px auto; color: var(--ink); }
.cartao h1, .cartao h2 { margin: 0 0 16px; color: var(--graphite); font-size: 18px; line-height: 1.25; }
.cartao h2 { font-size: 15px; margin: 22px 0 6px; }
.cartao p { margin: 0 0 10px; font-size: 13px; color: var(--body); line-height: 1.5; }
.cartao a { color: var(--red); font-weight: 600; }
.cartao.larga { border-top-width: 1px; max-width: none; margin: 4px 0 24px; padding: 18px; }
label { display: block; margin: 14px 0 4px; font-weight: 600; font-size: 11.5px; color: var(--body); }
/* campos: o mesmo do painel (.cub-form input/select, .anot-form textarea): Roboto 13px, borda --line-strong, raio 8,
 * foco com a borda vermelha (mais um halo leve para quem navega pelo teclado) */
input[type=email], input[type=password], input[type=text], input[type=number], input[type=search], select, textarea {
    padding: 8px 10px; font-family: var(--fonte-texto); font-size: 13px; border: 1px solid var(--line-strong);
    border-radius: var(--raio-campo); color: var(--ink); background: #fff; }
input[type=email], input[type=password], input[type=text], select { width: 100%; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 2px var(--red-tint); }
input[disabled], select[disabled], textarea[disabled] { background: var(--surface); color: var(--data-gray); cursor: not-allowed; }
button.principal { width: 100%; margin-top: 22px; padding: 10px 16px; font: 700 12.5px var(--fonte-texto);
    color: #fff; background: var(--graphite); border: 0; border-radius: var(--raio-pilula); cursor: pointer;
    transition: background-color .15s; }
button.principal:hover { background: var(--red); }
button.principal:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* caixas de mensagem = .aviso-box do painel (fundo tingido, filete de 3px a esquerda, raio 10, 12.5px) */
.erro, .aviso, .sucesso { border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: var(--raio-cartao);
    padding: 11px 14px; margin: 0 0 12px; font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.erro { background: var(--red-tint); }
.erro b, .erro strong { color: var(--red); }
.aviso { background: var(--ambar-tint); border-left-color: var(--ambar); }
.sucesso { background: var(--green-tint); border-left-color: var(--green); }
.erro p, .aviso p, .sucesso p { margin: 0 0 6px; font-size: 12.5px; color: var(--ink); }
.erro p:last-child, .aviso p:last-child, .sucesso p:last-child { margin-bottom: 0; }
ul.erros { margin: 0; padding-left: 18px; }
table th { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); background: var(--surface); }

/* ---- botoes do painel, reaproveitaveis em qualquer tela ---- */
/* .printbtn (linha 252): grafite, raio 8; .btn = o mesmo; .btn-pilula = botao de acao em pilula (.anot-form-linha button);
 * .btn-claro = pilula branca com contorno (.mesChip / .anot-card-acoes button) */
.printbtn, .btn { display: inline-block; background: var(--graphite); color: #fff; border: 0; border-radius: var(--raio-campo);
    padding: 9px 16px; font: 600 12.5px var(--fonte-texto); cursor: pointer; text-decoration: none;
    transition: background-color .15s, color .15s, border-color .15s; }
.printbtn:hover, .btn:hover { background: var(--red); color: #fff; }
.btn-pilula { border-radius: var(--raio-pilula); font-weight: 700; font-size: 12px; padding: 8px 16px; }
.btn-claro { background: #fff; color: var(--body); border: 1px solid var(--line-strong); border-radius: var(--raio-pilula); }
.btn-claro:hover { background: #fff; color: var(--red); border-color: var(--red); }
.printbtn:focus-visible, .btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.printbtn[disabled], .btn[disabled] { opacity: .5; cursor: not-allowed; }
.printbtn[disabled]:hover, .btn[disabled]:hover { background: var(--graphite); }

/* ---- selos (badges), semaforo e pilulas de status (linhas 76-87, 197-201, 279-283) ---- */
.badge { display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: var(--raio-pilula); font-size: 9.5px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .03em; vertical-align: 1px; }
.badge-proj { background: var(--red-tint); color: var(--red); }
.badge-parcial { background: rgba(58, 58, 58, .1); color: var(--body); }
.badge-orc { background: var(--surface); color: var(--body); border: 1px solid var(--line-strong); }
.semaforo { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.semaforo.verde { background: var(--green); }
.semaforo.ambar { background: var(--ambar); }
.semaforo.vermelho { background: var(--red); }
.status-pill { display: inline-block; padding: 2px 9px; border-radius: var(--raio-pilula); font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; }

/* ---- nota tecnica recolhida (<details class="nota-detalhe">, linhas 205-210) ---- */
.nota-detalhe { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--raio-campo); background: var(--surface); }
.nota-detalhe > summary { cursor: pointer; padding: 9px 13px; font-size: 12px; font-weight: 600; color: var(--ink); list-style: none; }
.nota-detalhe > summary::-webkit-details-marker { display: none; }
.nota-detalhe > summary::before { content: "\25B8  "; color: var(--red); }
.nota-detalhe[open] > summary::before { content: "\25BE  "; }
.nota-detalhe > :not(summary) { margin-left: 13px; margin-right: 13px; font-size: 12px; color: var(--body); }
.nota-detalhe > :last-child:not(summary) { margin-bottom: 12px; }

/* ---- rodape ---- */
.foot { max-width: 1280px; margin: 26px auto 0; padding: 16px 20px 24px; border-top: 1px solid var(--line);
    color: var(--body); font-size: 11.5px; display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 10px; }
.foot-brand { display: flex; align-items: center; gap: 8px; }
.foot-logo { height: 22px; width: auto; display: block; }

@media (max-width: 640px) {
  .hero-inner { flex-direction: column; align-items: flex-start; }
  .hero-art { align-self: center; justify-content: center; height: 56px; }
  .hero-art svg { height: 56px; }
  .hero h1 { font-size: 19px; }
  .tabnav { padding: 12px 12px 0; gap: 5px; }
  .tabnav a, .tabnav button { padding: 7px 12px; font-size: 12px; }
  .tab-grupo { padding: 0 10px; }
  main.conteudo { padding: 0 12px; }
}

/* ---- ilustracao animada do cabecalho (CSS puro) ---- */
/* ---- hero-art: caminhoes e empilhadeiras vivos (CSS puro) ---- */
.truck1-anim{transform:translateX(396px);animation:truck1-move 14s ease-in-out infinite}
.truck2-anim{transform:translateX(690px);animation:truck2-move 14s ease-in-out infinite;animation-delay:-7s}
@keyframes truck1-move{
  0%{transform:translateX(-140px)}
  33%{transform:translateX(396px)}
  47%{transform:translateX(396px)}
  100%{transform:translateX(1240px)}
}
@keyframes truck2-move{
  0%{transform:translateX(1220px)}
  33%{transform:translateX(690px)}
  47%{transform:translateX(690px)}
  100%{transform:translateX(-140px)}
}
.wheel,.wheel-mini{transform-box:fill-box;transform-origin:50% 50%}
.wheel{animation:wheel-spin 1s linear infinite}
.wheel-mini{animation:wheel-spin .6s linear infinite}
@keyframes wheel-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.forklift1{transform:translateX(430px);animation:fk1-move 8s ease-in-out infinite}
.forklift2{transform:translateX(540px);animation:fk2-move 7s ease-in-out infinite;animation-delay:-3s}
@keyframes fk1-move{
  0%{transform:translateX(370px)} 8%{transform:translateX(370px)}
  45%{transform:translateX(430px)} 55%{transform:translateX(430px)}
  92%{transform:translateX(370px)} 100%{transform:translateX(370px)}
}
@keyframes fk2-move{
  0%{transform:translateX(480px)} 8%{transform:translateX(480px)}
  45%{transform:translateX(540px)} 55%{transform:translateX(540px)}
  92%{transform:translateX(480px)} 100%{transform:translateX(480px)}
}
.fk1-forkunit{transform:translateY(-7px);animation:fk1-fork 8s ease-in-out infinite}
.fk2-forkunit{transform:translateY(-7px);animation:fk2-fork 7s ease-in-out infinite;animation-delay:-3s}
@keyframes fk1-fork{
  0%{transform:translateY(0)} 6%{transform:translateY(-7px)}
  45%{transform:translateY(-7px)} 50%{transform:translateY(0)}
  100%{transform:translateY(0)}
}
@keyframes fk2-fork{
  0%{transform:translateY(0)} 6%{transform:translateY(-7px)}
  45%{transform:translateY(-7px)} 50%{transform:translateY(0)}
  100%{transform:translateY(0)}
}
.fk1-pallet{opacity:1;animation:fk1-pallet-op 8s ease-in-out infinite}
.fk2-pallet{opacity:1;animation:fk2-pallet-op 7s ease-in-out infinite;animation-delay:-3s}
@keyframes fk1-pallet-op{
  0%{opacity:0} 5%{opacity:0} 8%{opacity:1}
  45%{opacity:1} 50%{opacity:0} 100%{opacity:0}
}
@keyframes fk2-pallet-op{
  0%{opacity:0} 5%{opacity:0} 8%{opacity:1}
  45%{opacity:1} 50%{opacity:0} 100%{opacity:0}
}
.fk1-dockbox{opacity:0;animation:fk1-box-op 8s ease-in-out infinite}
.fk2-dockbox{opacity:0;animation:fk2-box-op 7s ease-in-out infinite;animation-delay:-3s}
@keyframes fk1-box-op{
  0%{opacity:0} 48%{opacity:0} 52%{opacity:1}
  90%{opacity:1} 96%{opacity:0} 100%{opacity:0}
}
@keyframes fk2-box-op{
  0%{opacity:0} 48%{opacity:0} 52%{opacity:1}
  90%{opacity:1} 96%{opacity:0} 100%{opacity:0}
}
.arrow-pulse{opacity:.6;animation:arrow-pulse 2.4s ease-in-out infinite}
.arrow-pulse.b{animation-delay:1.2s}
@keyframes arrow-pulse{0%,100%{opacity:.25}50%{opacity:.65}}

@media (prefers-reduced-motion: reduce){
  .truck1-anim,.truck2-anim,.wheel,.wheel-mini,.forklift1,.forklift2,
  .fk1-forkunit,.fk2-forkunit,.fk1-pallet,.fk2-pallet,.fk1-dockbox,.fk2-dockbox,
  .arrow-pulse{animation:none!important}
}
@media print { .tabnav, .hero-art, .painel-avisos { display: none !important; } .hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }