/* ============================================================================
 * pcp-ui.css — o pouco de CSS que é COMUM a todos os módulos
 * ----------------------------------------------------------------------------
 * Primeiro (e por enquanto único) arquivo de estilo compartilhado do projeto.
 * Escopo estrito: os botões de SAÍDA — os que produzem um documento, seja um
 * arquivo que desce para o computador ou um papel que abre numa aba.
 *
 * NÃO é um design system. A regra para crescer é a mesma dos pcp-*.js: só entra
 * o que já está duplicado em três ou mais módulos.
 *
 * Entra no <head> ANTES do <style> do módulo, de propósito: uma regra local
 * ainda vence quando precisar, e dá para migrar um módulo por vez.
 *
 * Ver docs/superpowers/specs/2026-09-03-padrao-botoes-saida-design.md
 * ==========================================================================*/

.btn-saida{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; color:#0F2340;
  border:1px solid #dde4ec; border-radius:8px;
  padding:7px 14px; height:34px;
  font:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer; white-space:nowrap;
}
.btn-saida:hover{ background:#f1f5f9; border-color:#c7d2e0; }
.btn-saida:disabled{ opacity:.5; cursor:not-allowed; }

/* A confirmação de um diálogo — o "Gerar" que fecha a caixa. Um por diálogo. */
.btn-saida.principal{ background:#0F2340; border-color:#0F2340; color:#fff; }
.btn-saida.principal:hover{ background:#1a3a6b; }

/* Só-ícone: permitido apenas em barra de filtros apertada, e SEMPRE com title e
   aria-label escritos por extenso. O checador cobra os dois.

   `flex:0 0 auto` não é enfeite: a barra onde esse botão vive rola na horizontal
   e é apertada de propósito. Sem isto o flex ENCOLHE o quadrado (ele não tem
   texto que segure a largura) e ele sai mais estreito que a engrenagem ao lado
   — foi o que acontecia no Lupão no celular. */
.btn-saida.icone{ padding:0; width:34px; flex:0 0 auto; justify-content:center; }

/* ── Segmentado (.seg) ───────────────────────────────────────────────────────
 * Escolha ÚNICA entre 2–4 opções: Visão, Escala, Unidade de medida…
 * O desenho é o da Carteira: trilho cinza e a opção ativa em BRANCO. A cor de
 * marca NÃO preenche estado de botão — cor no app é para dado (barra, status,
 * etapa). Com dez toggles coloridos na tela nenhum deles quer dizer nada.
 *
 * Já está em ~10 módulos com cinco desenhos diferentes; a migração é um módulo
 * por vez (ver docs/superpowers/plans/2026-09-04-padrao-toggles-e-barra-de-filtros.md).
 * Enquanto um módulo não migrou, o .seg local dele continua vencendo — este
 * arquivo entra ANTES do <style> do módulo.
 */
/* Medidas COPIADAS da Carteira (.br/.bn), até o pixel: trilho #eef2f7 sem borda,
   raio 9 no trilho e 7 no botão, 3px de folga, 5px 11px por botão, 12px de fonte.
   Um trilho um pouquinho diferente por módulo é exatamente o que se está tirando. */
.seg{
  display:inline-flex; gap:4px; flex-wrap:wrap; padding:3px;
  background:#eef2f7; border-radius:9px;
}
.seg button{
  border:none; background:transparent; border-radius:7px;
  padding:5px 11px; font:inherit; font-size:12px; font-weight:600;
  color:#48576a; cursor:pointer; white-space:nowrap;
}
.seg button:hover{ color:#0F2340; }
/* `.active` vale o mesmo que `.on`: metade dos módulos nasceu com um nome, metade
   com o outro, e trocar o nome no JS de cada um seria diff sem ganho nenhum. */
.seg button.on, .seg button.active{ background:#fff; color:#0F2340; box-shadow:0 1px 2px rgba(15,35,64,.15); }
.seg button:disabled{ opacity:.5; cursor:not-allowed; }

/* Ocupando a linha inteira — dentro de diálogo, onde não há barra apertada. */
.seg.largo{ width:100%; }
.seg.largo button{ flex:1; padding:8px 0; }


/* ── Filtro suspenso (.fdd) ──────────────────────────────────────────────────
 * O filtro de várias opções do app: gatilho + painel com as opções em caixa de
 * seleção. Medidas e cores COPIADAS da Logística, que é a referência. O
 * comportamento comum (busca limpa ao reabrir, "Selecionar tudo" só sobre o que
 * a busca deixou visível) mora no pcp-filtros.js e reconhece o .fdd-panel
 * sozinho — o módulo não precisa saber daquele arquivo.
 *
 * Marcação mínima:
 *   <div class="fdd"><button class="fdd-trigger">…<span class="tg-txt">
 *   <div class="fdd-panel"><div class="fdd-opts"><label class="fopt">…
 */
.fdd{ position:relative; }
.fdd-trigger{
  width:100%; height:36px; padding:7px 10px;
  border:1px solid #dde4ec; border-radius:6px; background:#fff;
  font:inherit; font-size:12.5px; color:#0F2340; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  transition:border-color .15s; user-select:none;
}
.fdd-trigger:hover{ border-color:#2D7DD2; }
.fdd-trigger .tg-txt{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.fdd-trigger .tg-arw{ font-size:10px; color:#64748B; flex-shrink:0; transition:transform .2s; }
.fdd.open .fdd-trigger{ border-color:#2D7DD2; border-bottom-left-radius:0; border-bottom-right-radius:0; }
.fdd.open .tg-arw{ transform:rotate(180deg); }
.fdd-trigger.has-sel{ border-color:#2D7DD2; background:rgba(45,125,210,.04); }
.fdd-trigger.has-sel .tg-txt{ color:#2D7DD2; font-weight:600; }
.fdd-panel{
  display:none; position:absolute; top:100%; left:0; right:0; z-index:60;
  border:1px solid #2D7DD2; border-top:none; border-radius:0 0 6px 6px;
  background:#fff; overflow:hidden; box-shadow:0 8px 20px rgba(15,35,64,.14);
}
.fdd.open .fdd-panel{ display:block; }
/* Busca dentro do painel. Sem esta regra o <input> sai com a borda preta padrão
   do navegador, encavalado nas opções — foi o que apareceu no Estoque. */
.fdd-search{
  width:100%; padding:7px 10px; border:none; border-bottom:1px solid #f1f5f9;
  font:inherit; font-size:12px; outline:none; background:#f8fafc; color:#0F2340;
}
.fdd-opts{ max-height:240px; overflow-y:auto; }
.fdd-opts::-webkit-scrollbar{ width:3px; }
.fdd-opts::-webkit-scrollbar-thumb{ background:#dde4ec; }
.fopt{
  display:flex; align-items:center; gap:8px; padding:6px 10px; cursor:pointer;
  border-bottom:1px solid #f1f5f9; font-size:12.5px; color:#0F2340;
}
.fopt:last-child{ border-bottom:none; }
.fopt:hover{ background:#f8fafc; }
.fopt input[type=checkbox]{ accent-color:#2D7DD2; cursor:pointer; width:14px; height:14px; flex-shrink:0; }
/* nome comprido não estica o painel — corta com reticências */
.fopt span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fopt-all{ background:#f8fafc; border-bottom:1px solid #dde4ec; position:sticky; top:0; z-index:5; }
.fopt-all:hover{ background:#eef2f7; }

/* "limpar" ao lado do rótulo: só aparece quando há seleção. */
.fclear{
  background:none; border:none; padding:0; cursor:pointer;
  font:inherit; font-size:10px; font-weight:600; color:#2D7DD2;
  text-decoration:underline; text-underline-offset:2px; display:none;
}
.fclear.on{ display:block; }
.fclear:hover{ color:#DC2626; }

/* ── Chip (.chip) ────────────────────────────────────────────────────────────
 * Liga/desliga de VÁRIAS opções soltas na tela (sem painel suspenso): as
 * unidades de um formulário, um recorte rápido de uma lista. Quando as opções
 * moram dentro de um painel, o certo é o .fdd acima.
 *
 * Ligado = borda e texto navy sobre cinza claro. Sem cor de marca preenchendo,
 * pela mesma razão do .seg: cor é para dado, não para estado de botão.
 * Aceita as duas formas — <label> com <input type=checkbox> dentro (multi) e
 * <button> solto (o módulo cuida do .on).
 */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid #dde4ec; border-radius:9px; background:#fff;
  padding:7px 12px; font:inherit; font-size:12.5px; font-weight:600;
  color:#48576a; cursor:pointer; white-space:nowrap;
}
.chip:hover{ border-color:#c7d2e0; color:#0F2340; }
.chip.on{ border-color:#0F2340; background:#eef2f7; color:#0F2340; }
.chip input[type=checkbox]{ accent-color:#0F2340; width:15px; height:15px; cursor:pointer; }
.chip:disabled, .chip.desativado{ opacity:.5; cursor:not-allowed; }

/* Variante para header ESCURO (o Tático tem gráficos com barra navy). O trilho
   claro sumiria no fundo escuro e o botão ativo ficaria branco no branco. */
.seg.escuro{ background:rgba(255,255,255,.12); }
.seg.escuro button{ color:rgba(255,255,255,.72); }
.seg.escuro button:hover{ color:#fff; }
.seg.escuro button.on, .seg.escuro button.active{ background:#fff; color:#0F2340; }

/* ── Interruptor (.pcp-switch) ───────────────────────────────────────────────
 * Liga/desliga de UMA coisa só (mostrar isto, considerar aquilo). Desligado é
 * cinza, ligado é navy — verde e azul-de-marca saíram pela mesma regra do resto:
 * cor é para dado. Marcação: <span class="pcp-switch"></span>, com .on no ligado.
 *
 * O nome NÃO pode ser `.sw`: Logística, Acabamento e Tático já usavam essa classe
 * para o QUADRADINHO DE COR das legendas de tabela. Como este arquivo entra antes
 * do <style> do módulo, o `::after` daqui (a bolinha branca) e o fundo cinza
 * vazavam para aqueles quadradinhos — as legendas viraram interruptores azuis no
 * meio da tabela. Prefixo `pcp-` para não repetir a colisão.
 */
.pcp-switch{
  display:inline-block; position:relative; flex-shrink:0;
  width:32px; height:18px; border-radius:9px;
  background:#cbd5e1; cursor:pointer; transition:background .15s;
}
.pcp-switch::after{
  content:''; position:absolute; top:2px; left:2px;
  width:14px; height:14px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2);
  transition:transform .15s;
}
.pcp-switch.on{ background:#0F2340; }
.pcp-switch.on::after{ transform:translateX(14px); }

/* ── Faixa de destaque abaixo do cabeçalho (.accentbar) ──────────────────────
 * Os módulos desenham `.accentbar{height:4px; background:…}` e o body é um flex
 * column. Item de flex ENCOLHE por padrão: quando o conteúdo cresce, os 4px são
 * a primeira coisa que o navegador tira, e a faixa some sem deixar rastro (foi
 * o que aconteceu no Estoque e no Cronograma). A altura fica com o módulo — a
 * cor é dele —, mas o "não encolha" mora aqui, para valer em todos de uma vez.
 */
.accentbar{ flex:0 0 auto; }

/* ── Campo de data (input[type=date]) ────────────────────────────────────────
 * No iOS ele nasce MAIS ALTO que o <select> ao lado: o Safari monta uma caixa
 * interna própria (-webkit-date-and-time-value, com altura e margem do UA) e a
 * aparência nativa do campo passa por cima do padding do módulo. Numa barra de
 * filtros, onde o vizinho é um select de 36px, sobra um campo desalinhado — e
 * isso acontecia em SETE módulos (Acabamento, Cronograma, Estacas, Logística,
 * Medições, Montagem, Tático).
 *
 * Não é limitação da plataforma. O Tático já resolvia isso desde a v4.69,
 * travando `height` na toolbar da Visão Geral; o que faltava era generalizar.
 * A regra aqui NÃO impõe altura nenhuma: ela devolve o campo ao controle do CSS
 * do módulo, que é quem sabe a altura da barra dele.
 *
 * `box-sizing` de propósito NÃO entra: os sete módulos já têm o reset global.
 * E, como este arquivo carrega ANTES do <style> do módulo, qualquer regra local
 * (`.cr-periodo input[type=date]`, `.med-apu-f input[type=date]`) continua
 * vencendo — aqui é só o piso.
 */
input[type="date"]{
  -webkit-appearance:none; appearance:none;
  min-height:0;            /* o iOS aplica um mínimo próprio */
}
/* O valor mora numa caixa mais alta que o campo e nasce centrado; zerar a
   margem é o que assenta a data na mesma linha de base do select vizinho. */
input[type="date"]::-webkit-date-and-time-value{ margin:0; text-align:left; }
