/* pipeline-stitch.css — GERADO (card quadro#104, etapa 3). A tela do funil (pipeline.html) é o export
   do Stitch ("obsidian-velocity", claude-ops/image/pipeline-kanban.html) com Tailwind; este arquivo só dá
   a paleta dele em variáveis (escuro = verbatim do Stitch; claro = decisão da IA nos mesmos matizes) e
   o mínimo que o Tailwind não cobre: o modal de Novo pedido e os formulários de Ações/Progresso. */
:root, :root[data-tema="escuro"] {
  --st-on-primary: 0 54 58;
  --st-on-primary-container: 0 105 112;
  --st-on-tertiary-fixed-variant: 101 62 0;
  --st-tertiary: 255 243 234;
  --st-on-error-container: 255 218 214;
  --st-tertiary-fixed: 255 221 184;
  --st-surface-container-highest: 39 54 71;
  --st-error: 255 180 171;
  --st-on-surface-variant: 185 202 203;
  --st-primary-fixed: 125 244 255;
  --st-on-secondary-fixed-variant: 0 82 54;
  --st-inverse-on-surface: 35 49 67;
  --st-on-background: 212 228 250;
  --st-secondary-fixed: 111 251 190;
  --st-primary: 219 252 255;
  --st-background: 5 20 36;
  --st-surface-container-low: 13 28 45;
  --st-surface: 5 20 36;
  --st-surface-tint: 0 219 233;
  --st-on-secondary-container: 0 49 31;
  --st-primary-container: 0 240 255;
  --st-on-surface: 212 228 250;
  --st-surface-variant: 39 54 71;
  --st-secondary: 78 222 163;
  --st-outline-variant: 59 73 75;
  --st-on-secondary: 0 56 36;
  --st-secondary-fixed-dim: 78 222 163;
  --st-on-primary-fixed-variant: 0 79 84;
  --st-surface-container-high: 28 43 60;
  --st-on-tertiary-fixed: 42 23 0;
  --st-secondary-container: 0 165 114;
  --st-surface-container-lowest: 1 15 31;
  --st-surface-container: 18 33 49;
  --st-inverse-primary: 0 105 112;
  --st-primary-fixed-dim: 0 219 233;
  --st-inverse-surface: 212 228 250;
  --st-tertiary-fixed-dim: 255 185 95;
  --st-on-primary-fixed: 0 32 34;
  --st-outline: 132 148 149;
  --st-tertiary-container: 255 209 156;
  --st-on-secondary-fixed: 0 33 19;
  --st-on-error: 105 0 5;
  --st-on-tertiary: 71 42 0;
  --st-error-container: 147 0 10;
  --st-surface-dim: 5 20 36;
  --st-surface-bright: 44 58 76;
  --st-on-tertiary-container: 133 83 0;
  color-scheme: dark;
}
:root[data-tema="claro"] {
  --st-on-primary: 255 255 255;
  --st-on-primary-container: 0 32 34;
  --st-on-tertiary-fixed-variant: 101 62 0;
  --st-tertiary: 92 55 0;
  --st-on-error-container: 65 0 2;
  --st-tertiary-fixed: 107 65 0;
  --st-surface-container-highest: 219 226 234;
  --st-error: 186 26 26;
  --st-on-surface-variant: 63 74 84;
  --st-primary-fixed: 0 105 112;
  --st-on-secondary-fixed-variant: 0 82 54;
  --st-inverse-on-surface: 232 238 245;
  --st-on-background: 15 29 43;
  --st-secondary-fixed: 0 108 71;
  --st-primary: 0 54 58;
  --st-background: 245 248 251;
  --st-surface-container-low: 238 242 246;
  --st-surface: 245 248 251;
  --st-surface-tint: 0 131 140;
  --st-on-secondary-container: 0 33 19;
  --st-primary-container: 0 116 125;
  --st-on-surface: 15 29 43;
  --st-surface-variant: 219 226 234;
  --st-secondary: 0 121 79;
  --st-outline-variant: 191 200 204;
  --st-on-secondary: 255 255 255;
  --st-secondary-fixed-dim: 0 121 79;
  --st-on-primary-fixed-variant: 0 79 84;
  --st-surface-container-high: 227 233 239;
  --st-on-tertiary-fixed: 42 23 0;
  --st-secondary-container: 78 222 163;
  --st-surface-container-lowest: 255 255 255;
  --st-surface-container: 233 238 243;
  --st-inverse-primary: 0 219 233;
  --st-primary-fixed-dim: 0 116 125;
  --st-inverse-surface: 35 49 67;
  --st-tertiary-fixed-dim: 138 83 0;
  --st-on-primary-fixed: 0 32 34;
  --st-outline: 102 117 122;
  --st-tertiary-container: 255 221 184;
  --st-on-secondary-fixed: 0 33 19;
  --st-on-error: 255 255 255;
  --st-on-tertiary: 255 255 255;
  --st-error-container: 255 218 214;
  --st-surface-dim: 213 221 229;
  --st-surface-bright: 255 255 255;
  --st-on-tertiary-container: 92 55 0;
  color-scheme: light;
}
/* nomes M3 que pedido-modal.css usa, apontando para a paleta do Stitch */
:root {
  --primary: rgb(var(--st-primary-container)); --on-primary: rgb(var(--st-on-primary));
  --primary-container: rgb(var(--st-surface-container-high)); --on-primary-container: rgb(var(--st-primary-fixed-dim));
  --secondary-container: rgb(var(--st-surface-container-highest)); --on-secondary-container: rgb(var(--st-on-surface));
  --tertiary-container: rgb(var(--st-tertiary-container)); --on-tertiary-container: rgb(var(--st-on-tertiary-container));
  --error: rgb(var(--st-error)); --error-container: rgb(var(--st-error-container)); --on-error-container: rgb(var(--st-on-error-container));
  --surface: rgb(var(--st-surface)); --on-surface: rgb(var(--st-on-surface)); --on-surface-variant: rgb(var(--st-on-surface-variant));
  --surface-container-low: rgb(var(--st-surface-container-low)); --surface-container: rgb(var(--st-surface-container));
  --surface-container-high: rgb(var(--st-surface-container-high)); --surface-container-highest: rgb(var(--st-surface-container-highest));
  --outline: rgb(var(--st-outline)); --outline-variant: rgb(var(--st-outline-variant));
  --scrim: rgb(1 15 31 / 0.7);
  --shape-corner-xs: 2px; --shape-corner-s: 0.25rem; --shape-corner-m: 0.375rem; --shape-corner-l: 0.5rem; --shape-corner-xl: 0.75rem; --shape-corner-full: 999px;
  --elevation-1-shadow: 0 1px 2px rgb(0 0 0 / 0.3); --elevation-3-shadow: 0 8px 24px rgb(0 0 0 / 0.45);
}

