/* Kanban de demandas: página própria do app, com os mesmos tokens do styles.css.
   Colunas em faixa horizontal, cartões densos, detalhe em gaveta lateral. */
.pagina-demandas { display: grid; grid-template-rows: auto auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); grid-template-areas: "topo" "filtros" "principal"; height: 100dvh; overflow: hidden; }
.topo-demandas { grid-area: topo; gap: 12px; padding-top: calc(10px + env(safe-area-inset-top)); }
.filtros { grid-area: filtros; }
.quadro, .padroes { grid-area: principal; min-height: 0; }
.marca-link { text-decoration: none; color: var(--texto); }
.titulo-pagina { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.estado-extracao { flex: 1; margin: 0; color: var(--texto-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.estado-extracao.ativo { color: var(--acento); }
.topo-acoes { display: flex; gap: 6px; }
.chip.ativo { border-color: var(--texto); color: var(--texto); background: var(--bg-elev-2); }
.chip.destaque { border-color: var(--acento); color: var(--acento); }
.chip .n { margin-left: 5px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.chip.ativo .n { color: var(--texto-2); }

/* Filtros */
.filtros { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--linha); background: var(--bg-elev); }
.filtro-clientes { flex: 1 1 320px; }
.filtros-direita { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.seletor { padding: 6px 28px 6px 10px; background: var(--bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23a7a7a3' stroke-width='1.5'/></svg>") no-repeat right 10px center / 10px 6px; border: 1px solid var(--linha); border-radius: 999px; color: var(--texto-2); font-size: 12px; appearance: none; -webkit-appearance: none; }
.seletor:focus-visible { border-color: var(--texto-2); outline: none; }
.busca { width: 170px; padding: 6px 12px; background: var(--bg); border: 1px solid var(--linha); border-radius: 999px; font-size: 12px; outline: none; }
.busca:focus { border-color: var(--texto-2); }
.alternar { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); font-size: 12px; cursor: pointer; }
.alternar input { accent-color: var(--acento); }

/* Quadro */
.quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 12px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); overflow: auto; scroll-snap-type: x proximity; }
.coluna { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg-elev); border: 1px solid var(--linha); border-radius: var(--raio); scroll-snap-align: start; transition: border-color var(--dur); }
.coluna.recebendo { border-color: var(--acento); }
.coluna > header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; }
.coluna h2 { margin: 0; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto-2); }
.coluna[data-status="nova"] h2 { color: var(--alerta); }
.coluna[data-status="fazendo"] h2 { color: var(--acento); }
.coluna.concluidas { opacity: 0.85; }
.cartoes { list-style: none; margin: 0; padding: 4px 8px 12px; display: grid; align-content: start; gap: 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--linha) transparent; min-height: 60px; }
.cartoes:empty::after { content: "Nada aqui."; display: block; padding: 10px 6px; color: var(--texto-3); font-size: 12.5px; }

