/* Fila de Fotos — o Marketing fotografa a peça que chegou e sobe para o ERP.
   Prefixo fot-. Toda cor e estado nasce aqui; markup não carrega style=".
   Pensada primeiro para o celular: quem fotografa está no estúdio, de pé. */

/* ---- topo: situação da fila --------------------------------------------- */
.fot-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .5rem;
  margin-bottom: .75rem;
}
.fot-kpi {
  border: 1px solid #dee2e6;
  border-left: 3px solid #adb5bd;
  border-radius: .4rem;
  background: #fff;
  padding: .5rem .65rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}
.fot-kpi span {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #6c757d;
}
.fot-kpi strong { font-size: 1.35rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fot-kpi small  { font-size: .68rem; color: #6c757d; line-height: 1.25; }
.fot-kpi.good   { border-left-color: #2b8a3e; }
.fot-kpi.good   strong { color: #2b8a3e; }
.fot-kpi.warn   { border-left-color: #e8590c; }
.fot-kpi.warn   strong { color: #e8590c; }
.fot-kpi.danger { border-left-color: #c92a2a; }
.fot-kpi.danger strong { color: #c92a2a; }

/* ---- frescor da fonte ---------------------------------------------------- */
/* Fonte atrasada é aviso de fonte, nunca pendência de foto. */
.fot-frescor {
  font-size: .72rem;
  color: #6c757d;
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .6rem;
}
.fot-frescor--atrasado { color: #9d5c00; }
.fot-frescor--atrasado .bi { color: #e8590c; }

/* ---- filtros ------------------------------------------------------------- */
.fot-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .75rem;
  align-items: center;
}
.fot-chip {
  border: 1px solid #dee2e6;
  background: #fff;
  color: #495057;
  border-radius: 999px;
  padding: .18rem .6rem;
  font-size: .76rem;
  cursor: pointer;
  white-space: nowrap;
}
.fot-chip:hover { border-color: #adb5bd; background: #f8f9fa; }
.fot-chip.ativo { background: #1971c2; border-color: #1971c2; color: #fff; }
.fot-chip.ativo:hover { background: #1864ab; border-color: #1864ab; }
.fot-chip b { font-weight: 600; }

/* Linha de cima = que fila é esta (estados excludentes). Linha de baixo =
   recorte dentro dela. A separação é o que impede o chip de parecer filtro e
   agir como interruptor. */
.fot-filtros--estado {
  padding-bottom: .5rem;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: .5rem;
}
.fot-chip--estado { padding: .3rem .75rem; font-size: .8rem; font-weight: 500; }
.fot-btn-catalogo { white-space: nowrap; }

.fot-busca { max-width: 260px; }
/* Nome de campanha é longo ("PREVIEW VERÃO DROP 2 - AGOSTO 2026"): trunca em
   vez de empurrar os chips para outra linha. */
.fot-campanha { max-width: 290px; font-size: .76rem; }

/* ---- busca no catálogo do ERP ------------------------------------------- */
.fot-catalogo {
  border: 1px solid #b8d4ee;
  background: #f4f9ff;
  border-radius: 10px;
  padding: .7rem .85rem;
  margin-bottom: .9rem;
}
.fot-catalogo-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; flex-wrap: wrap;
  font-size: .82rem; color: #1864ab; margin-bottom: .5rem;
}
.fot-catalogo-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: .6rem;
}
.fot-cat-card {
  background: #fff; border: 1px solid #dbe6f1; border-radius: 8px;
  padding: .6rem .7rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.fot-cat-card .fot-nome { font-size: .84rem; font-weight: 600; line-height: 1.25; }
.fot-cat-card .btn { align-self: flex-start; }
.fot-catalogo-pe { font-size: .72rem; color: #5f7d99; margin-top: .55rem; }

/* ---- cartão do produto na fila ------------------------------------------ */
.fot-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: .6rem;
}
.fot-card {
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  background: #fff;
  padding: .6rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.fot-card--atrasado { border-color: #f0b4b4; background: #fffafa; }
.fot-card--chegou   { border-color: #a9d9bd; }

.fot-card-topo {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  min-width: 0;
}
.fot-ref {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: .35rem;
  border: 1px solid #dee2e6;
  object-fit: cover;
  background: #f1f3f5;
}
.fot-ref--vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  font-size: 1.1rem;
}
/* Miniatura que abre: o cursor e o realce dizem que da para clicar — cor
   sozinha nao informaria nada aqui. */
.fot-ampliar { cursor: zoom-in; }
.fot-ampliar:hover, .fot-ampliar:focus-visible {
  border-color: #1971c2;
  outline: 2px solid #a5d8ff;
  outline-offset: 1px;
}
.fot-card-id { min-width: 0; flex: 1; }
.fot-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem;
  color: #6c757d;
}
.fot-nome {
  font-size: .86rem;
  font-weight: 600;
  color: #212529;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.fot-sinais { display: flex; flex-wrap: wrap; gap: .3rem; }
.fot-tag {
  font-size: .68rem;
  padding: .1rem .4rem;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.fot-tag--espera  { background: #f1f3f5; color: #495057; border-color: #dee2e6; }
.fot-tag--atraso  { background: #fdecec; color: #9d2b2b; border-color: #f0b4b4; }
.fot-tag--chegou  { background: #e7f5ec; color: #14653a; border-color: #a9d9bd; }
.fot-tag--parcial { background: #fff4e6; color: #9d5c00; border-color: #ffd8a8; }
.fot-tag--pronto  { background: #e7f5ec; color: #14653a; border-color: #a9d9bd; }
/* O que falta: a cor sozinha não informa, então a etiqueta sempre carrega o
   texto ("2 cores sem nenhuma foto"). */
.fot-tag--falta   { background: #fff9db; color: #845c00; border-color: #ffe8a3; font-weight: 600; }
.fot-tag--fora    { background: #f3f0ff; color: #5f3dc4; border-color: #d0bfff; }
/* Peça na mão do estúdio × peça em outro ponto. O ícone acompanha o texto:
   cor sozinha não diz qual é qual. */
.fot-tag--peca     { background: #e7f5ec; color: #14653a; border-color: #a9d9bd; font-weight: 600; }
.fot-tag--sem-peca { background: #f8f9fa; color: #6c757d; border-color: #dee2e6; }
/* Chegou na empresa e ainda não subiu para o estúdio: é passo intermediário,
   nem pendência nem resolvido. */
.fot-tag--recebido { background: #e7f0fb; color: #1864ab; border-color: #b8d4ee; font-weight: 600; }

.fot-cores { display: flex; flex-wrap: wrap; gap: .25rem; }
.fot-cor-pill {
  font-size: .68rem;
  padding: .1rem .4rem;
  border-radius: 4px;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
  color: #495057;
  font-variant-numeric: tabular-nums;
}
.fot-cor-pill--ok { background: #e7f5ec; border-color: #a9d9bd; color: #14653a; }

.fot-card-acoes { display: flex; gap: .35rem; margin-top: auto; }

/* ---- loja virtual: painel lateral --------------------------------------- */
/* Duas colunas só quando o painel está ligado; fechado, a tela de fotos ocupa
   tudo como antes. Em telas estreitas o painel desce — nunca espreme a grade
   de fotos, que é o trabalho principal. */
.fot-det-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.fot-lv-switch {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 600; color: #1864ab;
  border: 1px solid #b8d4ee; background: #f4f9ff;
  border-radius: 999px; padding: .25rem .7rem; cursor: pointer;
  user-select: none;
}
.fot-lv-switch input { accent-color: #1971c2; cursor: pointer; margin: 0; }

.fot-det-corpo { display: block; }
.fot-det-corpo--lv { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1rem; align-items: start; }
.fot-det-main { min-width: 0; }

.fot-lv {
  border: 1px solid #b8d4ee; background: #f4f9ff; border-radius: 10px;
  padding: .75rem .85rem; position: sticky; top: .5rem;
  max-height: calc(100vh - 5rem); overflow-y: auto;
}
.fot-det-corpo:not(.fot-det-corpo--lv) .fot-lv { display: none; }
.fot-lv-cabeca {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; flex-wrap: wrap; color: #1864ab; margin-bottom: .25rem;
}
.fot-lv-sub { font-size: .74rem; color: #5f7d99; margin: 0 0 .6rem; }
/* Os dois interruptores decidem se a loja exibe: ficam antes dos textos, que
   só importam depois de o produto estar publicado. */
.fot-lv-exibe {
  display: flex; flex-direction: column; gap: .3rem;
  background: #fff; border: 1px solid #dbe6f1; border-radius: 8px;
  padding: .45rem .6rem; margin-bottom: .7rem;
}
.fot-lv-check {
  display: flex; align-items: flex-start; gap: .45rem;
  font-size: .78rem; color: #212529; cursor: pointer; margin: 0;
}
.fot-lv-check input { accent-color: #1971c2; margin-top: .15rem; cursor: pointer; }
.fot-lv-check small { display: block; font-size: .68rem; color: #868e96; font-weight: 500; }

.fot-lv-campo { margin-bottom: .6rem; }
.fot-lv-campo label {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  font-size: .74rem; font-weight: 600; color: #495057; margin-bottom: .2rem;
}
.fot-lv-conta { font-size: .68rem; font-weight: 500; color: #868e96; font-variant-numeric: tabular-nums; }
.fot-lv-campo textarea {
  width: 100%; border: 1px solid #ced4da; border-radius: 6px;
  padding: .35rem .5rem; font-size: .8rem; color: #212529;
  background: #fff; resize: vertical; font-family: inherit;
}
.fot-lv-campo textarea:focus { outline: 2px solid #a5d8ff; outline-offset: 1px; border-color: #1971c2; }
.fot-lv-acoes { display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; }

.fot-proximo {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  border: 1px solid #dee2e6;
  border-left-width: 4px;
  border-radius: 8px;
  background: #fff;
  padding: .65rem .75rem;
  margin: .35rem 0 .75rem;
}
.fot-proximo-icone {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f3f5;
  color: #495057;
  flex: 0 0 30px;
}
.fot-proximo-txt { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.fot-proximo-txt b { font-size: .9rem; color: #212529; line-height: 1.25; }
.fot-proximo-txt span { font-size: .76rem; color: #6c757d; line-height: 1.35; }
.fot-proximo--acao { border-left-color: #2b8a3e; background: #f7fcf9; }
.fot-proximo--acao .fot-proximo-icone { background: #e7f5ec; color: #14653a; }
.fot-proximo--espera { border-left-color: #1971c2; background: #f7fbff; }
.fot-proximo--espera .fot-proximo-icone { background: #e7f0fb; color: #1864ab; }
.fot-proximo--bloqueado { border-left-color: #e8590c; background: #fffaf3; }
.fot-proximo--bloqueado .fot-proximo-icone { background: #fff4e6; color: #9d5c00; }
.fot-proximo--pronto { border-left-color: #2b8a3e; background: #f7fcf9; }
.fot-proximo--pronto .fot-proximo-icone { background: #e7f5ec; color: #14653a; }

/* ---- sugestao de texto -------------------------------------------------- */
/* Texto sugerido pela maquina precisa PARECER sugestao ate alguem aceitar: o
   site publica a descricao literal, e quem revisa tem de saber o que leu. */
.fot-lv-campo--sugerido textarea { border-color: #f59f00; background: #fffbf0; }
.fot-lv-sug-marca {
  font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #b45309;
}
.fot-lv-sug-aviso {
  font-size: .72rem; color: #b45309; background: #fff9e6;
  border: 1px solid #ffe08a; border-radius: 6px;
  padding: .4rem .55rem; margin: .5rem 0; line-height: 1.35;
}
.fot-lv-sug-aviso ul { margin: .25rem 0 0; padding-left: 1.1rem; }
/* Confirmação de gravação. Toast some em 3s e quem grava 40 produtos precisa
   olhar de volta e ver que este entrou. Fica no painel até a próxima ação. */
.fot-lv-gravado {
  display: flex; align-items: flex-start; gap: .4rem;
  margin-top: .6rem; padding: .5rem .65rem; border-radius: .375rem;
  font-size: .8125rem; line-height: 1.45;
  background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
}
.fot-lv-gravado.parc { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.fot-lv-gravado b    { font-weight: 600; }
.fot-lv-gravado ul   { margin: .2rem 0 0; padding-left: 1.05rem; }

/* Aviso do botão Sugerir: diz o que o clique faz ANTES do clique, e por que
   ficou travado depois. Botão desabilitado sem explicação vira chamado. */
.fot-lv-nota-sugerir {
  margin: .5rem 0 0; padding: .45rem .6rem; border-radius: .375rem;
  font-size: .78125rem; line-height: 1.45;
  background: #f8fafc; border: 1px solid #e2e8f0; color: #475569;
}
.fot-lv-nota-sugerir.travado {
  background: #fffbeb; border-color: #fde68a; color: #92400e;
}
.fot-lv-nota-sugerir b { font-weight: 600; }

.fot-lv-sug-nota { font-size: .72rem; color: #2b8a3e; margin: .5rem 0; }
.fot-lv-pe { font-size: .7rem; color: #5f7d99; margin-top: .6rem; line-height: 1.35; }

/* ---- B2B aguardando preço de atacado ------------------------------------ */
/* A integração B2B vende pelo preço de atacado: ligada sem ele, a peça chega
   ao parceiro sem preço. A nota fica colada no interruptor, que é onde a
   decisão acontece. Cor acompanha título e ícone — nunca informa sozinha. */
.fot-lv-b2b {
  display: flex; align-items: flex-start; gap: .4rem;
  margin: .1rem 0 .15rem 1.35rem; padding: .35rem .5rem; border-radius: 6px;
  font-size: .72rem; line-height: 1.4; border: 1px solid transparent;
}
.fot-lv-b2b > .bi { flex: 0 0 auto; margin-top: .05rem; }
.fot-lv-b2b b { display: block; font-weight: 600; }
.fot-lv-b2b--falta  { background: #fff9db; border-color: #ffe8a3; color: #845c00; }
.fot-lv-b2b--espera { background: #e7f0fb; border-color: #b8d4ee; color: #1864ab; }
.fot-lv-b2b--risco  { background: #fdecec; border-color: #f0b4b4; color: #9d2b2b; }
.fot-lv-b2b--pronto { background: #e7f5ec; border-color: #a9d9bd; color: #14653a; }
.fot-lv-b2b--neutro { background: #f8f9fa; border-color: #dee2e6; color: #495057; }
.fot-lv-b2b-erro { display: block; margin-top: .15rem; color: #9d2b2b; }
.fot-lv-b2b-acao { margin-top: .35rem; }
.fot-lv-b2b-linha { display: block; margin-top: .15rem; }
/* Mais específico que `.fot-lv-check small`, que pinta o "desde" de cinza. */
.fot-lv-check small.fot-lv-preco { color: #495057; font-variant-numeric: tabular-nums; }

/* Lugar da etiqueta de atacado no cabeçalho: repintado sozinho quando o painel
   lê o preço, sem redesenhar a tela (e sem perder a rolagem). `contents` para
   o slot vazio não ganhar espaço no gap. */
.fot-sinais-slot { display: contents; }
.fot-tag--atacado { background: #fff9db; color: #845c00; border-color: #ffe8a3; font-weight: 600; }
.fot-tag--b2b     { background: #e7f0fb; color: #1864ab; border-color: #b8d4ee; font-weight: 600; }

/* Na fila: quem marcou o B2B e ainda espera o preço. Não é trabalho do estúdio
   — por isso é bloco próprio, fora dos KPIs de foto, e some quando não há nada. */
.fot-b2b-pend {
  border: 1px solid #b8d4ee; border-left: 4px solid #1971c2; background: #f7fbff;
  border-radius: 8px; padding: .55rem .75rem; margin: 0 0 .6rem;
}
.fot-b2b-pend-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .25rem .75rem; flex-wrap: wrap;
}
.fot-b2b-pend-topo b    { font-size: .86rem; color: #1864ab; }
.fot-b2b-pend-topo span { font-size: .72rem; color: #5f7d99; }
.fot-b2b-pend-lista {
  list-style: none; margin: .4rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .3rem;
}
.fot-b2b-pend-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: center;
  background: #fff; border: 1px solid #dbe6f1; border-radius: 6px; padding: .35rem .55rem;
}
.fot-b2b-pend-id { min-width: 0; }
.fot-b2b-pend-meta { font-size: .7rem; color: #6c757d; line-height: 1.35; }
.fot-b2b-pend-erro { font-size: .7rem; color: #9d2b2b; line-height: 1.35; }
.fot-b2b-pend-ok   { font-size: .72rem; color: #14653a; margin-top: .35rem; }
.fot-b2b-pend-pe   { font-size: .68rem; color: #5f7d99; margin-top: .4rem; line-height: 1.35; }
@media (max-width: 576px) {
  /* No celular o botão desce para baixo do nome: lado a lado, o nome longo
     virava uma coluna estreita de duas palavras por linha. */
  .fot-b2b-pend-item { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .fot-b2b-pend-item .btn { justify-self: start; }
}

@media (max-width: 1100px) {
  .fot-det-corpo--lv { grid-template-columns: minmax(0, 1fr); }
  .fot-lv { position: static; max-height: none; }
}
/* ---- detalhe: uma cor por bloco ----------------------------------------- */
.fot-det-topo {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.fot-det-ref {
  width: 92px; height: 92px;
  border-radius: .4rem;
  border: 1px solid #dee2e6;
  object-fit: cover;
  background: #f1f3f5;
}
.fot-det-id { min-width: 220px; flex: 1; }
.fot-det-ref-box { position: relative; }
.fot-det-ref-lupa {
  position: absolute;
  right: .2rem; bottom: .2rem;
  background: rgba(33,37,41,.75);
  color: #fff;
  border-radius: 4px;
  font-size: .62rem;
  padding: .05rem .25rem;
  pointer-events: none;
}

.fot-cor-bloco {
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  background: #fff;
  margin-bottom: .6rem;
  overflow: hidden;
}
.fot-cor-bloco--pendente { border-color: #ffd8a8; }
.fot-cor-bloco--pendente .fot-cor-head { background: #fff9f0; border-bottom-color: #ffe8cc; }
.fot-cor-bloco--ok { border-color: #d8efe1; }
.fot-cor-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .7rem;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  flex-wrap: wrap;
}
.fot-cor-amostra {
  width: 16px; height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.25);
  flex: 0 0 16px;
}
.fot-cor-id {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  min-width: 160px;
}
.fot-cor-nome { font-weight: 600; font-size: .85rem; }
.fot-cor-cod  {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem; color: #6c757d;
}
.fot-cor-alerta {
  font-size: .72rem;
  font-weight: 600;
  color: #9d5c00;
  background: #fff4e6;
  border: 1px solid #ffd8a8;
  border-radius: 4px;
  padding: .08rem .42rem;
  white-space: nowrap;
}
/* Saldo da cor fica à direita, encostado na contagem de fotos: são os dois
   números que decidem se dá para fotografar esta cor hoje. */
.fot-cor-peca {
  margin-left: auto; font-size: .72rem; font-variant-numeric: tabular-nums;
  padding: .05rem .4rem; border-radius: 4px; border: 1px solid transparent;
  white-space: nowrap;
}
.fot-cor-peca--tem { background: #e7f5ec; color: #14653a; border-color: #a9d9bd; }
.fot-cor-peca--receb { background: #e7f0fb; color: #1864ab; border-color: #b8d4ee; }
.fot-cor-peca--nao { background: #f8f9fa; color: #868e96; border-color: #e9ecef; }

.fot-cor-conta { margin-left: .5rem; font-size: .74rem; color: #6c757d; font-variant-numeric: tabular-nums; }
.fot-cor-conta--falta { color: #9d5c00; font-weight: 600; }
.fot-cor-conta--ok    { color: #14653a; }
.fot-cor-corpo { padding: .6rem .7rem; }
.fot-vazio-cor {
  border: 1px dashed #ffd8a8;
  border-radius: 6px;
  background: #fffaf3;
  padding: .55rem .65rem;
}
.fot-vazio-cor b { color: #845c00; }

/* ---- carga inicial ------------------------------------------------------- */
.fot-carregando {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .6rem;
  font-size: .82rem;
  color: #495057;
}

/* ---- cor dispensada de foto ---------------------------------------------- */
/* Tom neutro de propósito: dispensada não é problema (laranja) nem completa
   (verde) — é uma decisão registrada, fora da régua. */
.fot-tag--dispensada { background: #f1f3f5; color: #495057; border-color: #ced4da; }
.fot-cor-pill--dispensada { color: #495057; background: #f1f3f5; border-color: #ced4da; }
.fot-cor-bloco--dispensada { border-color: #ced4da; }
.fot-cor-bloco--dispensada .fot-cor-head { background: #f8f9fa; }
.fot-cor-bloco--dispensada .fot-cor-nome,
.fot-cor-bloco--dispensada .fot-cor-conta { color: #6c757d; }
.fot-cor-bloco--dispensada .fot-vazio-cor {
  border-color: #ced4da;
  background: #f8f9fa;
}
.fot-cor-bloco--dispensada .fot-vazio-cor b { color: #495057; }
.fot-cor-dispensa-btn { display: block; margin-top: .45rem; }
.fot-cor-dispensa-link {
  padding: 0 .15rem;
  font-size: inherit;
  vertical-align: baseline;
}

/* ---- seleção para exclusão em lote --------------------------------------- */
.fot-item-sel {
  position: absolute;
  top: .2rem; left: .2rem;
  z-index: 1;
  background: rgba(255,255,255,.88);
  border-radius: 4px;
  padding: .12rem .2rem;
  line-height: 1;
  cursor: pointer;
}
.fot-item-sel input {
  display: block;
  width: 15px; height: 15px;
  margin: 0;
  cursor: pointer;
}
/* A moldura azul da seleção vence a dourada da capa (o seletor duplo é pela
   especificidade — .fot-item--capa vem depois no arquivo): quem marcou quer
   ver o que marcou. A estrela continua dizendo quem é a capa. */
.fot-item.fot-item--marcada { border-color: #1971c2; box-shadow: 0 0 0 2px #a5d8ff inset; }
.fot-selbar {
  position: sticky;
  top: .5rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  border: 1px solid #b8d4ee;
  background: #e7f0fb;
  border-radius: .45rem;
  padding: .45rem .65rem;
  margin-bottom: .6rem;
  font-size: .8rem;
}
.fot-selbar-dica { color: #495057; }
.fot-selbar-acoes { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; }
.fot-cor-selall { padding: 0 .15rem; font-size: .72rem; vertical-align: baseline; white-space: nowrap; }

/* ---- cor já tem foto: somar, substituir ou descartar ---------------------- */
/* Estado pendente: linha curta com o essencial + botão pro diálogo. A grade
   das fotos atuais só aparece DENTRO do modal (decidirSubstituicao) — com
   2-3 cores pendentes ao mesmo tempo, mostrar a grade inline virava parede
   de fotos repetidas e escondia o resto da prévia. */
.fot-subst-pendente {
  margin: .5rem .6rem 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .45rem .65rem;
  border: 1px solid #ffd8a8;
  border-radius: 6px;
  background: #fffaf3;
  font-size: .8rem;
  color: #845c00;
}
.fot-subst-pendente .btn { margin-left: auto; }
/* Grade dentro do modal — reaproveita .fot-item/.fot-item-sel da exclusão em
   lote do detalhe (mesma moldura, mesmo checkbox: quem já usou uma reconhece
   a outra). */
.fot-subst-grade { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.fot-subst-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fot-subst-capa {
  position: absolute;
  bottom: .15rem; right: .15rem;
  background: rgba(245,159,0,.9);
  color: #fff;
  font-size: .6rem;
  padding: 0 .25rem;
  border-radius: 3px;
}
.fot-subst-resumo {
  margin: .5rem .6rem 0;
  padding: .4rem .6rem;
  border: 1px solid #d8efe1;
  border-radius: 6px;
  background: #f4faf6;
  font-size: .78rem;
  color: #14653a;
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.fot-subst-resumo--subst { border-color: #f0b4b4; background: #fdf3f3; color: #9d2b2b; }
.fot-subst-resumo--descartada { border-color: #dee2e6; background: #f8f9fa; color: #6c757d; }
.fot-subst-resumo .btn-link { padding: 0 .15rem; font-size: inherit; }

/* ---- referência de outro produto no nome do arquivo ---------------------- */
.fot-ref-aviso {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  margin: .5rem .6rem 0;
  padding: .55rem .65rem;
  border: 1px solid #f0b4b4;
  border-radius: 6px;
  background: #fdf3f3;
  font-size: .78rem;
}
.fot-ref-aviso > i { color: #9d2b2b; margin-top: .1rem; }
.fot-ref-aviso-txt b { color: #9d2b2b; }
.fot-ref-aviso-acoes {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 0 0 auto;
}
.fot-ref-erro { color: #9d2b2b; font-weight: 600; }
@media (max-width: 575px) {
  .fot-ref-aviso { flex-wrap: wrap; }
  .fot-ref-aviso-acoes { flex-direction: row; }
}

/* ---- grade de fotos ------------------------------------------------------ */
.fot-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: .45rem;
}
.fot-item {
  position: relative;
  border: 1px solid #dee2e6;
  border-radius: .35rem;
  overflow: hidden;
  background: #f8f9fa;
  aspect-ratio: 1;
}
.fot-item img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.fot-item--capa { border-color: #f59f00; box-shadow: 0 0 0 2px #ffec99 inset; }
.fot-item-rot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(33,37,41,.78);
  color: #fff;
  font-size: .66rem;
  padding: .15rem .3rem;
  display: flex;
  justify-content: space-between;
  gap: .25rem;
}
.fot-item-acoes {
  position: absolute;
  top: .2rem; right: .2rem;
  display: flex;
  gap: .2rem;
}
.fot-item-btn {
  border: none;
  border-radius: 4px;
  background: rgba(255,255,255,.92);
  color: #495057;
  font-size: .7rem;
  line-height: 1;
  padding: .2rem .3rem;
  cursor: pointer;
}
.fot-item-btn:hover { background: #fff; color: #212529; }
.fot-item-btn--capa.ativo { background: #f59f00; color: #fff; }

/* Foto sem arquivo no servidor: `nomeArquivo` nulo. Existe registro, não há
   imagem — dizer isso é diferente de mostrar quadrado cinza. */
.fot-item--sem-arquivo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: .66rem;
  color: #9d5c00;
  background: #fff4e6;
  border-color: #ffd8a8;
  padding: .3rem;
}

/* ---- área de largar a pasta --------------------------------------------- */
.fot-drop {
  border: 2px dashed #adb5bd;
  border-radius: .5rem;
  background: #f8f9fa;
  padding: .65rem .75rem;
  text-align: left;
  color: #495057;
  cursor: pointer;
  display: grid;
  /* Título com a largura natural; a dica é quem flexiona e QUEBRA linha.
     Com a dica em `auto` a coluna virava max-content da linha mais longa e,
     em 1366px, esmagava o título numa palavra por linha. */
  grid-template-columns: auto minmax(0, 1fr);
  gap: .5rem .75rem;
  align-items: center;
}
.fot-drop:hover { border-color: #1971c2; background: #f1f7ff; }
.fot-drop.sobre { border-color: #1971c2; background: #e7f1ff; }
.fot-drop-titulo { font-weight: 600; font-size: .88rem; margin-bottom: .15rem; }
.fot-drop-dica   { font-size: .74rem; color: #6c757d; line-height: 1.4; }
.fot-drop-dica code {
  background: #e9ecef;
  border-radius: 3px;
  padding: 0 .25rem;
  color: #495057;
}
.fot-drop-btns {
  display: flex; gap: .35rem; justify-content: center; flex-wrap: wrap;
  grid-column: 1 / -1;
}

/* ---- prévia do que a pasta trouxe --------------------------------------- */
.fot-preview { margin-top: .6rem; }
.fot-preview-lote {
  border: 1px solid #dee2e6;
  border-radius: .4rem;
  margin-bottom: .5rem;
  overflow: hidden;
}
.fot-preview-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .6rem;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  font-size: .78rem;
  flex-wrap: wrap;
}
.fot-preview-head b { font-weight: 600; }
.fot-preview-alvo { margin-left: auto; }
/* Colapsada: opacidade reduzida sinaliza "fora do envio" sem sumir da tela —
   o resumo dentro já diz o resto. */
.fot-preview-lote--descartada { opacity: .6; }
.fot-preview-lote--descartada .fot-preview-head { border-bottom: none; }
.fot-preview-lote--descartada .fot-subst-resumo { margin: 0; border-radius: 0; border: none; }
.fot-preview-corpo { padding: .5rem .6rem; }

.fot-fila-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 0;
  border-bottom: 1px solid #f1f3f5;
  font-size: .76rem;
}
.fot-fila-item:last-child { border-bottom: none; }
.fot-fila-thumb {
  width: 40px; height: 40px;
  border-radius: .3rem;
  object-fit: cover;
  border: 1px solid #dee2e6;
  flex: 0 0 40px;
}
.fot-fila-txt { min-width: 0; flex: 1; }
.fot-fila-origem {
  color: #6c757d;
  font-size: .7rem;
  overflow-wrap: anywhere;
}
.fot-fila-nome {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  color: #212529;
}
.fot-fila-estado { margin-left: auto; font-size: .7rem; white-space: nowrap; }
.fot-fila-estado--ok    { color: #2b8a3e; }
.fot-fila-estado--erro  { color: #c92a2a; }
.fot-fila-estado--indo  { color: #1971c2; }
.fot-fila-sel { font-size: .72rem; padding: .1rem .3rem; max-width: 120px; }
/* Seletor de destino do lote: cabe o nome da cor inteiro, senão fica "CASTOR ·
   1.11000064…" e o usuário não confere para onde a pasta vai. */
.fot-alvo-sel { font-size: .74rem; padding: .1rem .35rem; width: auto; min-width: 150px; }

/* ---- estados ------------------------------------------------------------- */
.fot-vazio {
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  background: #fff;
  padding: 1.5rem 1rem;
  text-align: center;
  color: #495057;
}
.fot-vazio .bi { font-size: 1.6rem; color: #adb5bd; display: block; margin-bottom: .4rem; }
.fot-vazio-titulo { font-weight: 600; margin-bottom: .2rem; }
.fot-vazio-sub    { font-size: .8rem; color: #6c757d; }
.fot-vazio--bom .bi { color: #2b8a3e; }

.fot-erro {
  border: 1px solid #f0b4b4;
  border-left: 3px solid #c92a2a;
  background: #fdecec;
  border-radius: .4rem;
  padding: .6rem .75rem;
  color: #9d2b2b;
  font-size: .82rem;
}
.fot-erro-titulo { font-weight: 600; margin-bottom: .15rem; }
.fot-erro details { margin-top: .35rem; }
.fot-erro summary { cursor: pointer; font-size: .74rem; color: #6c757d; }
.fot-erro pre {
  font-size: .7rem;
  background: #fff;
  border: 1px solid #f0b4b4;
  border-radius: 3px;
  padding: .3rem;
  margin: .25rem 0 0;
  white-space: pre-wrap;
}

.fot-skel { pointer-events: none; }
.fot-skel .fot-card { height: 132px; background: #f1f3f5; border-color: #e9ecef; }

/* Troca de filtro esmaece em vez de piscar branco. */
.fot-recarregando { opacity: .45; transition: opacity .12s; }

/* ---- lupa: a foto em tamanho grande ------------------------------------- */
.fot-lupa {
  position: fixed;
  inset: 0;
  z-index: 1080;                 /* acima do backdrop do Bootstrap (1050) */
  background: rgba(16, 18, 20, .88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  gap: .6rem;
  cursor: zoom-out;
}
.fot-lupa img {
  max-width: min(100%, 1200px);
  max-height: calc(100vh - 7rem);
  object-fit: contain;
  border-radius: .4rem;
  background: #fff;
  cursor: default;
}
/* A legenda cai sobre a tela por baixo do véu: sem fundo próprio ela disputa
   com o texto dos cartões e fica ilegível em cima de um cartão claro. */
.fot-lupa-legenda {
  color: #f1f3f5;
  font-size: .8rem;
  text-align: center;
  max-width: 90vw;
  line-height: 1.4;
  background: rgba(16, 18, 20, .82);
  border-radius: .35rem;
  padding: .3rem .7rem;
}
.fot-lupa-legenda b { color: #fff; font-weight: 600; }
.fot-lupa-legenda small { display: block; color: #adb5bd; font-size: .72rem; }
.fot-lupa-fechar {
  position: absolute;
  top: .6rem; right: .8rem;
  background: rgba(255,255,255,.14);
  border: none;
  color: #fff;
  border-radius: 6px;
  font-size: 1.1rem;
  line-height: 1;
  padding: .3rem .55rem;
  cursor: pointer;
}
.fot-lupa-fechar:hover { background: rgba(255,255,255,.28); }
.fot-lupa-carregando { color: #dee2e6; font-size: .85rem; }

/* ---- procedência --------------------------------------------------------- */
.fot-metodo {
  font-size: .72rem;
  color: #6c757d;
  border-top: 1px solid #e9ecef;
  margin-top: 1rem;
  padding-top: .5rem;
  line-height: 1.5;
}
.fot-metodo b { color: #495057; font-weight: 600; }

/* ---- barra de progresso do envio ---------------------------------------- */
.fot-progresso {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: #495057;
  margin-top: .5rem;
}
.fot-barra {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: #e9ecef;
  overflow: hidden;
}
.fot-barra i {
  display: block;
  height: 100%;
  background: #1971c2;
  transition: width .2s;
}

/* ---- telas pequenas ------------------------------------------------------ */
@media (max-width: 575.98px) {
  .fot-lista { grid-template-columns: 1fr; }
  .fot-kpis  { grid-template-columns: repeat(2, 1fr); }
  .fot-grade { grid-template-columns: repeat(3, 1fr); }
  .fot-drop { grid-template-columns: 1fr; text-align: center; }
  .fot-drop-btns { justify-content: center; }
  /* No celular o nome da cor fica na primeira linha inteira. Com o pill de
     saldo (`white-space: nowrap`, ~230px) dividindo a linha com ele, o pill
     transbordava POR CIMA do nome — a cor virava ilegível justo em quem
     fotografa de pé no estúdio. */
  .fot-cor-id { min-width: 0; flex: 1 0 100%; }
  .fot-cor-head { row-gap: .3rem; }
  .fot-cor-peca { margin-left: 0; white-space: normal; }
  .fot-cor-alerta { white-space: normal; }
  .fot-busca { max-width: none; width: 100%; }
  .fot-card-acoes .btn { flex: 1; }
  .fot-det-ref { width: 64px; height: 64px; }
  .fot-lupa { padding: .5rem; }
  .fot-lupa img { max-height: calc(100vh - 8rem); }
  .fot-fila-sel { max-width: 88px; }
  .fot-alvo-sel { min-width: 0; width: 100%; }
  .fot-preview-alvo { margin-left: 0; width: 100%; }
}

/* ---- abas da tela -------------------------------------------------------- */
/* Duas perguntas diferentes sobre a mesma peça: "o que falta fotografar" e
   "o que já pode voltar para o Estoque". Aba, não filtro: a lista de baixo
   nem sequer tem os mesmos itens — a fila vem do briefing, o estúdio vem do
   saldo. */
.fot-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .75rem;
}
.fot-topo .btn { flex: none; margin-bottom: .2rem; }
.fot-abas {
  display: flex;
  gap: .25rem;
  border-bottom: 2px solid #e9ecef;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  /* Windows com barra de rolagem clássica sempre visível desenhava o controle
     de setas colado no botão Atualizar — parecia um botão morto. A rolagem por
     arrasto (celular) continua; são duas abas, ninguém rola no desktop. */
  scrollbar-width: none;
}
.fot-abas::-webkit-scrollbar { display: none; }
.fot-aba {
  border: none;
  background: none;
  padding: .45rem .8rem;
  font-size: .85rem;
  font-weight: 500;
  color: #6c757d;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.fot-aba:hover { color: #1971c2; background: #f8f9fa; }
.fot-aba.ativo { color: #1971c2; border-bottom-color: #1971c2; font-weight: 600; }
.fot-aba b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- seção com tabela própria ------------------------------------------- */
/* Cada tabela é um card com título, uma linha de descrição e contador. As duas
   listas respondem a coisas diferentes e não podem virar uma tabela só com
   coluna de status. */
.fot-secao {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  background: #fff;
  padding: .7rem .8rem;
  margin-bottom: .85rem;
}
.fot-secao--acao { border-color: #a9d9bd; }
.fot-secao-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .5rem;
}
.fot-secao-titulo {
  font-size: .95rem;
  font-weight: 600;
  color: #212529;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.fot-secao-sub { font-size: .74rem; color: #6c757d; margin: .15rem 0 0; line-height: 1.35; }
.fot-secao-acoes { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.fot-conta {
  font-size: .72rem;
  font-weight: 600;
  color: #495057;
  background: #f1f3f5;
  border-radius: 999px;
  padding: .1rem .5rem;
  font-variant-numeric: tabular-nums;
}

/* ---- tabela ------------------------------------------------------------- */
/* A rolagem horizontal mora aqui dentro; a página nunca rola de lado. */
.fot-tab-rola { overflow-x: auto; }
.fot-tab {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
  min-width: 660px;
}
.fot-tab th {
  text-align: left;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #6c757d;
  font-weight: 600;
  border-bottom: 1px solid #dee2e6;
  padding: .3rem .5rem;
  white-space: nowrap;
}
.fot-tab td {
  padding: .4rem .5rem;
  border-bottom: 1px solid #f1f3f5;
  vertical-align: top;
}
.fot-tab tbody tr:hover { background: #f8f9fa; }
.fot-tab th.fot-num, .fot-tab td.fot-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fot-tab-cod { font-size: .72rem; color: #1971c2; font-weight: 600; font-variant-numeric: tabular-nums; }
.fot-tab-nome {
  display: block;
  max-width: 320px;
  color: #212529;
  line-height: 1.25;
}
.fot-tab-cor { font-weight: 600; color: #343a40; }
.fot-tab-sub { display: block; font-size: .68rem; color: #868e96; font-variant-numeric: tabular-nums; }
/* Cor seguinte do mesmo produto: so o codigo, recuado. A linha do produto
   novo ganha o traço de cima — e ele que separa um grupo do outro. */
.fot-tab-rep .fot-tab-cod { color: #adb5bd; font-weight: 500; }
.fot-tab tbody tr.fot-linha--novo td { border-top: 1px solid #dee2e6; }
.fot-tab tbody tr:first-child td { border-top: none; }
.fot-linha--parada td { background: #fffaf5; }
.fot-linha--parada:hover td { background: #fff4e6; }
.fot-dias--parada { color: #9d5c00; font-weight: 600; }

/* ---- estoque da cor por local e tamanho ---------------------------------
   Painel que abre dentro do bloco da cor. Responde duas perguntas: onde está
   a peça para fotografar, e em que números essa cor existe de verdade. */
.fot-est {
  border: 1px solid #dee2e6;
  border-radius: .4rem;
  background: #fbfcfd;
  margin: .1rem 0 .6rem;
  padding: .55rem .65rem;
}
.fot-est-topo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .75rem;
  margin-bottom: .45rem;
}
.fot-est-titulo { font-size: .82rem; font-weight: 650; color: #212529; }
.fot-est-frescor { font-size: .72rem; color: #6c757d; margin-left: auto; }
.fot-est-frescor--atrasado { color: #9d5c00; }
.fot-est-rolagem { overflow-x: auto; }
.fot-est-tab { width: 100%; border-collapse: collapse; font-size: .78rem; }
.fot-est-tab th, .fot-est-tab td { padding: .28rem .45rem; white-space: nowrap; }
.fot-est-tab thead th {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .02em;
  color: #6c757d; font-weight: 700; border-bottom: 1px solid #dee2e6;
}
/* Texto à esquerda, quantidade à direita — cabeçalho junto com a célula. */
.fot-est-tab th.fot-est-local, .fot-est-tab td.fot-est-local { text-align: left; }
.fot-est-tab th.fot-est-num,   .fot-est-tab td.fot-est-num   { text-align: right; }
.fot-est-tab tbody td { border-top: 1px solid #f1f3f5; }
.fot-est-tab tbody tr:hover td { background: #f8f9fa; }
.fot-est-zero { color: #ced4da; }
.fot-est-total { font-weight: 700; }
.fot-est-tab tfoot td {
  border-top: 1px solid #dee2e6; font-weight: 700; background: #f8f9fa;
}
/* O estúdio é o local que decide se dá para fotografar hoje. */
.fot-est-linha--estudio td { background: #f0f9f3; }
.fot-est-linha--estudio:hover td { background: #e6f5ec; }
.fot-est-linha--estudio .fot-est-local { color: #1c7a43; font-weight: 650; }
.fot-est-linha--receb .fot-est-local { color: #14559b; font-weight: 600; }
.fot-est-marca {
  font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; margin-left: .3rem; color: #6c757d;
}
.fot-est-nota { font-size: .7rem; color: #6c757d; margin-top: .4rem; }
.fot-est-vazio { font-size: .78rem; color: #495057; }
.fot-est-erro { font-size: .78rem; color: #a52121; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.fot-cor-est { --bs-btn-font-size: .78rem; padding: 0 .25rem; }

@media (max-width: 575.98px) {
  .fot-secao { padding: .6rem .5rem; }
  .fot-tab-nome { max-width: 200px; }
  /* No celular o Atualizar comia o rótulo da aba ativa. Ele desce uma
     linha; as abas ficam com a largura inteira. */
  .fot-topo { flex-wrap: wrap; }
  /* flex-basis 0 do .fot-abas vence width:100% e a aba nao quebra linha. */
  .fot-abas { flex: 1 0 100%; }
  .fot-topo .btn { margin-left: auto; margin-bottom: 0; }
  .fot-secao-acoes { width: 100%; }
  .fot-secao-acoes .btn { width: 100%; }
}