/* Complementos ao app.css, carregados depois dele em static/index.html.
   app.css é cópia fiel do <style> do protótipo (regra 20), conferida por
   tests/test_front.py, e não é editado. Aqui entra só o que o protótipo não
   tem, seguindo o mesmo padrão e só as variáveis de :root. */


/* painel de filtros do relatório: largura limitada para não esticar na tela toda */
.rel-filtros-panel{max-width:960px}

/* botão Sair no cabeçalho: borda e texto teal para harmonizar com a nova paleta */
#sairTopoBtn{border-color:var(--amber);color:var(--amber)}
#sairTopoBtn:hover{background:var(--amber-soft)}

/* logo no menu lateral e na tela de login */
/* mix-blend-mode:screen torna o fundo escuro da logo transparente sobre a barra lateral */
.brand-logo{display:block;max-width:160px;max-height:56px;object-fit:contain;mix-blend-mode:screen}

/* tela de login e de troca de senha: o protótipo não tem login */
.tela-login{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.tela-login .panel{width:100%;max-width:400px;padding:0;overflow:hidden}
.tela-login .brand{background:var(--side);padding:22px 24px}
.tela-login .form{padding:22px 24px 24px}
.tela-login h1{margin:0;font-family:var(--f-head);font-size:24px;line-height:1.1}
.tela-login .btn.primary{width:100%;padding:10px 14px}
.tela-login .autoria{margin:0;padding:12px 24px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2);text-align:center}

/* campo apontado pelo servidor como inválido */
.txt-in[aria-invalid="true"],.fld select[aria-invalid="true"]{border-color:var(--stop)}

/* botão "Sair" no rodapé do menu lateral */
.side-foot .btn{margin-top:10px}

/* painel lateral fechado: o app.css só o empurra para fora da tela, e a sombra
   vazava na borda direita. Some (sem sombra, fora do Tab) depois da animação. */
.drawer:not(.on){visibility:hidden;box-shadow:none;transition:transform .25s ease,visibility 0s linear .25s,box-shadow 0s linear .25s}

/* aviso rápido com o painel aberto: sobe acima do rodapé dele (Cancelar/Salvar) */
.drawer.on ~ .toast{bottom:88px}

/* celular: página curta não estica a faixa do menu. */
@media (max-width:820px){
  .app{grid-template-rows:auto 1fr}
  aside.side .brand{white-space:nowrap}  /* nome do produto numa linha; a faixa rola */
}

/* busca com escolha dentro de uma linha de itens (nota de entrada): a lista flutua por
   cima em vez de esticar a linha. Esticada, ela empurrava o × da linha, e o clique que
   fechava a lista caía fora do botão. */
.item-row .fld{position:relative}
.item-row .busca-lista{position:absolute;left:0;right:0;top:100%;z-index:3;box-shadow:var(--shadow)}

/* separador visual entre o chip de resumo (Pendentes) e os chips de situação individual */
.chip-sep{width:1px;height:20px;background:var(--line);align-self:center;flex-shrink:0;margin:0 6px}

/* texto de contagem por situação dentro do chip Pendentes: menor e mais suave */
.chip-detail{font-size:12px;opacity:.72;font-weight:400;letter-spacing:.01em}

/* situação "em teste": tag e destaque de prazo vencido na lista */
.tag.teste{background:var(--warn-bg,hsl(45,100%,92%));color:var(--warn-ink,hsl(40,80%,30%))}
/* linha de OS em teste na tabela: fundo discreto para chamar atenção */
tr.teste-vencido{background:var(--warn-row,hsl(45,100%,96%))}

/* linha de equipamento sem leitura de horímetro há mais de N dias: fundo âmbar discreto */
tr.hor-sem-leitura{background:var(--warn-row,hsl(45,100%,96%))}

