/* Etapas (E-38): o andamento de cada coleção, lido das caixinhas da Visão Geral, com o MES e o ERP ao lado. Opção B do
   designer (um cartão por coleção, na linguagem do cartão do Calendário), escolhida pela recomendação em 16/10.
   As cores da coleção vêm em tons (--traco, --trilho, --tinta, --tinta-borda, --aro, --escrita), com contraste medido. */
:root {
  --cinza-cheio: #bdb9b0;      /* produção e site: lidos da planilha */
  --icone-relogio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.6V8l2.3 1.5'/%3E%3C/svg%3E");
  --icone-dif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 6h10M3 10h10M10.5 3 5.5 13'/%3E%3C/svg%3E");
  --icone-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' fill-rule='evenodd' d='M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1Zm-.85 6h1.7v4.8h-1.7V7Zm.85-3.1a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z'/%3E%3C/svg%3E");
}
.et { max-width: 1400px; }
.et-resumo { margin: 0; max-width: 900px; color: var(--texto-2); font-size: var(--t-4); }
.et-resumo b { color: var(--texto); font-weight: 650; }
.et-resumo .r-atraso, .et-resumo .r-atraso b, .et-resumo .r-risco b { color: var(--atencao-texto); }
.et-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: var(--e-5) 0 var(--e-3); }
.et-nota { margin: 0; font-size: var(--t-3); color: var(--texto-2); }
.seg > [role="tab"] small { margin-left: 5px; font-size: var(--t-2); font-weight: 500; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.et-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: var(--e-6) 0 0; padding-top: var(--e-3);
  border-top: 1px solid var(--linha); font-size: var(--t-2); color: var(--texto-2); }
.et-rodape p { flex: 1 1 520px; margin: 0; }
.et-rodape .erro-leitura { flex-basis: 100%; color: var(--erro-texto); font-weight: 600; }
.et-rodape button { min-height: 36px; }
.ponto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--fam); }
.ok-ic { display: inline-block; width: 12px; height: 12px; flex: none; background: currentColor;
  -webkit-mask: var(--icone-ok) center / contain no-repeat; mask: var(--icone-ok) center / contain no-repeat; }
.ic-relogio, .ic-info { display: inline-block; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: var(--icone-relogio) center / contain no-repeat; mask: var(--icone-relogio) center / contain no-repeat; }
.ic-info { -webkit-mask-image: var(--icone-info); mask-image: var(--icone-info); }
.grupo[hidden] { display: none !important; }

/* situação da liberação: texto + sinal, nunca só cor */
.sit { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px 1px 8px; border: 1px solid var(--linha); border-radius: var(--r-pilula);
  background: var(--superficie-2); color: var(--texto-2); font-size: var(--t-2); font-weight: 650; line-height: 20px; white-space: nowrap; }
.sit::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.sit.atrasada { background: var(--atencao-fundo); border-color: var(--atencao-linha); color: var(--atencao-texto); }
.sit.atrasada::before { width: 13px; height: 13px; border-radius: 0; -webkit-mask: var(--icone-alerta) center / contain no-repeat; mask: var(--icone-alerta) center / contain no-repeat; }
.sit.em-risco { background: var(--superficie); border-color: var(--atencao-borda); color: var(--atencao-texto); }
.sit.no-prazo { background: var(--superficie); color: var(--texto); }
.sit.no-prazo::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--texto-2); }
.sit.liberada { background: var(--ok-fundo); border-color: var(--ok-linha); color: var(--ok-texto); }
.sit.liberada::before { width: 12px; height: 12px; border-radius: 0; -webkit-mask: var(--icone-ok) center / contain no-repeat; mask: var(--icone-ok) center / contain no-repeat; }
.sit.lancada { background: var(--superficie-3); border-color: var(--linha); color: var(--texto-2); }
.sit.sem-sku, .sit.sem-data { background: transparent; border-style: dashed; border-color: var(--borda-forte); color: var(--texto-2); }
.sit.sem-sku::before, .sit.sem-data::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* o cartão da coleção */
.cartoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cartao { padding: 16px 20px 14px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-4); box-shadow: var(--sombra-1);
  transition: border-color .15s, box-shadow .15s; }
