/* ============================================================
   TreeSec — ptaas.css
   Estilo unico da pagina PTaaS (pentest continuo).
   Carrega depois de base.css e de _service.css.

   Componentes proprios desta pagina:
     .pt-console  — mockup do painel, no hero (secao ESCURA)
     .win         — comparacao "janela de exposicao" (secao ESCURA)
     .mh          — grid maquina x humano  (secao CLARA -> tokens --c-*)
     .proof       — caixa de prova/citacao (secao CLARA -> tokens --c-*)
     .delta       — mockup "delta de superficie" (secao ESCURA)
     .plan-grid   — os tres formatos      (secao CLARA -> tokens --c-*)

   Regra do @media (ver CLAUDE.md): todo seletor que esta folha redeclara
   no topo tem o @media dele AQUI e DEPOIS da regra de topo. Um @media no
   base.css perderia, porque esta folha carrega inteira depois dele.
   ============================================================ */

:root{
  --pt-ok:#4ade80;
  --pt-warn:#fbbf24;
  --pt-bad:#f87171;
  --pt-blue:#63b3ff;
}

/* ---------- HERO ---------- */
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:center}

.hero h1{margin:20px 0 0}

.hero .lead{margin:22px 0 0}

.hero-note{margin-top:24px; font-size:.85rem; color:var(--c-muted)}

