/* NOMA — Intranet. Mesma paleta e tipografia do site institucional. */

:root {
  --moss: #353d2f;
  --moss-soft: #5f6a52;
  --graphite: #3a3a3a;
  --paper: #f4f1ea;
  --paper-deep: #e9e5db;
  --card: #fbfaf6;
  --line: rgba(53, 61, 47, 0.18);
  --alerta: #8a5a1c;
  --alerta-bg: #f3e6cf;
  --erro: #8c2f2a;
  --ok: #3f6b45;
  --sans: "Jost", "Segoe UI", system-ui, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--graphite);
  font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--moss); }
h1, h2 { font-family: var(--serif); font-weight: 400; color: var(--moss); line-height: 1.1; }
h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
h2 { font-size: 1.55rem; }
h3, .rotulo {
  font-family: var(--sans); font-weight: 400; font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--moss-soft);
}
.carregando { padding: 48px; color: var(--moss-soft); }
.mudo { color: var(--moss-soft); font-size: 0.92rem; }
[hidden] { display: none !important; }

/* ---- estrutura ---- */
.casca { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.lateral {
  background: var(--moss); color: var(--paper); padding: 28px 20px;
  display: flex; flex-direction: column; gap: 28px; position: sticky; top: 0; height: 100vh;
}
.lateral img { width: 132px; display: block; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; }
.lateral nav a {
  color: var(--paper); text-decoration: none; padding: 10px 12px; border-radius: 4px;
  font-size: 0.95rem; opacity: 0.78;
}
.lateral nav a:hover { opacity: 1; background: rgba(244, 241, 234, 0.08); }
.lateral nav .obra-menu { margin-top: 14px; padding: 6px 12px 4px; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; }
.lateral nav a.sub { padding: 7px 12px 7px 24px; font-size: 0.9rem; }
.lateral nav a.ativo { opacity: 1; background: rgba(244, 241, 234, 0.14); }
.lateral .pe { margin-top: auto; font-size: 0.85rem; display: grid; gap: 8px; }
.lateral .pe strong { font-weight: 400; display: block; }
.lateral .pe span { opacity: 0.7; }
.lateral .pe button { justify-self: start; }
.lateral .pe .config { font-size: 0.78rem; opacity: 0.7; }
.lateral .pe .config a { color: var(--paper); }
.principal { padding: 40px clamp(20px, 4vw, 56px) 80px; min-width: 0; }
.cabecalho { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.cabecalho .rotulo { margin-bottom: 8px; }
.faixa-demo {
  background: var(--alerta-bg); color: var(--alerta); padding: 8px 16px; font-size: 0.88rem;
  grid-column: 1 / -1; text-align: center;
}

/* ---- componentes ---- */
.cartao { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 22px; }
.cartao + .cartao { margin-top: 16px; }
.grade > .cartao { margin-top: 0; }
.grade { display: grid; gap: 16px; }
.grade.c4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grade.c2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.numero { font-family: var(--serif); font-size: 2.6rem; color: var(--moss); line-height: 1; margin-top: 10px; }

button, .botao {
  font: inherit; font-weight: 400; font-size: 0.9rem; cursor: pointer;
  border: 1px solid var(--moss); background: var(--moss); color: var(--paper);
  padding: 9px 16px; border-radius: 4px; text-decoration: none; display: inline-block;
}
button:hover, .botao:hover { background: #2a3125; }
button.secundario, .botao.secundario { background: transparent; color: var(--moss); }
button.secundario:hover, .botao.secundario:hover { background: var(--paper-deep); }
button.perigo { background: transparent; color: var(--erro); border-color: var(--erro); }
button.perigo:hover { background: #f1dfdc; }
button.claro { background: transparent; color: var(--paper); border-color: rgba(244, 241, 234, 0.5); padding: 6px 12px; font-size: 0.82rem; }
button.link { background: none; border: 0; color: var(--moss); padding: 0; text-decoration: underline; }
button:disabled { opacity: 0.5; cursor: default; }
button.decidir {
  display: inline-flex; align-items: center; gap: 7px; border-radius: 99px; padding: 7px 14px 7px 11px;
  background: var(--alerta-bg); color: var(--alerta); border-color: transparent;
  font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
button.decidir:hover { background: var(--ok); color: #fff; }
button.decidir.voltar { background: transparent; color: var(--moss); border-color: var(--line); }
button.decidir.voltar:hover { background: var(--paper-deep); color: var(--moss); }
button.decidir.negar { background: transparent; color: var(--erro); border-color: var(--erro); }
button.decidir.negar:hover { background: var(--erro); color: #fff; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

label { display: grid; gap: 6px; font-size: 0.85rem; color: var(--moss-soft); }
input, select, textarea {
  font: inherit; font-weight: 300; color: var(--graphite); background: #fff;
  border: 1px solid var(--line); border-radius: 4px; padding: 9px 11px; width: 100%;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--moss-soft); outline-offset: 1px; }
form.campos { display: grid; gap: 14px; }
form.campos .linha { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.linha-rel { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.linha-rel .linha { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.linha-rel label.curto { max-width: 90px; }
.linha-rel > button { margin-top: 6px; font-size: 0.82rem; }
fieldset [data-add-linha] { margin-top: 10px; font-size: 0.85rem; padding: 6px 12px; }
fieldset { border: 0; border-top: 1px solid var(--line); padding: 14px 0 4px; margin: 0; }
fieldset legend { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--moss-soft); padding-right: 12px; }
form.campos .linha .larga { grid-column: 1 / -1; }
.lido { display: grid; gap: 2px; font-size: 0.95rem; }
.selo {
  display: inline-block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--moss-soft); white-space: nowrap;
}
.selo.decisao { background: var(--alerta-bg); color: var(--alerta); border-color: transparent; }
.selo.ok { background: #dfe9dc; color: var(--ok); border-color: transparent; }
.selo.erro { background: #f1dfdc; color: var(--erro); border-color: transparent; }
.selo.rodando { background: var(--paper-deep); color: var(--moss); border-color: transparent; }

/* ---- painel ---- */
.quadro { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.coluna, .ficha { min-width: 0; overflow-wrap: anywhere; }
.coluna { background: var(--paper-deep); border-radius: 6px; padding: 12px; min-height: 90px; }
.coluna h3 { margin-bottom: 10px; display: flex; justify-content: space-between; }
.ficha {
  display: block; background: var(--card); border: 1px solid var(--line); border-radius: 4px;
  padding: 10px 12px; text-decoration: none; color: inherit; font-size: 0.9rem;
}
.ficha + .ficha { margin-top: 8px; }
.ficha:hover { border-color: var(--moss-soft); }
.ficha small { display: block; color: var(--moss-soft); }
.lista > li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.lista > li:first-child { border-top: 0; }
.lista > li.envio { flex-wrap: wrap; }
.f-confirmar-envio { align-items: flex-end; }
.f-confirmar-envio input { width: auto; }
.cartao.kickoff.urgente { background: var(--erro); }
.cartao.kickoff.urgente .botao { background: var(--paper); color: var(--erro); border-color: var(--paper); }
.cartao.alerta { border-left: 4px solid var(--erro); margin-bottom: 16px; }
.cartao.kickoff { display: flex; gap: 28px; align-items: center; background: var(--moss); color: var(--paper); border: 0; padding: 30px 32px; margin-bottom: 16px; flex-wrap: wrap; }
.cartao.kickoff > svg { width: 96px; height: 96px; flex: none; opacity: 0.9; }
.cartao.kickoff .corpo { flex: 1; min-width: 240px; }
.cartao.kickoff h2, .cartao.kickoff h2 a, .cartao.kickoff h3, .cartao.kickoff .mudo, .cartao.kickoff label { color: var(--paper); }
.cartao.kickoff h2 { font-size: 2rem; margin: 6px 0 2px; }
.cartao.kickoff h3, .cartao.kickoff .mudo { opacity: 0.75; }
.cartao.kickoff .quando { margin: 14px 0; font-size: 1.1rem; }
.cartao.kickoff .quando strong { font-weight: 400; }
.cartao.kickoff form { align-items: flex-end; }
.cartao.kickoff input, .cartao.kickoff select { width: auto; }
.cartao.kickoff a { color: var(--paper); }
.cartao.kickoff .material { margin: 4px 0 16px; max-width: 620px; }
.cartao.kickoff .material li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 7px 0; border-top: 1px solid rgba(244, 241, 234, 0.18); font-size: 0.92rem; }
.cartao.kickoff .material .linha-rel { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.linha-rel .linha { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.linha-rel label.curto { max-width: 90px; }
.linha-rel > button { margin-top: 6px; font-size: 0.82rem; }
fieldset [data-add-linha] { margin-top: 10px; font-size: 0.85rem; padding: 6px 12px; }
fieldset { border: 0; border-top: 1px solid var(--line); padding: 14px 0 4px; margin: 0; }
fieldset legend { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--moss-soft); padding-right: 12px; }
form.campos .linha .larga { grid-column: 1 / -1; }
.lido { display: grid; gap: 2px; font-size: 0.95rem; }
.selo { background: rgba(244, 241, 234, 0.12); color: var(--paper); border-color: transparent; }
.cartao.kickoff .material .selo.ok { background: #dfe9dc; color: var(--ok); }
.cartao.kickoff .material .selo.decisao { background: var(--alerta-bg); color: var(--alerta); }
.cartao.kickoff .material .selo.erro { background: #f1dfdc; color: var(--erro); }
.cartao.kickoff button { background: var(--paper); color: var(--moss); border-color: var(--paper); }
.cartao.kickoff button.secundario { background: transparent; color: var(--paper); border-color: rgba(244, 241, 234, 0.5); }
.numero.pequeno { font-size: 1.7rem; }
.resumo-pizza { display: flex; gap: 36px; align-items: center; flex-wrap: wrap; }
.resumo-pizza svg { width: 220px; height: 220px; flex: none; }
.pizza-rotulo { font-size: 11px; fill: var(--moss-soft); letter-spacing: 1px; text-transform: uppercase; }
.pizza-valor { font-size: 19px; fill: var(--moss); font-family: var(--serif); }
.pizza-legenda { margin-top: 16px; display: grid; gap: 8px; }
.pizza-legenda li { display: grid; grid-template-columns: 14px minmax(140px, auto) auto auto; gap: 10px; align-items: center; }
.pizza-legenda i { width: 12px; height: 12px; border-radius: 3px; }
.pizza-legenda strong { font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; }
.conta { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; max-width: 520px; margin: 10px 0; font-size: 0.95rem; }
.conta span:nth-child(even), .conta strong:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.conta strong { font-weight: 400; color: var(--moss); border-top: 1px solid var(--line); padding-top: 6px; }
.medidor { position: relative; height: 6px; border-radius: 3px; background: var(--paper-deep); margin-top: 8px; max-width: 320px; }
.medidor i { display: block; height: 100%; border-radius: 3px; background: var(--moss); }
.medidor b { position: absolute; top: -4px; width: 2px; height: 14px; background: #a8742a; }
/* ---- avanço físico e curva S ---- */
.rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabela th { text-align: left; font-weight: 400; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--moss-soft); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tabela td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.tabela .linha-rel { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.linha-rel .linha { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.linha-rel label.curto { max-width: 90px; }
.linha-rel > button { margin-top: 6px; font-size: 0.82rem; }
fieldset [data-add-linha] { margin-top: 10px; font-size: 0.85rem; padding: 6px 12px; }
fieldset { border: 0; border-top: 1px solid var(--line); padding: 14px 0 4px; margin: 0; }
fieldset legend { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--moss-soft); padding-right: 12px; }
form.campos .linha .larga { grid-column: 1 / -1; }
.lido { display: grid; gap: 2px; font-size: 0.95rem; }
.selo { white-space: normal; }
.tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela input { width: 68px; text-align: right; padding: 6px 8px; }
.tabela tr.atrasada td:first-child { box-shadow: inset 3px 0 0 var(--alerta); padding-left: 13px; }
.legenda { display: flex; gap: 20px; font-size: 0.85rem; margin-bottom: 6px; }
.legenda i { display: inline-block; width: 26px; margin-right: 8px; vertical-align: middle; border-top: 2px solid var(--moss); }
.legenda i.l-prev { border-top: 2px dashed #a8742a; }
.curva { width: 100%; height: auto; display: block; font-family: var(--sans); }
.curva .grade-y { stroke: var(--line); stroke-width: 1; }
.curva .eixo { font-size: 11px; fill: var(--moss-soft); }
.curva .s-prev { fill: none; stroke: #a8742a; stroke-width: 2; stroke-dasharray: 6 5; stroke-linejoin: round; }
.curva .s-real { fill: none; stroke: var(--moss); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.curva .p-real { fill: var(--moss); stroke: var(--card); stroke-width: 2; }
.curva .rotulo-fim { font-size: 12px; fill: var(--moss-soft); }
.curva .rotulo-fim.forte { fill: var(--graphite); font-weight: 400; }
.curva .mira { stroke: var(--moss-soft); stroke-width: 1; opacity: 0; }
.curva .col.atual .mira { opacity: 0.35; stroke-dasharray: 2 3; }
.curva .dica { opacity: 0; pointer-events: none; }
.curva .dica rect { fill: var(--graphite); }
.curva .dica text { fill: #fff; font-size: 12px; }
.curva .col:hover .mira { opacity: 0.8; stroke-dasharray: none; }
.curva .col:hover .dica { opacity: 1; }
.secao { margin-top: 36px; }
.secao > h2 { margin-bottom: 14px; }

/* ---- projeto ---- */
.trilha { display: flex; flex-wrap: wrap; gap: 8px 4px; margin: 4px 0 24px; }
.trilha li {
  flex: 1 0 auto; min-width: 86px; padding-top: 10px; border-top: 3px solid var(--line);
  font-size: 0.74rem; color: var(--moss-soft); line-height: 1.3;
}
.trilha li.feita { border-color: var(--moss-soft); }
.trilha li.atual { border-color: var(--moss); color: var(--moss); font-weight: 400; }
.proximo { border-left: 4px solid var(--moss); }
.proximo.decisao { border-left-color: var(--alerta); }
.proximo p { margin: 8px 0 16px; max-width: 70ch; }
.abas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin: 32px 0 20px; }
.abas a { padding: 10px 14px; text-decoration: none; color: var(--moss-soft); font-size: 0.92rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.abas a.ativo { color: var(--moss); border-color: var(--moss); font-weight: 400; }
.item { border-top: 1px solid var(--line); padding: 14px 0; }
.item:first-child { border-top: 0; }
.item header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.item header strong { font-weight: 400; color: var(--moss); }
.item p { white-space: pre-wrap; margin-top: 6px; }
.item.evento { color: var(--moss-soft); font-size: 0.9rem; }
details.resultado { margin-top: 10px; }
details.resultado summary { cursor: pointer; color: var(--moss); font-size: 0.9rem; }
.markdown { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 18px 20px; margin-top: 10px; overflow-x: auto; }
.markdown h1, .markdown h2, .markdown h3 { font-family: var(--serif); text-transform: none; letter-spacing: 0; color: var(--moss); font-size: 1.3rem; margin: 18px 0 8px; }
.markdown h1:first-child, .markdown h2:first-child { margin-top: 0; }
.markdown p, .markdown ul, .markdown ol { margin: 8px 0; }
.markdown ul { list-style: disc; padding-left: 22px; }
.markdown ol { list-style: decimal; padding-left: 22px; }
.markdown table { border-collapse: collapse; font-size: 0.9rem; }
.markdown th, .markdown td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.markdown blockquote { margin: 8px 0; padding: 8px 14px; background: var(--alerta-bg); color: var(--alerta); border-radius: 4px; }
.cartao.planta { margin: 16px 0 0; }
.cartao.planta figcaption { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--moss-soft); margin-bottom: 10px; }
.planta-area { position: relative; max-width: 900px; }
.planta-area img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.planta-area[data-editavel] img { cursor: crosshair; }
button.ponto { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: var(--moss); color: #fff; font-size: 0.9rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
button.ponto.vazio { background: #a8742a; }
button.ponto:hover { transform: translate(-50%, -50%) scale(1.15); }
.pontos-lista { list-style: decimal; padding-left: 22px; margin-top: 12px; }
.pontos-lista li { padding: 3px 0; }
.panos { display: grid; gap: 2px; background: #111; }
.panos.dois { grid-template-columns: 1fr 1fr; }
.panos > div, #pano, #pano2 { width: 100%; height: min(62vh, 560px); }
#modal .topo { flex-wrap: wrap; }
.plantas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 16px; }
.plantas figure { margin: 0; }
.plantas figcaption { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--moss-soft); margin-bottom: 10px; }
.plantas img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.fotos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.foto {
  text-align: left; background: var(--moss); color: var(--paper); border: 0; border-radius: 6px;
  padding: 18px; min-height: 130px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
}
.foto:hover { background: #2a3125; }
.foto .grau { font-family: var(--serif); font-size: 2rem; margin-bottom: auto; opacity: 0.85; }
.foto small { opacity: 0.75; }

/* ---- login ---- */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.entrada .cartao { width: min(430px, 100%); padding: 36px; }
.entrada img { width: 150px; display: block; margin-bottom: 26px; }
.entrada h1 { font-size: 2rem; margin-bottom: 8px; }
.entrada form, .entrada .perfis { margin-top: 22px; display: grid; gap: 12px; }
.dica-demo { margin-top: 14px; font-size: 0.8rem; color: var(--alerta); background: var(--alerta-bg); padding: 8px 10px; border-radius: 4px; }
.outra-porta { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); text-decoration: none; font-size: 0.9rem; }
.outra-porta.espaco-cliente svg { flex: none; width: 44px; height: 44px; padding: 9px; border: 1px solid var(--line); border-radius: 50%; }
.outra-porta.espaco-cliente:hover svg { background: var(--paper-deep); }
.outra-porta strong { display: block; font-weight: 400; }
.outra-porta small { color: var(--moss-soft); }
.erro-form { color: var(--erro); font-size: 0.9rem; }

/* ---- modal e aviso ---- */
#modal { position: fixed; inset: 0; background: rgba(30, 34, 27, 0.82); display: grid; place-items: center; padding: 20px; z-index: 20; }
#modal .caixa { width: min(1100px, 100%); background: var(--card); border-radius: 6px; overflow: hidden; }
#modal .topo { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; gap: 12px; }
#pano { width: 100%; height: min(70vh, 640px); background: #111; }
#aviso {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 30;
  background: var(--moss); color: var(--paper); padding: 12px 20px; border-radius: 4px; font-size: 0.92rem; max-width: 90vw;
}
#aviso.erro { background: var(--erro); }

@media (max-width: 820px) {
  .casca { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; }
  .lateral img { width: 96px; }
  .lateral nav { flex-direction: row; flex-wrap: wrap; }
  .lateral .pe { margin: 0 0 0 auto; grid-auto-flow: column; align-items: center; }
  .lateral .pe span { display: none; }
  .principal { padding: 24px 16px 60px; }
}