.material-symbols-outlined { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 20px;
  letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20; line-height: 1; display: inline-block; vertical-align: middle; }
.blueprint-grid { background-image: radial-gradient(rgb(var(--st-on-surface-variant) / 0.08) 1px, transparent 1px); background-size: 24px 24px; }
/* Card quadro#110: o funil precisa de altura DEFINIDA (min-height:0 no flex-1 dentro do main em coluna),
   senão cada coluna cresce até o fim da lista e nada rola. Cabeçalho fixo; só o corpo da coluna rola. */
#kanban-colunas { min-height: 0; align-items: stretch; }
#kanban-colunas > .coluna-kanban { min-height: 0; max-height: 100%; }
.coluna-kanban-corpo { overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin;
  scrollbar-color: rgb(var(--st-outline) / 0.8) rgb(var(--st-surface-container-lowest) / 0.4); }
.coluna-kanban-corpo:focus-visible { outline: 2px solid rgb(var(--st-primary-container) / 0.7); outline-offset: -2px; }
.coluna-kanban-corpo::-webkit-scrollbar { width: 8px; }
.coluna-kanban-corpo::-webkit-scrollbar-track { background: rgb(var(--st-surface-container-lowest) / 0.5); border-radius: 4px; }
.coluna-kanban-corpo::-webkit-scrollbar-thumb { background: rgb(var(--st-outline) / 0.8); border-radius: 4px; }
.coluna-kanban-corpo::-webkit-scrollbar-thumb:hover { background: rgb(var(--st-primary-container) / 0.7); }
.kanban-scroll::-webkit-scrollbar { width: 4px; height: 6px; }
.kanban-scroll::-webkit-scrollbar-track { background: rgb(var(--st-surface-container-lowest) / 0.4); }
.kanban-scroll::-webkit-scrollbar-thumb { background: rgb(var(--st-outline-variant) / 0.6); border-radius: 4px; }
.kanban-scroll::-webkit-scrollbar-thumb:hover { background: rgb(var(--st-primary-container) / 0.4); }

/* arrastar (classes que o kit-kanban põe) */
.cartao-kanban--arrastando { opacity: 0.45; }
.coluna-kanban--alvo { outline: 2px dashed rgb(var(--st-primary-container) / 0.7); outline-offset: -4px; }
.coluna-kanban[data-medido="nao"] { border-style: dashed; }
.cartao-kanban .titulo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; }
.cartao-kanban [hidden] { display: none !important; }

