/* ============================================================
   css/telas/tecnica.css — CSS só da área Técnica.
   Regra da casa: todo seletor prefixado com .area-tecnica.
   Nenhum valor cru: cor, raio e folga saem de css/tokens.css, e
   a escala é a compacta v.A — não se engorda.
   ============================================================ */

/* os 8 cartões do Resumo da Técnica: 4 por linha na mesa, como no
   mock aprovado. O arranjo menor sai dos pontos de quebra de base.css. */
.area-tecnica .kpis{grid-template-columns:repeat(4,1fr)}
@media (max-width:1180px){.area-tecnica .kpis{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.area-tecnica .kpis{grid-template-columns:repeat(2,1fr)}}

/* o rótulo do cartão pode ter duas linhas (Fechamentos incompletos
   autorizados) sem o número dançar: a altura mínima iguala os oito */
.area-tecnica .kpi .cima{min-height:106px}
@media (max-width:860px){.area-tecnica .kpi .cima{min-height:0}}

/* ============================================================
   PEÇAS DE FORMULÁRIO QUE A BASE DESENHOU COMO TEXTO
   O mock tinha busca e filtro desenhados; aqui eles funcionam.
   Mesmo acabamento, mesma altura, nenhum número novo de escala.
   ============================================================ */
.area-tecnica .buscam{padding:0 9px;width:174px}
.area-tecnica .buscam input{border:0;background:none;font:inherit;font-size:11.5px;
  color:var(--txt-forte);width:100%;min-width:0;outline:none;padding:0;height:26px}
.area-tecnica .buscam input::placeholder{color:var(--txt-fraco)}
.area-tecnica .buscam:focus-within{border-color:var(--foco);box-shadow:0 0 0 1px var(--foco)}
.area-tecnica .buscam .i{order:2;margin-left:0}

/* botão desligado: a razão fica escrita ao lado, nunca só o cinza */
.area-tecnica .bt[disabled]{opacity:.45;cursor:default}

/* título de coluna que ordena */
.area-tecnica th .ordb{display:inline-flex;align-items:center;gap:5px;font:inherit;
  color:inherit;cursor:pointer;padding:0;text-transform:inherit;letter-spacing:inherit}
.area-tecnica th .ordb .i{width:12px;height:12px;color:var(--txt-fraco);opacity:0}
.area-tecnica th .ordb.on{color:var(--txt-forte)}
.area-tecnica th .ordb.on .i{opacity:1;color:var(--txt-forte)}
.area-tecnica th .ordb:hover .i{opacity:.5}
.area-tecnica th .ordb .i.sobe{transform:rotate(180deg)}

/* a marca do item dentro de um rótulo clicável (escolher blocos) */
.area-tecnica .la-opc .la-cx-mk,.la-modal .la-cx-mk{width:18px;height:18px;margin-top:1px;
  flex:0 0 auto;accent-color:var(--acao)}

/* ============================================================
   A LINHA LARGA DA BANCADA — a peça da JORNADA v.A §4.2
   Mesmas colunas do mural, na escala da aplicação. É tabela, não
   bloco solto: o olho corre a coluna.
   ============================================================ */
.area-tecnica .tb-grupo{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin:16px 0 7px;padding-bottom:5px;border-bottom:1px solid var(--borda-sutil)}
.area-tecnica .tb-grupo:first-child{margin-top:2px}
.area-tecnica .tb-grupo b{font-size:12.5px;font-weight:600;color:var(--txt-forte)}
.area-tecnica .tb-grupo i{font-size:11px;color:var(--txt-fraco);flex:1 1 auto;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.area-tecnica .tb-grupo .etq{flex:0 0 auto}

.area-tecnica .tb-lista{display:flex;flex-direction:column;gap:7px}
.area-tecnica .tb-linha{display:grid;align-items:center;gap:12px;
  grid-template-columns:76px minmax(0,1.3fr) minmax(0,1.6fr) 68px 142px 254px;
  border:1px solid var(--borda-padrao);border-left:4px solid var(--borda-forte);
  border-radius:var(--r-item);background:var(--fundo-card);
  padding:9px 12px;cursor:pointer;min-width:0}
.area-tecnica .tb-linha:hover{border-color:var(--borda-controle)}
.area-tecnica .tb-linha.atencao{border-color:var(--est-atencao-tx);
  background:var(--est-atencao-bg)}
.area-tecnica .tb-linha.imped{border-color:var(--est-critico-tx);
  background:var(--est-critico-bg)}
.area-tecnica .tb-linha>div{min-width:0}
.area-tecnica .tb-linha b{display:block;font-size:12.5px;font-weight:600;color:var(--txt-forte);
  line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.area-tecnica .tb-linha i{display:block;font-size:11px;color:var(--txt-apoio);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.area-tecnica .tb-horas{text-align:right}
.area-tecnica .tb-horas b{font-size:17px;letter-spacing:-.03em}
.area-tecnica .tb-horas b em{font-size:11.5px;font-weight:500}
.area-tecnica .tb-ped i{color:var(--txt-apoio)}
.area-tecnica .tb-ped i+i{color:var(--txt-fraco)}
.area-tecnica .tb-etapa .tb-etapa-topo{display:flex;align-items:center;gap:7px;min-width:0}
.area-tecnica .tb-etapa .tb-etapa-topo b{flex:1 1 auto}
.area-tecnica .tb-linha .tb-motivo{margin-top:4px;white-space:normal;line-height:1.35;
  overflow:visible;text-overflow:clip}
.area-tecnica .tb-acoes{display:flex;align-items:center;gap:6px;justify-content:flex-end;
  flex-wrap:wrap}
.area-tecnica .tb-acoes .bt{height:26px;font-size:11.5px;padding:0 9px}
.area-tecnica .tb-escolhida{background:var(--fundo-legenda-ativa)}

/* a barra das 7 etapas da jornada */
.area-tecnica .tb-passos{display:flex;gap:2px;margin-top:5px}
.area-tecnica .tb-passos span{flex:1 1 0;height:4px;border-radius:2px;display:block;
  background:var(--anel-trilho)}
.area-tecnica .tb-passos span.feito{background:var(--cat-2)}
.area-tecnica .tb-passos span.agora{background:var(--acao)}
.area-tecnica .tb-linha.atencao .tb-passos span.agora{background:var(--est-atencao-tx)}
.area-tecnica .tb-linha.imped .tb-passos span.agora{background:var(--est-critico-tx)}
.area-tecnica .painel>.cab .tb-passos{width:92px;margin-top:0}

@media (max-width:1180px){
  .area-tecnica .tb-linha{grid-template-columns:66px minmax(0,1.3fr) minmax(0,1.5fr) 62px 128px;
    row-gap:8px}
  .area-tecnica .tb-acoes{grid-column:1 / -1;justify-content:flex-start}
}
@media (max-width:860px){
  .area-tecnica .tb-linha{grid-template-columns:1fr auto;row-gap:7px;padding:10px 12px}
  .area-tecnica .tb-etapa,.area-tecnica .tb-ped{grid-column:1 / -1}
  .area-tecnica .tb-horas{text-align:right}
  .area-tecnica .tb-acoes .bt{min-height:44px}
}

/* ============================================================
   PRÉVIA DA JANELA DESTACÁVEL
   Não é o mural: é uma miniatura do que a janela vai mostrar.
   O mural de verdade mora em /painel/, e é ele que a tela abre.
   ============================================================ */
.area-tecnica .tq-previa{border:1px solid var(--borda-forte);border-radius:var(--r-item);
  background:var(--fundo-cabecalho-tabela);padding:11px;display:flex;
  flex-direction:column;gap:9px}
.area-tecnica .tq-topo{display:flex;align-items:baseline;gap:8px}
.area-tecnica .tq-topo b{font-size:13.5px;font-weight:600;color:var(--txt-forte)}
.area-tecnica .tq-topo i{font-size:11px;color:var(--txt-apoio)}
.area-tecnica .tq-cartoes{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.area-tecnica .tq-cart{border:1px solid var(--borda-padrao);border-radius:var(--r-ctrl);
  background:var(--fundo-card);padding:7px 9px;display:flex;flex-direction:column;gap:2px}
.area-tecnica .tq-cart span{font-family:var(--fonte-mono);font-size:9.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--txt-apoio)}
.area-tecnica .tq-cart b{font-size:17px;font-weight:600;letter-spacing:-.03em;color:var(--txt-forte);
  line-height:1.1}
.area-tecnica .tq-linhas{display:flex;flex-direction:column;gap:5px}
.area-tecnica .tq-linha{display:flex;align-items:center;gap:9px;border:1px solid var(--borda-padrao);
  border-left:3px solid var(--borda-forte);border-radius:var(--r-ctrl);
  background:var(--fundo-card);padding:6px 9px;font-size:11.5px;min-width:0}
.area-tecnica .tq-linha b{font-family:var(--fonte-mono);font-size:11px;color:var(--txt-forte);
  flex:0 0 auto}
.area-tecnica .tq-linha span{color:var(--txt-apoio);flex:1 1 auto;min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.area-tecnica .tq-linha i{color:var(--txt-apoio);flex:0 0 auto}
.area-tecnica .tq-linha.atencao{border-color:var(--est-atencao-tx);background:var(--est-atencao-bg)}
.area-tecnica .tq-linha.imped{border-color:var(--est-critico-tx);background:var(--est-critico-bg)}
.area-tecnica .tq-pe{font-size:11px;color:var(--txt-fraco);line-height:1.4}
@media (max-width:860px){
  .area-tecnica .tq-cartoes{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   AVISO DE AÇÃO ESPECIAL — quem vê × quem age, lado a lado.
   Peça do mock aprovado (lote B), trazida para a área.
   Neutra de propósito: não é estado, não é ação, não é lugar.
   ============================================================ */
.area-tecnica .lb-especial{flex:0 0 auto;border:1px solid var(--borda-padrao);
  border-radius:var(--r-item);background:var(--fundo-card);margin-bottom:14px;
  display:flex;flex-wrap:wrap}
.area-tecnica .lb-especial-col{flex:1 1 300px;min-width:0;padding:11px 14px}
.area-tecnica .lb-especial-col+.lb-especial-col{border-left:1px solid var(--borda-sutil)}
.area-tecnica .lb-especial-rot{display:block;font-family:var(--fonte-mono);font-size:10.5px;
  letter-spacing:.02em;text-transform:uppercase;color:var(--txt-apoio);margin-bottom:4px}
.area-tecnica .lb-especial-col p{font-size:12.5px;color:var(--txt-padrao);line-height:1.45}
.area-tecnica .lb-especial-pe{flex:1 1 100%;border-top:1px solid var(--borda-sutil);
  background:var(--fundo-cabecalho-tabela);padding:9px 14px;font-size:11.5px;
  color:var(--txt-fraco);line-height:1.45;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.area-tecnica .lb-especial-pe .i{width:12px;height:12px;color:var(--txt-fraco);flex:0 0 auto}
.area-tecnica .lb-validar{border-style:dashed;border-color:var(--borda-forte)}
@media (max-width:860px){
  .area-tecnica .lb-especial-col+.lb-especial-col{border-left:0;
    border-top:1px solid var(--borda-sutil)}
}

/* controle de zoom da tela adotada, por linha */
.area-tecnica .lb-zoom{display:inline-flex;align-items:center;gap:0;
  border:1px solid var(--borda-controle);border-radius:7px;overflow:hidden;
  background:var(--fundo-card)}
.area-tecnica .lb-zoom button{display:grid;place-items:center;width:24px;height:24px;
  color:var(--txt-apoio);cursor:pointer}
.area-tecnica .lb-zoom button .i{width:12px;height:12px}
.area-tecnica .lb-zoom b{font-size:11.5px;font-weight:500;color:var(--txt-forte);padding:0 7px;
  border-left:1px solid var(--borda-sutil);border-right:1px solid var(--borda-sutil);
  line-height:24px;min-width:46px;text-align:center}
@media (max-width:860px){
  .area-tecnica .lb-zoom button{width:44px;height:44px}
  .area-tecnica .lb-zoom b{line-height:44px}
}

/* o painel empilhado se mede pelo conteúdo: não encolhe e não
   corta a tabela (a base só tinha o painel único que cresce) */
.area-tecnica .la-pilha>.painel{flex:0 0 auto}
.area-tecnica .la-pilha>.painel>.tabwrap{flex:0 0 auto;overflow:visible}

/* a prancha do documento não precisa de altura mínima de visor
   quando o painel já cresce */
.area-tecnica .la-visor{min-height:260px}

/* ============================================================
   CELULAR E TABLET — 860 px e abaixo
   Nenhum número de escala muda: só o arranjo, e o alvo de toque
   de 44 px do Estilos v.A §1.2.

   NOTA PARA QUEM CUIDA DO COMPARTILHADO: o bloco de celular do
   lote B em css/componentes.css (linhas ~478 a 489, com
   .la-it .la-dir, .la-duplo, .la-grid, .la-modal, .la-visor)
   está DENTRO de um comentário que nunca fechou — ele não chega
   ao navegador. As regras equivalentes estão repetidas aqui,
   prefixadas, para a área Técnica não depender do conserto.
   ============================================================ */
@media (max-width: 860px) {
  /* cabeçalho de painel: título em cima, filtros e busca embaixo.
     A altura cravada de 44 px vem de componentes.css, que carrega
     DEPOIS de base.css: a regra de celular da base nunca chega a
     valer. Repetida aqui, que carrega por último. */
  .area-tecnica .painel > .cab { flex-wrap: wrap; height: auto; min-height: 44px;
    padding: 8px 12px; row-gap: 6px; }
  .area-tecnica .painel > .cab .dir { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .area-tecnica .painel > .cab .tb-passos { width: 100%; }
  .area-tecnica .grupobt { flex-wrap: wrap; }
  .area-tecnica .buscam { width: 100%; }
  .area-tecnica .filtros { width: 100%; }

  /* painel duplo e grade de pares viram coluna única */
  .area-tecnica .la-duplo, .area-tecnica .la-duplo.esq { grid-template-columns: 1fr; }
  .area-tecnica .la-grid, .area-tecnica .la-grid.tres { grid-template-columns: 1fr; }
  .area-tecnica .la-fundo { padding-bottom: 16px; }
  .area-tecnica .la-visor { padding: 12px; min-height: 0; }
  .area-tecnica .la-pagina { padding: 16px 14px; }

  /* item de lista: as ações caem para a linha de baixo, inteiras */
  .area-tecnica .la-it { flex-wrap: wrap; }
  .area-tecnica .la-it .la-dir { width: 100%; justify-content: flex-start;
    padding-top: 6px; flex-wrap: wrap; }
  .area-tecnica .la-it .la-dir .bt { min-height: 44px; }
  .area-tecnica .la-opc { flex-wrap: wrap; }
  .area-tecnica .la-opc .bt { min-height: 44px; }

  /* a barra de ação deixa de flutuar e vira bloco, sem corte */
  /* a mesma inversão de ordem de carga vale aqui: componentes.css
     cravou .barraflutua{position:absolute}, e a regra de celular da
     base não alcança. Repetida, para a barra virar bloco de verdade. */
  .area-tecnica .barraflutua { position: static; transform: none; bottom: auto; left: auto;
    flex-direction: column; align-items: stretch; gap: 10px; min-width: 0;
    margin-top: 14px; }
  .area-tecnica .barraflutua .bf-sep { display: none; }
  .area-tecnica .barraflutua .bf-rot { margin-left: 0; }
  .area-tecnica .barraflutua .bf-txt,
  .area-tecnica .barraflutua .bf-rot,
  .area-tecnica .barraflutua .bf-link { white-space: normal; }
  .area-tecnica .barraflutua .bf-dir { margin-left: 0; flex-wrap: wrap; }
  .area-tecnica .barraflutua .bt { min-height: 44px; }

  /* texto longo quebra em vez de estourar a largura */
  .area-tecnica .cf, .area-tecnica .cl,
  .area-tecnica .pares .pr, .area-tecnica .pares .pv,
  .area-tecnica .la-campo, .area-tecnica .notap,
  .area-tecnica .legl { overflow-wrap: anywhere; }
  .area-tecnica .pares .par { flex-wrap: wrap; }
  .area-tecnica .la-val { white-space: normal; height: auto; min-height: 19px;
    padding: 3px 6px; line-height: 1.35; }
  .area-tecnica .etq { white-space: normal; height: auto; min-height: 19px;
    padding: 2px 6px; }

  /* alvo de toque de 44 px em tudo o que a área desenha */
  .area-tecnica .bt, .area-tecnica .gb { min-height: 44px; }
  .area-tecnica .acoesl .bt, .area-tecnica .tb-acoes .bt { height: auto; min-height: 44px; }
  .area-tecnica th .ordb { min-height: 44px; }
}