/* =========================================================
   Gestor de Projetos — tema da aplicação
   Sobre Bootstrap 5.3 em modo escuro.

   Paleta: carvão levemente quente + verde-azulado como primária.
   Fugimos do laranja saturado: aqui a cor forte fica reservada
   para SIGNIFICADO (atrasado, cancelado, retroativo), nunca para
   decoração. Se tudo é destaque, nada é.
   ========================================================= */

:root,
[data-bs-theme="dark"] {
  /* ---- superfícies ---- */
  --app-bg:        #14161A;   /* fundo da janela */
  --app-surface:   #1B1E24;   /* cards, sidebar */
  --app-raised:    #22262E;   /* cabeçalho de card, thead, hover */
  --app-border:    #2C313A;
  --app-border-sutil: #23272E;

  /* ---- texto ---- */
  --app-text:      #E7E9EC;
  --app-muted:     #949CA8;
  --app-faint:     #6B7280;

  /* ---- marca ---- */
  --app-primary:      #2FA98F;
  --app-primary-forte:#3BC2A6;
  --app-primary-sutil:rgba(47,169,143,.14);

  /* ---- semânticas ---- */
  --app-success:      #4FAE7B;
  --app-success-sutil:rgba(79,174,123,.14);
  --app-warning:      #D9A14A;
  --app-warning-sutil:rgba(217,161,74,.14);
  --app-danger:       #DC6B60;
  --app-danger-sutil: rgba(220,107,96,.14);
  --app-info:         #5D9CD6;
  --app-info-sutil:   rgba(93,156,214,.14);

  --app-sidebar-w:   248px;
  --app-sidebar-min: 68px;
  --app-topbar-h:    56px;
  --app-radius:      10px;

  /* ---- Bootstrap ---- */
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-body-font-family: "Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: .9rem;
  --bs-border-color: var(--app-border);
  --bs-secondary-color: var(--app-muted);
  --bs-emphasis-color: #fff;

  --bs-primary: var(--app-primary);
  --bs-primary-rgb: 47,169,143;
  --bs-success: var(--app-success);
  --bs-warning: var(--app-warning);
  --bs-danger:  var(--app-danger);
  --bs-info:    var(--app-info);

  --bs-link-color: var(--app-primary-forte);
  --bs-link-hover-color: #56D6BB;
  --bs-link-color-rgb: 59,194,166;

  --bs-code-color: var(--app-muted);
  --bs-tertiary-bg: var(--app-raised);
}

* { -webkit-font-smoothing: antialiased; }

body {
  background: var(--app-bg);
  font-feature-settings: "cv05", "ss01";
}

/* =========================================================
   ESTRUTURA
   ========================================================= */

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--app-sidebar-w);
  background: var(--app-surface);
  border-right: 1px solid var(--app-border-sutil);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  transition: width .18s ease, transform .18s ease;
}

.app-main {
  margin-left: var(--app-sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left .18s ease;
}

body.sidebar-recolhida .app-sidebar { width: var(--app-sidebar-min); }
body.sidebar-recolhida .app-main    { margin-left: var(--app-sidebar-min); }
body.sidebar-recolhida .so-aberta   { display: none; }

/* ---- marca ---- */
.app-marca {
  height: var(--app-topbar-h);
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--app-border-sutil);
  color: var(--app-text);
  text-decoration: none;
  flex: none;
}
.app-marca:hover { color: var(--app-text); }
.app-marca-icone {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--app-primary) 0%, #227D6C 100%);
  display: grid; place-items: center;
  color: #fff; font-size: .95rem;
  flex: none;
}
.app-marca-texto { font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }

/* ---- navegação ---- */
.app-nav {
  flex: 1;
  overflow-y: auto;
  padding: .85rem .6rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-nav-secao {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--app-faint);
  padding: .9rem .6rem .35rem;
  white-space: nowrap;
}
.app-nav a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .6rem;
  border-radius: 8px;
  color: var(--app-muted);
  text-decoration: none;
  font-size: .875rem;
  white-space: nowrap;
  position: relative;
}
.app-nav a i { font-size: 1rem; width: 18px; text-align: center; flex: none; }
.app-nav a:hover { background: var(--app-raised); color: var(--app-text); }
.app-nav a.ativo {
  background: var(--app-primary-sutil);
  color: var(--app-primary-forte);
  font-weight: 550;
}
.app-nav a.ativo::before {
  content: "";
  position: absolute;
  left: -.6rem; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--app-primary-forte);
}
.app-nav-contador {
  margin-left: auto;
  font-size: .72rem;
  color: var(--app-faint);
  background: var(--app-raised);
  border-radius: 20px;
  padding: 1px 7px;
}