/* Ações / Progresso: rodapé do cartão. O detalhe aberto ocupa a linha inteira. */
.rodape-cartao > details[open] { flex-basis: 100%; }
.rodape-cartao summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; }
.rodape-cartao summary::-webkit-details-marker { display: none; }
.acao-grupo { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.botao-acao { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.625rem; border-radius: 0.25rem;
  background: rgb(var(--st-primary-container) / 0.12); border: 1px solid rgb(var(--st-primary-container) / 0.4);
  color: rgb(var(--st-primary-container)); font: 500 11px/14px "JetBrains Mono", monospace; cursor: pointer; }
.botao-acao:hover { background: rgb(var(--st-primary-container) / 0.22); }
.botao-acao.botao-secundario { background: rgb(var(--st-surface-container-highest)); border-color: rgb(var(--st-outline-variant) / 0.6); color: rgb(var(--st-on-surface-variant)); }
.botao-acao:disabled { opacity: 0.5; cursor: wait; }
.campo-etiqueta, .campo-maquina-alvo, .campo-motivo-reprovar, .campo-tipo-producao, .campo-alvo-producao {
  flex: 1 1 8rem; min-width: 0; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font: 12px/16px Geist, system-ui, sans-serif;
  background: rgb(var(--st-surface-container-lowest)); border: 1px solid rgb(var(--st-outline-variant) / 0.6); color: rgb(var(--st-on-surface)); }
.status-acao { margin: 0.375rem 0 0; font: 11px/14px "JetBrains Mono", monospace; color: rgb(var(--st-on-surface-variant)); }
.status-acao:empty { display: none; }
.status-ok { color: rgb(var(--st-secondary)); }
.status-erro { color: rgb(var(--st-error)); }
.progresso-coluna, .progresso-veredito, .progresso-carregando { margin: 0.375rem 0 0; font: 12px/16px Geist, system-ui, sans-serif; color: rgb(var(--st-on-surface-variant)); }
.progresso-guia { white-space: pre-wrap; max-height: 12rem; overflow: auto; font: 11px/15px "JetBrains Mono", monospace; padding: 0.5rem;
  background: rgb(var(--st-surface-container-lowest)); border-radius: 0.25rem; margin: 0.375rem 0 0; color: rgb(var(--st-on-surface)); }

/* modal de Novo pedido (pedido-modal.css) — base que o estilo.css antigo dava e o Tailwind zera */
.modal-pedido { color: rgb(var(--st-on-surface)); font-family: Geist, system-ui, sans-serif; }
.modal-pedido label { display: block; margin: 0.75rem 0 0.375rem; font-size: 13px; color: rgb(var(--st-on-surface-variant)); }
.modal-pedido input[type="text"], .modal-pedido input[type="search"], .modal-pedido textarea, .modal-pedido select {
  width: 100%; padding: 0.625rem 0.75rem; border-radius: 0.375rem; background: rgb(var(--st-surface-container-lowest));
  border: 1px solid rgb(var(--st-outline-variant) / 0.7); color: rgb(var(--st-on-surface)); font: 14px/20px Geist, system-ui, sans-serif; }
.modal-pedido textarea:focus, .modal-pedido input:focus { outline: none; border-color: rgb(var(--st-primary-container)); }
.modal-pedido #btn-organizar, .modal-pedido .acoes-rascunho button { display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1rem; padding: 0.5rem 1.25rem; border-radius: 0.5rem; font-weight: 600; cursor: pointer;
  background: linear-gradient(to right, rgb(var(--st-primary-container)), rgb(var(--st-surface-tint))); color: rgb(var(--st-background)); }
.modal-pedido #btn-organizar:disabled { opacity: 0.45; cursor: not-allowed; }
.modal-pedido .acoes-rascunho button.secundario { background: rgb(var(--st-surface-container-highest)); color: rgb(var(--st-on-surface)); }

/* Chips de etiqueta (card Logiccos/quadro#93) — cor/texto vêm do DADO (chip.cor/chip.corTexto,
   calculados no backend), por isso inline no elemento; aqui só forma e tipografia. */
.chip-tag { display: inline-flex; align-items: center; gap: 0.25rem; font: 600 10px/14px "JetBrains Mono", monospace; padding: 0.125rem 0.5rem; border-radius: 999px; }
.chip-tag-remover { background: none; border: none; cursor: pointer; font: inherit; color: inherit; padding: 0; line-height: 1; opacity: 0.8; }
.chip-tag-remover:hover { opacity: 1; }
.legenda-tags { margin: 0 0 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: rgb(var(--st-surface-container-lowest) / 0.6); border: 1px solid rgb(var(--st-outline-variant) / 0.3); }
.legenda-tags-lista { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0.5rem 0 0; padding: 0; }
.legenda-tags-lista li { display: flex; align-items: center; gap: 0.375rem; font: 12px/16px Geist, system-ui, sans-serif; color: rgb(var(--st-on-surface-variant)); }

/* [hidden] vence as utilidades de display do Tailwind (flex, inline-flex...) */
[hidden] { display: none !important; }