.cartao.aberto { border-color: var(--borda-forte); box-shadow: var(--sombra-2); }
.c-topo { display: grid; grid-template-columns: minmax(0, 1fr) 200px 210px; gap: 20px; align-items: center; }
.c-id h2 { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 9px; margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: -.015em; }
.c-id h2 .ponto { align-self: center; }
.c-id h2 small { font-family: var(--fonte); font-size: var(--t-3); font-weight: 600; letter-spacing: 0; color: var(--texto-2); }
.c-id h2 a { color: var(--texto); text-decoration: none; border-radius: 4px; }
.c-id h2 a:hover { text-decoration-line: underline; }
.c-meta { margin: 4px 0 0 19px; font-size: var(--t-3); color: var(--texto-2); }
.c-meta b { color: var(--texto); font-weight: 650; }
.c-meta .faltam { display: inline-flex; padding: 0 9px; margin-left: 2px; border: 1px solid var(--tinta-borda); border-radius: var(--r-pilula);
  background: var(--tinta); color: var(--escrita); font-size: var(--t-2); font-weight: 650; line-height: 19px; }
.c-aviso { margin: 6px 0 0 19px; font-size: var(--t-2); color: var(--atencao-texto); }
.c-lib { display: grid; gap: 3px; justify-items: start; }
.c-rot { font-size: var(--t-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.c-lib small { font-size: var(--t-2); color: var(--texto-2); }
.c-geral p { margin: 0 0 6px; font-size: var(--t-3); color: var(--texto-2); }
.c-geral p b { margin-right: 3px; font-family: var(--fonte-titulo); font-size: 24px; font-weight: 700; line-height: 1; color: var(--texto); font-variant-numeric: tabular-nums; }
.barra-g { display: block; height: 6px; border-radius: 3px; background: var(--trilho); overflow: hidden; }
.barra-g i { display: block; height: 100%; border-radius: inherit; background: var(--traco); }

/* prazos, passo 1: as duas datas limite e o tecido do piloto e da foto, numa faixa entre o topo e as fases */
.c-prazos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: center; margin: 12px 0 0; }
.c-prazos > .c-rot { grid-row: 1; }
.c-prazos > .pz-tecidos { grid-column: 1 / -1; margin: 0; }
@media (max-width: 600px) { .c-prazos { grid-template-columns: minmax(0, 1fr); } }

/* as 5 fases numa bandeja clara (o cartão aprovado do Calendário, mais baixo) */
.c-fases { list-style: none; margin: 14px 0 0; padding: 5px; display: flex; gap: 5px; background: var(--superficie-2); border: 1px solid var(--linha-suave); border-radius: 14px; }
.fs { flex: 1 1 0; min-width: 0; padding: 8px 11px 9px; border: 1px solid transparent; border-radius: 10px; }
.fs.feita, .fs.depois { flex-grow: .75; }
.fs.mudo { flex-grow: .7; border: 1px dashed var(--linha); background: transparent; }
.fs.atrasada:not(.mudo) { background: var(--atencao-fundo); border-color: var(--atencao-linha); }
.fs.agora:not(.mudo) { background: var(--superficie); border-color: var(--aro); box-shadow: var(--sombra-1); }
.fs-est { display: flex; align-items: center; gap: 5px; margin: 0; font-size: var(--t-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2);
  text-wrap: balance; /* "ATRASADA 19 / DIAS ÚTEIS", não "ÚTEIS" sozinho na 2ª linha */ }
.fs-est .ic { width: 11px; height: 11px; flex: none; }
.fs.feita .fs-est .ic { background: currentColor; -webkit-mask: var(--icone-ok) center / contain no-repeat; mask: var(--icone-ok) center / contain no-repeat; }
.fs.atrasada:not(.mudo) .fs-est { color: var(--atencao-texto); }
.fs.atrasada:not(.mudo) .fs-est .ic { background: currentColor; -webkit-mask: var(--icone-alerta) center / contain no-repeat; mask: var(--icone-alerta) center / contain no-repeat; }
.fs.agora:not(.mudo) .fs-est { color: var(--escrita); }
.fs.agora:not(.mudo) .fs-est .ic { width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; background: var(--traco); box-shadow: 0 0 0 3px var(--trilho); }
.fs.depois .fs-est .ic, .fs.mudo .fs-est .ic, .fs.andando .fs-est .ic { width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--borda-forte); background: none; }
.fs-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 2px 0 6px; }
.fs-linha h3 { min-width: 0; margin: 0; font-size: var(--t-3); font-weight: 650; line-height: 1.25; }
.fs-pct { flex: none; font-family: var(--fonte-titulo); font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.fs-pct small { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.fs.feita .fs-pct, .fs.depois .fs-pct, .fs.mudo .fs-pct { font-size: 14px; font-weight: 650; color: var(--texto-2); }
.fs-barra { display: block; height: 4px; border-radius: 2px; background: var(--trilho); overflow: hidden; }
.fs-barra i { display: block; height: 100%; border-radius: inherit; background: var(--traco); }
.fs.feita .fs-barra i { background: var(--aro); }
.fs.atrasada:not(.mudo) .fs-barra { background: var(--atencao-linha); }
.fs.atrasada:not(.mudo) .fs-barra i { background: var(--escrita); }
.fs.mudo .fs-barra { background: var(--superficie-3); }
.fs.mudo .fs-barra i { background: var(--cinza-cheio); }
.fs.mudo h3 { font-weight: 600; color: var(--texto-2); }
.fs-prazo { margin: 5px 0 0; font-size: var(--t-2); line-height: 1.35; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.fs.atrasada:not(.mudo) .fs-prazo { color: var(--atencao-texto); font-weight: 600; }
.fs-juntas { display: none; }
.fs-dif { display: flex; align-items: flex-start; gap: 5px; margin: 5px 0 0; padding-top: 5px; border-top: 1px dashed var(--linha);
  font-size: var(--t-2); line-height: 1.35; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.fs-dif .ic-dif { margin-top: 1px; }
.fs-mais { white-space: nowrap; }

/* o pé: a etapa que segura, com os desenhos dos modelos parados nela, e o "abrir" */
.c-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha-suave); }
.c-seg { margin: 0; font-size: var(--t-3); color: var(--texto); }
.c-seg b { font-weight: 700; }
.c-seg.atraso { color: var(--atencao-texto); }
.c-seg.calmo { color: var(--texto-2); }
.c-seg.calmo b { color: var(--texto); font-weight: 650; }
.fotos-seg { display: flex; gap: 5px; list-style: none; margin: 0; padding: 0; }
.fotos-seg .fotinha { width: 52px; height: 35px; border-radius: 7px; }
.fotos-seg .mais { display: grid; place-items: center; min-width: 40px; height: 35px; padding: 0 7px; border: 1px dashed var(--borda-forte); border-radius: 7px;
  font-size: var(--t-2); font-weight: 650; color: var(--texto-2); }
button.ver { margin-left: auto; min-height: 36px; padding: 0 14px; gap: 8px; }
button.ver .seta-abre { width: 10px; height: 10px; background: currentColor; transition: transform .15s;
  -webkit-mask: var(--icone-chevron) center / contain no-repeat; mask: var(--icone-chevron) center / contain no-repeat; transform: rotate(90deg); }
button.ver[aria-expanded="true"] .seta-abre { transform: rotate(-90deg); }
.c-det { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; margin: 14px -8px 0; padding: 14px 8px 4px; border-top: 1px solid var(--linha); }
.c-det[hidden] { display: none; }
.c-det .col-esq { display: grid; gap: 14px; align-content: start; }
.c-det .sec { padding: 14px 16px 16px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); }
.c-det .sec.onde { background: var(--superficie-2); }
.sec h4 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 10px; font-family: var(--fonte-titulo); font-size: var(--t-4); font-weight: 650; }
.sec h4 span { font-family: var(--fonte); font-size: var(--t-2); font-weight: 500; color: var(--texto-2); }
.tudo-ok { display: flex; align-items: center; gap: 7px; margin: 0; font-size: var(--t-3); color: var(--ok-texto); }