/* tags das cinco situações de preventiva (estado do trabalho por par plano×equipamento) */
.tag.atrasada{background:var(--stop-soft);color:var(--stop)}
.tag.no_prazo{background:var(--ok-soft);color:var(--ok-strong)}
.tag.os_aberta{background:var(--prev-soft);color:var(--prev)}
.tag.reprogramada{background:var(--surface-2);color:var(--ink);border:1px dashed var(--amber)}

/* linha de preventiva atrasada na tabela: fundo vermelho discreto */
tr.prev-atrasada{background:var(--stop-soft,hsl(0,80%,95%))}

/* marcador da linha do tempo colorido pelo tipo de evento (comentários ficam neutros) */
.hist li.ev-parada::before   {border-color:var(--stop);     background:var(--stop)}
.hist li.ev-execucao::before {border-color:var(--prev);     background:var(--prev)}
.hist li.ev-teste::before    {border-color:var(--amber);    background:var(--amber)}
.hist li.ev-concluida::before{border-color:var(--ok-strong);background:var(--ok-strong)}

/* grupo segmentado de botões (filtro de situação nos planos) */
.seg-group{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--surface)}
.seg-group button{border:0;border-right:1px solid var(--line);background:none;padding:7px 14px;font-family:inherit;font-size:14px;color:var(--ink-2);cursor:pointer}
.seg-group button:last-child{border-right:0}
.seg-group button:hover{background:var(--surface-2)}
.seg-group button.on{background:var(--ink);color:var(--surface);font-weight:600}

/* rótulo + controle em linha (filtro de gatilho na toolbar) */
.filtro{display:flex;align-items:center;gap:7px}
.filtro label{font-size:13px;color:var(--ink-2)}

/* conteúdo composto em linha: "4 tarefas · 1 peça · 2 h" */
.comp{color:var(--ink-2);font-size:13.5px}
.comp b{color:var(--ink);font-weight:600}

/* subtítulo cinza sob o nome principal na coluna da tabela */
.sub{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px;white-space:normal}

/* célula com ponto colorido + texto (próxima geração de preventiva) */
.prox{display:flex;align-items:center;gap:8px}
.ponto{width:8px;height:8px;border-radius:50%;flex:none}
.ponto.ok{background:var(--ok-strong)}
.ponto.aviso{background:var(--amber)}
.ponto.alerta{background:var(--stop)}

/* tags de situação dos planos */
.tag.bom{background:var(--ok-soft);color:var(--ok-strong)}
.tag.regular{background:hsl(45,100%,92%);color:hsl(40,80%,30%)}

/* valor de KPI colorido (âmbar = atenção, vermelho = alerta) */
.kpi .v.atencao{color:var(--amber)}
.kpi .v.alerta{color:var(--stop)}

/* linha de mobilização com trânsito acima do limite da empresa: célula em destaque */
tr.mob-alerta td.dias-transito{color:var(--stop);font-weight:700}

/* link inline de OS dentro da mensagem de erro do painel (regra 5 e 18) */
.link-os{background:none;border:none;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}

/* tags de estado de componentes (módulo de componentes, migração 0021) */
.tag.montado{background:var(--ok-soft);color:var(--ok-strong)}
.tag.no_patio{background:var(--surface-2);color:var(--ink)}
.tag.conserto_externo{background:hsl(45,100%,92%);color:hsl(40,80%,30%)}
.tag.em_transito{background:hsl(260,60%,94%);color:hsl(260,60%,35%)}
.tag.baixado{background:var(--surface-2);color:var(--ink-3);text-decoration:line-through}