/* ---------- CONSOLE (hero, fundo escuro) ---------- */
.pt-console{border:1px solid var(--ring); border-radius:16px; overflow:hidden; background:#0d1728; box-shadow:var(--shadow); font-family:var(--mono); max-width:520px; margin-left:auto; width:100%}

.pt-console-bar{display:flex; align-items:center; gap:10px; padding:10px 14px; background:rgba(255,255,255,.04); border-bottom:1px solid var(--ring)}

.pt-dot{width:9px; height:9px; border-radius:50%; background:var(--pt-ok); box-shadow:0 0 0 3px rgba(74,222,128,.16); flex-shrink:0}

.pt-console-title{flex:1; min-width:0; font-size:11px; color:#9fb0c7; letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.pt-live{font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--pt-ok); border:1px solid rgba(74,222,128,.32); background:rgba(74,222,128,.08); border-radius:999px; padding:2px 8px; flex-shrink:0}

.pt-console-body{padding:16px 14px 12px}

.pt-cycle{font-size:13px; font-weight:700; color:#f4f7fb; margin-bottom:14px}

.pt-cycle span{display:block; font-weight:400; font-size:11px; color:#68799a; margin-top:3px}

.pt-lines{list-style:none; margin:0; padding:0; display:grid; gap:8px}

.pt-lines li{display:flex; align-items:center; gap:9px; padding:9px 10px; border:1px solid var(--ring); border-radius:9px; background:rgba(255,255,255,.02); font-size:11.5px}

.pt-ico{width:18px; height:18px; border-radius:5px; display:grid; place-items:center; font-size:11px; font-weight:700; flex-shrink:0}

.pt-ico.ok{background:rgba(74,222,128,.14); color:var(--pt-ok)}

.pt-ico.run{background:rgba(99,179,255,.14); color:var(--pt-blue)}

.pt-ico.warn{background:rgba(251,191,36,.14); color:var(--pt-warn)}

.pt-l{flex:1; min-width:0; color:#cbd5e1}

.pt-v{color:#f4f7fb; font-size:10.5px; text-align:right; word-break:break-word}

.pt-console-foot{margin-top:12px; padding-top:10px; border-top:1px solid var(--ring); font-size:10px; color:#68799a}

/* ---------- JANELA DE EXPOSICAO (secao escura) ---------- */
.win{border:1px solid var(--c-line); border-radius:20px; background:var(--c-card-grad); box-shadow:var(--c-shadow); padding:24px; max-width:900px; margin:0 auto}

.win-row{display:grid; grid-template-columns:180px 1fr; gap:18px; align-items:center}

.win-row + .win-row{margin-top:12px}

.win-lbl{font-size:14px; font-weight:700; color:var(--c-fg); line-height:1.25}

.win-lbl span{display:block; font-weight:400; font-size:11.5px; color:var(--c-faint); margin-top:2px}

.win-track{display:grid; grid-template-columns:repeat(12,1fr); gap:4px; padding:4px; border-radius:10px}

/* a faixa e' o FUNDO da trilha; as celulas sao transparentes e deixam
   ela aparecer. Assim a rampa de exposicao e' uma unica declaracao em
   vez de doze celulas com opacidade calculada uma a uma. */
.win-track.is-point{background:linear-gradient(90deg, rgba(224,53,53,.10) 0%, rgba(224,53,53,.62) 100%)}

.win-track.is-cont{background:rgba(74,222,128,.10)}

.win-track.is-plain{background:none; padding-top:0; padding-bottom:0}

.win-cell{height:36px; border-radius:6px; border:1px solid rgba(255,255,255,.10); display:grid; place-items:center; font-family:var(--mono); font-size:9px; letter-spacing:.02em; color:rgba(244,247,251,.5); overflow:hidden}

.win-cell.is-head{height:auto; border:0; color:var(--c-faint); font-size:9.5px; text-transform:uppercase}

.win-cell.is-test{background:linear-gradient(180deg,#1c7f4b,#14603a); border-color:rgba(74,222,128,.5); color:#d1fae5; font-weight:700}

.win-cell.is-cycle{background:linear-gradient(180deg,#123a63,#0d2a49); border-color:rgba(99,179,255,.45); color:#bfdbfe; font-weight:700}

.win-cell.is-watch{border-color:rgba(74,222,128,.22)}

.win-legend{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:18px; padding-top:16px; border-top:1px solid var(--c-line); font-size:12px; color:var(--c-muted)}

.win-legend span{display:inline-flex; align-items:center; gap:7px}

.lg{width:12px; height:12px; border-radius:4px; border:1px solid rgba(255,255,255,.14); flex-shrink:0}

.lg-test{background:linear-gradient(180deg,#123a63,#0d2a49); border-color:rgba(99,179,255,.45)}

.lg-watch{background:rgba(74,222,128,.18); border-color:rgba(74,222,128,.32)}

.lg-blind{background:rgba(224,53,53,.42); border-color:rgba(224,53,53,.5)}

.win-foot{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px}

.win-stat{background:rgba(255,255,255,.03); border:1px solid var(--c-line); border-radius:12px; padding:12px 14px}

.win-stat b{display:block; font-size:20px; font-weight:800; line-height:1.1}

.win-stat b.ok{color:var(--pt-ok)}

.win-stat b.bad{color:var(--pt-bad)}

.win-stat span{display:block; font-size:11.5px; color:var(--c-muted); margin-top:4px; line-height:1.35}

/* ---------- MAQUINA x HUMANO (secao clara) ---------- */
.mh{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}

.mh-card{background:var(--c-card-grad); border:1px solid var(--c-line); border-radius:18px; padding:24px; box-shadow:var(--c-shadow)}

.mh-card.is-human{border-color:rgba(4,107,210,.28)}

.mh-head{margin-bottom:14px}

.mh-head h3{font-size:1.12rem; font-weight:800; margin:10px 0 0; color:var(--c-fg)}

.mh-tag{display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-family:var(--mono); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; border:1px solid var(--c-line)}

.mh-tag.machine{color:var(--c-faint); background:rgba(14,24,48,.05)}

.mh-tag.human{color:#046bd2; background:rgba(4,107,210,.10); border-color:rgba(4,107,210,.28)}

.mh-card ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}

.mh-card li{position:relative; padding-left:20px; font-size:.95rem; line-height:1.5; color:var(--c-muted)}

.mh-card li::before{content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:2px; background:var(--c-faint)}

.mh-card.is-human li::before{background:var(--grad)}

/* caixa de prova */
.proof{margin-top:24px; padding:26px; border-radius:18px; background:var(--c-card2); border:1px solid var(--c-line); border-left:3px solid #6a4fb5}

.proof h3{font-size:1.05rem; font-weight:800; margin:0 0 12px; color:var(--c-fg)}

.proof p{margin:0 0 12px; font-size:.97rem; line-height:1.6; color:var(--c-muted); max-width:78ch}

.proof p b{color:var(--c-fg)}

.proof-tag{font-family:var(--mono); font-size:.9rem !important; color:var(--c-accent) !important; margin:0 !important}

/* ---------- DELTA DE SUPERFICIE (secao escura) ---------- */
.delta{border:1px solid var(--c-line); border-radius:16px; overflow:hidden; background:#0d1728; box-shadow:var(--c-shadow); max-width:980px; margin:0 auto}

.delta-bar{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; justify-content:space-between; padding:12px 18px; background:rgba(255,255,255,.04); border-bottom:1px solid var(--c-line)}

.delta-title{font-size:13px; font-weight:700; color:#f4f7fb}

.delta-date{font-family:var(--mono); font-size:11px; color:#68799a}

.delta-body{padding:18px}

.delta-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px}

.dstat{background:rgba(255,255,255,.03); border:1px solid var(--c-line); border-radius:12px; padding:14px; text-align:center}

.dv{font-size:24px; font-weight:800; line-height:1}

.dv.blue{color:var(--pt-blue)}

.dv.yellow{color:var(--pt-warn)}

.dv.red{color:var(--pt-bad)}

.dv.dim{color:#68799a}

.dl{font-size:11px; color:#9fb0c7; margin-top:6px}

.delta-table-wrap{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; border:1px solid var(--c-line); border-radius:12px}

.delta-table{width:100%; border-collapse:collapse; font-size:12.5px; min-width:660px}

.delta-table th{text-align:left; padding:10px 14px; background:rgba(255,255,255,.04); color:#9fb0c7; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; border-bottom:1px solid var(--c-line); white-space:nowrap}

.delta-table td{padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.05); color:#cbd5e1; vertical-align:top; line-height:1.45}

.delta-table tr:last-child td{border-bottom:0}

.asset{font-family:var(--mono); font-size:11.5px; color:#f4f7fb; word-break:break-all}

.dbadge{display:inline-block; padding:3px 9px; border-radius:999px; font-family:var(--mono); font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; white-space:nowrap}

.dbadge.new{color:var(--pt-warn); background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.32)}

.dbadge.chg{color:var(--pt-blue); background:rgba(99,179,255,.12); border:1px solid rgba(99,179,255,.32)}

.dbadge.gone{color:#68799a; background:rgba(255,255,255,.04); border:1px solid var(--c-line)}

.delta-foot{margin-top:16px; padding:14px 16px; border-radius:12px; background:rgba(99,179,255,.06); border:1px solid rgba(99,179,255,.18); font-size:12.5px; line-height:1.55; color:#cbd5e1}

.delta-foot b{color:#f4f7fb}

/* ---------- ANOTACOES ----------
   Mesmo componente das outras paginas de servico (pentest-web-api,
   defesa-continua). Continua na folha da pagina, e nao no _service.css,
   porque so' entra na familia o que for identico em TODAS as paginas
   do grupo -- ver CLAUDE.md, "Onde colocar CSS". */
.annotation-bar{display:flex; gap:12px; flex-wrap:wrap; max-width:900px; margin:16px auto 0}

.annotation{display:flex; align-items:flex-start; gap:8px; padding:10px 14px; background:rgba(255,255,255,.03); border:1px solid var(--c-line); border-radius:10px; flex:1; min-width:220px}

.annotation .num{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--grad); color:#fff; font-size:11px; font-weight:700; flex-shrink:0; margin-top:1px}

.annotation .txt{font-size:13px; color:#cbd5e1; line-height:1.45}

.annotation .txt strong{color:#fff; font-weight:600}

/* ---------- RESPONSIVO ----------
   Fica no FIM e nesta folha de proposito: o css da pagina carrega depois
   do base.css inteiro, entao um @media la' seria anulado pelas regras de
   topo daqui (mesma especificidade). */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr; gap:38px}
  .pt-console{margin-left:0; max-width:520px}
  /* "Onde o PTaaS termina": os 2 boxes do .list empilham em 1 coluna (full width),
     senao no mobile ficam lado a lado com o texto espremido. Espelha o que a
     defesa-continua.css ja faz para a mesma secao. */
  .list{grid-template-columns:1fr}
}

@media (max-width:900px){
  .mh{grid-template-columns:1fr}
  .delta-stats{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:760px){
  section{padding:32px 0}
  .hero{padding:64px 0 48px}
  .win{padding:18px}
  .win-row{grid-template-columns:1fr; gap:8px; align-items:stretch}
  .win-row + .win-row{margin-top:18px}
  .win-scale{display:none}
  .win-cell{height:30px; font-size:0}
  .win-cell.is-test, .win-cell.is-cycle{font-size:0}
  .win-foot{grid-template-columns:1fr}
  .proof{padding:20px}
}

/* No celular a tabela de 4 colunas so' cabe rolando na horizontal, e a coluna
   que rola para fora e' justamente "O que encontramos" -- que e' o conteudo.
   Uma tabela que precisa ser arrastada para revelar a unica coluna que importa
   nao e' scroll, e' conteudo escondido. Aqui cada linha vira um bloco: ativo,
   depois tipo e badge lado a lado, depois a descricao inteira. Nada rola. */
@media (max-width:760px){
  .delta-table-wrap{overflow-x:visible}
  .delta-table{min-width:0; display:block}
  .delta-table thead{display:none}
  .delta-table tbody{display:block}
  .delta-table tr{display:block; padding:14px; border-bottom:1px solid rgba(255,255,255,.05)}
  .delta-table tr:last-child{border-bottom:0}
  .delta-table td{display:block; padding:0; border:0}
  .delta-table td:nth-child(2){display:inline-block; margin:8px 10px 0 0; font-size:11px; color:#9fb0c7; vertical-align:middle}
  .delta-table td:nth-child(3){display:inline-block; margin-top:8px; vertical-align:middle}
  .delta-table td:nth-child(4){margin-top:8px}
  .asset{word-break:break-word}
}

@media (max-width:640px){
  .delta-stats{grid-template-columns:repeat(2,1fr)}
  .pt-lines li{flex-wrap:wrap}
  .pt-v{text-align:left; width:100%; padding-left:27px}
}