/* coleção sem SKU: cartão baixo e tracejado */
.cartao.compacto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 18px; background: transparent; border-style: dashed;
  border-color: var(--borda-forte); box-shadow: none; }
.cartao.compacto h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--t-4); }
.cartao.compacto .c-meta { margin: 0; }
.cartao.compacto .vz { margin: 0 0 0 auto; font-size: var(--t-2); color: var(--texto-2); }
.cartao.compacto .vz b { color: var(--texto); font-weight: 650; }
/* já lançadas: mais baixas (as fases de desenvolvimento viram uma linha) */
.cartao.lancada .c-fases .fs.feita { display: none; }
.cartao.lancada .fs-juntas { display: flex; align-items: center; gap: 7px; flex: .9 1 0; padding: 8px 11px; font-size: var(--t-2); color: var(--texto-2); }
.cartao.lancada .fs-juntas b { color: var(--texto); font-weight: 650; }
.cartao.lancada .fs-juntas .ok-ic { color: var(--ok-texto); }
.recolhidas { margin: 0; padding: 12px 18px 14px; background: var(--superficie); border: 1px dashed var(--borda-forte); border-radius: var(--r-4); }
.recolhidas summary { font-size: var(--t-3); font-weight: 650; color: var(--texto); cursor: pointer; min-height: 28px; display: flex; align-items: center; }
.recolhidas > p { margin: 6px 0 10px; font-size: var(--t-2); color: var(--texto-2); }
.recolhidas ul.nomes { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 8px 0 0; padding: 0; font-size: var(--t-2); color: var(--texto-2); }
.recolhidas ul.nomes li b { color: var(--texto); font-weight: 600; }
.recolhidas .cartoes { margin-top: 10px; }