.app-sidebar-rodape {
  padding: .75rem 1rem;
  border-top: 1px solid var(--app-border-sutil);
  font-size: .72rem;
  color: var(--app-faint);
  white-space: nowrap;
  flex: none;
}

/* ---- topo ---- */
.app-topbar {
  height: var(--app-topbar-h);
  position: sticky; top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 1.25rem;
  background: rgba(20,22,26,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--app-border-sutil);
}
.app-toggle {
  background: none; border: 0;
  color: var(--app-muted);
  width: 34px; height: 34px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 1.05rem;
}
.app-toggle:hover { background: var(--app-raised); color: var(--app-text); }
.app-titulo { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }

.app-content { padding: 1.5rem 1.25rem 3rem; flex: 1; }
.app-content > .container-fluid { max-width: 1500px; padding: 0; }

/* backdrop do menu no celular */
.app-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1035;
  display: none;
}
body.sidebar-aberta .app-backdrop { display: block; }

@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); width: var(--app-sidebar-w); }
  .app-main    { margin-left: 0; }
  body.sidebar-aberta .app-sidebar { transform: translateX(0); }
  body.sidebar-recolhida .app-sidebar { width: var(--app-sidebar-w); }
  body.sidebar-recolhida .app-main    { margin-left: 0; }
  body.sidebar-recolhida .so-aberta   { display: inline; }
  .app-content { padding: 1.15rem .9rem 3rem; }
}

/* =========================================================
   COMPONENTES
   ========================================================= */

.card {
  --bs-card-bg: var(--app-surface);
  --bs-card-border-color: var(--app-border-sutil);
  --bs-card-border-radius: var(--app-radius);
  --bs-card-inner-border-radius: calc(var(--app-radius) - 1px);
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.card-header {
  background: transparent;
  border-bottom-color: var(--app-border-sutil);
  color: var(--app-muted);
}

/* Só o que precisa de destaque ganha borda colorida */
.card.destaque-perigo  { border-color: rgba(220,107,96,.35); }
.card.destaque-aviso   { border-color: rgba(217,161,74,.35); }

/* ---- tabelas ---- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--app-border-sutil);
  --bs-table-hover-bg: rgba(255,255,255,.028);
  --bs-table-hover-color: var(--app-text);
  margin-bottom: 0;
}
.table > thead th {
  background: var(--app-raised);
  color: var(--app-muted);
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom-color: var(--app-border);
  padding: .6rem .75rem;
  white-space: nowrap;
}
.table > tbody td { padding: .6rem .75rem; vertical-align: middle; }
.table > :not(caption) > * > * { box-shadow: none; }
.card > .table-responsive:last-child .table > tbody > tr:last-child > td { border-bottom: 0; }

/* ---- badges: tinta suave, não bloco saturado ---- */
.badge {
  font-weight: 550;
  font-size: .715rem;
  letter-spacing: .01em;
  padding: .25em .6em;
  border-radius: 6px;
  border: 1px solid transparent;
}
.badge.text-bg-primary   { background: var(--app-primary-sutil) !important; color: var(--app-primary-forte) !important; border-color: rgba(47,169,143,.3); }
.badge.text-bg-success   { background: var(--app-success-sutil) !important; color: var(--app-success)  !important; border-color: rgba(79,174,123,.3); }
.badge.text-bg-warning   { background: var(--app-warning-sutil) !important; color: var(--app-warning)  !important; border-color: rgba(217,161,74,.3); }
.badge.text-bg-danger    { background: var(--app-danger-sutil)  !important; color: var(--app-danger)   !important; border-color: rgba(220,107,96,.3); }
.badge.text-bg-info      { background: var(--app-info-sutil)    !important; color: var(--app-info)     !important; border-color: rgba(93,156,214,.3); }
.badge.text-bg-secondary { background: var(--app-raised)        !important; color: var(--app-muted)    !important; border-color: var(--app-border); }
.badge.text-bg-light     { background: var(--app-raised)        !important; color: var(--app-muted)    !important; border-color: var(--app-border); }

/* ---- código: cinza discreto, não cor de marca ---- */
code {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: .8em;
  background: var(--app-raised);
  color: var(--app-muted);
  padding: .1rem .35rem;
  border-radius: 5px;
  border: 1px solid var(--app-border-sutil);
}

/* ---- botões ---- */
.btn { --bs-btn-font-size: .85rem; --bs-btn-border-radius: 8px; font-weight: 550; }
.btn-sm { --bs-btn-font-size: .8rem; --bs-btn-border-radius: 7px; }
.btn-primary {
  --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-forte); --bs-btn-hover-border-color: var(--app-primary-forte);
  --bs-btn-active-bg: #268a75; --bs-btn-color: #08140F; --bs-btn-hover-color: #08140F;
}
.btn-secondary {
  --bs-btn-bg: var(--app-raised); --bs-btn-border-color: var(--app-border);
  --bs-btn-hover-bg: #2A2F38; --bs-btn-hover-border-color: #3A414C;
  --bs-btn-color: var(--app-text); --bs-btn-hover-color: var(--app-text);
}
.btn-outline-secondary {
  --bs-btn-color: var(--app-muted); --bs-btn-border-color: var(--app-border);
  --bs-btn-hover-bg: var(--app-raised); --bs-btn-hover-border-color: #3A414C;
  --bs-btn-hover-color: var(--app-text);
}
.btn-outline-primary { --bs-btn-color: var(--app-primary-forte); --bs-btn-border-color: rgba(47,169,143,.45); --bs-btn-hover-bg: var(--app-primary-sutil); --bs-btn-hover-border-color: var(--app-primary); --bs-btn-hover-color: var(--app-primary-forte); }
.btn-outline-danger  { --bs-btn-color: var(--app-danger); --bs-btn-border-color: rgba(220,107,96,.4); --bs-btn-hover-bg: var(--app-danger-sutil); --bs-btn-hover-border-color: var(--app-danger); --bs-btn-hover-color: var(--app-danger); }
.btn-outline-warning { --bs-btn-color: var(--app-warning); --bs-btn-border-color: rgba(217,161,74,.4); --bs-btn-hover-bg: var(--app-warning-sutil); --bs-btn-hover-color: var(--app-warning); }

