/* projetos: lista por cliente, quadro, gantt, carga e horas + cronômetro */
.kpi-ic.green, .c-green { background: var(--okb); border-color: var(--okbd); color: var(--ok2); }
.pj-kpis, .pj-kpis-h { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.pj-kpi { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--bd); border-radius: 14px; background: var(--surface); }
.pj-kpi > div { display: flex; flex-direction: column; min-width: 0; }
.pj-kpi small { color: var(--mt); font-size: 12px; }
.pj-kpi b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pj-kpi b.t { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.pj-kpi span { color: var(--mt2); font-size: 11.5px; }
.pj-corpo { display: flex; flex-direction: column; gap: 14px; }
.pj-nota { display: flex; align-items: center; gap: 6px; }

/* lista por cliente */
.pj-grupo { padding: 0 !important; overflow: hidden; }
.pj-grupo > header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--bd); }
.pj-grupo > header > div:first-of-type { flex: 1; min-width: 0; }
.pj-grupo h2 { font-size: 15px; }
.err-t { color: var(--er); font-weight: 600; }
.pj-prog { display: flex; align-items: center; gap: 10px; width: 180px; }
.pj-prog > div { flex: 1; height: 6px; overflow: hidden; border-radius: 6px; background: var(--sf3); }
.pj-prog i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ok), var(--ok2)); }
.pj-prog span { color: var(--mt); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pj-linhas { display: flex; flex-direction: column; }
.pj-linha { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px 118px 64px 34px; align-items: center; gap: 12px; min-height: 56px; padding: 8px 18px; border-bottom: 1px solid var(--bd); cursor: pointer; transition: background var(--ease); }
.pj-linha:last-child { border-bottom: 0; }
.pj-linha:hover { background: rgba(255, 255, 255, .02); }
.pj-linha.feito .pj-tit b { color: var(--mt); text-decoration: line-through; text-decoration-color: var(--mt2); }
.pj-st { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid; border-radius: 8px; font-size: 14px; }
.pj-tit { display: flex; flex-direction: column; min-width: 0; }
.pj-tit b { overflow: hidden; font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.pj-tit small { display: flex; align-items: center; gap: 4px; color: var(--mt2); font-size: 11.5px; }
.pj-tit small i { font-size: 13px; }
.pj-resp { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--acb); color: var(--ac2); font-size: 10px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--acbd); }
.pj-resp.time { background: var(--pub); color: var(--pu); box-shadow: inset 0 0 0 1px rgba(182, 161, 247, .25); }
.pj-resp i { font-size: 14px; }
.pj-prazo { display: inline-flex; align-items: center; gap: 5px; color: var(--mt); font-size: 12px; white-space: nowrap; }
.pj-prazo i { font-size: 14px; }
.pj-prazo.err { color: var(--er); font-weight: 600; }
.pj-prazo.warn { color: var(--al); }
.pj-horas { color: var(--mt); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.pj-play { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--bd2); border-radius: 50%; color: var(--mt); font-size: 12px; }
.pj-play:hover { border-color: var(--okbd); color: var(--ok2); background: var(--okb); }
.pj-play.on { border-color: var(--ok); background: var(--ok); color: #04150e; animation: pulsa 1.6s ease infinite; }
@keyframes pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .45); } 50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } }

