/* empresa.css — a tela EMPRESA (#071), dentro da Home da visão Agência.
 *
 * Arquivo próprio pelo mesmo motivo da equipe.css: tela grande nova em folha
 * separada não briga com outra missão na mesma linha da styles.css.
 *
 * Cor SÓ por token (--ink, --muted, --line, --ink-warn…): tema claro e escuro
 * nascem funcionando e o tests/test_contraste.py cobre os pares. Cor é
 * semáforo aqui: âmbar = espera você, vermelho = parado/atrasado, verde =
 * entregue. O resto é neutro.
 */

/* ── abas da Home: Mesa da equipe · Empresa ──────────────────────────────── */
.abas-home-wrap { padding-bottom: 0; }
.abas-home { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.aba-home {
  color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 700;
  padding: 8px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  min-height: 44px; display: inline-flex; align-items: center;
}
.aba-home:hover { color: var(--ink); }
.aba-home.ativa { color: var(--ink); border-bottom-color: var(--ink-accent); }

/* ── frescor das fontes ──────────────────────────────────────────────────── */
.emp-frescor { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 0 14px; }
.emp-fonte { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.emp-fonte b { color: var(--ink); font-weight: 700; }
.emp-fonte .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.emp-fonte.f-ok .ponto { background: var(--green); }
.emp-fonte.f-alerta .ponto { background: var(--yellow); }
.emp-fonte.f-alerta { color: var(--ink-warn); }
.emp-fonte.f-sem_dado { color: var(--muted); }

/* ── frentes ─────────────────────────────────────────────────────────────── */
.emp-frentes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 8px; margin: 0 0 18px;
}
.emp-frente {
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; min-height: 44px; display: flex; flex-direction: column; gap: 3px;
}
.emp-frente:hover { border-color: var(--ink-accent); }
.emp-frente.ativa { border-color: var(--ink-accent); box-shadow: inset 0 0 0 1px var(--ink-accent); }
.emp-frente.sem { border-style: dashed; }
.emp-frente .nome { font-size: 13px; font-weight: 800; color: var(--ink); }
.emp-frente .num { font-size: 11px; color: var(--muted); line-height: 1.4; }
.emp-frente .num b { font-weight: 800; }
.t-gate { color: var(--ink-warn); }
.t-parado { color: var(--ink-err); }

/* ── busca ───────────────────────────────────────────────────────────────── */
.emp-busca {
  font: inherit; font-size: 12px; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
  min-width: 12rem; margin-left: auto;
}
.emp-busca:focus { outline: 2px solid var(--ink-accent); outline-offset: 1px; }

/* ── tabela de projetos ──────────────────────────────────────────────────── */
.tabela-empresa .emp-linha { cursor: pointer; }
.tabela-empresa .emp-linha:hover td { background: var(--line-soft); }
.tabela-empresa .emp-linha.aberta td { background: var(--line-soft); }
.tabela-empresa .linha-parada td:first-child { box-shadow: inset 3px 0 0 var(--ink-err); }
.tabela-empresa .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-empresa .col-frente { color: var(--muted); font-size: 12px; }
.tabela-empresa .sem-frente { color: var(--ink-warn); font-weight: 700; font-size: 11px; }
.tabela-empresa .col-titulo a.atrasado { color: var(--ink-err); }
.emp-projeto .grupo { color: var(--muted); }
.emp-abrir {
  font: inherit; color: var(--muted); background: none; border: 0; cursor: pointer;
  padding: 0 6px 0 0; min-width: 20px;
}
.emp-abrir:hover { color: var(--ink); }
.emp-atraso {
  display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 800;
  color: var(--ink-err); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px;
}
.emp-trava {
  font-size: 11px; font-weight: 700; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; white-space: nowrap;
}
.emp-trava.t-gate { color: var(--ink-warn); border-color: var(--ink-warn); }
.emp-trava.t-revisao { color: var(--ink-info); }
.emp-trava.t-status { color: var(--ink-err); }
.emp-trava b { color: inherit; }
.col-saude .emp-falta { font-size: 11px; color: var(--muted); font-style: italic; white-space: nowrap; }
.tabela-empresa .emp-cel { min-width: 0; overflow-wrap: anywhere; }
.emp-seletor { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; }
.emp-seletor .rot { font-size: 10px; color: var(--muted); }
.emp-seletor select {
  font: inherit; font-size: 12px; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; max-width: 11rem; min-height: 32px;
}

.emp-mais { margin-top: 10px; min-height: 44px; color: var(--ink); }

/* drill-down: os itens do projeto */
.tabela-empresa .emp-detalhe td { background: var(--line-soft); padding: 4px 12px 12px 30px; }
.emp-itens { list-style: none; margin: 0; padding: 0; }
.emp-item {
  display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 2px 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12px;
}
.emp-item:last-child { border-bottom: 0; }
.emp-item .origem { color: var(--muted); font-size: 11px; font-weight: 700; }
.emp-item .titulo { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.emp-item .titulo:hover { text-decoration: underline; }
.emp-item .meta { grid-column: 2; color: var(--muted); font-size: 11px; }
.emp-item.s-feito .titulo, .emp-item.s-fechado .titulo { color: var(--muted); text-decoration: line-through; }
.emp-item.atrasado .titulo { color: var(--ink-err); }
.emp-item.s-andamento .origem { color: var(--ink-info); }
.emp-item.s-aberto .origem { color: var(--muted); }
.emp-carregando { color: var(--muted); font-size: 12px; margin: 6px 0; }

/* ── estado por prova ────────────────────────────────────────────────────── */
.emp-divs { list-style: none; margin: 0; padding: 0; }
.emp-div { padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.emp-div:last-child { border-bottom: 0; }
.emp-div .linha1 { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.emp-div .titulo { color: var(--ink); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.emp-div .titulo:hover { text-decoration: underline; }
.emp-div .onde, .emp-div .quando, .emp-div .rot { color: var(--muted); font-size: 11px; }
.emp-div .linha2 { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.emp-div .acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.emp-div .acoes .btn { min-height: 40px; }
.emp-div.confirmada .onde { color: var(--ink-ok); }
.emp-provas { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.emp-provas .prova { font-size: 12px; color: var(--ink-accent); text-decoration: none; }
.emp-provas .prova:hover { text-decoration: underline; }
.emp-provas .prova em { font-style: normal; font-size: 11px; color: var(--muted); }
.emp-provas .prova.s-feito em { color: var(--ink-ok); }
/* vínculo ainda pendente (PR aberto, missão rodando): é o que impede a prova */
.emp-provas .prova.s-aberto em, .emp-provas .prova.s-andamento em { color: var(--ink-warn); }
.emp-dobra { margin-top: 10px; }
.emp-dobra > summary {
  cursor: pointer; font-size: 12px; font-weight: 700; color: var(--muted);
  min-height: 32px; display: list-item; padding: 6px 0;
}
.emp-dobra > summary b { color: var(--ink); }
.emp-dobra[open] > summary { color: var(--ink); }

/* ── fluxo semanal ───────────────────────────────────────────────────────── */
/* 5 a 13 semanas: a tabela é curta, não precisa da caixa de rolagem de 70vh */
.emp-rolagem-fluxo { max-height: none; }
.emp-fluxo .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.emp-fluxo th.num { text-align: right; padding: 8px 10px; }
.emp-fluxo th { padding: 8px 10px; }
.emp-fluxo .t-cresce { color: var(--ink-warn); }
.emp-fluxo .t-cai { color: var(--ink-ok); }
.emp-barra {
  display: inline-block; vertical-align: middle; width: 3.5rem; height: 6px;
  background: var(--line-soft); border-radius: 3px; overflow: hidden; margin-left: 6px;
}
.emp-barra .enchimento { display: block; height: 100%; background: var(--muted); }
.emp-barra .enchimento.entrou { background: var(--blue); }
.emp-barra .enchimento.saiu { background: var(--green); }
.emp-barra .enchimento.gate { background: var(--yellow); }
.emp-barra .enchimento.revisao { background: var(--blue); }
.emp-sub { font-size: 12px; color: var(--ink); margin: 16px 0 8px; font-weight: 800; }
.emp-idades { display: grid; gap: 10px; }
.emp-idade { display: grid; grid-template-columns: 7rem repeat(5, minmax(0, 1fr)); gap: 6px; align-items: center; }
.emp-idade .rot { font-size: 12px; color: var(--ink); font-weight: 700; }
.emp-idade .faixa { display: flex; flex-direction: column; gap: 3px; font-size: 10px; color: var(--muted); }
.emp-idade .faixa .emp-barra { width: 100%; margin: 0; }
.emp-idade .faixa b { color: var(--ink); font-size: 12px; }
.emp-idade .faixa .fx-rot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── docs ────────────────────────────────────────────────────────────────── */
.emp-docs ul { list-style: none; margin: 4px 0 8px; padding: 0 0 0 14px; }
.emp-docs li { padding: 4px 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 2px 10px; }
.emp-docs li a { color: var(--ink); }
.emp-docs .caminho { color: var(--muted); font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ── carregando: esqueleto com a forma da tela ───────────────────────────── */
.emp-esqueleto { display: flex; flex-direction: column; gap: 12px; }
.emp-esqueleto .sk { display: block; background: var(--line-soft); border-radius: 8px; }
.emp-esqueleto .sk-titulo { height: 30px; width: 14rem; }
.emp-esqueleto .sk-faixa { height: 14px; width: 60%; }
.emp-esqueleto .sk-kpi { height: 84px; }
.emp-esqueleto .sk-linha { height: 44px; }

/* O .wrap tem `margin: 0 auto`, e dentro de um pai flex em COLUNA (o
   .area-central do staging; o .app-shell no celular) a margem automática
   CANCELA o stretch: o container passava a ter a largura mínima da TABELA e a
   página rolava para o lado (895px num tablet de 820, medido no staging em
   24/09). Mesma causa e mesma saída da #061, escopadas nesta tela. */
.wrap.empresa, .wrap.abas-home-wrap { width: 100%; }
/* #081 — abas + tela da Home num bloco só: filhos soltos do .app-shell (flex em
   linha) saíam lado a lado no staging. Mesma saída do .kb-modulo da #074. */
.home-modulo { display: block; width: 100%; min-width: 0; flex: 1 1 auto; }

/* ── até 1100px a tabela de projetos vira card empilhado ─────────────────── */
/* 8 colunas pedem ~51rem de largura fixa: abaixo de 1100px (sidebar ao lado)
   ou 820px (sidebar em cima) elas não cabem, e tabela larga vira CARD, não
   rolagem horizontal (régua da casa). */
@media (max-width: 1100px) {
  .tabela-empresa { min-width: 0 !important; }
  .tabela-empresa thead { display: none; }
  .tabela-empresa, .tabela-empresa tbody, .tabela-empresa tr, .tabela-empresa td { display: block; width: 100%; }
  .tabela-empresa .emp-linha {
    border: 1px solid var(--line); border-radius: 10px; margin: 0 0 10px; padding: 8px 10px;
  }
  .tabela-empresa .emp-linha td {
    border: 0; padding: 3px 0; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 8px;
  }
  .tabela-empresa .emp-linha td::before {
    content: attr(data-rotulo); color: var(--muted); font-size: 11px; font-weight: 700;
  }
  .tabela-empresa .emp-linha td.num { text-align: left; }
  .tabela-empresa .emp-linha td > .sem-dono, .tabela-empresa .emp-linha td > .emp-trava { justify-self: start; }
  .tabela-empresa .linha-parada { box-shadow: inset 3px 0 0 var(--ink-err); }
  .tabela-empresa .linha-parada td:first-child { box-shadow: none; }
  .tabela-empresa .emp-detalhe { margin: -8px 0 10px; }
  .tabela-empresa .emp-detalhe td { padding: 4px 10px 10px; border-radius: 0 0 10px 10px; }
  .empresa .emp-rolagem { max-height: none; overflow: visible; border: 0; }
  .col-saude .emp-falta { white-space: normal; }
}

/* ── celular ─────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .empresa .topbar .filtros.periodo { order: 3; width: 100%; margin: 6px 0 0; }
  .emp-busca { margin-left: 0; width: 100%; min-height: 40px; }
  /* a caixa de 70vh da casa prende a lista numa janela de dois cards: no
     celular a lista rola com a PÁGINA (e acaba em 20) */
  .emp-fluxo { min-width: 0 !important; }
  .emp-fluxo .emp-barra { display: none; }
  .emp-idade { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .emp-idade .rot { grid-column: 1 / -1; }
  .emp-frentes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}