:root{
  /* styles.css tem --warn (#E1943C) mas não a versão translúcida — a flag
     "produzido" usa as duas (texto/borda + fundo). Só esta página carrega
     este arquivo. */
  --warn-soft: rgba(225,148,60,0.16);
}

/* Produção — Agenda Semanal (producao.html). Reaproveita os tokens/classes
   globais de css/styles.css (--good/--bad, .card, .pf-modal, .auth-form,
   .excel-btn, .access-banner) — aqui só o que é específico desta tela: a
   toolbar com navegação de semana e a grade de 7 dias. */

/* .pf-modal-card (vindo de styles.css) é branco por padrão — mesmo card
   que os modais do GPD usam. Mesma troca pra escuro que o Almoxarifado já
   faz (.almox-modal em css/almoxarifado.css, que esta página não carrega) —
   sem isso o modal "Novo lançamento" ficava branco mas com os <input>
   ainda estilizados pro tema escuro (.auth-field input em styles.css:
   fundo quase-preto translúcido + texto claro), virando um bloco cinza
   ilegível por cima de fundo branco. */
.producao-modal .pf-modal-card{
  background:
    radial-gradient(130% 75% at 14% -12%, rgba(255,255,255,0.14), rgba(255,255,255,0) 52%),
    linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 45%, rgba(255,255,255,0.02) 100%),
    var(--panel);
  border:1px solid rgba(255,255,255,0.12);
}
.producao-modal .pf-modal-title{ color:var(--text); }
.producao-modal .pf-modal-sub{ color:var(--text-dim); }
.producao-modal .pf-modal-close{
  background:var(--panel-2);
  color:var(--text);
  border:1px solid var(--line);
}
.producao-modal .pf-modal-close:hover{ background:var(--panel); color:var(--accent); }

/* .auth-field só tem regra pronta pra <input> em styles.css — <textarea>
   (Observação) sem isso cai no branco padrão do navegador, que destoa do
   modal escuro acima. Mesma regra de css/almoxarifado.css. */
.auth-field textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel-2);
  color:var(--text);
  padding:12px 14px;
  font-size:14px;
  font-family:'Inter', sans-serif;
  outline:none;
  resize:vertical;
}
/* Vendedor (2026-09-18): <select> tambem nao tem regra no .auth-field — sem
   isso abre branco nativo. Seta propria porque appearance:none tira a do
   navegador; <option> escuro pra lista aberta no Windows nao vir branca. */
.auth-field select.producao-vendedor-select{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239aa3b2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  color:var(--text);
  padding:12px 38px 12px 14px;
  font-size:14px;
  font-family:'Inter', sans-serif;
  outline:none;
  cursor:pointer;
}
.auth-field select.producao-vendedor-select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(242,183,5,0.12);
}
.auth-field select.producao-vendedor-select option{ background:#1b1f27; color:#e8ebf0; }

/* ---------- Botoes do header em vidro 3D ------------------------------- */
/* Mesma receita liquid-glass dos botoes de utilidade do header do GPD
   (.gpd-header-btn-red em css/gpd.css): gradiente vertical translucido +
   backdrop-filter + brilho fino no topo por dentro + sombra externa, no
   tamanho do .excel-btn. Aplicado so aqui (classe propria), NAO no
   .excel-btn global — mexer no global mudaria botao de todas as telas.
   O ".logout-powered-row" no seletor e so pra ganhar da regra de
   margin-top do styles.css sem !important. */
.logout-powered-row .excel-btn.producao-header-btn{
  color:var(--text);
  border-color:rgba(225,89,90,0.35);
  background:linear-gradient(180deg, rgba(225,89,90,0.20), rgba(225,89,90,0.05));
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 4px 10px rgba(0,0,0,0.2);
  transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  text-decoration:none;
}
.logout-powered-row .excel-btn.producao-header-btn:hover{
  border-color:rgba(225,89,90,0.5);
  background:linear-gradient(180deg, rgba(225,89,90,0.28), rgba(225,89,90,0.08));
  color:var(--text);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 6px 14px rgba(0,0,0,0.26);
}

/* "Entrar para editar" e acao principal, nao utilidade — mesmo vidro, na cor
   de marca (--accent) em vez do vermelho. */
.logout-powered-row .excel-btn.producao-header-btn-gold{
  border-color:rgba(242,183,5,0.4);
  background:linear-gradient(180deg, rgba(242,183,5,0.22), rgba(242,183,5,0.05));
}
.logout-powered-row .excel-btn.producao-header-btn-gold:hover{
  border-color:rgba(242,183,5,0.6);
  background:linear-gradient(180deg, rgba(242,183,5,0.3), rgba(242,183,5,0.08));
}

/* Obrigatorio com backdrop-filter no proprio elemento: promove o texto pra
   camada de composicao propria. Sem isto ele fica apagado/ilegivel — bug ja
   corrigido 3x neste projeto (ver css/gpd.css e css/styles.css). */
.producao-header-btn span{ position:relative; z-index:1; }

.producao-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.producao-week-nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.producao-week-label{
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:14px;
  color:var(--text);
  min-width:190px;
  text-align:center;
}

/* ---------- Prazo minimo de entrega (barra da agenda) ------------------
   Mesmo vidro 3D laranja do orb de "Pedidos produzidos" (.producao-produzidos-orb
   la embaixo), so que compacto e clicavel. O numero grande e o dado; o resto
   e legenda. E um <button> de proposito: pro admin ele abre o modal de edicao,
   e pra quem nao e admin fica so como cartao (pointer-events:none abaixo). */
.producao-prazo-orb{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  border:0;
  padding:8px 20px 9px;
  border-radius:16px;
  text-align:center;
  color:#20160a;
  font:inherit;
  cursor:default;
  background:linear-gradient(160deg, #ffc987 0%, #e1943c 55%, #a86222 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.6),
    inset 0 -6px 9px -4px rgba(110,55,0,0.4),
    0 2px 4px rgba(0,0,0,0.35),
    0 10px 20px -8px rgba(225,148,60,0.45),
    0 16px 26px -12px rgba(0,0,0,0.6);
  transition:transform .15s ease, box-shadow .15s ease;
  /* Pulsacao (pedido do usuario, 2026-09-03): o card precisa puxar o olho de
     quem chega no balcao. Anima SO box-shadow/brilho, nunca transform — o
     hover do admin ja usa translateY, e animacao ganha da transicao, o card
     ficaria "preso" no meio do pulo ao passar o mouse. */
  animation:producaoPrazoPulse 2.4s ease-in-out infinite;
}
@keyframes producaoPrazoPulse{
  0%, 100%{
    box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,0.6),
      inset 0 -6px 9px -4px rgba(110,55,0,0.4),
      0 2px 4px rgba(0,0,0,0.35),
      0 10px 20px -8px rgba(225,148,60,0.45),
      0 16px 26px -12px rgba(0,0,0,0.6),
      0 0 0 0 rgba(255,201,135,0.45);
  }
  55%{
    box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,0.7),
      inset 0 -6px 9px -4px rgba(110,55,0,0.4),
      0 2px 4px rgba(0,0,0,0.35),
      0 12px 26px -8px rgba(225,148,60,0.7),
      0 16px 26px -12px rgba(0,0,0,0.6),
      0 0 0 9px rgba(255,201,135,0);
  }
}
/* Quem pediu menos movimento no sistema nao ganha o pulso — mesma cortesia
   do resto do projeto (ver @media prefers-reduced-motion em styles.css). */
@media (prefers-reduced-motion: reduce){
  .producao-prazo-orb{ animation:none; }
}
.producao-prazo-num{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:700;
  font-size:30px;
  line-height:1.02;
  letter-spacing:-0.01em;
}
.producao-prazo-unit{
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  opacity:0.8;
  margin-top:1px;
}
.producao-prazo-label{
  font-size:10.5px;
  margin-top:6px;
  padding-top:5px;
  border-top:1px solid rgba(60,30,0,0.22);
  opacity:0.85;
  white-space:nowrap;
}
/* "toque para editar" so existe pro admin — ver producaoApplyAuthMode. */
.producao-prazo-edit{
  display:none;
  font-family:'Oswald', sans-serif;
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:0.09em;
  opacity:0.62;
  margin-top:3px;
}
.producao-role-admin .producao-prazo-orb{ cursor:pointer; }
.producao-role-admin .producao-prazo-edit{ display:block; }
.producao-role-admin .producao-prazo-orb:hover{
  /* Com o mouse em cima o pulso para: a animacao de box-shadow tem
     prioridade sobre o box-shadow declarado aqui e o hover nao apareceria. */
  animation:none;
  transform:translateY(-2px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.65),
    inset 0 -6px 9px -4px rgba(110,55,0,0.4),
    0 3px 6px rgba(0,0,0,0.35),
    0 14px 26px -8px rgba(225,148,60,0.55),
    0 20px 30px -12px rgba(0,0,0,0.6);
}
.producao-role-admin .producao-prazo-orb:active{ transform:translateY(0); }