/* quadro */
.pj-quadro { grid-auto-columns: minmax(240px, 1fr); }
.st-afazer .fun-ponto { background: var(--mt2); }
.st-fazendo .fun-ponto { background: var(--info); }
.st-revisao .fun-ponto { background: var(--pu); }
.st-travada .fun-ponto { background: var(--er); }
.st-feito .fun-ponto { background: var(--ok); }
.pj-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--bd); border-radius: 11px; background: var(--sf2); cursor: pointer; }
.pj-card[draggable] { cursor: grab; }
.pj-card:hover { border-color: var(--bd2); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.pj-card.arrastando { opacity: .45; }
.pj-card-top { display: flex; align-items: flex-start; gap: 9px; }
.pj-card-top b { font-size: 13px; font-weight: 500; line-height: 1.4; }
.pj-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pj-card-meta .pj-horas { margin-left: auto; }
.pj-card-meta .pj-play { width: 26px; height: 26px; margin-left: auto; }
.pj-card-meta .pj-horas + .pj-play { margin-left: 0; }

/* gantt */
.gt { padding: 0 !important; overflow: hidden; }
.gt-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--bd); }
.gt-topo .muted { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.gt-corpo { display: flex; max-height: calc(100dvh - 300px); min-height: 280px; overflow-y: auto; }
.gt-nomes { position: sticky; left: 0; z-index: 2; flex: none; width: 270px; border-right: 1px solid var(--bd); background: var(--sf); }
.gt-cab { position: sticky; top: 0; z-index: 3; height: 52px; border-bottom: 1px solid var(--bd); background: var(--sf); }
.gt-g { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--bd); background: rgba(255, 255, 255, .02); color: var(--mt); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.gt-g small { padding: 0 6px; border-radius: 5px; background: var(--sf3); font-size: 10px; }
.gt-n { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; border-bottom: 1px solid rgba(39, 44, 53, .6); cursor: pointer; font-size: 12.5px; }
.gt-n span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-n:hover { background: rgba(255, 255, 255, .02); }
.gt-n .pj-resp { width: 22px; height: 22px; font-size: 9px; }
.gt-scroll { flex: 1; overflow-x: auto; overflow-y: visible; }
.gt-area { position: relative; }
.gt-area > .gt-cab .c1, .gt-area > .gt-cab .c2 { position: relative; height: 26px; }
.gt-area > .gt-cab span { position: absolute; top: 0; height: 26px; line-height: 26px; color: var(--mt2); font-size: 11px; white-space: nowrap; }
.gt-area > .gt-cab .c1 span { padding-left: 8px; border-left: 1px solid var(--bd); color: var(--mt); font-weight: 500; }
.gt-area > .gt-cab .c2 span { text-align: center; }
.gt-area > .gt-cab .c2 span.hoje { border-radius: 6px; background: var(--ac); color: #1a0800; font-weight: 700; }
.gt-area > .gt-cab .c2 span.mes { padding-left: 6px; color: var(--ac2); font-weight: 600; text-transform: uppercase; }
.gt-linhas { position: relative; }
.gt-fds { position: absolute; top: 0; bottom: 0; background: rgba(255, 255, 255, .018); pointer-events: none; }
.gt-sem { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--bd); pointer-events: none; }
.gt-hoje { position: absolute; top: 0; bottom: 0; z-index: 1; width: 2px; margin-left: -1px; background: var(--ac); box-shadow: 0 0 12px rgba(255, 106, 0, .5); pointer-events: none; }
.gt-linhas > .gt-g { background: rgba(255, 255, 255, .02); }
.gt-l { position: relative; height: 40px; border-bottom: 1px solid rgba(39, 44, 53, .6); }
.gt-bar { position: absolute; top: 8px; z-index: 2; display: flex; align-items: center; height: 24px; padding: 0 10px; overflow: hidden; border-radius: 7px; background: var(--sf3); color: var(--tx); font-size: 11.5px; font-weight: 500; white-space: nowrap; cursor: grab; touch-action: none; user-select: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.gt-bar span { overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.gt-bar.arrastando { cursor: grabbing; z-index: 5; box-shadow: 0 8px 24px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .2); }
.gt-bar.st-afazer { background: linear-gradient(90deg, #3a4150, #2c323d); }
.gt-bar.st-fazendo { background: linear-gradient(90deg, #2f6fc0, #3987e5); }
.gt-bar.st-revisao { background: linear-gradient(90deg, #7b63c9, #9a83e8); }
.gt-bar.st-travada { background: linear-gradient(90deg, #a5434c, #c9545e); }
.gt-bar.st-feito { background: linear-gradient(90deg, #0d7a57, #10b981); opacity: .7; }
.gt-bar.atrasada { box-shadow: inset 0 0 0 2px var(--er); }
.gt-al { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; }
.gt-al.e { left: 0; }
.gt-al.d { right: 0; }
.gt-al::after { content: ''; position: absolute; top: 7px; bottom: 7px; left: 3px; width: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); opacity: 0; transition: opacity var(--ease); }
.gt-bar:hover .gt-al::after { opacity: 1; }
.gt-sem-prazo { position: absolute; top: 10px; display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 8px; border: 1px dashed var(--bd2); border-radius: 6px; color: var(--mt2); font-size: 10.5px; white-space: nowrap; cursor: grab; touch-action: none; user-select: none; }

/* carga */
.pj-carga td.cg { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mt2); }
.pj-carga td.n1 { background: rgba(57, 135, 229, .08); color: var(--tx); }
.pj-carga td.n2 { background: rgba(57, 135, 229, .16); color: var(--tx); }
.pj-carga td.n3 { background: rgba(57, 135, 229, .26); color: #fff; }
.pj-carga td.n4, .pj-carga td.n5, .pj-carga td.n6 { background: rgba(255, 106, 0, .3); color: #fff; }
.pj-carga td.atr:not(.n0) { background: var(--erb); color: var(--er); }
.pj-carga tbody tr { cursor: default; }
.pj-carga th.num button { justify-content: center; }

/* horas */
.pj-horas-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pj-horas-topo .seg { margin-right: auto; }
.pj-h-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }
.hd-barras { display: flex; align-items: flex-end; gap: 6px; height: 200px; padding-top: 18px; }
.hd-col { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; min-width: 0; }
.hd-col i { display: block; width: 100%; max-width: 34px; min-height: 2px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #5a9ef0, #3987e5); transform-origin: bottom; }
.hd-col.hoje i { background: linear-gradient(180deg, var(--ac2), var(--ac)); }
.hd-col small { color: var(--mt2); font-size: 10.5px; }
.hd-v { color: var(--mt); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hc-lista { display: flex; flex-direction: column; gap: 12px; }
.hc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 64px; align-items: center; gap: 10px; font-size: 13px; }
.hc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc > div { height: 8px; overflow: hidden; border-radius: 8px; background: var(--sf3); }
.hc i { display: block; height: 100%; border-radius: inherit; background: var(--pu); }
.hc b { text-align: right; font-variant-numeric: tabular-nums; }
.linha.hl .hl-dur { font-variant-numeric: tabular-nums; }
.linha.hl.rodando { border-color: var(--okbd); background: var(--okb); }

/* cronômetro na barra do topo */
.tb-timer { max-width: 280px; }
.tb-timer i { flex: none; font-size: 13px; }
.tbt-rel { flex: none; }
.tbt-t { overflow: hidden; color: var(--mt); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.tb-timer:hover { background: rgba(16, 185, 129, .16); }

@media (max-width: 1100px) { .pj-h-grid { grid-template-columns: 1fr; } .tbt-t { display: none; } }
@media (max-width: 900px) {
  .pj-linha { grid-template-columns: 28px minmax(0, 1fr) 30px; grid-template-areas: 'st tit play' 'st meta meta'; row-gap: 4px; padding: 10px 14px; }
  .pj-linha .pj-st { grid-area: st; align-self: start; }
  .pj-linha .pj-tit { grid-area: tit; }
  .pj-linha .pj-play { grid-area: play; }
  .pj-linha .pj-resp { display: none; }
  .pj-linha .pj-prazo, .pj-linha .pj-horas { grid-row: 2; }
  .pj-linha .pj-prazo { grid-column: 2; }
  .pj-linha .pj-horas { grid-column: 3; }
  .pj-grupo > header { flex-wrap: wrap; }
  .pj-prog { width: 100%; }
  .gt-nomes { width: 150px; }
  .gt-topo .muted { display: none; }
  #tab-projetos .head-acts .seg { overflow-x: auto; width: 100%; }
}
@media (max-width: 900px) {
  .pj-kpis, .pj-kpis-h { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pj-kpi { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
  .pj-kpi .kpi-ic.sm { width: 32px; height: 32px; font-size: 16px; }
  .pj-kpi b { font-size: 19px; }
}