/* as 19 etapas em barras */
.b19-fase + .b19-fase, .nota-mudo + .b19-fase { margin-top: 12px; }
.b19-fase h5 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; font-size: var(--t-1); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-2); }
.b19-fase h5 span { font-size: var(--t-2); font-weight: 600; letter-spacing: 0; text-transform: none; }
.b19-fase h5 span.atraso { color: var(--atencao-texto); }
.b19-fase ul { list-style: none; margin: 0; padding: 0; }
.b19 { display: grid; grid-template-columns: minmax(130px, 1.3fr) minmax(50px, 1fr) 92px 104px; gap: 12px; align-items: center; min-height: 30px;
  padding: 3px 0; border-bottom: 1px solid var(--linha-suave); font-size: var(--t-3); color: var(--texto); }
.b19:last-child { border-bottom: 0; }
.b19-nome { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.b19-trilho { display: block; height: 6px; border-radius: 3px; background: var(--trilho, var(--linha-suave)); overflow: hidden; }
.b19-trilho i { display: block; width: calc(var(--p) * 1%); height: 100%; border-radius: inherit; background: var(--traco, var(--texto-2)); }
.b19-n, .b19-m { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--texto-2); font-size: var(--t-2); }
.b19-n b, .b19-m b { color: var(--texto); font-weight: 650; font-size: var(--t-3); }
.b19.feita { color: var(--texto-2); }
.b19.feita .b19-trilho i { background: var(--aro, var(--ok-linha)); }
.b19.atraso .b19-trilho { background: var(--atencao-fundo); box-shadow: inset 0 0 0 1px var(--atencao-linha); }
.b19.atraso .b19-trilho i { background: var(--atencao-borda); }
.b19.segura .b19-nome { font-weight: 700; }
.tag-segura { padding: 0 7px; border: 1px solid var(--atencao-linha); border-radius: var(--r-pilula); background: var(--atencao-fundo);
  color: var(--atencao-texto); font-size: 11px; font-weight: 700; line-height: 17px; }
