/* Sistema tintométrico (assets/tintas-painel.js): janela "Tinta na cor", fila de produção, cores e fórmulas, cadastros */
#painel .varejo-busca-campo .varejo-tinta-botao { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 46px; margin: 0; padding: 0 14px; white-space: nowrap; }
#painel .varejo-busca-campo .varejo-tinta-botao[data-recurso-off] { display: none !important; }
.tinta-amostra { display: inline-grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid #00000022; box-shadow: inset 0 0 0 2px #ffffff88; color: #9a90ad; font-size: 13px; font-weight: 700; background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%); background-size: 10px 10px; background-position: 0 0, 5px 5px; }
.tinta-amostra[style*="#"] { background-image: none; }
#painel .tintas-cabecalho-card, dialog.varejo-dialogo .tintas-cabecalho-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 10px; }
#painel .tintas-cabecalho-card h3, #painel .tintas-cabecalho-card h4, dialog.varejo-dialogo .tintas-cabecalho-card h3 { margin: 0; }
#painel .tintas-cabecalho-card > div, dialog.varejo-dialogo .tintas-cabecalho-card > div { flex: 1 1 220px; }
#painel .tintas-cabecalho-card .botao-secundario, dialog.varejo-dialogo .tintas-cabecalho-card .botao-secundario { margin: 0; }
#painel .tintas-cabecalho-card label { display: flex; align-items: center; gap: 8px; margin: 0; }
#painel .tintas-cabecalho-card select { min-height: 40px; }
/* lista de cores */
#painel .tintas-cores, dialog.varejo-dialogo .tintas-cores { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-top: 12px; }
dialog.varejo-dialogo .tintas-cores.compacta { max-height: 340px; overflow-y: auto; }
.tinta-cor { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 10px; border: 1px solid var(--pal-e9e4f0, #e9e4f0); border-radius: 12px; background: #fff; color: var(--pal-2b2541, #2b2541); text-align: left; cursor: pointer; font: inherit; }
.tinta-cor:hover, .tinta-cor:focus-visible { border-color: var(--pal-8156c4, #8156c4); background: var(--pal-faf8fd, #faf8fd); }
.tinta-cor span { display: grid; min-width: 0; }
.tinta-cor strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.tinta-cor small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pal-6e6780, #6e6780); font-size: 11.5px; }
#painel .tinta-formula-bloco { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--pal-e9e4f0, #e9e4f0); }
/* fila de produção */
#painel .tintas-fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 14px; margin-top: 12px; }
#painel .tinta-card { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--pal-e9e4f0, #e9e4f0); border-radius: 14px; background: #fff; }
#painel .tinta-card header { display: flex; align-items: center; gap: 10px; }
#painel .tinta-card header div { display: grid; flex: 1; min-width: 0; }
#painel .tinta-card header small, #painel .tinta-card-info { color: var(--pal-6e6780, #6e6780); font-size: 12px; margin: 0; }
#painel .tinta-card .form-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
#painel .tinta-card .form-acoes button { margin: 0; min-height: 38px; }
.tinta-formula td, .tinta-formula th { font-size: 12.5px; }
.tinta-aviso { color: #a14a07; font-size: 12.5px; }
/* janela da venda */
dialog.varejo-dialogo .tinta-venda { display: grid; gap: 12px; }
dialog.varejo-dialogo .tinta-venda-busca label { display: grid; gap: 5px; font-size: 12px; font-weight: 600; }
.tinta-form-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); align-items: start; gap: 10px 12px; margin-bottom: 10px; }
.tinta-form-grade label { display: grid; gap: 5px; margin: 0; font-size: 12px; font-weight: 600; }
.tinta-form-grade .varejo-largo { grid-column: 1 / -1; }
.tinta-form-grade :is(input:not([type=color]), select) { width: 100%; min-height: 44px; box-sizing: border-box; }
.tinta-form-grade input[type=color] { width: 100%; height: 44px; padding: 2px; border-radius: 10px; }
dialog.varejo-dialogo .tinta-calculo .varejo-pagar-total { margin-top: 10px; }
dialog.varejo-dialogo .tinta-calculo .varejo-pagar-total small { color: var(--pal-6e6780, #6e6780); font-weight: 500; }
/* pesagem guiada */
.tinta-pesagem { display: grid; gap: 14px; text-align: center; }
.tinta-pesagem-passo h3 { margin: 6px 0; }
.tinta-pesagem-valor { margin: 6px 0; color: var(--pal-6b56d6, #6b56d6); font-size: clamp(38px, 8vw, 64px); font-weight: 700; font-variant-numeric: tabular-nums; }
.tinta-pesagem-barra { height: 10px; overflow: hidden; border-radius: 999px; background: var(--pal-efe7f9, #efe7f9); }
.tinta-pesagem-barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--pal-7054d4, #7054d4), var(--pal-9348c3, #9348c3)); transition: width .25s ease; }
.tinta-pesagem .form-acoes { display: flex; justify-content: center; gap: 10px; }
.tinta-pesagem-fim { font-size: 18px; font-weight: 600; color: #1f7a4d; }
/* cadastros */
#painel .tintas-sistemas { display: grid; gap: 8px; }
#painel .tinta-sistema { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border: 1px solid var(--pal-e9e4f0, #e9e4f0); border-radius: 12px; }
#painel .tinta-sistema small { flex: 1 1 260px; color: var(--pal-6e6780, #6e6780); }
#painel .tinta-linha { padding: 12px 0; border-top: 1px solid var(--pal-e9e4f0, #e9e4f0); }
#painel .tinta-linha small { color: var(--pal-6e6780, #6e6780); }
#painel .tintas-importar .form-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
#painel .tintas-arquivo { display: inline-flex; align-items: center; cursor: pointer; margin: 0; }
@media (max-width: 600px) {
  #painel .tintas-fila { grid-template-columns: 1fr; }
  #painel .varejo-busca-campo { flex-wrap: wrap; }
  #painel .varejo-busca-campo .varejo-tinta-botao { flex: 1 1 100%; justify-content: center; }
}
dialog.varejo-dialogo .tinta-venda { grid-template-columns: minmax(0, 1fr); }
dialog.varejo-dialogo .tinta-venda > *, dialog.varejo-dialogo .tinta-calculo, dialog.varejo-dialogo .tinta-form-grade > * { min-width: 0; }
dialog.varejo-dialogo .tintas-cabecalho-card h3 { overflow-wrap: anywhere; }
dialog.varejo-dialogo .tinta-pesagem .form-acoes { display: flex; justify-content: center; gap: 10px; }
#painel .tinta-card, #painel .tinta-card > * { min-width: 0; }
/* distância entre os cards da seção (os indicadores não encostam no card de baixo) */
#painel #secao-tintas .dashboard-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 18px; }
#painel #secao-tintas [data-tintas-painel] > .dashboard-card + .dashboard-card { margin-top: 18px; }
#painel #tintas-filtro-producao label:not(.varejo-filtro-busca) { flex: 0 1 240px; }
#painel #tintas-filtro-producao select { width: 100%; }
/* A linha de busca da venda é uma grade de 3 colunas (qtd., ×, busca): o botão "Tinta na cor" ganha a 4ª coluna em vez de cair na linha de baixo. */
#painel .varejo-busca-campo:has(> .varejo-tinta-botao:not([data-recurso-off])) { grid-template-columns: 90px auto minmax(0, 1fr) auto; }
#painel .varejo-busca-campo .varejo-tinta-botao { width: auto; padding: 0 16px; font-size: 14px; }
@media (max-width: 600px) { #painel .varejo-busca-campo:has(> .varejo-tinta-botao:not([data-recurso-off])) { grid-template-columns: 70px auto minmax(0, 1fr); } #painel .varejo-busca-campo .varejo-tinta-botao { grid-column: 1 / -1; } }