/* ---- formulários ---- */
.form-control, .form-select {
  background: var(--app-bg);
  border-color: var(--app-border);
  color: var(--app-text);
  border-radius: 8px;
  font-size: .875rem;
}
.form-control:focus, .form-select:focus {
  background: var(--app-bg);
  border-color: var(--app-primary);
  box-shadow: 0 0 0 3px var(--app-primary-sutil);
  color: var(--app-text);
}
.form-control:disabled, .form-control[readonly] { background: var(--app-raised); color: var(--app-muted); }
.form-control::placeholder { color: var(--app-faint); }
.form-label { font-size: .8rem; font-weight: 550; color: var(--app-muted); margin-bottom: .3rem; }
.form-text { font-size: .75rem; color: var(--app-faint); }
.form-check-input { background-color: var(--app-bg); border-color: var(--app-border); }
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }

/* ---- abas ---- */
.nav-pills {
  --bs-nav-pills-border-radius: 8px;
  --bs-nav-link-color: var(--app-muted);
  --bs-nav-pills-link-active-bg: var(--app-primary-sutil);
  --bs-nav-pills-link-active-color: var(--app-primary-forte);
  gap: .3rem;
  background: var(--app-surface);
  padding: .3rem;
  border-radius: 10px;
  border: 1px solid var(--app-border-sutil);
  display: inline-flex;
}
.nav-pills .nav-link { font-size: .85rem; font-weight: 550; padding: .4rem .85rem; }
.nav-pills .nav-link:hover { color: var(--app-text); }

/* ---- alertas: faixa lateral, sem bloco chapado ---- */
.alert {
  border: 1px solid var(--app-border-sutil);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--app-surface);
  color: var(--app-text);
  font-size: .865rem;
}
.alert-success { border-left-color: var(--app-success); background: var(--app-success-sutil); }
.alert-warning { border-left-color: var(--app-warning); background: var(--app-warning-sutil); }
.alert-danger  { border-left-color: var(--app-danger);  background: var(--app-danger-sutil); }
.alert-info    { border-left-color: var(--app-info);    background: var(--app-info-sutil); }
.alert-secondary { border-left-color: var(--app-border); background: var(--app-raised); }
.alert strong { color: var(--app-text); }