.b19:not(.atraso) .tag-segura { border-color: var(--borda-forte); background: var(--superficie); color: var(--texto); }
.b19-fase.mudo h5, .b19-fase.mudo .b19 { color: var(--texto-2); }
.b19-fase.mudo .b19-trilho { background: var(--superficie-3); box-shadow: none; }
.b19-fase.mudo .b19-trilho i { background: var(--cinza-cheio); }
.b19-fase.mudo .b19-n b, .b19-fase.mudo .b19-m b { color: var(--texto-2); font-weight: 600; }
.nota-mudo { display: flex; gap: 7px; align-items: flex-start; margin: 16px 0 0; padding: 8px 10px; border: 1px dashed var(--borda-forte);
  border-radius: var(--r-2); font-size: var(--t-2); line-height: 1.45; color: var(--texto-2); }
.nota-mudo .ic-info { margin-top: 1px; }
.nota-mudo b { color: var(--texto); font-weight: 650; }
/* a fonte (MES ou ERP) logo abaixo da caixinha: confere, ou a divergência sem gritar */
.b19.com-fonte { row-gap: 0; }
.fonte { grid-column: 2 / -1; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: -2px 0 2px; font-size: var(--t-2);
  line-height: 1.4; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.fonte .ok-ic { width: 11px; height: 11px; color: var(--ok-texto); }
.fonte.dif b { color: var(--texto); font-weight: 650; }
.ic-dif { display: inline-block; width: 13px; height: 13px; flex: none; background: var(--texto-2);
  -webkit-mask: var(--icone-dif) center / contain no-repeat; mask: var(--icone-dif) center / contain no-repeat; }
.mes-nota { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; font-size: var(--t-2); color: var(--texto-2); }
.mes-nota .ic-relogio { width: 12px; height: 12px; }

/* onde estão os SKUs */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 13px; border: 1px solid var(--linha); border-radius: var(--r-pilula);
  background: var(--superficie); color: var(--texto); font-size: var(--t-3); font-weight: 600; box-shadow: none; white-space: nowrap; }
.chip b { font-weight: 750; font-variant-numeric: tabular-nums; }
.chip.atraso::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--atencao-borda); }
button.chip:hover:not(:disabled):not([aria-selected="true"]) { background: var(--superficie-3); border-color: var(--borda-forte); color: var(--texto); }
button.chip[aria-selected="true"], button.chip[aria-selected="true"]:hover:not(:disabled) { background: var(--superficie-3); border-color: var(--borda-campo);
  box-shadow: inset 0 0 0 1px var(--borda-campo); color: var(--texto); font-weight: 700; }
.chip.ok { background: var(--ok-fundo); border-color: var(--ok-linha); color: var(--ok-texto); cursor: default; }
.onde-titulo { margin: 0 0 8px; font-size: var(--t-3); color: var(--texto-2); }
.onde-titulo b { color: var(--texto); font-weight: 700; }
.onde-titulo .atraso { color: var(--atencao-texto); font-weight: 600; }
.tempo-nota { display: flex; gap: 7px; align-items: flex-start; margin: 0 0 10px; font-size: var(--t-2); line-height: 1.45; color: var(--texto-2); }
.tempo-nota .ic-relogio { margin-top: 1px; }
.pilha { display: flex; gap: 2px; height: 12px; margin: 2px 0 6px; border-radius: 6px; overflow: hidden; }
.pilha i { min-width: 4px; background: var(--traco); }
.pilha i.atraso { background: var(--atencao-borda); }
.pilha i.ok { background: var(--ok-linha); }
.pilha-leg { margin: 0 0 10px; font-size: var(--t-2); color: var(--texto-2); }
.sem-lista { margin: 0; font-size: var(--t-3); color: var(--texto-2); }
.ver-resto { margin-top: 8px; font-size: var(--t-3); }

/* cartão do modelo: desenho, código e nome, cores, há quantos dias */
.mods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.mods + .mods { margin-top: 8px; }
.mod { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 12px 8px 8px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); }
.desenho, .fotinha { display: grid; place-items: center; width: 88px; height: 58px; overflow: hidden; background: #fff;
  border: 1px solid var(--linha-suave); border-radius: 9px; }
