/* "Aderência" — a tela da reunião de cobrança da manhã.
   ─────────────────────────────────────────────────────────────────────────────
   Nasceu como /resolvido/, vizinha de uma /aderencia/ que media o PLANO (o que
   muda por chamado corretivo, e não é responsabilidade do mecânico). As duas
   rodaram juntas até uma vencer: venceu esta, que mede o que o mecânico
   controla — dar um sinal no dia, preenchendo ou devolvendo. Em 16/08 a outra
   foi apagada e esta herdou o nome e a URL. Ver DESIGN.md.

   Classes com prefixo `res-`: são o rastro do nome antigo e ficam. Renomear
   para `ad-` seriam ~40 nomes entre CSS, JS e fixture, sem ganho nenhum — e um
   esquecido quebra a tela calado. Nenhuma delas é lida pelo app.js.
   As poucas compartilhadas (.painel-barra, .sair-foco, .tela-cheia) estão
   copiadas aqui de propósito — são 40 linhas, contra carregar um CSS inteiro de
   outra tela. */

.res-corpo {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Barra (espelho do .painel-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);
}

.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; }

/* 44px e' o piso de alvo do projeto (campo.css) — quem troca o periodo esta de
   luva, com o celular deitado. A auditoria medida reprova abaixo disso. */
/* As duas datas do "Personalizado". 44px pelo mesmo motivo do seletor. */
.res-datas { display: flex; gap: 6px; }
.res-data {
  height: 44px;
  padding: 0 8px;
  border: 1px solid var(--line-forte);
  border-radius: var(--r-mini);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-sm);
}

.res-periodo {
  height: 44px;
  padding: 0 8px;
  border: 1px solid var(--line-forte);
  border-radius: var(--r-mini);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-sm);
}

/* ── Trilho ───────────────────────────────────────────────────────────────── */

.res-trilho {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 14px;
  overflow-y: auto;
}


.res-bloco {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 12px 14px;
}

.res-bloco-alto { flex: 1 1 auto; min-height: 190px; }

.res-cab {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 8px;
}

.res-titulo { font-size: var(--t-base); font-weight: 600; letter-spacing: -.01em; }
.res-sub    { font-size: var(--t-xs); color: var(--ink-3); }

/* O aviso de dia parcial anda junto do titulo, nao dentro do grafico: la em
   cima ele disputava o canto direito com o "—" do proprio dia. */
.res-hoje { color: var(--brand-ink); font-weight: 500; }

.res-legenda { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-left: auto; }

:root {
  /* Cinza solido para a barra do total — o --faint do tema e' so decorativo
     (linha, glifo), claro demais para area preenchida numa TV a tres metros. */
  --cinza: rgba(0,0,0,.30);
}

.res-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--t-xs);
  color: var(--ink-2);
  white-space: nowrap;
}

