/* =============================================================================
   Repositório de Projetos — identidade Pavei
   Paleta medida no vetor do manual (Illustrator, junho/2025).
   NUNCA usar hex direto no código: sempre a variável.
   ============================================================================= */
:root{
  --navy:#1c2655; --navy-700:#243964; --blue:#2b4a7a;
  --orange:#f47420; --orange-dark:#c85e1b;
  --ink:#162033; --muted:#667085;
  --bg:#f3f6fa; --surface:#ffffff;
  --line:#e6ecf3; --line-strong:#d4dde8;
  --navy-50:#eef0f9; --orange-50:#fff2ea;
  --ok:#1f7a4c; --ok-bg:#e7f6ee;
  --warning:#9a5b00; --warning-bg:#fff3dc;
  --danger:#b42318; --danger-bg:#fdeceb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5}
h1,h2,h3{margin:0}
button,input,textarea,select{font-family:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- chrome ---------- */
.topbar{background:var(--navy);color:#fff;height:56px;padding:0 16px;
  display:flex;align-items:center;gap:18px;position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}
.brand span{opacity:.6;font-weight:500;font-size:13px;padding-left:10px;
  border-left:1px solid rgba(255,255,255,.22)}
.nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav-itens{display:flex;gap:2px;align-items:center}
.nav button{background:none;border:0;color:#fff;opacity:.72;cursor:pointer;
  padding:8px 12px;border-radius:6px;font-size:13px;font-weight:500;min-height:38px}
.nav button:hover{opacity:1;background:rgba(255,255,255,.08)}
.nav button[aria-current="page"]{opacity:1;background:rgba(255,255,255,.16);font-weight:600}
.eu{display:flex;align-items:center;gap:8px;margin-left:8px;padding-left:12px;
  border-left:1px solid rgba(255,255,255,.22);font-size:12px}
.eu b{font-weight:600}
.eu small{display:block;opacity:.6;font-size:11px}
.wrap{max-width:1180px;margin:0 auto;padding:20px 16px 48px}

.page-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.page-head h1{font-size:1.4rem;font-weight:700;color:var(--navy)}
.page-head p{margin:2px 0 0;color:var(--muted);font-size:.85rem}
.head-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- componentes da casa ---------- */
.pill-btn{border:1px solid #c5d4e3;background:#fff;color:var(--navy);
  border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;
  cursor:pointer;min-height:38px}
.pill-btn:hover:not(:disabled){background:var(--navy-50)}
.pill-btn[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.pill-btn:disabled{opacity:.5;cursor:not-allowed}
.primary-button{background:var(--orange);border:1px solid var(--orange);color:#fff;
  border-radius:8px;padding:10px 16px;font-size:13px;font-weight:600;
  cursor:pointer;min-height:44px}
.primary-button:hover:not(:disabled){background:var(--orange-dark);border-color:var(--orange-dark)}
.primary-button:disabled{opacity:.55;cursor:not-allowed}
.danger-button{background:#fff;border:1px solid var(--danger);color:var(--danger);
  border-radius:8px;padding:10px 16px;font-size:13px;font-weight:600;
  cursor:pointer;min-height:44px}
.danger-button:hover:not(:disabled){background:var(--danger-bg)}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:14px;margin-bottom:16px}
.panel-heading{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.panel-heading h2{font-size:.98rem;font-weight:700;color:var(--navy)}
.panel-heading p{margin:0;color:var(--muted);font-size:.8rem}
.panel-heading .right{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}

.kpi-row{display:grid;gap:12px;margin-bottom:16px}
.kpi-row.kpi-4{grid-template-columns:repeat(4,1fr)}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px}
.kpi .v{font-size:1.75rem;font-weight:700;color:var(--navy);line-height:1.1;
  font-variant-numeric:tabular-nums}
.kpi .l{color:var(--muted);font-size:.8rem;margin-top:2px}
.kpi.alerta .v{color:var(--danger)}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
.table-wrap table{width:100%;border-collapse:collapse;font-size:13px}
.table-wrap th{text-align:left;font-weight:600;color:var(--muted);font-size:.78rem;
  padding:9px 12px;background:#fafcfe;border-bottom:1px solid var(--line);white-space:nowrap}
.table-wrap td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.table-wrap tr:last-child td{border-bottom:0}
.table-wrap tbody tr.clicavel:hover{background:#fafcfe;cursor:pointer}
.codigo{font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.sub{color:var(--muted);font-size:.78rem}
.num{font-variant-numeric:tabular-nums}

.badge{display:inline-block;border-radius:999px;padding:2px 9px;
  font-size:.72rem;font-weight:600;white-space:nowrap}
.b-ok{background:var(--ok-bg);color:var(--ok)}
.b-warn{background:var(--warning-bg);color:var(--warning)}
.b-danger{background:var(--danger-bg);color:var(--danger)}
.b-neutral{background:var(--navy-50);color:var(--navy)}

.espera{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.espera.e2{color:var(--warning)}
.espera.e3{color:var(--danger)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vazio{text-align:center;padding:26px 14px;color:var(--ok);
  background:var(--ok-bg);border-radius:8px;font-weight:600}
.vazio.neutro{color:var(--muted);background:var(--bg);font-weight:500}
.erro-card{text-align:center;padding:22px 14px;background:var(--danger-bg);
  border-radius:8px;color:var(--danger)}
.erro-card p{margin:0 0 10px;font-weight:600}
.skel{background:linear-gradient(90deg,#eef2f7 25%,#f7fafd 50%,#eef2f7 75%);
  background-size:200% 100%;animation:sk 1.2s infinite;border-radius:6px;height:14px;margin:9px 0}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- formulário ---------- */
.campo{margin-bottom:12px}
label{display:block;font-weight:600;font-size:.82rem;color:var(--navy);margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=search],textarea,select{
  width:100%;border:1px solid var(--line-strong);border-radius:8px;padding:10px 12px;
  font-size:14px;color:var(--ink);background:#fff;min-height:44px}
textarea{min-height:80px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid var(--blue);outline-offset:1px;
  border-color:var(--blue)}
.dica{font-size:.78rem;color:var(--muted);margin-top:4px}
.dica.erro{color:var(--danger);font-weight:600}

/* ---------- entrar ---------- */
.entrar{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:20px;background:var(--navy)}
.entrar-caixa{background:var(--surface);border-radius:14px;padding:28px;
  width:100%;max-width:400px;box-shadow:0 18px 40px rgba(22,32,51,.28)}
.entrar-caixa img{height:26px;display:block;margin:0 auto 6px}
.entrar-caixa .sub{text-align:center;margin-bottom:20px}
.entrar-caixa .primary-button{width:100%}

/* ---------- linha do tempo ---------- */
.timeline{border-left:2px solid var(--line-strong);margin:4px 0 0 8px;padding-left:16px}
.tl-item{position:relative;padding-bottom:16px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-23px;top:3px;width:11px;height:11px;
  border-radius:50%;background:var(--line-strong);border:2px solid var(--surface)}
.tl-item.dev::before{background:var(--danger)}
.tl-item.apr::before{background:var(--ok)}
.tl-item.agu::before{background:var(--warning)}
.tl-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.tl-head strong{font-size:.86rem;color:var(--navy)}
.motivo{background:var(--danger-bg);border-left:3px solid var(--danger);
  padding:8px 10px;border-radius:0 6px 6px 0;margin-top:6px;font-size:.84rem}
.arquivos{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.arq{border:1px solid var(--line-strong);border-radius:6px;padding:6px 10px;
  font-size:.78rem;background:#fff;display:flex;gap:6px;align-items:center;
  cursor:pointer;min-height:38px}
.arq:hover{background:var(--navy-50)}
.arq b{color:var(--navy);text-transform:uppercase;font-size:.7rem}

/* ---------- drawer ---------- */
.backdrop{position:fixed;inset:0;background:rgba(22,32,51,.45);display:none;z-index:40}
.backdrop.on{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--bg);
  z-index:50;overflow-y:auto;transform:translateX(100%);transition:transform .18s ease;
  box-shadow:-8px 0 24px rgba(22,32,51,.14)}
.drawer.on{transform:translateX(0)}
.drawer-head{background:var(--surface);border-bottom:1px solid var(--line);
  padding:14px 16px;position:sticky;top:0;z-index:2;display:flex;gap:12px;align-items:flex-start}
.drawer-head h2{font-size:1.02rem;color:var(--navy)}
.drawer-body{padding:16px}
.x-btn{margin-left:auto;background:none;border:0;font-size:22px;line-height:1;
  color:var(--muted);cursor:pointer;padding:4px 8px;min-height:38px}
.acoes{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);
  padding:12px 16px;display:flex;gap:8px}
.acoes .primary-button{flex:1}

.drawer.largo{width:min(1000px,100%)}
.visor{display:flex;flex-direction:column;min-height:calc(100vh - 120px);
  background:var(--bg)}
.visor .pdf{width:100%;flex:1;min-height:calc(100vh - 140px);border:0;
  background:var(--surface)}

/* ---------- envio ---------- */
.dropzone{border:2px dashed var(--line-strong);border-radius:10px;background:#fff;
  padding:26px;text-align:center;color:var(--muted);cursor:pointer}
.dropzone.sobre{border-color:var(--orange);background:var(--orange-50)}
.dropzone b{color:var(--navy);display:block;margin-bottom:4px;font-size:.95rem}
.linha-arq{border:1px solid var(--line);border-left-width:4px;border-radius:8px;
  background:#fff;padding:10px 12px;margin-top:8px}
.linha-arq.ok{border-left-color:var(--ok)}
.linha-arq.err{border-left-color:var(--danger)}
.linha-arq.enviando{border-left-color:var(--orange)}
.linha-arq .nome{font-weight:600;color:var(--navy);word-break:break-all}
.linha-arq .msg{font-size:.82rem;margin-top:4px}
.linha-arq.err .msg{color:var(--danger)}
.partes{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;font-size:.78rem;color:var(--muted)}
.partes b{color:var(--ink);font-weight:600}
.barra-prog{height:4px;background:var(--navy-50);border-radius:2px;margin-top:8px;overflow:hidden}
.barra-prog i{display:block;height:100%;background:var(--orange);width:0;transition:width .2s}

.subtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;
  flex-wrap:wrap}
.subtab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
  font-size:13px;font-weight:600;padding:9px 13px;cursor:pointer;min-height:40px}
.subtab:hover{color:var(--navy)}
.subtab[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--orange)}

.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:7px}
.chip{display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);
  background:#fff;border-radius:8px;padding:8px 10px;cursor:pointer;text-align:left;
  min-height:44px;font-size:.83rem;color:var(--ink)}
.chip:hover:not(:disabled){background:var(--navy-50)}
.chip .cod{font-weight:700;color:var(--navy);font-size:.72rem;min-width:26px}
.chip .nm{flex:1;line-height:1.25}
.chip .qt{font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"]{border-color:var(--navy);background:var(--navy-50)}
.chip:disabled{cursor:not-allowed;border-style:dashed}
.chip.usada[aria-pressed="true"]{border-color:var(--ok);background:var(--ok-bg)}
.chip.usada .cod{color:var(--ok)}

.regra{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);
  border-left:4px solid var(--blue);border-radius:8px;padding:10px 12px;margin-bottom:7px;
  font-size:.86rem;background:#fff}
.regra.envio{border-left-color:var(--orange)}
.regra .frase{flex:1;min-width:230px;line-height:1.45}
.regra .frase b{color:var(--navy)}
.curinga{background:var(--navy-50);border-radius:4px;padding:1px 6px;
  font-size:.78rem;font-weight:600;color:var(--blue)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:var(--navy);color:#fff;padding:11px 18px;border-radius:999px;
  font-size:13px;font-weight:600;z-index:80;opacity:0;pointer-events:none;
  transition:opacity .18s;max-width:90vw;text-align:center}
.toast.on{opacity:1}
.toast.erro{background:var(--danger)}

/* ---------- confirmar ---------- */
.confirmar{position:fixed;inset:0;background:rgba(22,32,51,.45);z-index:90;
  display:flex;align-items:center;justify-content:center;padding:20px}
.confirmar .caixa{background:var(--surface);border-radius:12px;padding:20px;
  max-width:420px;width:100%}
.confirmar h3{font-size:1rem;color:var(--navy);margin-bottom:8px}
.confirmar p{margin:0 0 16px;font-size:.88rem}
.confirmar .botoes{display:flex;gap:8px;justify-content:flex-end}

/* ---------- barra inferior (celular e tablet) ----------
   No celular o menu do topo não cabe: com 4 ou 5 itens ele quebrava em duas
   linhas e a segunda ficava POR CIMA do conteúdo. Espremer não resolveria —
   o alvo de toque ficaria pequeno demais para quem usa de pé, em obra.

   A saída é o padrão de aplicativo: navegação embaixo, no alcance do polegar.
   O topo fica só com a marca e quem está logado. */
.barra-inferior{display:none}

@media (max-width:1020px){
  .kpi-row.kpi-4{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
}

@media (max-width:820px){
  /* o menu do topo sai de cena */
  .topbar .nav-itens{display:none}
  .topbar{gap:10px}
  .eu small{display:none}
  .brand span{display:none}

  .barra-inferior{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:35;
    background:var(--surface);border-top:1px solid var(--line-strong);
    /* respeita a faixa do indicador de início no iPhone */
    padding-bottom:env(safe-area-inset-bottom,0);
    box-shadow:0 -2px 12px rgba(22,32,51,.07)}
  .barra-inferior button{
    flex:1;background:none;border:0;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:8px 2px 7px;min-height:56px;
    color:var(--muted);font-size:10.5px;font-weight:600;line-height:1.1}
  .barra-inferior button svg{width:21px;height:21px;stroke-width:1.9}
  .barra-inferior button[aria-current="page"]{color:var(--orange)}
  .barra-inferior button[aria-current="page"] svg{stroke-width:2.3}
  .barra-inferior button:active{background:var(--bg)}

  /* o conteúdo não pode terminar embaixo da barra */
  body.com-barra .wrap{padding-bottom:calc(78px + env(safe-area-inset-bottom,0))}
  .drawer .acoes{padding-bottom:calc(12px + env(safe-area-inset-bottom,0))}
}

@media (max-width:680px){
  .kpi-row.kpi-4{grid-template-columns:1fr}
  .wrap{padding:14px 12px 40px}
  .page-head h1{font-size:1.24rem}
  .head-actions{width:100%}
  .head-actions button{flex:1}
  /* tabela larga rola em vez de espremer a coluna */
  .table-wrap table{min-width:520px}
  .chips{grid-template-columns:1fr 1fr}
}

@media (max-width:400px){
  .chips{grid-template-columns:1fr}
  .barra-inferior button{font-size:9.5px}
}

/* ---------- pastas da obra ----------
   Grade de cartões clicáveis em vez de lista. É mais fácil de mirar no tablet
   e deixa o número de pranchas visível sem abrir. */
.pastas{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
/* align-items:flex-start — o selo "em andamento" mora dentro do bloco de
   nome, e com center o cartão ficava torto quando ele aparecia */
.pasta{display:flex;align-items:flex-start;gap:10px;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;min-height:64px;font:inherit;color:inherit;
  transition:border-color .12s,box-shadow .12s}
.pasta:hover{border-color:var(--line-strong);box-shadow:0 2px 8px rgba(22,32,51,.06)}
.pasta:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pasta .ic-pasta{width:26px;height:26px;flex:0 0 26px;color:var(--orange);
  margin-top:1px}
.pasta-nome{flex:1;min-width:0}
.pasta-nome b{color:var(--navy);font-size:.95rem}
.pasta-nome .sub{font-size:.76rem;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.pasta-nome .badge{white-space:nowrap}
.pasta-num{text-align:right;flex:0 0 auto}
.pasta-num .num{display:block;font-weight:700;color:var(--navy);font-size:1.05rem}
.pasta-num .sub{font-size:.7rem}

/* trilha de onde a pessoa está */
.caminho{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:12px;font-size:.88rem}
.caminho b{color:var(--navy)}
/* os níveis anteriores da trilha são clicáveis */
.link-trilha{background:none;border:0;padding:0;cursor:pointer;font:inherit;
  color:var(--blue);text-decoration:none}
.link-trilha:hover{text-decoration:underline}
.link-trilha:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- aviso de prancha só para consulta ----------
   Executar por prancha de consulta é o erro caro em obra, então o aviso é
   vermelho e aparece em toda listagem onde a prancha se mostra. */
.badge.b-consulta{background:var(--warning-bg);color:var(--warning);
  border:1px solid var(--line-strong);font-weight:600}
.linha-consulta{box-shadow:inset 3px 0 0 var(--warning)}

@media (max-width:680px){
  .pastas{grid-template-columns:1fr}
  .pasta{min-height:58px}
}

/* ---------- comparar revisões ----------
   Duas pranchas na MESMA escala, uma por cima da outra. O que faz a
   comparação valer é a sobreposição ser exata — por isso os dois canvas ficam
   na mesma origem e o mesmo transform vai nos dois. */
.cmp-wrap{max-width:1600px}

.cmp-barra{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;margin-bottom:12px}
.cmp-lado{display:flex;align-items:center;gap:6px}
.cmp-sel{padding:5px 8px;border:1px solid var(--line-strong);border-radius:6px;
  font:inherit;font-size:.85rem;background:var(--surface);color:var(--ink)}
.cmp-tag{font-size:.7rem;font-weight:700;letter-spacing:.04em;
  padding:3px 7px;border-radius:4px;text-transform:uppercase}
.cmp-tag.cinza{background:var(--navy-50);color:var(--navy)}
.cmp-tag.vermelha{background:var(--danger-bg,#fdeceb);color:var(--danger)}
.cmp-modos,.cmp-zoom{display:flex;gap:4px;margin-left:auto}
.cmp-zoom{margin-left:0}

.cmp-palco{position:relative;height:min(72vh,780px);background:var(--bg);
  overflow:hidden}
.cmp-area{position:absolute;inset:0;cursor:grab;touch-action:none;
  overflow:hidden}
.cmp-cv{position:absolute;top:0;left:0;transform-origin:0 0;
  box-shadow:0 1px 6px rgba(22,32,51,.12);background:#fff}
/* a antiga fica embaixo, em cinza; a nova por cima */
#cv-antiga{filter:grayscale(1) opacity(.85)}

/* a barra que revela uma ou outra */
.cmp-cortina{position:absolute;top:0;bottom:0;width:3px;
  background:var(--orange);cursor:ew-resize;z-index:3;touch-action:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.cmp-cortina:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.cmp-alca{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;
  background:var(--orange);border:2px solid #fff;
  box-shadow:0 2px 8px rgba(22,32,51,.28)}
.cmp-alca::before,.cmp-alca::after{content:'';position:absolute;top:50%;
  width:0;height:0;border-top:5px solid transparent;
  border-bottom:5px solid transparent;margin-top:-5px}
.cmp-alca::before{left:7px;border-right:6px solid #fff}
.cmp-alca::after{right:7px;border-left:6px solid #fff}

.cmp-carregando{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px}
.cmp-aviso{margin-top:12px;background:var(--navy-50);border-radius:8px;
  padding:10px 14px}
/* legenda das cores do modo sobrepor */
.cmp-leg{display:inline-block;width:22px;height:3px;vertical-align:middle;
  border-radius:2px;margin-right:2px}
/* estas três NÃO usam token da marca de propósito: são a cor que o desenho
   REALMENTE fica na tela, e a legenda tem de bater com o que o olho vê */
.cmp-leg.cinza{background:#6b6b6b}
.cmp-leg.vermelha{background:#b42318}
.cmp-leg.escura{background:#4a2420}

@media (max-width:820px){
  .cmp-barra{gap:8px}
  .cmp-modos,.cmp-zoom{margin-left:0;width:100%}
  .cmp-modos button,.cmp-zoom button{flex:1}
  .cmp-palco{height:60vh}
  /* alvo maior: em obra a pessoa arrasta com o dedo, de pé */
  .cmp-alca{width:44px;height:44px}
  .cmp-cortina{width:4px}
}