.desenho img, .fotinha img { width: 100%; height: 100%; object-fit: contain; }
.desenho.sem, .fotinha.sem { background: var(--superficie-3); border-color: var(--linha); }
.mod-txt { min-width: 0; }
.mod-nome { margin: 0; font-size: var(--t-3); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.mod-nome b { margin-right: 3px; font-weight: 750; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.mod-cores { margin: 2px 0 0; font-size: var(--t-2); line-height: 1.4; color: var(--texto-2); overflow-wrap: anywhere; }
.mod-desde { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 5px 0 0; }
.ha { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: var(--r-pilula); background: var(--superficie-3);
  color: var(--texto); font-size: var(--t-2); font-weight: 650; line-height: 20px; }
.ha::before { content: ""; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: var(--icone-relogio) center / contain no-repeat; mask: var(--icone-relogio) center / contain no-repeat; }

/* depois da liberação */
.dp-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); column-gap: 18px; }
.dp-lista > li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; padding: 6px 0;
  border-bottom: 1px solid var(--linha-suave); font-size: var(--t-3); }
.dp-nome { font-weight: 600; }
.dp-n { font-size: var(--t-2); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.dp-n b { font-size: var(--t-3); color: var(--texto); font-weight: 650; }
.dp-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 14px 0 0; font-size: var(--t-1); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.dp-sub span { font-size: var(--t-2); font-weight: 500; letter-spacing: 0; text-transform: none; }
.dp-lista.mudo > li, .dp-lista.mudo .dp-n b { color: var(--texto-2); }
.dp-lista.mudo .dp-nome { font-weight: 500; }
.fotinhas { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 4px 0 2px; padding: 0; }
.fotinhas .fotinha { width: 48px; height: 32px; border-radius: 6px; }
.fotinhas .mais { display: grid; place-items: center; min-width: 40px; height: 32px; padding: 0 6px; border: 1px dashed var(--borda-forte);
  border-radius: 6px; font-size: var(--t-2); font-weight: 650; color: var(--texto-2); }

/* revisão de design das Etapas (16/10): o que pede ação no topo, o MES parado à vista, "onde estão" em raias (da opção
   C), as já lançadas numa linha (da opção A), fora do plano e criadas só no sistema recolhidas no fim */
.atencao { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 var(--e-3); padding: 10px 14px;
  background: var(--atencao-fundo); border: 1px solid var(--atencao-linha); border-radius: var(--r-3); }
.atencao .rot { font-size: var(--t-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--atencao-texto); }
.atencao ul { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0; padding: 0; }
.atencao a { color: var(--atencao-texto); font-size: var(--t-3); text-underline-offset: 3px; }
.atencao a b { font-weight: 700; }
/* E-19 (F7): a planilha foi lida, mas o sistema não foi atualizado (a carga do dia recusada): uma linha inteira, em texto */
.atencao .carga-falhou { flex-basis: 100%; color: var(--atencao-texto); font-size: var(--t-3); line-height: 1.45; }
.atencao .carga-falhou b { font-weight: 700; }
.aviso-mes { margin: 0 0 var(--e-3); }
.fs-est { font-size: 12px; }
.fs.sem-marca { flex-grow: .7; }
.fs.sem-marca .fs-est .ic { width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--borda-forte); background: none; }
.fs-linha h3 .curto { display: none; }
.fs-legenda { display: none; }
.c-geral .completo { display: flex; align-items: center; gap: 7px; margin: 0; font-size: var(--t-4); font-weight: 650; color: var(--ok-texto); }
.c-geral .completo .ok-ic { width: 14px; height: 14px; }
.raias { display: flex; flex-direction: column; gap: 8px; }
.raia { padding: 10px 12px 12px; border: 1px solid var(--linha); border-radius: var(--r-3); background: var(--superficie); }
.raia.atraso { border-color: var(--atencao-linha); background: color-mix(in srgb, var(--atencao-fundo) 45%, var(--superficie)); }
.raia h5 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 8px; font-size: var(--t-4); font-weight: 650; }
.raia h5 .n { font-size: var(--t-3); font-weight: 500; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.raia h5 .n b { color: var(--texto); font-weight: 700; }
.raia h5 .tag { padding: 0 8px; border-radius: var(--r-pilula); background: var(--superficie); border: 1px solid var(--atencao-linha); color: var(--atencao-texto);
  font-size: var(--t-2); font-weight: 650; line-height: 19px; }
.raia.ok { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; background: var(--ok-fundo); border-color: var(--ok-linha); color: var(--ok-texto);
  font-size: var(--t-3); font-weight: 600; }
.dp-nome .tag-segura { margin-left: 6px; }
.dp-pouco { margin: 12px 0 0; padding-top: 8px; border-top: 1px dashed var(--linha); font-size: var(--t-2); color: var(--texto-2); }
details.etapas19 > summary { list-style: none; cursor: pointer; }
details.etapas19 > summary::-webkit-details-marker { display: none; }
details.etapas19 > summary h4 { margin: 0; }
details.etapas19 > summary h4::after { content: "Ver"; margin-left: auto; font-family: var(--fonte); font-size: var(--t-2); font-weight: 600; color: var(--texto); text-decoration: underline; }
details.etapas19[open] > summary h4::after { content: "Recolher"; }
details.etapas19[open] > summary { margin-bottom: 10px; }
.linhas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.linha { padding: 8px 14px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); }
.linha.aberto { border-color: var(--borda-forte); box-shadow: var(--sombra-1); }
.l-topo { display: grid; grid-template-columns: minmax(0, 1.4fr) 150px 80px 150px minmax(0, 1fr) auto; gap: 6px 16px; align-items: center;
  font-size: var(--t-3); color: var(--texto-2); }