.cartao { position: relative; display: grid; gap: 6px; padding: 10px 12px 10px 16px; background: var(--bg); border: 1px solid var(--linha); border-radius: 10px; cursor: grab; transition: border-color var(--dur), transform var(--dur) var(--ease), opacity var(--dur); animation: entrar var(--dur) var(--ease); }
.cartao::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--texto-3); }
.cartao.P1::before { background: var(--perigo); }
.cartao.P2::before { background: var(--alerta); }
.cartao.P3::before { background: var(--texto-3); }
.cartao:hover, .cartao:focus-visible { border-color: var(--texto-2); transform: translateY(-1px); outline: none; }
.cartao.arrastando { opacity: 0.4; }
.cartao-titulo { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.cartao-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.etiqueta { padding: 2px 7px; border-radius: 999px; font-size: 10.5px; letter-spacing: 0.02em; background: var(--bg-elev-2); color: var(--texto-2); white-space: nowrap; }
.etiqueta.cliente { background: rgba(96,165,250,0.12); color: #93c5fd; }
.etiqueta.tipo { background: rgba(167,139,250,0.12); color: #c4b5fd; }
.etiqueta.responder { background: rgba(251,191,36,0.14); color: var(--alerta); font-weight: 700; }
.etiqueta.sinal { background: rgba(74,222,128,0.12); color: var(--acento); }
.etiqueta.agente { background: rgba(74,222,128,0.10); color: var(--acento); font-weight: 600; }
.etiqueta.interno { background: rgba(244,244,242,0.08); color: var(--texto-3); }
.cartao-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--texto-3); font-size: 11.5px; }
.cartao-meta .quem { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-meta .quando { flex: none; font-variant-numeric: tabular-nums; }
.cartao-acoes { display: flex; gap: 4px; margin-top: 2px; }
.cartao-acoes button { padding: 3px 8px; background: transparent; border: 1px solid var(--linha); border-radius: 6px; color: var(--texto-3); font-size: 11px; transition: border-color var(--dur), color var(--dur); }
.cartao-acoes button:hover, .cartao-acoes button:focus-visible { border-color: var(--texto-2); color: var(--texto); outline: none; }
.cartao-acoes .ok:hover { border-color: var(--acento); color: var(--acento); }

/* Detalhe (gaveta) */
.detalhe { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); display: grid; grid-template-rows: auto 1fr auto; background: var(--bg-elev); border-left: 1px solid var(--linha); box-shadow: -20px 0 60px rgba(0,0,0,0.5); z-index: 20; animation: deslizar var(--dur) var(--ease); }
@keyframes deslizar { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.detalhe-topo { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--linha); }
.detalhe-id { color: var(--texto-3); font-size: 11px; }
.detalhe-corpo { overflow-y: auto; padding: 14px 18px 20px; }
.detalhe-corpo h3 { margin: 18px 0 6px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-3); }
.detalhe-titulo { width: 100%; padding: 8px 10px; background: transparent; border: 1px solid transparent; border-radius: var(--raio-s); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; outline: none; }
.detalhe-titulo:hover, .detalhe-titulo:focus { border-color: var(--linha); background: var(--bg); }
.detalhe-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.detalhe-campos label, .dialogo label { display: grid; gap: 3px; color: var(--texto-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.detalhe-campos select, .detalhe-campos input, .dialogo select, .dialogo input, .dialogo textarea, .detalhe-corpo textarea { padding: 7px 10px; background: var(--bg); border: 1px solid var(--linha); border-radius: var(--raio-s); font-size: 13px; color: var(--texto); text-transform: none; letter-spacing: 0; outline: none; }
.detalhe-corpo textarea, .dialogo textarea { width: 100%; resize: vertical; line-height: 1.5; }
.detalhe-corpo select:focus, .detalhe-corpo input:focus, .detalhe-corpo textarea:focus { border-color: var(--texto-2); }
.detalhe-meta { margin: 10px 0 0; color: var(--texto-2); font-size: 12.5px; line-height: 1.5; }
.detalhe-sinal { margin: 8px 0 0; padding: 8px 10px; border-left: 2px solid var(--acento); background: rgba(74,222,128,0.06); border-radius: 0 var(--raio-s) var(--raio-s) 0; color: var(--texto-2); font-size: 12.5px; }
.bloco-resposta { margin-top: 6px; padding: 12px; border: 1px solid rgba(251,191,36,0.35); border-radius: var(--raio); background: rgba(251,191,36,0.04); }
.bloco-resposta .bloco-cabecalho { margin-bottom: 4px; }
.bloco-resposta h3 { margin: 0; }
.bloco-resposta .alternar { margin-top: 8px; }
.contexto, .eventos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.contexto li { padding: 6px 10px; border-radius: var(--raio-s); color: var(--texto-2); font-size: 12.5px; line-height: 1.45; }
.contexto li.pedido { background: rgba(251,191,36,0.1); border-left: 2px solid var(--alerta); color: var(--texto); }
.contexto li.bruno { color: var(--texto-3); }
.contexto .quem { color: var(--texto); font-weight: 600; }
.contexto .hora { margin-right: 6px; color: var(--texto-3); font-family: var(--mono); font-size: 11px; }
.eventos li { display: flex; gap: 10px; color: var(--texto-3); font-size: 12px; }
.eventos .hora { flex: none; font-family: var(--mono); font-size: 11px; }
.detalhe-acoes { display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); }
.detalhe-acoes button, .dialogo-acoes button { padding: 9px 14px; border-radius: var(--raio-s); font-weight: 600; font-size: 13px; }
.botao-principal { margin-left: auto; background: var(--texto); color: var(--bg); border: 0; }
.botao-ok { background: transparent; color: var(--acento); border: 1px solid rgba(74,222,128,0.5); }
.botao-perigo { background: transparent; color: var(--perigo); border: 1px solid var(--linha); }
.fundo-painel { z-index: 19; }

/* Padrões */
.padroes { overflow-y: auto; padding: 18px 20px 30px; }
.padroes > * { max-width: 1100px; margin-inline: auto; }
.padroes-cabecalho { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.padroes-cabecalho .eyebrow { margin: 0; }
.padroes-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.bloco-largo { grid-column: 1 / -1; }
.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.barras li { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.barras .rotulo { color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barras .rotulo small { color: var(--texto-3); }
.barras .trilho { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.barras .barra { height: 100%; background: linear-gradient(90deg, #a78bfa, #60a5fa); border-radius: 4px; transform-origin: left; animation: crescer 500ms var(--ease); }
.barras .barra.abertas { background: linear-gradient(90deg, var(--alerta), #f97316); }
@keyframes crescer { from { transform: scaleX(0); } }
.barras .valor { color: var(--texto); font-variant-numeric: tabular-nums; font-size: 12px; }
.barras .valor small { color: var(--texto-3); }
.rolagem { overflow-x: auto; }
.matriz { border-collapse: collapse; width: 100%; font-size: 12px; }
.matriz th, .matriz td { padding: 6px 8px; border-bottom: 1px solid var(--linha); text-align: right; white-space: nowrap; }
.matriz th:first-child, .matriz td:first-child { text-align: left; color: var(--texto-2); }
.matriz th { color: var(--texto-3); font-weight: 600; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.matriz td.calor { color: var(--texto); }
.padroes-nota { margin-top: 16px; color: var(--texto-3); font-size: 12.5px; }

/* Diálogo de nova demanda */
.dialogo { width: min(560px, 92vw); padding: 0; background: var(--bg-elev); border: 1px solid var(--linha); border-radius: var(--raio); color: var(--texto); }
.dialogo::backdrop { background: rgba(0,0,0,0.6); }
.dialogo form { display: grid; gap: 10px; padding: 20px; }
.dialogo h2 { margin: 0 0 4px; font-size: 18px; letter-spacing: -0.01em; }
.dialogo-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; padding: 10px 16px; background: var(--bg-elev-2); border: 1px solid var(--linha); border-radius: 999px; font-size: 13px; z-index: 30; animation: entrar var(--dur) var(--ease); }
.toast.erro { border-color: var(--perigo); color: var(--perigo); }
.toast.ok { border-color: var(--acento); color: var(--acento); }

@media (max-width: 900px) {
  .pagina-demandas { grid-template-rows: auto auto 1fr; }
  .topo-demandas { flex-wrap: wrap; }
  .estado-extracao { order: 5; flex-basis: 100%; }
  .filtros { padding: 8px 12px; }
  .busca { width: 100%; }
  .quadro { grid-auto-columns: 86vw; gap: 10px; padding: 10px 12px; scroll-snap-type: x mandatory; }
  .detalhe { top: 10dvh; width: 100vw; border-left: 0; border-top: 1px solid var(--linha); border-radius: var(--raio) var(--raio) 0 0; }
  .cartao { cursor: default; }
}

/* Quem resolve (agente do OS) */
.bloco-agente { margin: 10px 0 6px; padding: 12px; border: 1px solid rgba(74,222,128,0.35); border-radius: var(--raio); background: rgba(74,222,128,0.04); }
.bloco-agente h3 { margin: 0 0 4px; }
.bloco-agente-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bloco-agente-acoes select { flex: 1; min-width: 160px; }