/* tela de máquinas paradas: linha com previsão vencida */
tr.parada-vencida{background:var(--stop-soft,hsl(0,80%,96%))}
/* tag "vencida" compacta dentro da célula de previsão */
.parada-prev-tag{font-size:11px;padding:1px 5px;vertical-align:middle}
/* texto de acompanhamento: truncado com reticências, tooltip via title */
.parada-status{display:block;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* destaque vermelho no subtítulo da tela de paradas */
strong.alerta{color:var(--stop)}

/* impressão / PDF da tela de máquinas paradas */
@media print{
  /* esconde tudo menos o conteúdo da tela principal */
  aside.side,header.top,.page-head .acts,#novaOsBtn,.drawer{display:none!important}
  /* remove sombras e bordas de container */
  body,main{background:var(--surface,white)!important;box-shadow:none!important}
  /* mantém linhas vermelhas em impressão colorida */
  tr.parada-vencida{background:var(--stop-soft)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* KPI clicável do painel (DF, MTBF, MTTR): mesmo visual do .kpi, mas é um <button> */
.kpi.kpi-clicavel{border:0;text-align:left;font:inherit;color:inherit;cursor:pointer;background:var(--surface);transition:box-shadow .12s}
.kpi.kpi-clicavel:hover{box-shadow:0 0 0 2px var(--brand)}
.kpi.kpi-clicavel:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* impressão do resumo de indicadores via botão PDF do drawer:
   body ganha .impr-kpi → esconde tudo exceto o drawer */
@media print{
  body.impr-kpi aside.side,
  body.impr-kpi header.top,
  body.impr-kpi main,
  body.impr-kpi #overlay{display:none!important}
  /* sobrepõe a regra que esconde .drawer no print normal */
  body.impr-kpi .drawer{display:block!important;position:static!important;width:100%!important;max-width:none!important;transform:none!important;box-shadow:none!important}
  body.impr-kpi .drawer-foot{display:none!important}
}

/* mensagem de erro inline no seletor de período: aparece abaixo dos campos
   de data quando o usuário digita um fim anterior ao início (regra 18) */
.periodo-erro{margin:6px 0 0;font-size:13px;color:var(--stop)}

/* ---- Ficha do equipamento ------------------------------------------------- */

/* tile do board com cursor pointer (ficha abre no clique) */
.tile.tile-clicavel{cursor:pointer}
.tile.tile-clicavel:hover{opacity:.82;outline:2px solid var(--brand);outline-offset:2px}

/* seletor de período: atalhos + inputs de data personalizados */
.periodo-sel{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.periodo-custom{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.periodo-custom label{display:flex;align-items:center;gap:6px;font-size:14px}
.periodo-custom .txt-in{width:130px;padding:5px 8px}

/* blocos da ficha: empilhados, com margem entre si */
.ficha-bloco{margin-bottom:16px}

/* cabeçalho da ficha com botão Voltar acima do h1 */
.ficha-head .btn.small{margin-bottom:6px}

/* aviso de componente crítico ausente no topo da ficha */
.ficha-aviso-critico{margin:0 0 16px;padding:12px 16px}
.ficha-aviso-critico span{display:inline-block;margin:2px 0}
.ficha-aviso-critico span+span::before{content:" · "}

/* rodapé visível só na impressão: equipamento + período */
.ficha-rodape-impr{display:none}

/* impressão da ficha: body.impr-ficha */
@media print{
  body.impr-ficha aside.side,
  body.impr-ficha header.top,
  body.impr-ficha .ficha-head .acts,
  body.impr-ficha .ficha-head .btn,
  body.impr-ficha #fichaPeriodoWrap{display:none!important}
  body.impr-ficha .ficha-rodape-impr{display:block;font-size:13px;color:var(--ink-2);margin-bottom:12px;border-bottom:1px solid var(--line);padding-bottom:6px}
  body.impr-ficha main{padding:0!important}
  /* expande as tabelas inteiras (sem scroll horizontal no papel) */
  body.impr-ficha .table-wrap{overflow:visible!important}
  body.impr-ficha table{width:100%!important;font-size:11px}
  body.impr-ficha .panel{box-shadow:none!important;border:1px solid var(--line);margin-bottom:12px;break-inside:avoid}
}

/* grade somente-leitura usada nos blocos de Identificação e Custo da ficha:
   4 colunas em desktop, colapsa para 1 em tela estreita. O .fld já tem label
   em block, então rótulo+valor ficam empilhados dentro de cada célula. */
.ficha-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:600px){.ficha-grade{grid-template-columns:1fr}}
/* impressão: 4 colunas permanecem para aproveitar o papel; quebra interna evitada */
@media print{body.impr-ficha .ficha-grade{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- Tela Relatórios --------------------------------------------------------- */

/* barra de filtros: 4 dropdowns + coluna de ação compacta */
.rel-filtros-bar{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:12px;align-items:end;margin-top:12px}
@media (max-width:820px){.rel-filtros-bar{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.rel-filtros-bar{grid-template-columns:1fr}}
.rel-filtros-acoes{display:flex;align-items:flex-end}

/* prévia do documento: fundo branco, margens, sem proporção de folha forçada */
.rel-preview{background:white;border:1px solid var(--line);border-radius:8px;padding:24px 28px;margin-top:16px}
.rel-cab-topo{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.rel-cab-logo{max-height:48px;max-width:180px;object-fit:contain}
@media print{.rel-cab-logo{max-height:40px;max-width:160px}}
.rel-cab-titulo{font-size:17px;font-weight:700;color:var(--ink)}
.rel-cab-meta{display:flex;flex-wrap:wrap;gap:4px 24px;font-size:13px;margin-bottom:6px}
.rel-cab-meta b{color:var(--ink-2);font-weight:500}
.rel-cab-filtros{font-size:13px;color:var(--ink-2);margin-bottom:16px;font-style:italic}
.rel-secao{margin-top:20px}
.rel-secao h3{font-size:14px;font-weight:600;border-bottom:1px solid var(--line);padding-bottom:6px;margin:0 0 8px}
.rel-sem-dados{margin:8px 0;color:var(--ink-2);font-size:13px}
/* tabela interna: sem wrapper de overflow horizontal (a largura segue o conteúdo) */
.rel-tabela{width:100%;border-collapse:collapse;font-size:12.5px}
.rel-tabela th{background:var(--rel-cab);color:white;padding:6px 8px;text-align:left;font-weight:600;white-space:nowrap}
.rel-tabela td{padding:5px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.rel-tabela tbody tr:nth-child(even) td{background:var(--rel-zebra)}

/* impressão: body.impr-rel — esconde tudo menos a prévia */
@media print{
  body.impr-rel aside.side,
  body.impr-rel header.top,
  body.impr-rel .rel-filtros-panel,
  body.impr-rel .rel-acoes-bar{display:none!important}
  body.impr-rel .rel-preview{border:none!important;padding:0!important;box-shadow:none;border-radius:0!important}
  body.impr-rel main{padding:0!important}
  body.impr-rel .rel-tabela{font-size:10px}
  body.impr-rel .rel-tabela td,
  body.impr-rel .rel-tabela th{white-space:normal}
}

/* ---- fim: bloco de pendências ----------------------------------------------- */

/* bloco de pendências da origem no painel de recebimento: aparece antes dos campos
   de chegada, para que o destino veja primeiro o que ficou por fazer (regra 6) */
.pend-mob{background:var(--stop-soft,hsl(0,80%,96%));border:1px solid var(--stop);border-radius:8px;padding:12px 16px;margin-bottom:16px}
.pend-mob .pend-mob-titulo{font-weight:600;color:var(--stop);margin-bottom:8px;font-size:14px}
.pend-mob .pend-mob-os{border-top:1px solid var(--line);padding:8px 0;display:flex;flex-direction:column;gap:4px}
.pend-mob .pend-mob-os:first-of-type{border-top:0;padding-top:0}
.pend-mob .pend-mob-os .motivo{font-size:12px;color:var(--stop)}
.pend-mob .pend-mob-os .descr{font-size:12.5px;color:var(--ink-2)}