.res-cor { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* As cores das tres barras. Verde e azul sao os dois jeitos CERTOS de encerrar o
   dia — e' de proposito que devolver seja verde-irmao e nao vermelho: punir a
   devolucao na TV ensina o time a segurar a tarefa calado, que e' o oposto do
   que a reuniao quer. O vermelho fica so para "sem dado". */
/* Cinza para o total: ele e' o PLANO, o pano de fundo contra o qual as tres
   cores se leem. Cor forte ali competiria com os desfechos. */
.res-cor-prog      { background: var(--cinza); }
.res-cor-preencheu { background: var(--ok); }
.res-cor-devolveu  { background: var(--info); }
.res-cor-semdado   { background: var(--bad); }

.res-grafico { flex: 1 1 auto; min-height: 0; }
.res-grafico svg { display: block; width: 100%; }

/* ── A faixa do "sem preenchimento" ───────────────────────────────────────── */
/* Altura FIXA e pequena: ela é o complemento, e o gráfico de cima é que tem de
   respirar. Antes os dois blocos eram `flex: 1 1 auto` e dividiam a altura em
   partes iguais — na visão Semana o gráfico virava tracinhos com o eixo Y
   amontoado, enquanto aqui sobrava espaço. */
.res-bloco-faixa { flex: 0 0 auto; }
.res-faixa { flex: 0 0 auto; height: 46px; }
.res-faixa svg { display: block; width: 100%; }

.res-faixa-num { font-weight: 700; fill: var(--ok-ink); }   /* zero é bom: verde */
.res-faixa-num.tem     { fill: var(--bad-ink); }
/* Hoje ainda dá tempo de resolver: âmbar, não vermelho. */
.res-faixa-num.parcial { fill: var(--brand-ink); }




/* ── Parado agora ─────────────────────────────────────────────────────────── */





/* ── SVG ──────────────────────────────────────────────────────────────────── */
/* Cor e peso moram aqui; TAMANHO e posição vêm do JS, que calcula a geometria em
   pixel medido. Media query mexendo em font-size por baixo desalinharia o que o
   JS já mediu. Ver `metrica()` no aderencia.js. */

.res-eixo   { stroke: var(--line); stroke-width: 1; }
.res-grade  { stroke: var(--line-soft); stroke-width: 1; }
.res-rotulo { fill: var(--ink-3); }
.res-pct    { font-weight: 700; fill: var(--ink); }
.res-dia    { fill: var(--ink-2); }
.res-dow    { fill: var(--ink-3); }
.res-dia-hoje { font-weight: 600; fill: var(--brand-ink); }

.res-barra-prog      { fill: var(--cinza); }
.res-barra-preencheu { fill: var(--ok); }
.res-barra-devolveu  { fill: var(--info); }
.res-barra-semdado   { fill: var(--bad); }
/* Hoje o que falta não é falta de dado ainda — é o dia acontecendo. */
.res-barra-falta     { fill: var(--brand); }

.res-valor { font-weight: 600; fill: var(--ink-2); }

.res-vazio {
  padding: 24px;
  text-align: center;
  color: var(--ink-3);
  font-size: var(--t-sm);
}

/* ── Foco / TV (espelho do painel.css) ────────────────────────────────────── */

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

/* Esconder a barra devolve os ~61px que ela come — numa TV isso e' uma faixa
   inteira de grafico. Alternada pelo clique em qualquer titulo de bloco
   (aderencia.js), como o clique no cabecalho de coluna faz no /painel/. Comeca
   sempre visivel e nao persiste: a barra tem o Voltar, o periodo e o Atualizar,
   e uma tela que abre sem eles nao se explica. */
body.sem-barra .painel-barra { display: none; }

/* O alvo do toque. `user-select` porque o clique repetido no titulo selecionava
   o texto e o celular abria a alca de selecao no meio da reuniao. */
.res-titulo { cursor: pointer; user-select: none; -webkit-user-select: none; }

.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); }

.sair-foco {
  display: none;
  position: fixed;
  top: 6px;
  right: 6px;
  z-index: 60;
  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;
  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; }

@media (display-mode: standalone) {
  #btnFoco { display: none; }
}

.tv .res-titulo { font-size: var(--t-lg); }
.tv .res-faixa { height: 62px; }
.tv .res-chip, .tv .res-sub, .tv .res-num-rotulo { font-size: var(--t-base); }
/* O texto DENTRO do SVG cresce pelo JS (`metrica()`), nao aqui. */

/* ── Retrato no celular (espelho do painel.css) ───────────────────────────── */
/* Mesmo bloqueio do quadro, para as duas telas se navegarem igual. Vale so para
   toque — no desktop estreito a tela rola normalmente (`pointer: coarse`).
   Quem some sao os IRMAOS do aviso (barra e trilho), nao o .res-corpo: o .girar
   mora dentro dele, e esconder o container levaria o aviso junto.
   `body.ver-assim` e' a saida que so esta tela tem — ver o HTML. */
.girar { display: none; }

@media (orientation: portrait) and (pointer: coarse) {
  body:not(.ver-assim) .painel-barra,
  body:not(.ver-assim) .res-trilho { display: none; }

  body:not(.ver-assim) .girar {
    /* `1 1 auto` porque e' item de flex-column: ocupa o que sobrou da .res-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);
  }
  body:not(.ver-assim) .girar svg { width: 46px; height: 46px; color: var(--brand-ink); }

  /* O botao do canto flutua fixo: sem isto ele fica sozinho sobre o aviso. */
  body:not(.ver-assim) .sair-foco { display: none; }
}

/* Celular deitado tem ~390px de altura util. Cada pixel da barra sai do
   grafico, que e' a unica coisa que se le de tres metros. */
@media (max-height: 460px) {
  .painel-barra { padding: 4px 12px; gap: 8px; }
  .painel-barra .marca, .painel-titulo { display: none; }

  .res-trilho { gap: 6px; padding: 8px 10px 10px; }
  .res-bloco { padding: 8px 10px; border-radius: var(--r-ctrl); }
  /* O grafico e' o que tem de respirar: a faixa e o rodape encolhem por ele. */
  .res-bloco-alto { min-height: 210px; }
  .res-faixa { height: 34px; }
  .res-cab { margin-bottom: 4px; }
}

/* ── Detalhamento ─────────────────────────────────────────────────────────
   Abre ao clicar numa barra. E' conferencia, nao indicador: comeca escondido,
   fecha a cada redesenho, e por isso nao disputa espaco com o grafico. */

/* O alvo do clique NAO e' a barra desenhada — numa barra de 1px nao ha o que
   acertar. Este retangulo invisivel cobre a coluna inteira.
   `fill` transparente e nao `none`: com `none` o SVG nao recebe o evento. */
.res-alvo { fill: rgba(0, 0, 0, 0); cursor: pointer; }
.res-alvo:hover { fill: rgba(0, 0, 0, .05); }
.res-faixa-num { cursor: pointer; }

/* O botao de fechar vai para a direita do cabecalho; `btn-mini` ja carrega os
   44px de alvo do campo.css. */
.res-fechar { margin-left: auto; }

.res-detalhe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.res-det-grupo {
  flex: 1 1 220px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  padding: 8px 10px;
}

.res-det-mec {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line-soft);
}

