/* Quadro do planejamento — projetado numa TV pelo espelhamento do celular em
   landscape. Nenhuma classe daqui e' lida por app.js: esta pagina nao carrega o
   app.js. As classes q-* sao NOVAS de proposito — copiam a aparencia do
   .tarefa-card sem reusar o nome, que o app.js do mecanico rele por classe. */

/* Escala: o zoom proprio do painel. Ajustada por A-/A+ e persistida em
   localStorage. Mais previsivel que o pinch-zoom do browser, que desalinha o
   cabecalho fixo da coluna. */
:root { --escala: 1; }

.painel-corpo {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;          /* quem rola sao as colunas, nao a pagina */
}

/* ── Barra ────────────────────────────────────────────────────────────────── */

.painel-barra {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

/* Celular deitado tem ~390px de altura util, e a barra do navegador ja come
   parte. Cada pixel da barra do painel sai da area dos cartoes. */
@media (max-height: 460px) {
  .painel-barra { padding: 4px 12px; gap: 8px; }
  .painel-barra .marca, .painel-titulo { display: none; }
  .trilho { padding: 8px 12px 12px; }

  /* O modal e' onde a falta de altura mais doi: e' ele que precisa caber INTEIRO,
     com titulo e botao. Cada pixel economizado aqui vira nome visivel na lista
     sem rolar — sao ~60px, de tres para cinco nomes. */
  .modal-overlay { padding: 12px; }
  .modal-caixa   { padding: 16px; max-height: calc(100dvh - 24px); }
  .modal-titulo  { font-size: 17px; margin-bottom: 4px; }
  .modal-texto   { margin-bottom: 10px; }
  .lista-pessoas { margin: 10px 0 4px; }
}

.painel-barra .marca { font-size: 17px; }
.painel-titulo { font-weight: 600; font-size: var(--t-base); }

.painel-barra-dir {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.painel-status { font-size: var(--t-xs); color: var(--ink-2); white-space: nowrap; }
.painel-status.erro { color: var(--bad-ink); font-weight: 500; }

/* Sem mexer em width/height: o campo.css ja poe .btn-icone em 44px, e encolher
   aqui desfaria a ergonomia de alvo que ele existe para garantir. */
.zoom { display: flex; gap: 4px; }
.zoom .btn-icone { font-weight: 600; }

/* Mostrar a coluna do PCM. Sem rotulo escrito (pedido): a barra e' a fileira
   mais disputada da tela. Quem carrega os 44px de alvo e' o LABEL — a caixinha
   do sistema tem ~13px e reprovaria na auditoria de alvo. */
.painel-flag {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.painel-flag input {
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--brand);
}

/* Esconder a barra inteira devolve os ~61px que ela come — na TV da reuniao isso
   e' uma linha de cartao. Alternada pelo clique no cabecalho de qualquer coluna
   (painel.js). Comeca sempre visivel: a barra tem o Voltar e o Atualizar, e uma
   tela que abre sem eles nao se explica. */
body.sem-barra .painel-barra { display: none; }

/* ── Trilho de colunas ────────────────────────────────────────────────────── */

.trilho {
  flex: 1 1 auto;
  display: flex;
  gap: calc(12px * var(--escala));
  padding: calc(12px * var(--escala)) 16px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  align-items: stretch;
}

/* Ate 6 mecanicos (o teto da operacao hoje) as colunas se dividem e cabem todas
   na tela — numa TV, rolar horizontalmente durante a reuniao e' pior que
   coluna estreita. Acima disso, ou com a escala aumentada, o min-width devolve
   a rolagem. Quem poe a classe e' o painel.js, que sabe a contagem. */
.trilho.cabe .coluna {
  flex: 1 1 0;
  min-width: calc(196px * var(--escala));
}

.coluna {
  flex: 0 0 calc(268px * var(--escala));
  scroll-snap-align: start;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;                       /* deixa o corpo rolar dentro do flex */
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}

.coluna-cab {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(10px * var(--escala)) calc(12px * var(--escala));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  cursor: pointer;   /* alterna a barra de cima — ver `body.sem-barra` */
}

.coluna-nome {
  font-weight: 600;
  font-size: calc(var(--t-base) * var(--escala));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coluna-conta {
  margin-left: auto;
  flex-shrink: 0;
  font-size: calc(var(--t-xs) * var(--escala));
  color: var(--ink-2);
  background: var(--hover);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}

.coluna-corpo {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: calc(10px * var(--escala));
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--escala));
}

/* ── Cartao ───────────────────────────────────────────────────────────────── */

.q-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  padding: calc(10px * var(--escala)) calc(12px * var(--escala));
}