/* ---- progresso ---- */
.progress {
  background: var(--app-raised);
  border-radius: 20px;
  overflow: hidden;
}
.progress-bar { background: var(--app-primary); }
.progress-bar.bg-success { background: var(--app-success) !important; }
.progress-bar.bg-primary { background: var(--app-info) !important; }
.progress-bar.bg-secondary { background: #3A414C !important; }

/* ---- utilitários ---- */
.text-body-secondary { color: var(--app-muted) !important; }
.text-success { color: var(--app-success) !important; }
.text-warning { color: var(--app-warning) !important; }
.text-danger  { color: var(--app-danger)  !important; }
.text-primary { color: var(--app-primary-forte) !important; }
.border-top, .border-bottom, .border-start, .border-end { border-color: var(--app-border-sutil) !important; }
hr { border-color: var(--app-border-sutil); opacity: 1; }
.dropdown-menu {
  --bs-dropdown-bg: var(--app-surface);
  --bs-dropdown-border-color: var(--app-border);
  --bs-dropdown-link-color: var(--app-text);
  --bs-dropdown-link-hover-bg: var(--app-raised);
  --bs-dropdown-border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
  font-size: .875rem;
}

/* faixa de frente (raia) na tela do projeto */
.faixa-frente {
  background: var(--app-raised);
  border-bottom: 1px solid var(--app-border-sutil);
}

/* cartão-número clicável do resumo */
a.cartao-numero { text-decoration: none; display: block; }
a.cartao-numero .card { transition: border-color .15s ease, transform .15s ease; }
a.cartao-numero:hover .card { border-color: var(--app-border); transform: translateY(-1px); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--app-bg); }
::-webkit-scrollbar-thumb { background: #333942; border-radius: 10px; border: 2px solid var(--app-bg); }
::-webkit-scrollbar-thumb:hover { background: #414954; }

:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* =========================================================
   GRÁFICOS
   Marcas finas, tinta recessiva, cor só onde carrega sentido.
   ========================================================= */

.graf-barra {
  display: flex;
  gap: 2px;                 /* respiro entre segmentos empilhados */
  background: #2A2F38;
  border-radius: 20px;
  overflow: hidden;
}
.graf-seg { display: block; border-radius: 20px; }
.graf-trilho { background: #2A2F38; border-radius: 20px; }

.graf-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.1rem;
  margin-top: .55rem;
  font-size: .78rem;
  color: var(--app-muted);
}
.graf-legenda span { display: inline-flex; align-items: center; gap: .4rem; }
.graf-legenda i {
  width: 10px; height: 10px;
  border-radius: 3px;
  display: inline-block;
  flex: none;
}
.graf-legenda i.tracejado {
  width: 16px; height: 0;
  border-top: 2px dashed var(--app-muted);
  border-radius: 0;
}
.graf-legenda b { color: var(--app-text); font-weight: 600; }

.graf-wrap { position: relative; }
.graf-linha { display: block; width: 100%; height: auto; }
.graf-alvo { cursor: crosshair; }

.graf-tooltip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%);
  background: var(--app-raised);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  padding: .45rem .6rem;
  font-size: .75rem;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
  transition: opacity .1s ease;
  z-index: 5;
}
.graf-tooltip .t-data { color: var(--app-muted); margin-bottom: .15rem; }
.graf-tooltip .t-linha { display: flex; justify-content: space-between; gap: 1rem; }
.graf-tooltip b { color: var(--app-text); }

.graf-vazio {
  text-align: center;
  padding: 1.4rem 1rem;
  color: var(--app-muted);
}
.graf-vazio i { font-size: 1.8rem; opacity: .5; }
.graf-vazio p { margin: .6rem 0 0; font-size: .85rem; }

/* Número-destaque de um painel */
.numero-destaque {
  font-size: 1.9rem;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.rotulo-destaque {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--app-muted);
}
/* Inferência: o que é estimativa nunca se parece com fato */
.inferencia {
  font-style: italic;
  color: var(--app-warning);
}
.inferencia-tag {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--app-warning);
  border: 1px solid rgba(217,161,74,.35);
  background: var(--app-warning-sutil);
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
}

