/* GestãoZAP — tema claro, linguagem de obra/engenharia pública.
   Cantos retos, tipografia condensada, densidade de tabela técnica. */

:root {
  --tinta:      #16232e;
  --tinta-2:    #4a5b69;
  --tinta-3:    #64717d;   /* 4.6:1 sobre branco — texto auxiliar precisa ser legível */
  --aco:        #17466a;
  --aco-claro:  #e7eef4;
  --aco-borda:  #b9cbd9;
  --concreto:   #f2f3f5;
  --superficie: #ffffff;
  --borda:      #d7dce1;
  --borda-forte:#c2c9d0;
  --sinal:      #d99a12;
  --sinal-claro:#fdf4e0;
  --ok:         #1c7a4f;
  --ok-claro:   #e6f4ec;
  --alerta:     #b3261e;
  --alerta-claro:#fbeceb;
  --sombra:     0 1px 2px rgba(22,35,46,.06), 0 1px 3px rgba(22,35,46,.04);
  --mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--concreto);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .cond {
  font-family: "Barlow Condensed", Inter, sans-serif;
  font-weight: 600;
  letter-spacing: .01em;
  margin: 0;
}
h1 { font-size: 26px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }

a { color: var(--aco); text-decoration: none; }
a:hover { text-decoration: underline; }