.producao-legend{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:16px;
  font-size:12px;
  color:var(--text-dim);
}
.producao-legend-item{ display:flex; align-items:center; gap:6px; }
.producao-dot{
  display:inline-block;
  width:10px; height:10px;
  border-radius:50%;
  flex:0 0 auto;
}
.producao-dot-ok{ background:var(--good); }
.producao-dot-over{ background:var(--bad); }

/* Amostra da flag "produzido" na legenda — mesmo quadrado laranja do
   lançamento, em miniatura. */
.producao-flag-legenda{
  display:inline-block;
  width:11px; height:11px;
  border-radius:3px;
  background:var(--warn);
  flex:0 0 auto;
}

.producao-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
}

.producao-day{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel-2);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:180px;
}

/* Estado do dia: verde (dentro da capacidade) ou vermelho (lotado, acima do
   limite diário) — pedido explícito do usuário. A cor entra no topo do card
   inteiro (borda + fundo do cabeçalho), não só num texto pequeno, pra dar
   pra ver o status da semana inteira num relance. */
.producao-day-ok{ border-color:var(--good); }
.producao-day-over{ border-color:var(--bad); }

.producao-day-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px;
  border-radius:10px;
  background:var(--good-soft);
  color:var(--good);
}
.producao-day-over .producao-day-head{
  background:var(--bad-soft);
  color:var(--bad);
}
.producao-day-today .producao-day-head::after{
  content:"hoje";
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  opacity:0.85;
}

/* Dia de hoje: destaque em amarelo (cor de marca) em vez do verde padrão —
   some sozinho quando o dia passa. Mesma ideia do verde/vermelho: a cor
   entra na borda + no cabeçalho inteiro (nome, data, total, "hoje"), não num
   texto pequeno. Se hoje também estourar os 500 m, o vermelho de "lotado"
   tem prioridade — os seletores compostos abaixo (specificity maior) ganham
   do amarelo, sem depender da ordem no arquivo. */
.producao-day-today{ border-color:var(--accent); }
.producao-day-today .producao-day-head{
  background:var(--accent-soft);
  color:var(--accent);
}
.producao-day-over.producao-day-today{ border-color:var(--bad); }
.producao-day-over.producao-day-today .producao-day-head{
  background:var(--bad-soft);
  color:var(--bad);
}

/* Dia 100% produzido: pulso SÓ na parte externa do card (pedido do usuário,
   2026-08-31) — halo laranja que respira em volta, na mesma cor da flag
   "produzido". De propósito NÃO mexe na cor da borda nem no conteúdo: o
   verde/vermelho/amarelo da borda e do cabeçalho continuam significando
   capacidade/hoje, decisões anteriores do usuário que seguem valendo. A
   animação só existe enquanto o dia inteiro está produzido; volta a sumir
   sozinha se algum lançamento for desmarcado ou um novo for adicionado. */
@keyframes producaoPulsoProduzido{
  0%, 100%{
    box-shadow:
      0 0 0 0 rgba(225,148,60,0.0),
      0 0 10px -2px rgba(225,148,60,0.25);
  }
  50%{
    box-shadow:
      0 0 0 4px rgba(225,148,60,0.16),
      0 0 26px 2px rgba(225,148,60,0.5);
  }
}
.producao-day-completo{
  animation:producaoPulsoProduzido 2.2s ease-in-out infinite;
}
/* Quem pediu menos animação no sistema vê o halo aceso, parado. */
@media (prefers-reduced-motion: reduce){
  .producao-day-completo{
    animation:none;
    box-shadow:0 0 0 3px rgba(225,148,60,0.16), 0 0 20px rgba(225,148,60,0.35);
  }
}

.producao-day-name{
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.producao-day-date{
  font-size:11px;
  opacity:0.85;
}
.producao-day-totais{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  min-width:0;
}
.producao-day-total{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:600;
  font-size:15px;
}

/* Metragem já produzida do dia — sempre em laranja (--warn), nunca herda o
   verde/vermelho/amarelo do cabeçalho: é uma informação de outra natureza
   (quanto já saiu) e precisa se distinguir do total programado logo acima,
   inclusive quando o dia está lotado (vermelho) ou é hoje (amarelo). Só
   aparece quando há algo produzido (ver producaoRenderGrid). */
.producao-day-produzido{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:600;
  font-size:10.5px;
  color:var(--warn);
  background:var(--warn-soft);
  border:1px solid rgba(225,148,60,0.35);
  border-radius:6px;
  padding:1px 6px;
  white-space:nowrap;
  line-height:1.5;
}

.producao-day-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}

/* Grid (nao flex, desde 2026-08-31): linha 1 = check | info | flag
   "produzido"; linha 2 = so o botao "Excluir", encostado a direita. Grid
   porque a segunda linha precisa ser garantida — com flex-wrap o botao so
   quebraria quando faltasse espaco. */