/* Legenda da barra: lista com números alinhados à direita */
.graf-lista {
  list-style: none;
  margin: .7rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.graf-lista li {
  display: grid;
  grid-template-columns: 10px 1fr auto 44px;
  align-items: center;
  gap: .55rem;
  font-size: .8rem;
}
.graf-lista i {
  width: 10px; height: 10px;
  border-radius: 3px;
  display: block;
}
.graf-lista .rot { color: var(--app-muted); }
.graf-lista b {
  color: var(--app-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.graf-lista .pct {
  color: var(--app-faint);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* =========================================================
   GANTT
   ========================================================= */
/* O rotulo que abre/fecha e um link, e o navegador sublinha link dentro
   de SVG como sublinha fora. O risco embaixo do nome de cada projeto e
   de cada fase era isso — nao um separador de linha. */
.gantt a { text-decoration: none; }
.gantt a:hover text { fill: #FFFFFF; }

.gantt-wrap { overflow-x: auto; }
.gantt { display: block; min-width: 900px; width: 100%; height: auto; }
.gantt rect[fill^="url"] { }
.graf-legenda i.hachurado {
  background: repeating-linear-gradient(45deg, #5691CE 0 3px, #1B1E24 3px 6px);
}
.graf-legenda i.losango {
  width: 10px; height: 10px;
  border-radius: 2px;
  transform: rotate(45deg);
}
.graf-legenda i.ponto {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #4C545F;
  border: 1.5px solid #1B1E24;
}

/* =========================================================
   MATRIZ DE RISCO  (probabilidade x impacto)

   A cor da celula e apoio, nunca a informacao sozinha: o numero
   da severidade fica escrito em toda celula, e a legenda abaixo
   nomeia as quatro faixas com seus intervalos.
   ========================================================= */
.risco-matriz-wrap { overflow-x: auto; }

.risco-matriz {
  border-collapse: separate;
  border-spacing: 3px;
  width: 100%;
  min-width: 720px;
}

.risco-cel {
  vertical-align: top;
  padding: .4rem .45rem;
  border-radius: 8px;
  min-width: 116px;
  height: 74px;
  position: relative;
  border: 1px solid transparent;
}

.risco-sev {
  position: absolute;
  top: .3rem;
  right: .45rem;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  opacity: .55;
}

.risco-cel.risco-vazia { opacity: .4; }

.risco-success { background: var(--app-success-sutil); border-color: rgba(79,174,123,.30); }
.risco-info    { background: var(--app-info-sutil);    border-color: rgba(93,156,214,.30); }
.risco-warning { background: var(--app-warning-sutil); border-color: rgba(217,161,74,.30); }
.risco-danger  { background: var(--app-danger-sutil);  border-color: rgba(220,107,96,.32); }

.risco-chip {
  display: block;
  font-size: .74rem;
  line-height: 1.25;
  padding: .18rem .35rem;
  margin-bottom: .18rem;
  border-radius: 5px;
  background: var(--app-surface);
  color: var(--app-text);
  text-decoration: none;
  border: 1px solid var(--app-border-sutil);
}
.risco-chip:hover { border-color: var(--app-primary); color: var(--app-primary-forte); }

.risco-rot-linha,
.risco-rot-coluna {
  font-weight: 500;
  font-size: .78rem;
  color: var(--app-muted);
  white-space: nowrap;
}
.risco-rot-linha  { text-align: right; padding-right: .5rem; width: 108px; }
.risco-rot-coluna { text-align: center; padding-top: .35rem; }
.risco-rot-linha span,
.risco-rot-coluna span { display: block; font-size: .7rem; color: var(--app-faint); font-weight: 400; }

.risco-eixo-canto {
  width: 22px;
  text-align: center;
  color: var(--app-faint);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.risco-eixo-canto span { writing-mode: vertical-rl; transform: rotate(180deg); }

.risco-eixo-baixo {
  text-align: center;
  color: var(--app-faint);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding-top: .35rem;
}

.risco-legenda {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid var(--app-border);
}

/* =========================================================
   TERMO — a folha do documento na tela

   Aqui a pagina imita papel: fundo claro e texto escuro, mesmo no
   tema escuro do sistema. E de proposito — o que se ve na tela e o
   que sai impresso e no .docx, e conferir um documento contra o
   original e mais facil quando os dois tem a mesma aparencia.
   ========================================================= */
.termo-folha {
  background: #FFFFFF;
  color: #1A1D22;
  border-radius: var(--app-radius);
  border: 1px solid var(--app-border);
  padding: 40px 44px 52px;
  max-width: 980px;
  font-size: .9rem;
  line-height: 1.55;
}

.termo-cabecalho { text-align: center; border-bottom: 2px solid #C9A227; padding-bottom: 10px; }
.termo-marca     { font-size: 1.25rem; font-weight: 700; letter-spacing: .08em; color: #1A1D22; }
.termo-empresas  { font-size: .72rem; color: #5A6270; margin-top: 2px; }

.termo-faixa {
  background: #1A1D22; color: #fff; text-align: center;
  padding: 9px; margin: 22px 0 18px;
  font-weight: 600; letter-spacing: .1em; font-size: .86rem;
}

.termo-titulo { font-size: 1.35rem; font-weight: 700; text-align: center; margin: 0 0 4px; color: #1A1D22; }
.termo-nota   { text-align: center; font-size: .78rem; color: #5A6270; margin: 0 0 20px; }

.termo-secao {
  font-size: .92rem; font-weight: 700; color: #1A1D22;
  background: #EEF1F5; border-left: 4px solid #C9A227;
  padding: 6px 10px; margin: 22px 0 8px;
}

.termo-bloco  { margin: 0 0 6px; }
.termo-bloco ul { margin: 4px 0 10px; padding-left: 22px; }
.termo-rotulo { font-weight: 600; margin: 8px 0 2px; }
.termo-objetivo { margin: 0 0 4px; }
.termo-observacao { font-size: .76rem; color: #5A6270; margin: 0 0 4px; }
.termo-local  { margin: 14px 0 30px; }

.termo-capa, .termo-tabela, .termo-metas {
  width: 100%; border-collapse: collapse; margin: 6px 0 4px;
}
.termo-capa th, .termo-capa td,
.termo-tabela th, .termo-tabela td,
.termo-metas th, .termo-metas td {
  border: 1px solid #C8CDD6; padding: 6px 9px; vertical-align: top;
  font-size: .8rem; color: #1A1D22;
}
.termo-capa th, .termo-tabela thead th, .termo-metas th {
  background: #EEF1F5; font-weight: 600; text-align: left;
}
.termo-metas ul { margin: 4px 0 0; padding-left: 20px; }
.termo-tabela td { font-variant-numeric: tabular-nums; }
.termo-categoria td { background: #F4F6F9; font-weight: 600; }
.termo-subtotal td  { background: #EEF1F5; font-weight: 600; }
.termo-stakeholders th, .termo-stakeholders td { font-size: .73rem; }

/* a lacuna nao pode passar por conteudo: e sempre visivel como falta */
.termo-lacuna {
  background: #FDF3D7; color: #8A6100;
  border: 1px dashed #D9A14A; border-radius: 3px;
  padding: 0 5px; font-size: .95em; white-space: nowrap;
}

.termo-assinaturas { display: flex; gap: 26px; margin-top: 44px; }
.termo-assinatura  { flex: 1; text-align: center; }
.termo-linha       { border-top: 1px solid #1A1D22; margin-bottom: 5px; }
.termo-nome        { font-weight: 600; font-size: .82rem; }
.termo-cargo       { font-size: .74rem; color: #5A6270; }

@media print {
  .app-sidebar, .app-topbar, .app-backdrop, .d-print-none { display: none !important; }
  .app-main { margin-left: 0 !important; }
  body { background: #fff !important; }
  .termo-folha { border: 0; padding: 0; max-width: none; border-radius: 0; }
  .termo-lacuna { background: none; color: #000; }
}

/* =========================================================
   ORCAMENTO — divisa entre os grupos de colunas

   Mao de Obra, Materiais e Custos Fixos sao tres blocos de
   significado diferente dentro da mesma linha. Sem uma divisa,
   "Unidades" facilmente e lido como parte da mao de obra.
   ========================================================= */
.col-grupo { border-left: 2px solid var(--app-border) !important; }

.termo-tabela .col-grupo { border-left: 2px solid #8B93A1 !important; }

/* o recorte impresso: diz, no papel, que aquele quadro nao e o projeto inteiro */
.termo-recorte {
  text-align: center;
  font-size: .78rem;
  color: #1A1D22;
  background: #EEF1F5;
  border: 1px solid #C8CDD6;
  border-radius: 4px;
  padding: 4px 10px;
  margin: 0 auto 18px;
  display: table;
}

/* =========================================================
   AJUDA — passo a passo e notas
   ========================================================= */
.ajuda-passos {
  padding-left: 1.15rem;
  margin-bottom: 0;
}
.ajuda-passos li {
  margin-bottom: .5rem;
  line-height: 1.55;
}
.ajuda-passos li::marker {
  color: var(--app-primary);
  font-weight: 600;
}

.ajuda-saber {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.ajuda-saber li {
  position: relative;
  padding: .5rem .7rem .5rem 2rem;
  margin-bottom: .4rem;
  background: var(--app-raised);
  border-left: 3px solid var(--app-warning);
  border-radius: 0 6px 6px 0;
  line-height: 1.5;
  font-size: .9rem;
}
.ajuda-saber li::before {
  content: "\F332";                 /* bi-lightbulb */
  font-family: "bootstrap-icons";
  position: absolute;
  left: .65rem;
  top: .5rem;
  color: var(--app-warning);
  font-size: .85rem;
}

#modal-ajuda .modal-content { background: var(--app-surface); }
#modal-ajuda .modal-header,
#modal-ajuda .modal-footer { border-color: var(--app-border-sutil); }

kbd {
  background: var(--app-raised);
  border: 1px solid var(--app-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: .8em;
  color: var(--app-text);
}

/* =========================================================
   RACI — caixas de multipla escolha

   Caixa com rolagem propria: com 20 pessoas o cartao lateral
   nao pode crescer sem parar e empurrar o resto da tela.
   ========================================================= */
.raci-caixa{
  max-height:150px;
  overflow-y:auto;
  border:1px solid var(--app-border);
  border-radius:6px;
  padding:.45rem .6rem;
  background:var(--app-bg);
}
.raci-caixa .form-check{margin-bottom:.15rem}
.raci-caixa .form-check-label{font-size:.88rem}
.raci-caixa::-webkit-scrollbar{width:8px}
.raci-caixa::-webkit-scrollbar-thumb{background:var(--app-border);border-radius:4px}

/* =========================================================
   ARVORE DE TAREFAS

   O recuo mostra a hierarquia; a seta abre e fecha. Como a
   tabela e plana no HTML, o parentesco vive nos data-* e o
   JS resolve — nao da para aninhar <tr> dentro de <tr>.
   ========================================================= */
.arv-recuo{display:inline-block;vertical-align:middle}
.arv-seta{
  background:none;border:0;padding:0 5px 0 0;color:var(--app-muted);
  font-size:.78rem;line-height:1;cursor:pointer;vertical-align:middle;
}
.arv-seta:hover{color:var(--app-primary)}
.arv-seta[aria-expanded="false"] i{transform:rotate(-90deg);display:inline-block}
.arv-traco{
  display:inline-block;width:11px;height:1px;background:var(--app-border);
  margin:0 6px 3px 2px;vertical-align:middle;
}
tr.tarefa-arvore[data-nivel="0"] td:first-child{font-weight:500}

/* =========================================================
   BARRA DE PROGRESSO: ATRASO E PREVISTO

   Duas informacoes que o percentual sozinho esconde.

   A HACHURA marca a parte do trabalho que ja passou do prazo.
   E textura, nao cor: quem nao distingue bem as cores continua
   vendo a diferenca, e no preto e branco de um relatorio
   impresso ela sobrevive.

   O MARCADOR e a linha vertical do percentual previsto sobre a
   barra do realizado. Sem ele, "62% concluido" nao diz nada —
   62% pode ser adiantado ou atrasado, e o numero e o mesmo.
   ========================================================= */
.progress-bar.hachurada{
  background-image:repeating-linear-gradient(
    45deg,
    rgba(0,0,0,.28) 0, rgba(0,0,0,.28) 3px,
    transparent 3px, transparent 7px
  );
}

/* a barra precisa de position:relative para o marcador ancorar */
.progress.com-marcador{position:relative;overflow:visible}
.progress.com-marcador .marcador-previsto{
  position:absolute;top:-3px;bottom:-3px;width:2px;
  background:var(--app-text);opacity:.85;border-radius:1px;
  pointer-events:none;
}
.progress.com-marcador .marcador-previsto::after{
  content:"";position:absolute;left:-2px;top:-3px;
  border-left:3px solid transparent;border-right:3px solid transparent;
  border-top:4px solid var(--app-text);
}