.q-rat {
  font-weight: 700;
  font-size: calc(var(--t-xs) * var(--escala));
  color: var(--brand-ink);          /* ambar puro da 1,9:1 — nunca como texto */
  letter-spacing: .02em;
}

.q-nome {
  font-weight: 500;
  font-size: calc(var(--t-sm) * var(--escala));
  line-height: 1.35;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.q-info {
  font-size: calc(var(--t-xs) * var(--escala));
  color: var(--ink-2);
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.q-marcas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.q-marcas .pill { font-size: calc(var(--t-2xs) * var(--escala)); }

/* O realce de "nova" (borda ambar + pill) saiu em 2026-08-08: sem ordem salva,
   TODA tarefa era nova e a marca aparecia em 100% dos cartoes. Marcacao sem
   excecao nao marca nada — so cansava a vista na TV.
   Se voltar (agora que ha ordenacao manual, "nova" volta a significar algo),
   usar BORDA e nunca fundo: tingir o cartao com --brand-15 derrubava o .q-rat
   de 5,02:1 para 4,37:1, ambar escuro sobre ambar claro. Medido pela auditoria. */

.coluna-vazia {
  font-size: calc(var(--t-xs) * var(--escala));
  color: var(--ink-3);
  text-align: center;
  padding: calc(20px * var(--escala)) 8px;
}

/* ── Estados de tela cheia ────────────────────────────────────────────────── */

.tela-cheia {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}

.tela-cheia .mensagem { display: block; margin-top: 0; }

/* Espelho do #loadingTarefas da tela inicial (style.css): roda + texto. */
.aviso-carregando { color: var(--ink-2); font-size: var(--t-sm); }

/* Retrato: espremer 6 colunas num celular em pe nao gera leitura, gera ruido.
   Vale so para toque — no desktop estreito o trilho rola normalmente.
   O aviso mora DENTRO do #telaQuadro (ver o HTML): fora dele aparecia tambem na
   tela de login e, com os 100dvh, jogava o botao do Google para fora da dobra. */
.girar { display: none; }

@media (orientation: portrait) and (pointer: coarse) {
  .trilho, .painel-barra { display: none; }
  .girar {
    /* `1 1 auto` porque agora ele e' item de flex-column: ocupa o que sobrou da
       .painel-corpo, que ja e' a tela inteira. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    color: var(--ink-2);
    font-size: var(--t-base);
  }
  .girar svg { width: 46px; height: 46px; color: var(--brand-ink); }
}

/* ── Foco / tela cheia ────────────────────────────────────────────────────── */
/* Numa tela de celular deitado sobram ~390px de altura, e a barra do navegador
   ja come boa parte. A barra do painel some, e volta pelo botao do canto. */

.tv .painel-barra,
.foco .painel-barra { display: none; }

.tv .trilho,
.foco .trilho { padding-top: 12px; }

.sair-foco {
  display: none;
  position: fixed;
  top: 6px;
  right: 6px;
  z-index: 60;
  /* 44px e' o piso de alvo do projeto (campo.css). Ele encolheria bem no canto,
     mas quem sai do foco esta de luva e com o celular deitado — o lugar errado
     para um alvo pequeno. O icone e' que fica discreto, nao a area de toque. */
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-mini);
  background: rgba(255,255,255,.85);
  color: var(--ink-2);
  cursor: pointer;
  /* Sombra em vez de borda: o botao flutua sobre cartao branco e sobre o fundo
     cinza, e precisa se destacar dos dois. */
  box-shadow: var(--sh-card);
}
.sair-foco svg { width: 19px; height: 19px; }
.foco .sair-foco { display: flex; }

/* Em ?tv=1 nao ha quem toque na tela: o botao seria so ruido na projecao. */
.tv .sair-foco { display: none; }

/* Instalado pela Tela de Inicio ja nasce em tela cheia — esconder a barra ali
   tiraria os controles sem ganhar altura nenhuma. */
@media (display-mode: standalone) {
  #btnFoco { display: none; }
}

/* ── Arrastar ─────────────────────────────────────────────────────────────── */

.q-card { cursor: grab; touch-action: manipulation; }
.q-card:active { cursor: grabbing; }

/* Fantasma: onde o cartao vai cair. */
.q-fantasma {
  opacity: .35;
  background: var(--brand-15);
  border-style: dashed;
}

/* O que segue o dedo. */
.q-arrastando {
  box-shadow: var(--sh-pop);
  transform: rotate(1.5deg);
}

/* Coluna que pode receber o cartao — feedback de alvo enquanto arrasta. */
.arrastando .coluna { transition: background var(--dur) var(--ease); }
.arrastando .coluna-corpo { min-height: calc(60px * var(--escala)); }

/* Somente leitura (mecanico nunca chega aqui, mas o quadro tambem abre no
   desktop de quem so olha): sem cursor de arrasto para nao prometer o que nao
   funciona. */
.so-leitura .q-card { cursor: default; }

/* ── Coluna PCM ───────────────────────────────────────────────────────────── */
/* Nao e' a carga de uma pessoa: e' a fila do que falta distribuir. O cabecalho
   ambar separa isso das colunas de mecanico a distancia de uma TV. */

/* O fundo ambar ja separa esta coluna das outras a distancia de uma TV. O texto
   fica GRAFITE de proposito: `--brand-ink` sobre `--brand-15` da 4,37:1 e
   reprova em AA — ambar escuro sobre ambar claro. Foi a mesma medida que tirou
   o realce de "nova" do cartao. Regra: nunca texto de marca sobre fundo de
   marca. */
.coluna.pcm .coluna-cab { background: var(--brand-15); border-bottom-color: var(--brand-40); }

/* ── Seletor de responsavel ───────────────────────────────────────────────── */

/* A lista e' o unico pedaco do modal que pode ceder altura — por isso ela rola e
   o resto nao. Era `max-height: 42vh`, que num celular deitado (390px) dava 164px
   de lista e ainda assim estourava a tela somado a titulo, texto e botao: o teto
   precisa sair da CAIXA, nao da lista. */
.lista-pessoas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0 4px;
  flex: 1 1 auto;
  min-height: 0;              /* sem isto o item flex se recusa a encolher */
  overflow-y: auto;
}

.pessoa { flex: none; }       /* linha de 44px nao vira linha de 20 quando aperta */

.pessoa {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 44px e' o piso de alvo do projeto (campo.css) — e aqui cada linha e' uma
     escrita no ClickUp, entao errar de alvo custa caro. */
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  background: var(--surface);
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  width: 100%;
}

.pessoa:hover:not(:disabled) { background: var(--hover); border-color: var(--brand-50); }
.pessoa:disabled { color: var(--ink-3); cursor: not-allowed; background: var(--surface-2); }

/* Devolver para a fila de distribuicao e' outra coisa que atribuir a alguem —
   fica separada, no fim, e marcada. */
.pessoa.pessoa-pcm { border-color: var(--brand-40); background: var(--brand-15); }
.pessoa.pessoa-pcm:hover { background: var(--brand-20); }

.pessoa-marca { margin-left: auto; font-size: var(--t-xs); font-weight: 500; color: var(--ink-2); }