.producao-entry{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:start;
  gap:6px;
  padding:7px 8px;
  border-radius:8px;
  background:var(--panel);
  border:1px solid var(--line-soft);
  font-size:12.5px;
}
.producao-entry-check{ grid-column:1; grid-row:1; }
.producao-entry-info{ grid-column:2; grid-row:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
/* Legibilidade do card (2026-09-08): o usuario reclamou que a letra estava
   dificil de ler — a observacao (a descricao do produto, que e o que a
   fabrica precisa enxergar) vinha em --text-faint 11px, quase apagada no
   fundo escuro. A hierarquia continua a mesma (nome > metragem > cidade >
   observacao), so que agora nenhuma linha fica abaixo do contraste util. */
.producao-entry-cliente{ color:var(--text); font-weight:600; font-size:13.5px; letter-spacing:0.01em; word-break:break-word; }
/* Cidade do cliente (2026-09-08): linha de apoio, com o pin pra ler de
   relance sem competir com o nome do cliente. */
.producao-entry-cidade{
  color:var(--text-dim);
  font-size:12px;
  word-break:break-word;
  display:flex;
  align-items:baseline;
  gap:4px;
}
.producao-entry-cidade::before{ content:'\1F4CD'; font-size:10px; opacity:0.75; }
.producao-entry-vendedor::before{ content:'\1F464'; }
.producao-entry-metragem{ color:var(--text); font-size:12.5px; font-weight:600; font-family:'JetBrains Mono', ui-monospace, monospace; }
.producao-entry-obs{ color:var(--text-dim); font-size:12px; line-height:1.35; word-break:break-word; }

/* Coluna de ações à direita do lançamento: a flag "produzido" (quadrado
   laranja) e o "×" de excluir. Posição pedida pelo usuário (2026-08-30) — a
   flag fica na borda direita do card, não junto do check redondo de
   "retirado", que continua à esquerda. */
.producao-entry-actions{
  grid-column:3;
  grid-row:1;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:4px;
}

/* Quadrado (não círculo, pra não confundir com o check de "retirado"):
   vazio = ainda não produzido; preenchido de laranja = produzido. */
.producao-entry-prod{
  flex:0 0 auto;
  width:20px; height:20px;
  border-radius:6px;
  border:1.5px solid var(--line);
  background:transparent;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:transparent;
  font-size:12px;
  line-height:1;
  padding:0;
}
.producao-entry-prod:hover{ border-color:var(--warn); }
.producao-entry.producao-entry-produzido .producao-entry-prod{
  background:var(--warn);
  border-color:var(--warn);
  color:var(--bg);
}
/* Linha inteira ganha um traço laranja quando produzida — dá pra varrer o
   dia sem olhar botão por botão. */
.producao-entry.producao-entry-produzido{
  border-color:rgba(225,148,60,0.4);
  box-shadow:inset 3px 0 0 var(--warn);
}

/* Rodape do lancamento (2026-09-01): "Editar" + "Excluir" na MESMA
   linha propria embaixo do lancamento. O Excluir continua exatamente onde
   foi validado em 2026-08-31 (ponta direita da linha de baixo, longe da
   flag "produzido"); o novo botao entra a esquerda dele. As regras de
   grid-column/grid-row/justify-self do .producao-entry-del ficam inertes
   dentro deste flex — foram mantidas de proposito, sao o que posiciona o
   botao caso o rodape saia daqui. */
.producao-entry-rodape{
  grid-column:2 / -1;
  grid-row:2;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:6px;
}

/* "Editar": corrige os campos do lancamento (inclusive a data) sem apagar e relancar
   (pedido do usuario, 2026-09-01). Verde x vermelho do Excluir — a cor e o
   que evita o clique errado entre dois botoes vizinhos do mesmo tamanho. */
.producao-entry-mover{
  margin-top:2px;
  /* Vidro 3D em verde — mesma receita do "Excluir" logo abaixo (gradiente de
     cima pra baixo, brilho fino no topo por dentro, sombra interna embaixo e
     sombras externas pra levantar do fundo), so que em verde: mover um
     lancamento e acao segura, nao destrutiva, e a cor e o que separa os dois
     botoes vizinhos do mesmo tamanho. SEM backdrop-filter (mesmo motivo do
     Excluir: ja borrou texto neste projeto 3 vezes). */
  background:linear-gradient(160deg, #7ddba0 0%, #2f9d5f 55%, #175a34 100%);
  border:none;
  color:#fff;
  text-shadow:0 1px 1px rgba(8,60,30,0.5);
  cursor:pointer;
  padding:5px 12px;
  border-radius:9px;
  line-height:1;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  flex:0 0 auto;
  white-space:nowrap;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.5),
    inset 0 -5px 8px -4px rgba(10,60,30,0.5),
    0 1px 3px rgba(0,0,0,0.35),
    0 6px 14px -6px rgba(80,200,130,0.4),
    0 10px 18px -10px rgba(0,0,0,0.6);
  transform:translateY(-1px);
}
.producao-entry-mover:hover{
  background:linear-gradient(160deg, #96e8b4 0%, #3bb570 55%, #1c6b3f 100%);
}
.producao-entry-mover:active{
  transform:translateY(0);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.35),
    inset 0 -3px 6px -3px rgba(10,60,30,0.55),
    0 1px 2px rgba(0,0,0,0.35);
}

/* Excluir (refeito em 2026-08-31): o "x" mudo ficava colado no quadrado
   "produzido" e alguem apagou um lancamento querendo marcar produzido.
   Agora e um rotulo escrito, vermelho e com contorno, numa LINHA PROPRIA
   embaixo do lancamento (flex-wrap no .producao-entry + width:100% aqui) —
   longe do alvo de toque da flag, que continua exatamente onde foi validada
   em 2026-08-30 (borda direita, topo do card). E acao destrutiva e
   definitiva (DELETE no MySQL, sem lixeira), entao tem que ser lida antes de
   clicada, nao adivinhada pelo simbolo. */
.producao-entry-del{
  grid-column:2 / -1;
  grid-row:2;
  justify-self:end;
  margin-top:2px;
  /* Vidro 3D em vermelho — mesma receita do orb "Pedidos produzidos" e do
     dia de hoje no calendario do Almoxarifado: gradiente de cima pra baixo,
     brilho fino no topo por dentro, sombra interna embaixo e sombras
     externas pra levantar do fundo. SEM backdrop-filter (fundo aqui e cor
     solida; blur so reproduziria o bug de texto borrado que ja pegou este
     projeto 3 vezes). */
  background:linear-gradient(160deg, #f08b8c 0%, #d64d4e 55%, #8e2b2c 100%);
  border:none;
  /* Branco sobre o vidro vermelho: comparado lado a lado com o texto escuro
     no render ampliado, o branco le melhor no tamanho real (10,5px). */
  color:#fff;
  text-shadow:0 1px 1px rgba(80,10,10,0.5);
  cursor:pointer;
  padding:5px 12px;
  border-radius:9px;
  line-height:1;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  flex:0 0 auto;
  white-space:nowrap;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.5),
    inset 0 -5px 8px -4px rgba(90,15,15,0.5),
    0 1px 3px rgba(0,0,0,0.35),
    0 6px 14px -6px rgba(225,89,90,0.45),
    0 10px 18px -10px rgba(0,0,0,0.6);
  transform:translateY(-1px);
}
.producao-entry-del:hover{
  background:linear-gradient(160deg, #f7a0a1 0%, #e1595a 55%, #a03334 100%);
}
.producao-entry-del:active{
  transform:translateY(0);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.35),
    inset 0 -3px 6px -3px rgba(90,15,15,0.55),
    0 1px 2px rgba(0,0,0,0.35);
}

.producao-day-empty{
  color:var(--text-faint);
  font-size:11.5px;
  text-align:center;
  padding:8px 0;
}

.producao-day-add{
  border:1px dashed var(--line);
  background:transparent;
  color:var(--text-dim);
  border-radius:8px;
  padding:7px;
  font-size:12px;
  cursor:pointer;
  width:100%;
}
.producao-day-add:hover{ border-color:var(--accent); color:var(--accent); }

/* Retirado — checkbox redondo no canto do lançamento (dentro do card do
   dia). Não retirado: contorno vazio. Retirado: preenchido + nome do
   cliente esmaecido/riscado, pra bater o olho rápido no que já foi. */
.producao-entry{ align-items:center; }
.producao-entry.producao-entry-retirado{ opacity:0.55; }
.producao-entry.producao-entry-retirado .producao-entry-cliente{ text-decoration:line-through; }

.producao-entry-check{
  flex:0 0 auto;
  width:18px; height:18px;
  border-radius:50%;
  border:1.5px solid var(--line);
  background:transparent;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:transparent;
  font-size:12px;
  line-height:1;
  margin-top:1px;
}
.producao-entry-check:hover{ border-color:var(--good); }
.producao-entry.producao-entry-retirado .producao-entry-check{
  background:var(--good);
  border-color:var(--good);
  color:var(--bg);
}

/* ---------- Card "Pedidos produzidos" ---------------------------------- */
/* Número em "vidro 3D": mesma receita do dia de hoje no calendário do
   Almoxarifado (.almox-datepicker-day--today) — gradiente de cima pra baixo,
   brilho fino no topo por dentro, sombra interna embaixo e sombras externas
   pra levantar do fundo —, só que em laranja (--warn), a cor que a flag
   "produzido" já usa. SEM backdrop-filter: o fundo aqui é cor sólida, blur
   não teria efeito real e reproduziria o bug de texto borrado que já pegou
   este projeto 3 vezes (ver nota em css/almoxarifado.css e styles.css). */
.producao-produzidos-body{
  display:flex;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
}

.producao-produzidos-orb{
  flex:0 0 auto;
  min-width:180px;
  padding:16px 22px 14px;
  border-radius:18px;
  text-align:center;
  color:#20160a;
  background:linear-gradient(160deg, #ffc987 0%, #e1943c 55%, #a86222 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.6),
    inset 0 -6px 9px -4px rgba(110,55,0,0.4),
    0 2px 4px rgba(0,0,0,0.35),
    0 10px 20px -8px rgba(225,148,60,0.45),
    0 16px 26px -12px rgba(0,0,0,0.6);
  transform:translateY(-1px);
}
.producao-produzidos-num{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:700;
  font-size:34px;
  line-height:1.05;
  letter-spacing:-0.01em;
}
.producao-produzidos-unit{
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  opacity:0.8;
  margin-top:2px;
}
.producao-produzidos-sub{
  font-size:11px;
  margin-top:8px;
  padding-top:7px;
  border-top:1px solid rgba(60,30,0,0.22);
  opacity:0.85;
}

.producao-produzidos-listas{ flex:1 1 320px; min-width:0; }

/* Coluna dos dois números de vidro 3D: "m produzidos" (laranja) em cima e
   "m a produzir" (14/09/2026) embaixo, mesma largura. */
.producao-orbs-col{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:180px;
}
/* "A produzir": mesmo vidro 3D do laranja, em azul-aço — é fila, não
   alerta; o vermelho fica só pro texto de atrasados. */
.producao-aproduzir-orb{
  color:#EAF6FF;
  background:linear-gradient(160deg, #8fcbe6 0%, #3f86ad 55%, #1f4f6d 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.55),
    inset 0 -6px 9px -4px rgba(5,30,48,0.5),
    0 2px 4px rgba(0,0,0,0.35),
    0 10px 20px -8px rgba(79,154,192,0.45),
    0 16px 26px -12px rgba(0,0,0,0.6);
}
.producao-aproduzir-orb .producao-produzidos-sub{ border-top-color:rgba(255,255,255,0.25); }
.producao-aproduzir-orb .producao-produzidos-sub.is-atrasado{
  color:#FFE1E1;
  font-weight:700;
  opacity:1;
}

/* Traço laranja na lateral, igual ao do lançamento produzido no card do dia
   — mesma leitura visual nos dois lugares. */
.producao-lista-item-produzido{ box-shadow:inset 3px 0 0 var(--warn); }

.producao-status-pill{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:600;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.03em;
  border-radius:8px;
  padding:3px 7px;
  white-space:nowrap;
}
/* Agora são BOTÕES (dar baixa na entrega direto daqui, pedido do usuário
   2026-08-31), não mais só etiquetas: produzido e ainda não entregue =
   verde, a ação que interessa; já entregue = discreto, e clicar desfaz.
   Gravam em entrada.retirado, o mesmo campo do "Marcar retirado" do card de
   Clientes pendentes. */
.producao-status-pill{
  cursor:pointer;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  transition:background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.producao-status-aentregar{
  color:var(--good);
  background:var(--good-soft);
  border:1px solid rgba(79,174,124,0.35);
}
.producao-status-aentregar:hover{
  background:rgba(79,174,124,0.26);
  border-color:rgba(79,174,124,0.6);
}
.producao-status-entregue{
  color:var(--text-faint);
  background:var(--panel);
  border:1px solid var(--line);
}
.producao-status-entregue:hover{
  color:var(--text-dim);
  border-color:var(--text-faint);
}

/* Modo consulta (sem login): vira etiqueta de novo — mostra o estado, mas
   não deixa clicar. Mesma doutrina do resto da tela: o guard de verdade
   está no servidor e em js/producao.js, aqui é só não parecer clicável. */
.producao-readonly .producao-status-pill{
  pointer-events:none;
  cursor:default;
}

@media (max-width: 620px){
  .producao-produzidos-orb{ width:100%; }
  .producao-orbs-col{ width:100%; }
}

/* ---------- Painel de filtros (clientes pendentes + dias disponíveis) --- */
.producao-filtros{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:24px;
  margin-top:16px;
}
.producao-filtros-col{ display:flex; flex-direction:column; min-width:0; }

/* Divisor sutil entre as duas colunas — só em telas largas (ver
   media query 900px abaixo, onde as colunas empilham e o divisor lateral
   deixaria de fazer sentido). */
@media (min-width: 901px){
  .producao-filtros-col + .producao-filtros-col{
    padding-left:24px;
    border-left:1px solid var(--line);
  }
}

.producao-count-pill{
  display:inline-block;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11px;
  font-weight:600;
  color:var(--text-dim);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  padding:1px 8px;
  vertical-align:middle;
  margin-left:6px;
}

/* Input de busca — auto-contido (não depende de css/almoxarifado.css, que
   esta página não carrega); mesmo visual de .almox-filter-input pra manter
   consistência com o resto do app. */
.producao-busca-wrap{
  position:relative;
  margin-bottom:10px;
}
.producao-busca-icone{
  position:absolute;
  left:11px;
  top:50%;
  transform:translateY(-50%);
  width:15px;
  height:15px;
  color:var(--text-faint);
  pointer-events:none;
  transition:color .15s ease;
}
.producao-busca-wrap:focus-within .producao-busca-icone{ color:var(--accent); }

/* Campo de busca em "vidro 3D" — mesma receita já usada no resto do
   ecossistema (.gpd-plano-table-wrap em css/gpd.css, .producao-modal
   .pf-modal-card logo acima): gradiente translúcido + backdrop-filter +
   inset 0 1px 0 de luz no topo + sombra projetada curta. Mantido assim a
   pedido explícito do usuário ("mantenha o padrão vidro 3D que já usamos");
   não trocar por fundo chapado var(--panel-2). */
.producao-filtro-busca{
  width:100%;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.012) 60%),
    rgba(26,31,38,0.4);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 24px -16px rgba(0,0,0,0.55);
  color:var(--text);
  padding:9px 11px 9px 34px;
  font-size:12.5px;
  font-family:'Inter', sans-serif;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.producao-filtro-busca:hover{ border-color:rgba(255,255,255,0.14); }

/* Busca do topo do card da Agenda Semanal — mesmo vidro do campo de
   pendentes, só com respiro maior embaixo (a legenda vem logo a seguir). */
.producao-busca-semana{ margin-bottom:8px; }

/* Rodapé "N lançamento(s) de X nesta semana" — some quando a busca está
   vazia (classe .hidden vinda de styles.css). */
.producao-busca-info{
  font-size:11.5px;
  color:var(--text-dim);
  margin:-2px 0 10px;
}

/* Trecho do nome do cliente que casou com a busca. background:transparent
   porque o <mark> nativo vem amarelo-claro do navegador, ilegível no tema
   escuro. */
.producao-mark{
  background:transparent;
  color:var(--accent);
  font-weight:600;
  border-radius:3px;
  padding:0;
}
.producao-filtro-busca::-webkit-search-cancel-button{
  -webkit-appearance:none;
  appearance:none;
  width:13px;
  height:13px;
  cursor:pointer;
  background:currentColor;
  opacity:.35;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 6 6 18M6 6l12 12' stroke='black' stroke-width='2.5' stroke-linecap='round' fill='none'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 6 6 18M6 6l12 12' stroke='black' stroke-width='2.5' stroke-linecap='round' fill='none'/></svg>") center/contain no-repeat;
}
.producao-filtro-busca::-webkit-search-cancel-button:hover{ opacity:.8; }
.producao-filtro-busca::placeholder{ color:var(--text-faint); }
.producao-filtro-busca:focus{
  border-color:var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 10px 24px -16px rgba(0,0,0,0.55), 0 0 0 3px rgba(120,200,150,0.10);
}

.producao-lista-semana{
  font-family:'Oswald', sans-serif;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--text-faint);
  padding:10px 2px 2px;
}
.producao-lista-semana:first-child{ padding-top:2px; }

.producao-lista{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:420px;
  overflow-y:auto;
}

.producao-lista-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:8px;
  background:var(--panel-2);
  border:1px solid var(--line-soft);
  font-size:12.5px;
}

.producao-lista-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.producao-lista-cliente{ color:var(--text); font-weight:500; word-break:break-word; }
.producao-lista-sub{ color:var(--text-dim); font-size:11.5px; }
.producao-lista-sub.producao-atrasado{ color:var(--bad); font-weight:600; }

.producao-lista-actions{ flex:0 0 auto; display:flex; align-items:center; gap:6px; }

.producao-lista-retirar-btn{
  border:1px solid var(--good);
  color:var(--good);
  background:transparent;
  border-radius:8px;
  padding:5px 10px;
  font-size:11.5px;
  cursor:pointer;
  white-space:nowrap;
}
.producao-lista-retirar-btn:hover{ background:var(--good-soft); }

/* Marca laranja na lista de pendentes: já produzido, mas o cliente ainda
   não retirou — ou seja, pronto pra entrega. */
.producao-prod-pill{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:600;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.03em;
  color:var(--warn);
  background:var(--warn-soft);
  border:1px solid rgba(225,148,60,0.35);
  border-radius:8px;
  padding:3px 7px;
  white-space:nowrap;
}

.producao-lista-dia-pill{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:600;
  font-size:12px;
  color:var(--good);
  background:var(--good-soft);
  border-radius:8px;
  padding:5px 9px;
  white-space:nowrap;
}

@media (max-width: 900px){
  .producao-filtros{ grid-template-columns:1fr; }
}

@media (max-width: 1100px){
  .producao-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px){
  .producao-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .producao-week-label{ min-width:0; }
}

@media (max-width: 460px){
  .producao-grid{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------------
   Ajustes de celular real (<=640px). Tudo aqui é OVERRIDE ESCOPADO de regras
   globais do css/styles.css que valem pro painel comercial inteiro — não
   mexer lá, outras telas dependem delas:

   - styles.css:2586 `.excel-btn{ width:100%; margin-top:8px }` fazia os
     botões ‹ / › / Hoje virarem três blocos empilhados de largura total,
     ~180px de altura só pra navegar de semana.
   - styles.css:2750 `.card h3{ text-align:center }` centralizava os títulos
     ("Agenda Semanal", "Clientes pendentes", "Dias disponíveis") só no
     celular, enquanto no desktop eles são à esquerda.
   --------------------------------------------------------------------------- */
@media (max-width: 640px){
  /* Navegação de semana volta pra uma linha só: ‹ | data | › | Hoje.
     grid em vez de flex pro rótulo da data (1fr) absorver a sobra e os
     botões ficarem do tamanho do conteúdo. */
  .producao-week-nav{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto auto;
    align-items:center;
    gap:6px;
    width:100%;
    flex-wrap:nowrap;
  }
  .producao-week-nav .excel-btn{
    width:auto;
    margin-top:0;
    padding:8px 10px;
    white-space:nowrap;
  }
  .producao-week-label{
    min-width:0;
    font-size:12.5px;
    line-height:1.2;
  }

  /* Títulos/subtítulos da tela seguem o desktop (à esquerda). */
  .producao-toolbar h3,
  .producao-toolbar .card-sub{
    text-align:left;
  }
  .producao-toolbar{
    align-items:flex-start;
    gap:10px;
  }

  /* No celular a barra da agenda empilha: o card do prazo ocupa a largura
     toda em vez de virar uma coluna estreita espremida. */
  .producao-prazo-orb{
    width:100%;
    padding:10px 16px 11px;
  }

  /* Legenda: os itens quebram em várias linhas no celular; sem
     align-items:flex-start a bolinha/quadrado fica centralizada
     verticalmente no bloco de 3 linhas, longe do texto que descreve. */
  .producao-legend{
    gap:8px 14px;
    font-size:11.5px;
    margin-bottom:12px;
  }
  .producao-legend-item{ align-items:flex-start; }
  .producao-legend-item .producao-dot,
  .producao-legend-item .producao-flag-legenda{ margin-top:3px; }

  /* min-height:180px é pro card não "murchar" na grade de 5 colunas do
     desktop; empilhado em coluna única no celular ele só gera rolagem —
     um dia sem lançamentos não precisa de 180px de altura. */
  .producao-day{
    min-height:0;
    padding:10px;
  }
}

/* Modo consulta (sem login) — pedido do usuário 2026-08-28: a agenda é
   aberta pra qualquer navegador, mas criar/marcar retirado/excluir só depois
   de entrar como admin. O guard de verdade está no servidor (rotas de
   escrita) e no js/producao.js; aqui é só tirar da tela o que não dá pra
   usar, pra não parecer clicável. */
.producao-readonly .producao-day-add,
.producao-readonly .producao-entry-mover,
.producao-readonly .producao-entry-del,
.producao-readonly .producao-entry-check,
.producao-readonly .producao-lista-retirar-btn{
  display:none;
}

/* Exceção: a flag "produzido" NÃO some no modo consulta — ela é informação
   (o pedido já saiu da fábrica), não só um controle, e é justamente o que
   quem abre a agenda sem login precisa ver. O que muda é que ela vira só
   marca: some quando o lançamento ainda não foi produzido (quadrado vazio
   sem função só poluiria) e deixa de ser clicável quando já foi. O guard de
   verdade continua no servidor e em js/producao.js. */
.producao-readonly .producao-entry:not(.producao-entry-produzido) .producao-entry-prod{
  display:none;
}
.producao-readonly .producao-entry-prod{
  pointer-events:none;
  cursor:default;
}

/* "Gerar PDF" do relatório de clientes pendentes — pra quem pode editar a
   agenda: admin e "fernando" (pedido do usuário 2026-08-28, fernando conta
   como admin nesta página). Escondido por padrão; body.producao-admin
   (setado em js/producao.js junto com o modo de edição) revela. Fica à
   direita na .producao-toolbar (flex, justify-content:space-between). */
.producao-pdf-btn{ display:none; margin-top:0; white-space:nowrap; }
.producao-admin .producao-pdf-btn{ display:inline-block; }

/* ---- Imprimir pedidos (14/09/2026) ----
   Botão na barra da agenda, entre o card do prazo e a navegação da semana,
   e a lista de dias no modal (ver producaoOpenImprimirModal em
   js/producao.js). <span> em volta do texto do botão pelo mesmo motivo de
   todo .excel-btn com efeito de vidro neste projeto (texto solto some). */
.producao-imprimir-btn{
  /* Compacto de propósito: a barra só tem ~140px livres entre o card do
     prazo e a navegação; "Imprimir pedidos" por extenso derrubava a
     navegação da semana pra linha de baixo (conferido a 1240px).
     Vidro 3D laranja, o mesmo acabamento do card do prazo ao lado (opção C
     escolhida pelo usuário na tela, 14/09/2026, entre fumê/azul-aço/laranja).
     Sem backdrop-filter: é a causa conhecida de texto borrado no Android. */
  flex:0 0 auto;
  margin-top:0;
  padding:9px 14px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.02em;
  border-radius:12px;
  white-space:nowrap;
  color:#20160a;
  border:0;
  background:linear-gradient(160deg, #ffc987 0%, #e1943c 55%, #a86222 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.6),
    inset 0 -6px 9px -4px rgba(110,55,0,0.4),
    0 2px 4px rgba(0,0,0,0.35),
    0 10px 20px -8px rgba(225,148,60,0.45);
  transition:transform .15s ease, box-shadow .15s ease;
}
/* Hover mantém o laranja: o .excel-btn:hover genérico pinta o fundo/texto de
   outra cor (já sumiu texto assim neste projeto). */
.producao-imprimir-btn:hover{
  color:#20160a;
  background:linear-gradient(160deg, #ffd49c 0%, #e89f4a 55%, #b06a28 100%);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.7),
    inset 0 -6px 9px -4px rgba(110,55,0,0.4),
    0 3px 6px rgba(0,0,0,0.38),
    0 14px 24px -8px rgba(225,148,60,0.55);
}
.producao-imprimir-btn span{ position:relative; z-index:1; }
.producao-imprimir-atalhos{
  display:flex;
  gap:14px;
  margin:4px 0 10px;
}
.producao-imprimir-link{
  background:none;
  border:0;
  padding:0;
  color:var(--accent);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.producao-imprimir-dias{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:14px;
}
.producao-imprimir-dia{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--panel-2);
  cursor:pointer;
}
.producao-imprimir-dia:has(input:checked){
  border-color:var(--accent);
  background:rgba(242,183,5,0.10);
}
.producao-imprimir-dia input{ width:18px; height:18px; accent-color:#F2B705; cursor:pointer; }
.producao-imprimir-dia-nome{ font-weight:700; color:var(--text); font-size:15px; }
.producao-imprimir-dia-nome small{ font-weight:500; color:var(--text-dim); margin-left:6px; font-size:13px; }
.producao-imprimir-dia-info{ font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--text-dim); }
.producao-imprimir-dia.is-vazio .producao-imprimir-dia-nome{ color:var(--text-dim); }

/* Card "m a produzir" clicável: abre o PDF dos a produzir + atrasados
   (14/09/2026). Mesma leitura do card do prazo ("toque para editar"): uma
   linha pequena de ação embaixo e o card sobe um pouco no hover. */
.producao-aproduzir-orb{
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.producao-aproduzir-orb:hover,
.producao-aproduzir-orb:focus-visible{
  outline:none;
  transform:translateY(-3px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.65),
    inset 0 -6px 9px -4px rgba(5,30,48,0.5),
    0 3px 6px rgba(0,0,0,0.38),
    0 14px 26px -8px rgba(79,154,192,0.6),
    0 18px 30px -12px rgba(0,0,0,0.6);
}
/* "m produzidos" clicável (14/10/2026): abre a barra de período. Mesma
   leitura do card "a produzir" (sobe um pouco no hover). */
.producao-produzidos-orb-clicavel{ cursor:pointer; transition:transform .15s ease; }
.producao-produzidos-orb-clicavel:hover,
.producao-produzidos-orb-clicavel:focus-visible{ outline:none; transform:translateY(-3px); }
.producao-produzidos-orb-clicavel[aria-expanded="true"]{ box-shadow:0 0 0 2px rgba(242,183,5,.55), 0 14px 26px -10px rgba(0,0,0,.6); }
.producao-periodo{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:2px 0 14px; }
.producao-periodo.hidden{ display:none; }
.producao-periodo-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.producao-periodo-chips button{ border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.05); color:var(--text); border-radius:999px; padding:6px 12px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.producao-periodo-chips button:hover{ border-color:rgba(242,183,5,.6); }
.producao-periodo-chips button.ativo{ background:#F2B705; border-color:#F2B705; color:#1A1400; }
.producao-periodo-datas{ display:flex; flex-wrap:wrap; gap:8px; font-size:12.5px; color:var(--text-dim, #aab); }
.producao-periodo-datas label{ display:inline-flex; align-items:center; gap:6px; }
.producao-periodo-datas input{ background:rgba(26,31,38,0.6); border:1px solid rgba(255,255,255,0.12); border-radius:10px; color:var(--text); padding:6px 9px; font:inherit; font-size:12.5px; width:112px; cursor:pointer; }
.producao-periodo-datas input:focus{ outline:none; border-color:#F2B705; box-shadow:0 0 0 3px rgba(242,183,5,0.18); }
.producao-periodo-imprimir{ border:1px solid rgba(242,183,5,.55); background:rgba(242,183,5,.10); color:#F2B705; border-radius:999px; padding:6px 14px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.producao-periodo-imprimir:hover{ background:#F2B705; color:#1A1400; }
.producao-aproduzir-acao{
  margin-top:6px;
  font-family:'Oswald', sans-serif;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  opacity:0.75;
}

/* ===========================================================================
   TEMA CLARO opcional (15/10/2026, pedido do usuario: "opcao para o modo
   claro"). Botao #producaoTemaBtn no cabecalho; a classe .producao-tema-claro
   no <body> vem do <script> logo abaixo do <body> (sem piscar) e de
   producaoTemaAplicar em js/producao.js. Padrao = escuro: nada aqui vale sem
   a classe, exceto o botao em si.
   Receita igual a do GPD (body.gpd-tema-claro em css/gpd.css): primeiro os
   TOKENS (--bg, --panel, --text...) viram claros — isso resolve a maior
   parte, porque esta tela e css/gulp-*.css usam var(--...) — e depois so as
   cores fixas escuras (rgba brancos/pretos, dourado como TEXTO) sao trocadas
   por secao. Semantica mantida: verde = dentro da capacidade, vermelho =
   lotado, dourado = hoje, laranja = produzido, azul-aco = a produzir.
   Sem backdrop-filter novo e sem animar variavel CSS.
   =========================================================================== */

/* Botao: vidro neutro (nao e acao de sair/entrar, entao sem o vermelho dos
   vizinhos). <span> em volta do texto, mesma razao do resto do cabecalho. */
.logout-powered-row .excel-btn.producao-tema-btn{
  border-color:rgba(255,255,255,0.28);
  background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
}
.logout-powered-row .excel-btn.producao-tema-btn:hover{
  border-color:rgba(255,255,255,0.5);
  background:linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.06));
}
.producao-tema-btn i{ font-style:normal; font-size:14px; line-height:1; }
.producao-tema-btn b{ font-weight:inherit; }
.producao-tema-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

body.producao-tema-claro{
  /* Paleta Aiko (igual ao painel claro e ao GPD claro, css/tema-aiko.css e
     css/gpd.css body.gpd-tema-claro): texto azul-petroleo, fundo cinza com
     radiais turquesa/azul, cartoes cinza-azulado 3D. */
  --bg:#B8BFC5; --bg-2:#ABB4BB;
  --panel:#EEF3F6; --panel-2:#DCE4EA;
  --line:#C9DCE3; --line-soft:#DDE9EE;
  --text:#023E55; --text-dim:#3B4E73; --text-faint:#5E7090;
  --accent-soft:rgba(242,183,5,0.22);
  --steel:#0E6F86; --steel-soft:rgba(43,165,178,0.14);
  --good:#16A86A; --good-soft:rgba(22,168,106,0.16);
  --bad:#DE3140; --bad-soft:rgba(222,49,64,0.14);
  --warn:#C9700F; --warn-soft:rgba(201,112,15,0.14);
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(43,165,178,0.14) 0%, transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(59,78,115,0.12) 0%, transparent 60%),
    linear-gradient(180deg, #B8BFC5 0%, #ABB4BB 100%);
  background-attachment:fixed;
  color:var(--text);
  color-scheme:light;
}

/* ---- cabecalho ----
   Topo com a chapa xadrez de aço NOS DOIS TEMAS (15/10/2026, print do Rafael
   no claro: "coloque o fundo chapa como padrão"). Receita igual à do painel,
   GPD e Margem (css/styles.css html.tema-vidro body header.top, css/margem.css
   header.top): véu escuro sobre css/chapa-xadrez.jpg, ladrilho 127x90. No
   claro o topo continua escuro, então dentro dele as cores voltam às do tema
   escuro (mesma ideia do html.tema-aiko header.top) e os botões ficam no
   vidro escuro de sempre. */
header.top{
  background:
    linear-gradient(180deg, rgba(10,12,16,0.66) 0%, rgba(10,12,16,0.72) 70%, rgba(10,12,16,0.88) 100%),
    url("chapa-xadrez.jpg") left top / 127px 90px repeat;
  box-shadow:0 12px 30px -16px rgba(0,0,0,0.8);
}
header.top::before{ display:none; }
/* No claro a chapa ganha o véu verde-turquesa → azul-petróleo (15/10/2026,
   print do Rafael: "no claro deixe verde") — a mesma receita do topo claro
   do painel e do GPD (css/tema-aiko.css e css/gpd.css body.gpd-tema-claro
   header.top). Texto e botões do topo ficam brancos sobre ela. */
body.producao-tema-claro header.top{
  background:
    linear-gradient(120deg, rgba(43,165,178,0.78) 0%, rgba(14,111,134,0.80) 45%, rgba(2,62,85,0.86) 100%),
    url("chapa-xadrez.jpg") left top / 127px 90px repeat;
  box-shadow:0 10px 28px -14px rgba(2,62,85,0.55);
  --panel:rgba(255,255,255,0.14); --panel-2:rgba(255,255,255,0.10);
  --line:rgba(255,255,255,0.28); --line-soft:rgba(255,255,255,0.18);
  --text:#FFFFFF; --text-dim:rgba(255,255,255,0.82); --text-faint:rgba(255,255,255,0.62);
  color:#FFFFFF;
  color-scheme:dark;
  border-bottom-color:transparent;
}

/* ---- avisos e cards (cartao Aiko: cinza-azulado, canto 28px, borda especular) ---- */
body.producao-tema-claro .access-banner{
  color:#3A2E00;
  border-color:rgba(185,134,0,0.45);
  background:linear-gradient(180deg, #FFF6D6, #FDEFB8);
}
body.producao-tema-claro .access-banner strong,
body.producao-tema-claro .access-banner code{ color:#6B4B00; }
body.producao-tema-claro .card{
  background:linear-gradient(180deg, #DDE4E9 0%, #CFD8DF 100%);
  border:1px solid rgba(255,255,255,0.75);
  border-radius:28px;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255,255,255,0.95),
    inset -1px -1px 0 rgba(2,62,85,0.06),
    0 18px 36px -22px rgba(2,62,85,0.55),
    0 3px 8px rgba(2,62,85,0.08);
}
body.producao-tema-claro .card .card-sub{ color:#3B4E73; }
body.producao-tema-claro .producao-filtros-col + .producao-filtros-col{ border-left-color:#C9DCE3; }

/* ---- orbs laranja (prazo / produzidos): continuam laranja ---- */
body.producao-tema-claro .producao-prazo-orb,
body.producao-tema-claro .producao-produzidos-orb{
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.6),
    inset 0 -6px 9px -4px rgba(110,55,0,0.4),
    0 2px 4px rgba(60,40,10,0.22),
    0 10px 20px -8px rgba(201,112,15,0.5);
}
body.producao-tema-claro .producao-aproduzir-orb{
  color:#FFFFFF;
  background:linear-gradient(160deg, #5FC3CE 0%, #0E6F86 55%, #023E55 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.55),
    inset 0 -6px 9px -4px rgba(2,30,44,0.5),
    0 2px 4px rgba(2,62,85,0.25),
    0 10px 20px -8px rgba(14,111,134,0.55);
}
body.producao-tema-claro .producao-aproduzir-orb:hover,
body.producao-tema-claro .producao-aproduzir-orb:focus-visible{
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.65),
    inset 0 -6px 9px -4px rgba(2,30,44,0.5),
    0 3px 6px rgba(2,62,85,0.28),
    0 14px 26px -8px rgba(14,111,134,0.65);
}
body.producao-tema-claro .producao-produzidos-orb-clicavel[aria-expanded="true"]{
  box-shadow:0 0 0 2px rgba(185,134,0,.7), 0 14px 26px -10px rgba(60,40,10,.4);
}
body.producao-tema-claro .producao-imprimir-btn{
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.6),
    inset 0 -6px 9px -4px rgba(110,55,0,0.4),
    0 2px 4px rgba(60,40,10,0.22),
    0 10px 20px -8px rgba(201,112,15,0.5);
}
body.producao-tema-claro .producao-imprimir-btn:hover{
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.7),
    inset 0 -6px 9px -4px rgba(110,55,0,0.4),
    0 3px 6px rgba(60,40,10,0.25),
    0 14px 24px -8px rgba(201,112,15,0.55);
}

/* ---- botoes da barra (< > Hoje, Gerar PDF): pilula 3D das abas do painel ---- */
body.producao-tema-claro .excel-btn:not(.producao-header-btn):not(.producao-imprimir-btn):not(.auth-submit){
  border:1px solid rgba(255,255,255,0.85);
  background:linear-gradient(180deg, #FFFFFF 0%, #F2F6F9 45%, #E2EAF0 100%);
  box-shadow:0 6px 12px -8px rgba(2,62,85,0.5), 0 1px 3px rgba(2,62,85,0.12);
  color:#023E55;
}
body.producao-tema-claro .excel-btn:not(.producao-header-btn):not(.producao-imprimir-btn):not(.auth-submit):hover{
  border-color:rgba(43,165,178,0.7);
  color:#0E6F86;
}
body.producao-tema-claro .producao-week-label{ color:#023E55; }

/* ---- colunas dos dias (cartao interno tipo KPI do painel) ---- */
body.producao-tema-claro .producao-day{
  background:linear-gradient(180deg, #EEF3F6 0%, #DCE4EA 100%);
  border-color:#C9DCE3;
  box-shadow:inset 1.5px 1.5px 0 #FFFFFF, inset -1px -1px 0 rgba(2,62,85,0.06), 0 10px 20px -16px rgba(2,62,85,0.55);
}
body.producao-tema-claro .producao-day-ok{ border-color:#16A86A; }
body.producao-tema-claro .producao-day-over{ border-color:#DE3140; }
body.producao-tema-claro .producao-day-today{ border-color:#D9A400; }
body.producao-tema-claro .producao-day-over.producao-day-today{ border-color:#DE3140; }
body.producao-tema-claro .producao-day-head{ background:linear-gradient(180deg, rgba(22,168,106,0.26), rgba(22,168,106,0.18)); color:#08784C; }
body.producao-tema-claro .producao-day-over .producao-day-head{ background:linear-gradient(180deg, rgba(222,49,64,0.24), rgba(222,49,64,0.16)); color:#C01B30; }
body.producao-tema-claro .producao-day-today .producao-day-head{ background:rgba(242,183,5,0.32); color:#5A4200; }
body.producao-tema-claro .producao-day-over.producao-day-today .producao-day-head{ background:linear-gradient(180deg, rgba(222,49,64,0.24), rgba(222,49,64,0.16)); color:#C01B30; }
body.producao-tema-claro .producao-day-date{ opacity:1; }
body.producao-tema-claro .producao-day-produzido{
  color:#8A4B08;
  background:rgba(201,112,15,0.16);
  border-color:rgba(201,112,15,0.5);
  font-weight:700;
}
body.producao-tema-claro .producao-day-empty{ color:#5E7090; }
body.producao-tema-claro .producao-day-add{ border-color:#7E93A8; color:#3B4E73; }
body.producao-tema-claro .producao-day-add:hover{ border-color:#0E6F86; color:#0E6F86; }
body.producao-tema-claro .producao-legend{ color:#3B4E73; }

/* ---- cards de lancamento (branco em degrade, como as caixas internas do GPD) ---- */
body.producao-tema-claro .producao-entry{
  background:linear-gradient(180deg, #FFFFFF 0%, #F2F6F9 100%);
  border-color:rgba(255,255,255,0.9);
  box-shadow:inset 0 1px 0 #FFFFFF, 0 8px 16px -12px rgba(2,62,85,0.5), 0 1px 3px rgba(2,62,85,0.08);
}
body.producao-tema-claro .producao-entry.producao-entry-produzido{
  border-color:rgba(201,112,15,0.55);
  box-shadow:inset 3px 0 0 var(--warn), 0 8px 16px -12px rgba(2,62,85,0.5);
}
body.producao-tema-claro .producao-entry.producao-entry-retirado{ opacity:0.62; }
body.producao-tema-claro .producao-entry-prod,
body.producao-tema-claro .producao-entry-check{ border-color:#7E93A8; }
body.producao-tema-claro .producao-entry-prod:hover{ border-color:var(--warn); }
body.producao-tema-claro .producao-entry-check:hover{ border-color:var(--good); }
body.producao-tema-claro .producao-entry.producao-entry-produzido .producao-entry-prod{ background:var(--warn); border-color:var(--warn); color:#FFFFFF; }
body.producao-tema-claro .producao-entry.producao-entry-retirado .producao-entry-check{ background:var(--good); border-color:var(--good); color:#FFFFFF; }
body.producao-tema-claro .producao-mark{ color:#8A6100; }
/* EDITAR / EXCLUIR: mesmo vidro; so a sombra preta pesada fica leve */
body.producao-tema-claro .producao-entry-mover{
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.5),
    inset 0 -5px 8px -4px rgba(10,60,30,0.5),
    0 1px 3px rgba(2,62,85,0.3),
    0 6px 12px -6px rgba(20,100,60,0.4);
}
body.producao-tema-claro .producao-entry-del{
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.5),
    inset 0 -5px 8px -4px rgba(90,15,15,0.5),
    0 1px 3px rgba(2,62,85,0.3),
    0 6px 12px -6px rgba(120,30,30,0.4);
}

/* ---- Pedidos produzidos / pendentes / dias disponiveis + pilulas Aiko ---- */
body.producao-tema-claro .producao-lista-item{
  background:linear-gradient(180deg, #EEF3F6 0%, #DCE4EA 100%);
  border-color:rgba(255,255,255,0.85);
  box-shadow:inset 1.5px 1.5px 0 #FFFFFF, inset -1px -1px 0 rgba(2,62,85,0.06), 0 8px 16px -12px rgba(2,62,85,0.5);
}
body.producao-tema-claro .producao-lista-item-produzido{ box-shadow:inset 3px 0 0 var(--warn), 0 8px 16px -12px rgba(2,62,85,0.5); }
body.producao-tema-claro .producao-lista-semana{ color:#3B4E73; }
body.producao-tema-claro .producao-lista-sub.producao-atrasado{ color:#C01B30; font-weight:700; }
body.producao-tema-claro .producao-status-aentregar{ color:#08784C; font-weight:700; background:linear-gradient(180deg, rgba(22,168,106,0.26), rgba(22,168,106,0.18)); border-color:rgba(22,168,106,0.42); }
body.producao-tema-claro .producao-status-aentregar:hover{ background:rgba(22,168,106,0.34); border-color:rgba(22,168,106,0.7); }
body.producao-tema-claro .producao-status-entregue{ color:#3B4E73; font-weight:700; background:linear-gradient(180deg, #FFFFFF 0%, #E9EFF3 100%); border-color:#B9CBD5; }
body.producao-tema-claro .producao-status-entregue:hover{ color:#023E55; border-color:#7E93A8; }
body.producao-tema-claro .producao-lista-retirar-btn{ color:#08784C; font-weight:700; border-color:rgba(22,168,106,0.6); background:linear-gradient(180deg, #FFFFFF 0%, #EEF3F6 100%); }
body.producao-tema-claro .producao-lista-retirar-btn:hover{ background:rgba(22,168,106,0.18); }
body.producao-tema-claro .producao-prod-pill{ color:#8A4B08; font-weight:700; background:linear-gradient(180deg, rgba(201,112,15,0.26), rgba(201,112,15,0.16)); border-color:rgba(201,112,15,0.5); }
body.producao-tema-claro .producao-lista-dia-pill{ color:#08784C; font-weight:700; background:linear-gradient(180deg, rgba(22,168,106,0.26), rgba(22,168,106,0.18)); border:1px solid rgba(22,168,106,0.42); }
body.producao-tema-claro .producao-count-pill{ color:#023E55; font-weight:700; background:linear-gradient(180deg, #FFFFFF 0%, #E9EFF3 100%); border-color:#B9CBD5; }

/* ---- periodo (chips, datas, imprimir) ---- */
body.producao-tema-claro .producao-periodo-chips button{ border:1px solid rgba(255,255,255,0.85); background:linear-gradient(180deg, #FFFFFF 0%, #F2F6F9 45%, #E2EAF0 100%); color:#3B4E73; font-weight:700; box-shadow:0 4px 8px -6px rgba(2,62,85,0.5); }
body.producao-tema-claro .producao-periodo-chips button:hover{ border-color:rgba(43,165,178,0.7); color:#0E6F86; }
body.producao-tema-claro .producao-periodo-chips button.ativo{ background:#F2B705; border-color:#C99700; color:#023E55; }
body.producao-tema-claro .producao-periodo-datas{ color:#3B4E73; }
body.producao-tema-claro .producao-periodo-datas input{ background:#FFFFFF; border-color:#B9CBD5; color:#023E55; }
body.producao-tema-claro .producao-periodo-datas input:focus{ border-color:#0E6F86; box-shadow:0 0 0 3px rgba(43,165,178,0.25); }
body.producao-tema-claro .producao-periodo-imprimir{ border-color:#B98600; background:rgba(242,183,5,0.2); color:#5A4200; }
body.producao-tema-claro .producao-periodo-imprimir:hover{ background:#F2B705; color:#1A1400; }

/* ---- busca (vidro escuro -> campo branco; a lupa dourada recolhida nao muda) ---- */
body.producao-tema-claro .producao-filtro-busca{
  background:#FFFFFF;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-color:#B9CBD5;
  box-shadow:inset 0 1px 2px rgba(2,62,85,0.08);
  color:#023E55;
}
body.producao-tema-claro .producao-filtro-busca:hover{ border-color:#7E93A8; }
body.producao-tema-claro .producao-filtro-busca:focus{ border-color:#0E6F86; box-shadow:0 0 0 3px rgba(43,165,178,0.25); }
body.producao-tema-claro .producao-busca-wrap:focus-within .producao-busca-icone{ color:#8A6100; }

/* ---- modais (lancamento, edicao, imprimir, prazo) ---- */
body.producao-tema-claro .pf-modal-backdrop{ background:rgba(2,40,56,0.5); }
body.producao-tema-claro .producao-modal .pf-modal-card{
  background:linear-gradient(180deg, #E6ECF0 0%, #D3DCE3 100%);
  border:1px solid rgba(255,255,255,0.8);
  border-radius:28px;
  box-shadow:inset 1.5px 1.5px 0 rgba(255,255,255,0.95), 0 30px 60px -26px rgba(2,62,85,0.6);
}
body.producao-tema-claro .producao-modal .pf-modal-close{ background:#FFFFFF; color:#023E55; border-color:#B9CBD5; }
body.producao-tema-claro .producao-modal .pf-modal-close:hover{ background:#EEF3F6; color:#0E6F86; }
body.producao-tema-claro .auth-field label{ color:#3B4E73; }
body.producao-tema-claro .auth-field input,
body.producao-tema-claro .auth-field input:focus,
body.producao-tema-claro .auth-field textarea,
body.producao-tema-claro .auth-field select.producao-vendedor-select{
  background-color:#FFFFFF;
  border-color:#B9CBD5;
  color:#023E55;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.producao-tema-claro .auth-field input:focus{
  background-image:none;
  border-color:#0E6F86;
  box-shadow:0 0 0 3px rgba(43,165,178,0.25);
}
body.producao-tema-claro .auth-field select.producao-vendedor-select:focus{ border-color:#0E6F86; box-shadow:0 0 0 3px rgba(43,165,178,0.25); }
body.producao-tema-claro .auth-field select.producao-vendedor-select option{ background:#FFFFFF; color:#023E55; }
body.producao-tema-claro .auth-error{ color:#C01B30; }
body.producao-tema-claro .producao-imprimir-link{ color:#0E6F86; }
body.producao-tema-claro .producao-imprimir-dia{ background:linear-gradient(180deg, #FFFFFF 0%, #F2F6F9 100%); border-color:#C9DCE3; }
body.producao-tema-claro .producao-imprimir-dia:has(input:checked){ border-color:#B98600; background:rgba(242,183,5,0.2); }
body.producao-tema-claro .producao-imprimir-dia-info{ color:#3B4E73; }

/* ---- calendario (gulp-datepicker) ---- */
body.producao-tema-claro .gulp-datepicker{
  border:1px solid rgba(255,255,255,0.85);
  border-radius:20px;
  background:linear-gradient(180deg, #F2F6F9 0%, #E2EAF0 100%);
  box-shadow:0 24px 48px -16px rgba(2,62,85,0.45), 0 2px 6px rgba(2,62,85,0.14);
}
body.producao-tema-claro .gulp-datepicker-nav:hover,
body.producao-tema-claro .gulp-datepicker-today:hover,
body.producao-tema-claro .gulp-datepicker-clear:hover{ border-color:#0E6F86; color:#0E6F86; }
body.producao-tema-claro .gulp-datepicker-day:hover{ background:#D5E6EC; }
body.producao-tema-claro .gulp-datepicker-day--outside{ opacity:0.55; }

/* ---- barras de rolagem (a global e um trilho branco translucido) ---- */
body.producao-tema-claro ::-webkit-scrollbar-track{ background:rgba(40,45,60,0.08); }

/* Celular: o botao do tema nao ganha uma linha propria no cabecalho (la os
   botoes ja ocupam a largura toda, empilhados) — flutua no canto superior
   direito, so com o icone + rotulo curto. */
@media (max-width: 640px){
  .logout-powered-row .excel-btn.producao-tema-btn{
    position:absolute;
    top:10px;
    right:12px;
    width:auto;
    margin:0;
    padding:7px 11px;
    z-index:2;
  }
  /* Logo do painel (logo-majufer-2026.png, 15/10/2026) é mais larga que a
     "30 anos": o botão flutuante caía em cima da marca de Telhas. Desce as
     logos pra baixo da altura dele. */
  header.top .top-inner{ padding-top:52px; }
}

/* ---- Topo e barra da agenda mais baixos (15/10/2026, print do Rafael:
   "ajuste para ganhar na altura e melhorar a visualização", seta do título
   para o canto direito e para o card do prazo) ----
   O título "Produção / Majufer · Agenda Semanal" ficava EMBAIXO das logos e
   esticava o topo; no computador ele sobe para o canto direito, em cima dos
   botões. No celular (e abaixo de 1000px, onde os botões descem para baixo
   das logos) fica como estava. */
@media (min-width: 1000px){
  header.top .top-inner{ padding-top:18px; padding-bottom:18px; }
  header.top .brand{ margin-top:0; }
  header.top .brand-text{ position:absolute; top:20px; right:14px; text-align:right; }
  header.top .brand-text .name{ font-size:26px; }
  /* Selo 33 anos no centro exato do topo (15/10/2026, "centralize a logo"):
     o 45% de css/styles.css é do painel, que tem botões à direita. */
  header.top .brand-selo-33{ left:50%; }
}
/* Card do prazo deitado: número à esquerda, legenda à direita (antes eram
   4 linhas empilhadas, o card mais alto da barra). */
.producao-prazo-orb{
  display:grid;
  grid-template-columns:auto auto;
  column-gap:12px;
  align-items:center;
  justify-content:center;
  padding:7px 18px;
  text-align:left;
}
.producao-prazo-num{ grid-row:1 / span 3; font-size:34px; padding-right:12px; border-right:1px solid rgba(60,30,0,0.25); }
.producao-prazo-unit{ grid-column:2; margin-top:0; }
.producao-prazo-label{ grid-column:2; margin-top:1px; padding-top:0; border-top:0; }
.producao-prazo-edit{ grid-column:2; margin-top:1px; }