.l-topo h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0; font-size: var(--t-4); font-weight: 650; color: var(--texto); }
.l-topo h3 .ponto { align-self: center; }
.l-topo h3 small { font-size: var(--t-2); font-weight: 500; color: var(--texto-2); }
.l-topo h3 a { color: var(--texto); }
.l-n { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.l-n .ok-ic { color: var(--ok-texto); }
.linha button.ver { margin-left: 0; min-height: 32px; padding: 0 12px; }
.linha .c-det { margin-top: 10px; }
.bloco { list-style: none; }
.recolhidas.dentro { margin-top: 10px; background: var(--superficie-2); }
@media (max-width: 1180px) {
  .l-topo { grid-template-columns: minmax(0, 1fr) auto auto; }
  .l-topo .l-quando, .l-topo .l-n { grid-column: 1 / -1; }
  .l-topo h3 { grid-column: 1 / 2; }
  .l-topo button.ver { grid-column: 3; grid-row: 1; }
}
@media (max-width: 1180px) {
  .c-topo { grid-template-columns: minmax(0, 1fr) auto; }
  .c-geral { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 320px); align-items: center; column-gap: 12px; }
  .c-geral p { margin: 0; }
  .fs-linha { flex-direction: column; align-items: flex-start; gap: 2px; }
}
/* Q-2 da revisão: de 901 a 1200 px as 5 fases espremidas numa linha cortavam a nota do MES; ficam em 3 + 2 */
@media (min-width: 901px) and (max-width: 1200px) {
  .c-fases { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .c-fases > .fs { grid-column: span 2; }
  .c-fases > .fs ~ .fs ~ .fs ~ .fs { grid-column: span 3; }
  .fs-linha { flex-direction: row; align-items: baseline; gap: 8px; }
}
/* as 19 barras na coluna da direita do detalhe: as 4 colunas pedem 412 px; a 1024 a página rolava 76 px, e até ~1365 o
   "N/N modelos" passava da borda da caixa (teste de tela e revisão, 17/10). Nome, SKUs e modelos numa linha; a barra embaixo */
@media (min-width: 901px) and (max-width: 1365px) {
  .b19 { grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 10px; padding: 5px 0; }
  .b19-nome { grid-column: 1; }
  .b19-n { grid-column: 2; grid-row: 1; }
  .b19-m { grid-column: 3; grid-row: 1; }
  .b19-trilho { grid-column: 1 / -1; grid-row: 2; }
  .fonte { grid-column: 1 / -1; grid-row: 3; margin: 0; }
}
@media (max-width: 900px) {
  .et-barra { gap: 8px; }
  .et-barra .seg { display: flex; width: 100%; }
  .et-barra .seg > [role="tab"] { flex: 1 1 auto; min-height: 44px; padding: 0 8px; }
  .chip { min-height: 44px; }
  .cartao { padding: 14px 14px 12px; }
  .c-topo { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .c-id h2 { font-size: 18px; }
  .c-lib { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .c-lib .c-rot { flex-basis: 100%; }
  .c-geral { grid-template-columns: auto minmax(0, 1fr); }
  .c-fases { flex-direction: column; gap: 4px; padding: 4px; }
  .fs { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 8px 10px; }
  .fs > * { grid-column: 1 / -1; }
  .fs > .fs-est { grid-column: 1; grid-row: 1; }
  .fs > .fs-prazo { grid-column: 2; grid-row: 1; margin: 0; align-self: center; text-align: right; }
  .fs-linha { flex-direction: row; align-items: baseline; margin-bottom: 4px; }
  .c-fases.tem-juntas > .fs.feita { display: none; }
  .fs-juntas { display: flex; align-items: flex-start; gap: 7px; padding: 8px 10px; font-size: var(--t-2); line-height: 1.4; color: var(--texto-2); }
  .fs-juntas b { color: var(--texto); font-weight: 650; }
  .fs-juntas .ok-ic { margin-top: 2px; color: var(--ok-texto); }
  .fs.depois .fs-barra, .fs.mudo .fs-barra { display: none; }
  .fs.depois .fs-linha, .fs.mudo .fs-linha { margin-bottom: 0; }
  .c-pe { gap: 10px; }
  .fotos-seg { flex-wrap: wrap; }
  button.ver { margin-left: 0; width: 100%; min-height: 44px; }
  .c-det { grid-template-columns: 1fr; margin: 12px -6px 0; padding: 12px 0 2px; }
  .c-det .sec { padding: 12px; }
  .cartao.compacto { padding: 10px 14px; }
  .cartao.compacto .vz { margin-left: 0; flex-basis: 100%; }
  .b19 { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 6px 0; }
  .b19-nome { grid-column: 1; }
  .b19-n { grid-column: 2; grid-row: 1; }
  .b19-trilho { grid-column: 1 / -1; grid-row: 2; }
  .b19-m { grid-column: 1 / -1; grid-row: 3; text-align: left; }
  .fonte { grid-column: 1 / -1; grid-row: 4; margin: 0; }
  .mods { grid-template-columns: 1fr; }
  .mod { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }
  .mod .desenho { width: 76px; height: 50px; }
  .ver-resto { min-height: 44px; }
  .dp-lista { grid-template-columns: 1fr; }
  .et-rodape button { width: 100%; min-height: 44px; }
  .linha button.ver { width: auto; min-height: 44px; }
  .l-topo { display: flex; flex-wrap: wrap; gap: 4px 12px; }
  .l-topo h3 { flex: 1 1 100%; }
  .l-topo button.ver { margin-left: auto; }
}
/* no celular, as 5 fases numa faixa (a página ficava com 9 mil px): nome curto, %, barra; o que pede atenção numa frase */
@media (max-width: 600px) {
  .c-fases, .c-fases.tem-juntas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; padding: 3px; }
  .c-fases > .fs-juntas { display: none; }
  .c-fases.tem-juntas > .fs.feita, .cartao .c-fases .fs.feita { display: block; }
  .fs { display: block; padding: 6px 5px 7px; text-align: center; }
  .fs-est { justify-content: center; font-size: 0; }
  .fs-est .ic { font-size: 12px; }
  .fs-linha { flex-direction: column; align-items: center; gap: 2px; margin: 2px 0 4px; }
  .fs-linha h3 { font-size: var(--t-1); }
  .fs-linha h3 .longo { display: none; }
  .fs-linha h3 .curto { display: inline; }
  .fs-pct, .fs.feita .fs-pct, .fs.depois .fs-pct, .fs.mudo .fs-pct { font-size: 15px; }
  .fs.depois .fs-barra, .fs.mudo .fs-barra { display: block; }
  .fs-prazo, .fs-dif { display: none; }
  .fs-legenda { display: block; margin: 6px 2px 0; font-size: var(--t-2); color: var(--atencao-texto); }
}