/* foco visível para quem navega por teclado */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #f0b429;
  outline-offset: 1px;
  border-radius: 2px;
}
.topo a:focus-visible { outline-color: #ffd97a; }

/* ---------- faixa de sinalização ---------- */
.hazard {
  height: 4px;
  background: repeating-linear-gradient(-45deg,
    var(--sinal) 0 10px, #16232e 10px 20px);
}

/* ---------- topo ---------- */
.topo {
  background: var(--aco);
  color: #fff;
  border-bottom: 1px solid #0e3450;
}
.topo-in {
  max-width: 1360px; margin: 0 auto; padding: 0 20px;
  height: 56px; display: flex; align-items: center; gap: 24px;
}
.marca {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: 22px; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; display: flex; align-items: center; gap: 9px;
}
.marca:hover { text-decoration: none; }
.marca .bloco { width: 13px; height: 13px; background: var(--sinal); display: inline-block; }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a {
  color: #cfe0ec; padding: 7px 12px; font-size: 13px; font-weight: 500;
  border-radius: 2px;
}
.nav a:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.nav a.on { background: rgba(255,255,255,.16); color: #fff; }
.projeto-atual {
  font: 400 13px Inter, sans-serif; color: #b9d1e2; letter-spacing: .01em;
  max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-left: 12px; margin-left: 2px; border-left: 1px solid rgba(255,255,255,.22);
}
.projeto-atual:hover { color: #fff; text-decoration: none; }
.projeto-sair { color: #7fa3bd; font-size: 12px; padding: 2px 4px; margin-left: 2px; }
.projeto-sair:hover { color: #fff; text-decoration: none; }
@media (max-width: 720px) {
  .projeto-atual { max-width: 130px; font-size: 12px; padding-left: 8px; }
}

.eu { display: flex; align-items: center; gap: 9px; padding-left: 14px; margin-left: 6px; border-left: 1px solid rgba(255,255,255,.2); }
.eu .av {
  width: 28px; height: 28px; background: var(--sinal); color: #16232e;
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
  font-family: "Barlow Condensed", sans-serif;
}
.eu .quem { font-size: 12px; line-height: 1.15; color: #fff; }
.eu .quem span { display: block; color: #a8c4d8; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- layout ---------- */
.wrap { max-width: 1360px; margin: 0 auto; padding: 22px 20px 60px; }
.wrap-sm { max-width: 900px; }
.cabecalho { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.cabecalho .cresce { flex: 1; min-width: 220px; }
.sub { color: var(--tinta-2); font-size: 13px; margin-top: 3px; }
.trilha { font-size: 12px; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; }

.card {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 3px; box-shadow: var(--sombra);
}
.card + .card { margin-top: 16px; }
.card-cab {
  padding: 12px 16px; border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; gap: 12px;
}
.card-cab h2, .card-cab h3 { flex: 1; }
.card-corpo { padding: 16px; }
.card-corpo.plano { padding: 0; }

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) {
  .g2, .g3 { grid-template-columns: 1fr; }
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .kpi .num { font-size: 28px; }
}

/* ---------- indicadores ---------- */
.kpi {
  background: var(--superficie); border: 1px solid var(--borda);
  border-top: 3px solid var(--aco); padding: 13px 15px; border-radius: 3px;
  box-shadow: var(--sombra);
}
.kpi.sinal { border-top-color: var(--sinal); }
.kpi.ok    { border-top-color: var(--ok); }
.kpi.ruim  { border-top-color: var(--alerta); }
.kpi .rot { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); font-weight: 600; }
.kpi .num { font-family: "Barlow Condensed", sans-serif; font-size: 34px; font-weight: 600; line-height: 1.05; margin-top: 2px; }
.kpi .pe  { font-size: 12px; color: var(--tinta-2); }

/* ---------- tabelas ---------- */
table.tab { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tab th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-3); font-weight: 700; padding: 9px 12px;
  border-bottom: 1px solid var(--borda-forte); background: #fafbfc; white-space: nowrap;
}
table.tab td { padding: 9px 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
table.tab tr:last-child td { border-bottom: 0; }
table.tab tbody tr:hover { background: #f8fafb; }
.num-col { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- etiquetas ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 2px;
  border: 1px solid transparent; white-space: nowrap;
}
.tag.aberto     { background: #eef0f2; color: var(--tinta-2); border-color: #dfe3e7; }
.tag.progresso  { background: var(--aco-claro); color: var(--aco); border-color: var(--aco-borda); }
.tag.finalizada { background: var(--ok-claro); color: var(--ok); border-color: #bfe0cd; }
.tag.atrasada   { background: var(--alerta-claro); color: var(--alerta); border-color: #f0c8c5; }
.tag.risco      { background: var(--sinal-claro); color: #8a6300; border-color: #ecd6a3; }
.tag.papel      { background: #eef2f6; color: var(--tinta-2); border-color: #dde4ea; }

.pilha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---------- barra de progresso ---------- */
.barra { height: 6px; background: #e7eaee; border-radius: 1px; overflow: hidden; position: relative; min-width: 70px; }
.barra i { display: block; height: 100%; background: var(--aco); }
.barra i.ok { background: var(--ok); }
.barra i.ruim { background: var(--alerta); }
.barra .marca-plan { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--tinta); opacity: .55; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: Inter, sans-serif; font-size: 13px; font-weight: 600;
  padding: 8px 15px; border-radius: 2px; border: 1px solid var(--borda-forte);
  background: #fff; color: var(--tinta); cursor: pointer; line-height: 1.2;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: #f4f6f8; text-decoration: none; }
.btn.pri { background: var(--aco); border-color: var(--aco); color: #fff; }
.btn.pri:hover { background: #123a58; }
.btn.sinal { background: var(--sinal); border-color: #c78c0f; color: #2b2103; }
.btn.sinal:hover { background: #c78c0f; }
.btn.perigo { background: #fff; border-color: #e2b6b2; color: var(--alerta); }
.btn.perigo:hover { background: var(--alerta-claro); }
.btn.mini { padding: 4px 9px; font-size: 12px; }
.btn.bloco { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- formulários ---------- */
label.rot { display: block; font-size: 12px; font-weight: 600; color: var(--tinta-2); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .05em; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], select, textarea {
  width: 100%; padding: 9px 11px; font-size: 14px; font-family: inherit; color: var(--tinta);
  border: 1px solid var(--borda-forte); border-radius: 2px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(23,70,106,.25); outline-offset: -1px; border-color: var(--aco); }
textarea { resize: vertical; min-height: 76px; }
.campo + .campo { margin-top: 14px; }
.linha-campos { display: flex; gap: 12px; flex-wrap: wrap; }
.linha-campos > * { flex: 1; min-width: 150px; }
.linha-campos > .campo + .campo { margin-top: 0; }
.dica { font-size: 12px; color: var(--tinta-3); margin-top: 5px; }

.aviso { padding: 11px 14px; border-radius: 2px; font-size: 13px; border: 1px solid; margin-bottom: 16px; }
.aviso.erro { background: var(--alerta-claro); border-color: #f0c8c5; color: #8c1d17; }
.aviso.bom  { background: var(--ok-claro); border-color: #bfe0cd; color: #145c3b; }
.aviso.info { background: var(--aco-claro); border-color: var(--aco-borda); color: #10395a; }

/* ---------- ícone de ajuda ---------- */
.ajuda {
  display: inline-grid; place-items: center; width: 15px; height: 15px;
  border-radius: 50%; border: 1px solid var(--aco-borda); background: var(--aco-claro);
  color: var(--aco); font: 700 10px/1 Inter, sans-serif; cursor: help;
  vertical-align: middle; margin-left: 5px; position: relative; user-select: none;
}
.ajuda:hover, .ajuda:focus { background: var(--aco); color: #fff; border-color: var(--aco); outline: none; }
.ajuda::after {
  content: attr(data-titulo) "\A" attr(data-texto);
  white-space: pre-wrap; position: absolute; bottom: calc(100% + 8px); left: -8px;
  width: 280px; padding: 10px 12px; background: var(--tinta); color: #fff;
  font: 400 12px/1.5 Inter, sans-serif; letter-spacing: 0; text-transform: none;
  border-radius: 3px; box-shadow: 0 6px 18px rgba(22,35,46,.22);
  opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 40; pointer-events: none;
}
.ajuda::before {
  content: ""; position: absolute; bottom: calc(100% + 2px); left: 2px;
  border: 6px solid transparent; border-top-color: var(--tinta);
  opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 41;
}
.ajuda:hover::after, .ajuda:focus::after,
.ajuda:hover::before, .ajuda:focus::before { opacity: 1; visibility: visible; }
/* sem espaço acima, a explicação vira para baixo (ver gzAjudaPosicao) */
.ajuda.abaixo::after { bottom: auto; top: calc(100% + 8px); }
.ajuda.abaixo::before { bottom: auto; top: calc(100% + 2px); border-top-color: transparent; border-bottom-color: var(--tinta); }
@media (max-width: 720px) { .ajuda::after { left: auto; right: -8px; width: 220px; } }

/* ---------- gantt ---------- */
.gantt-rolo { overflow-x: auto; }
.gantt { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 860px; }
.gantt th, .gantt td { border-bottom: 1px solid var(--borda); }
.gantt thead th {
  background: #fafbfc; font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-3); font-weight: 700; padding: 7px 4px; text-align: center;
  border-bottom: 1px solid var(--borda-forte);
}
.gantt thead th.mes { border-left: 1px solid var(--borda-forte); font-size: 11px; color: var(--tinta-2); }
.gantt th.etapa, .gantt td.etapa {
  text-align: left; padding: 7px 12px; width: 300px; min-width: 260px;
  position: sticky; left: 0; background: #fff; z-index: 2; border-right: 1px solid var(--borda-forte);
}
.gantt thead th.etapa { background: #fafbfc; z-index: 3; }
.gantt tr.grupo td.etapa { font-weight: 700; background: #f6f8f9; }
.gantt tr.grupo td { background: #f6f8f9; }
.gantt td.cel { padding: 0; height: 30px; position: relative; min-width: 34px; }
.gantt td.cel.hoje { background: rgba(217,154,18,.10); }
.gantt td.cel.hoje::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--sinal); }

/* z-index: a barra atravessa várias células; sem isso o fundo das células
   seguintes (fim de semana, semana atual) pinta por cima e corta a barra */
.gb { position: absolute; left: 1px; right: 1px; border-radius: 1px; z-index: 1; }
.gb.plan { top: calc(50% - 9px); height: 7px; background: var(--aco-borda); }
.gb.real { top: calc(50% + 2px); height: 7px; background: var(--aco); }
.gb.real.fim { background: var(--ok); }
.gb.real.atr { background: var(--alerta); }
.gb.base { top: calc(50% - 15px); height: 3px; background: #c9d3db; border-radius: 0; }
.marco {
  position: absolute; top: 50%; left: 50%; width: 11px; height: 11px;
  margin: -6px 0 0 -6px; background: var(--tinta); transform: rotate(45deg); z-index: 2;
}
.marco.ok  { background: var(--ok); }
.marco.atr { background: var(--alerta); }
.gantt tr.critica td.etapa { border-left: 3px solid var(--alerta); }
.gantt tr.critica .gb.plan { background: #f0c8c5; }
table.tab tr.critica td:first-child { border-left: 3px solid var(--alerta); }
.gb.plan.hachura { background: repeating-linear-gradient(-45deg, #dfe4e9 0 4px, #eff2f4 4px 8px); }
.gantt.dias { min-width: 900px; }
.gantt.dias thead th.dia { min-width: 17px; width: 17px; padding: 5px 0; font-size: 9px; }
.gantt.dias thead th.dia.fds { background: #eef1f4; color: #9aa7b2; }
.gantt.dias thead th.dia.hoje { background: var(--sinal); color: #2b2103; }
.gantt.dias td.cel.dia { min-width: 17px; width: 17px; }
.gantt.dias td.cel.dia.fds { background: #f6f8fa; }
.gantt td.cel.dia.hoje { background: rgba(217,154,18,.16); }
.visao { display: inline-flex; border: 1px solid var(--borda-forte); border-radius: 2px; overflow: hidden; }
.visao a { padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--tinta-2); background: #fff; }
.visao a + a { border-left: 1px solid var(--borda-forte); }
.visao a.on { background: var(--aco); color: #fff; }
.visao a:hover { text-decoration: none; }
tr.linha-grupo .seta { display: inline-block; width: 12px; color: var(--tinta-3); }
tr.linha-grupo:hover td { background: #eef2f4 !important; }
.mover { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: middle; }
.mover .btn { padding: 3px 7px; line-height: 1; }
/* ações da linha cabem numa linha só: select + setas lado a lado */
table.tab td.num-col:has(.mover) { white-space: nowrap; }
table.tab td.num-col .mover + select, table.tab td.num-col select { vertical-align: middle; }
@media (max-width: 720px) { .mover { display: none; } }

.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--tinta-2); padding: 10px 16px; border-top: 1px solid var(--borda); background: #fafbfc; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 16px; height: 7px; border-radius: 1px; display: inline-block; }

.esconde-mob { }
.so-mob { display: none; }
@media (max-width: 720px) {
  .wrap { padding: 16px 12px 48px; }
  .topo-in { padding: 0 12px; gap: 10px; }
  /* menu rola na horizontal em vez de quebrar em duas linhas */
  .topo-in { height: auto; padding: 8px 12px; flex-wrap: wrap; }
  .nav { width: 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap;
         -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 6px 10px; font-size: 12px; white-space: nowrap; flex: none; }
  .eu { margin-left: auto; padding-left: 10px; }
  .esconde-mob { display: none !important; }
  .so-mob { display: inline-flex; }
  h1 { font-size: 22px; }

  /* Gantt no celular: a coluna fixa encolhe para sobrar largura de semanas */
  .gantt { min-width: 0; font-size: 11px; }
  .gantt th.etapa, .gantt td.etapa {
    width: 116px; min-width: 116px; max-width: 116px; padding: 6px 8px;
    white-space: normal; overflow-wrap: anywhere;
  }
  .gantt td.etapa .nome-etapa {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.25;
  }
  .gantt thead th { padding: 5px 2px; font-size: 9px; }
  .gantt thead th.mes { font-size: 10px; }
  .gantt td.cel { min-width: 27px; height: 34px; }
  .gantt .col-avanco { display: none; }
  .card-corpo.plano .gantt-rolo { -webkit-overflow-scrolling: touch; }

  /* tabelas densas rolam em vez de espremer */
  .card-corpo.plano { overflow-x: auto; }
  table.tab { min-width: 520px; }
}

/* ---------- entrar ---------- */
.entrar-tela { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; }
@media (max-width: 900px) { .entrar-tela { grid-template-columns: 1fr; } .entrar-arte { display: none; } }
.entrar-arte {
  background: linear-gradient(160deg, #17466a 0%, #0e2f47 100%);
  color: #fff; padding: 56px 52px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.entrar-arte::after {
  content: ""; position: absolute; inset: auto -80px -120px auto; width: 420px; height: 420px;
  border: 44px solid rgba(255,255,255,.045); border-radius: 50%;
}
.entrar-arte h1 { font-size: 44px; line-height: 1.05; max-width: 12ch; }
.entrar-arte p { color: #b9d1e2; max-width: 46ch; }
.entrar-form { display: grid; place-items: center; padding: 40px 24px; background: var(--superficie); }
.entrar-form .caixa { width: 100%; max-width: 360px; }

.rodape { text-align: center; color: var(--tinta-3); font-size: 12px; padding: 26px 0 0; }
.vazio { padding: 44px 20px; text-align: center; color: var(--tinta-3); }
.vazio h3 { color: var(--tinta-2); margin-bottom: 6px; }


/* ---------- impressão: o cronograma vira relatório ---------- */
@media print {
  :root { --concreto: #fff; }
  body { background: #fff; font-size: 11px; }
  .hazard, .topo, .rodape, .visao, .btn, button, form, .legenda span:last-child { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .card { border: 1px solid #c2c9d0; box-shadow: none; break-inside: avoid; page-break-inside: avoid; }
  .grid.g4 { grid-template-columns: repeat(4, 1fr); }
  .gantt-rolo { overflow: visible; }
  .gantt { min-width: 0; font-size: 9px; }
  .gantt td.etapa, .gantt th.etapa { position: static; width: 190px; min-width: 190px; }
  table.tab { font-size: 10px; min-width: 0; }
  .card-corpo.plano { overflow: visible; }
  a { color: inherit; text-decoration: none; }
  .esconde-mob { display: revert !important; }
}