/* O total do dia vai para a DIREITA, alinhado com a coluna de tempos que ele
   soma. Colado na contagem ele lia-se como um segundo numero de atividades. */
.res-det-total { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Duas linhas: identificacao em cima, o chamado embaixo. */
.res-det-linha {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 0;
  font-size: var(--t-sm);
}

.res-det-topo { display: flex; align-items: center; gap: 8px; }

.res-det-rat { font-weight: 600; color: var(--ink); white-space: nowrap; }

.res-det-placa { color: var(--ink-2); white-space: nowrap; }

/* O chamado, sem a placa e sem o numero (a linha de cima ja os mostra). UMA
   linha: a lista e' varredura, e um chamado de tres linhas empurraria o proximo
   mecanico para fora da tela.

   `--ink-3` e' o PISO de contraste do tema (4,8:1) e existe justamente para
   texto secundario — descer daqui reprovaria em AA, que e' o risco de toda
   "letrinha cinza". */
.res-det-desc {
  font-size: var(--t-xs);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Empurrado para a direita para os tempos ficarem numa coluna so — a leitura e'
   comparativa ("qual demorou mais"), e coluna desalinhada nao se compara. */
.res-det-tempo { margin-left: auto; white-space: nowrap; }

/* A linha inteira e' o alvo do clique (abre o que foi preenchido). 44px de
   altura minima: o campo.css cobre botao, nao linha de lista. */
.res-det-linha[role="button"] { cursor: pointer; border-radius: var(--r-mini); margin: 0 -6px; padding-left: 6px; padding-right: 6px; }
.res-det-linha[role="button"]:hover { background: var(--cinza); }
.res-det-linha[role="button"]:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Tags de negocio (prev, agua) — pequenas e discretas, entre a placa e o tempo.
   Tinta `--ink-2`, que passa em AA; ambar puro daria 1,9:1. */
.res-det-tag {
  font-size: var(--t-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--brand-ink);
  background: var(--brand-15);
  border-radius: var(--r-pill);
  padding: 1px 6px;
  white-space: nowrap;
}

/* Checklist de viatura. Mesma forma das tags de negocio — e' informacao do mesmo
   peso —, mas no ramo AZUL, porque separa uma CLASSE de atividade e nao um
   atributo dela: misturado no ambar das tags, "viatura" leria como mais uma
   etiqueta de processo. */
.res-det-viatura { color: var(--info-ink); background: var(--info-bg); }

/* Estados: cor so onde ela SEPARA. Devolvida usa o mesmo ramo do azul das barras
   de devolucao; ativa, o ambar de "em andamento" que a tela ja usa no dia
   corrente. Os dois em tinta escura do mesmo ramo, nunca no matiz puro. */
.res-det-devolvida { background: var(--info-bg); color: var(--info-ink); }
.res-det-ativa     { background: var(--brand-15); color: var(--brand-ink); }
.res-det-semdado   { background: var(--bad-bg); color: var(--bad-ink); }

/* O bloco que abre na propria linha. Fechado por padrao; `res-det-visivel` no
   pai o revela. */
.res-det-aberto { display: none; margin: 6px 0 2px; padding-left: 10px; border-left: 2px solid var(--line-forte); }
.res-det-visivel .res-det-aberto { display: block; }

.res-det-campo { display: flex; gap: 6px; padding: 2px 0; font-size: var(--t-xs); }
/* Rotulo no piso de contraste (4,8:1) e VALOR um degrau acima: o que se le e' o
   valor, e o rotulo so o ancora. */
.res-det-rot { color: var(--ink-3); flex: 0 0 auto; }
.res-det-val { color: var(--ink-2); min-width: 0; }
.res-det-nada { font-size: var(--t-xs); color: var(--ink-3); font-style: italic; padding: 2px 0; }

/* Aberta, a descricao deixa de ser uma linha so — o texto inteiro cabe. */
.res-det-visivel .res-det-desc { white-space: normal; }

/* Numa TV o detalhamento nao deveria aparecer, mas se alguem clicar, que ao
   menos nao roube a tela do grafico. */
body.tv .res-bloco-detalhe { max-height: 32vh; overflow-y: auto; }