/* Layout: prancha técnica. Carimbo no topo, o palco 3D com o LED em movimento e o planificado logo abaixo. */
:root{
  --paper:#f3f6f1; --surface:#ffffff; --ink:#16201a; --muted:#56635a; --line:#d2d9cf; --line-strong:#a9b3a7;
  --moss:#2c5b3c; --raio:#9a5c08; --raio-soft:#f4e6c8;
  --stage:#0a0e0c; --stage-2:#141a17; --stage-ink:#e9eee8; --stage-muted:#9ba79e; --stage-line:#2a342e;
  --z-reto:#3fae6b; --z-concava:#e6a51f; --z-retorno:#e5533d; --z-convexa:#9a6be8; --z-aba:#3f8fe0;
  --f-display:"Archivo","Arial Narrow",Arial,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-data:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0f1512; --surface:#161d19; --ink:#e6ebe5; --muted:#98a49b; --line:#27312b; --line-strong:#3d4a42;
    --moss:#7cc493; --raio:#e9ad52; --raio-soft:#33270f; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0f1512; --surface:#161d19; --ink:#e6ebe5; --muted:#98a49b; --line:#27312b; --line-strong:#3d4a42;
  --moss:#7cc493; --raio:#e9ad52; --raio-soft:#33270f; color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
.page{max-width:1360px;margin:0 auto;padding-inline:clamp(16px,3vw,40px);padding-block:28px 64px;display:flex;flex-direction:column;gap:36px}
h1,h2,h3{font-family:var(--f-display);font-stretch:112%;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(26px,4.2vw,44px);font-weight:750;line-height:1.05}
h2{font-size:clamp(19px,2.2vw,24px);font-weight:700;line-height:1.2}
h3{font-size:16px;font-weight:700;font-stretch:105%}
p{margin:0}
.eyebrow{font-family:var(--f-data);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--moss);font-weight:600}
.lede{font-size:17px;color:var(--muted);max-width:62ch}
.num{font-family:var(--f-data);font-variant-numeric:tabular-nums}

/* cabeçalho + carimbo */
.head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;border-bottom:2px solid var(--ink);padding-bottom:20px}
.head-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.carimbo{margin:0;display:grid;grid-template-columns:auto auto;border:1px solid var(--line-strong);font-family:var(--f-data);font-size:12px;min-width:0}
.carimbo div{padding:7px 12px;border-bottom:1px solid var(--line-strong);border-right:1px solid var(--line-strong)}
.carimbo div:nth-child(2n){border-right:0}
.carimbo div:nth-last-child(-n+2){border-bottom:0}
.carimbo dt{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:10px}
.carimbo dd{margin:0;font-weight:500}
@media (max-width:860px){.head{grid-template-columns:1fr}.carimbo{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.carimbo{grid-template-columns:1fr}.carimbo div{border-right:0}.carimbo div:nth-last-child(2){border-bottom:1px solid var(--line-strong)}}

/* barra de controles */
.toolbar{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:flex-end;background:var(--surface);border:1px solid var(--line);padding:12px 14px;border-radius:4px}
@media (min-width:980px){.toolbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5}}
.ctl{display:flex;flex-direction:column;gap:5px;min-width:0}
.ctl > span{font-family:var(--f-data);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.seg{display:flex;flex-wrap:wrap;border:1px solid var(--line-strong);border-radius:3px;overflow:hidden}
.seg button{appearance:none;border:0;border-right:1px solid var(--line-strong);background:transparent;color:var(--ink);font:500 13px/1 var(--f-body);padding:8px 11px;cursor:pointer;white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button:hover{background:var(--raio-soft)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.seg button:focus-visible,.vp-stage:focus-visible,.chk input:focus-visible{outline:2px solid var(--raio);outline-offset:2px}
.chk{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;padding:7px 0;cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--moss)}
.play{appearance:none;border:1px solid var(--line-strong);border-radius:3px;background:var(--ink);color:var(--paper);font:600 13px/1 var(--f-body);padding:8px 14px;cursor:pointer;min-width:112px;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.play:focus-visible{outline:2px solid var(--raio);outline-offset:2px}
.play .ico{width:10px;height:11px;display:inline-block;border-left:3px solid currentColor;border-right:3px solid currentColor}
.play[aria-pressed="false"] .ico{border:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;height:0;width:0}

/* palcos */
.palcos{display:flex;flex-direction:column;gap:22px}
.vp{margin:0;display:flex;flex-direction:column;border:1px solid var(--stage-line);background:var(--stage);color:var(--stage-ink);border-radius:4px;overflow:hidden}
.vp-head{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;padding:11px 14px;background:var(--stage-2);border-bottom:1px solid var(--stage-line)}
.vp-id{display:flex;align-items:baseline;gap:10px;min-width:0}
.vp-tag{font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:22px;line-height:1;color:var(--stage-ink)}
.vp-name{font-family:var(--f-display);font-stretch:108%;font-weight:650;font-size:16px}
.vp-spec{font-family:var(--f-data);font-size:12px;color:var(--stage-muted);font-variant-numeric:tabular-nums;flex-basis:100%}
.vp-spec b{color:var(--stage-ink);font-weight:600}
.vp .seg{border-color:var(--stage-line)}
.vp .seg button{color:var(--stage-ink);border-color:var(--stage-line);font-size:12.5px;padding:7px 10px}
.vp .seg button:hover{background:#243029}
.vp .seg button[aria-pressed="true"]{background:var(--stage-ink);color:var(--stage)}
.vp-stage{position:relative;aspect-ratio:2.5/1;max-width:100%;background:var(--stage);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.vp-stage:active{cursor:grabbing}
.vp-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.vp-stage .ov{pointer-events:none}
.vp-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;color:var(--stage-muted);font-size:14px}
.vp-cap{padding:9px 14px;font-size:12.5px;color:var(--stage-muted);border-top:1px solid var(--stage-line);font-family:var(--f-data)}
@media (max-width:900px){.vp-stage{aspect-ratio:1.9/1}}
@media (max-width:560px){.vp-stage{aspect-ratio:1.35/1}}

/* legenda de zonas */
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted);list-style:none;margin:0;padding:0}
.legend li{display:flex;align-items:center;gap:7px}
.sw{width:14px;height:14px;border-radius:2px;flex:none}

/* planificado */
.sec{display:flex;flex-direction:column;gap:14px;min-width:0}
.sec > p{max-width:72ch;color:var(--muted)}
.strips{overflow-x:auto;background:var(--stage);border:1px solid var(--stage-line);border-radius:4px;padding:16px}
.strips-inner{min-width:860px;display:flex;flex-direction:column;gap:18px}
.strip{display:flex;flex-direction:column;gap:5px;align-items:center}
.strip-label{align-self:stretch;display:flex;justify-content:space-between;gap:12px;font-family:var(--f-data);font-size:12px;color:var(--stage-muted)}
.strip-label b{color:var(--stage-ink);font-weight:600}
.strip-body{display:flex;flex-direction:column;gap:3px}
.strip canvas{display:block;width:100%;background:#000}
.ruler{display:flex;height:16px;font-family:var(--f-data);font-size:10.5px;line-height:16px;color:#0a0e0c;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden}
.ruler span{overflow:hidden;min-width:0}
.ticks{position:relative;height:16px;font-family:var(--f-data);font-size:10px;color:var(--stage-muted)}
.ticks i{position:absolute;top:0;font-style:normal;transform:translateX(-50%);border-left:1px solid var(--stage-muted);padding-left:3px;height:14px;line-height:16px;transform-origin:left}
.segtable{font-family:var(--f-data);font-size:12px;color:var(--stage-muted);text-align:center}
.segtable b{color:var(--stage-ink);font-weight:500}


/* ===== Projeto completo: pilares, briefings e cronograma ===== */
:root{
  --ph-rot:#3d6b8f; --ph-sb:#7a5ea8; --ph-v1:#2c7a4a; --ph-rev:#8a7f6a; --ph-final:#16201a; --ph-jd:var(--raio); --ph-marco:#56635a;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --ph-rot:#7fb0d6; --ph-sb:#b39ae0; --ph-v1:#6cc58e; --ph-rev:#b3a98f; --ph-final:#e6ebe5; --ph-marco:#98a49b; }
}
:root[data-theme="dark"]{ --ph-rot:#7fb0d6; --ph-sb:#b39ae0; --ph-v1:#6cc58e; --ph-rev:#b3a98f; --ph-final:#e6ebe5; --ph-marco:#98a49b; }

.nav{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--f-data);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:2px}
.nav a:hover{color:var(--moss);border-color:var(--moss)}
.sim{display:flex;flex-direction:column;gap:36px}
.sec-head{display:flex;flex-direction:column;gap:8px;max-width:80ch}
.sec-head p{color:var(--muted)}
.alert{border:1px solid var(--raio);background:var(--raio-soft);border-radius:4px;padding:10px 14px;font-size:14px;max-width:80ch}
.alert b{color:var(--raio)}

/* pilares */
.pilares-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.pcard{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--c);border-radius:4px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.pcard .tag{font-family:var(--f-data);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pcard p{font-size:13.5px;color:var(--muted);line-height:1.45}
.pcard .who{font-size:12.5px;color:var(--ink)}
.pcard .next{font-family:var(--f-data);font-size:12px;border-top:1px dashed var(--line-strong);padding-top:8px;margin-top:auto}
.pcard .next b{color:var(--raio);font-weight:600}
.acts{display:flex;flex-wrap:wrap;gap:6px}
.btn-sm{appearance:none;border:1px solid var(--line-strong);background:transparent;color:var(--ink);font:500 12.5px/1 var(--f-body);padding:7px 10px;border-radius:3px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.btn-sm:hover{background:var(--raio-soft)}
.btn-sm:focus-visible{outline:2px solid var(--raio);outline-offset:2px}
.fora{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13.5px;color:var(--muted)}
.fora b{color:var(--ink);font-weight:600}
.fora a{color:var(--ink)}

/* briefings */
.briefs{display:flex;flex-direction:column;gap:18px}
.group-title{font-family:var(--f-data);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-strong);padding-bottom:6px;margin-top:8px}
.brief{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:26px;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--c);border-radius:4px;padding:20px 22px;scroll-margin-top:90px}
.brief-txt{display:flex;flex-direction:column;gap:14px;min-width:0}
.brief-txt .lead{font-size:15.5px}
.brief-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.brief-side figure{margin:0;display:flex;flex-direction:column;gap:6px}
.brief-side img{display:block;width:100%;height:auto;border-radius:3px;border:1px solid var(--line)}
.brief-side figcaption{font-size:12px;color:var(--muted)}
dl.spec{display:grid;grid-template-columns:140px minmax(0,1fr);margin:0;border-top:1px solid var(--line);font-size:14px}
dl.spec dt,dl.spec dd{margin:0;padding:7px 0;border-bottom:1px solid var(--line)}
dl.spec dt{font-family:var(--f-data);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding-right:12px;padding-top:9px}
ol.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px}
ol.steps b{font-weight:600}
.marcos{list-style:none;margin:0;padding:0;font-family:var(--f-data);font-size:12.5px;border:1px solid var(--line);border-radius:3px}
.marcos li{display:grid;grid-template-columns:96px 14px minmax(0,1fr);gap:8px;align-items:center;padding:6px 10px;border-bottom:1px solid var(--line)}
.marcos li:last-child{border-bottom:0}
.marcos li.past{color:var(--muted)}
.marcos .d{font-variant-numeric:tabular-nums;font-weight:600}
.marcos .t{font-family:var(--f-body);font-size:13px}
.marcos .t small{font-family:var(--f-data);font-size:10.5px;color:var(--muted);margin-left:6px;text-transform:uppercase;letter-spacing:.05em}
.dot{width:11px;height:11px;border-radius:2px;background:var(--pc)}
.dot.mk{transform:rotate(45deg);border-radius:1px}
.dot.prop{background:transparent;border:2px solid var(--pc)}
.vlist{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px;font-size:13.5px}
.vlist li{border:1px solid var(--line);border-radius:3px;padding:7px 10px}
.vlist li b{display:block;font-weight:600}
.vlist li span{color:var(--muted);font-size:12.5px}
.raio-svg{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:3px;background:var(--paper)}
@media (max-width:900px){.brief{grid-template-columns:1fr}}
@media (max-width:560px){dl.spec{grid-template-columns:1fr}dl.spec dt{border-bottom:0;padding-bottom:0}.brief{padding:16px}}

/* cronograma */
.legend-ph{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--muted);list-style:none;margin:0;padding:0}
.legend-ph li{display:flex;align-items:center;gap:7px}
.lg-bar{width:22px;height:10px;border-radius:2px;background:var(--pc)}
.lg-bar.prop{background:repeating-linear-gradient(135deg,var(--pc) 0 4px,transparent 4px 7px);outline:1px solid var(--pc);outline-offset:-1px}
.gwrap{overflow-x:auto;border:1px solid var(--line);background:var(--surface);border-radius:4px}
.gantt{min-width:1060px;position:relative;padding-bottom:30px}
.g-head,.g-row{display:grid;grid-template-columns:200px minmax(0,1fr)}
.g-head{height:40px;border-bottom:1px solid var(--line-strong)}
.g-head .g-name{background:var(--surface)}
.g-row{min-height:50px;border-bottom:1px solid var(--line)}
.g-row.sep{border-top:2px solid var(--line-strong)}
.g-name{position:sticky;left:0;z-index:3;background:var(--surface);padding:6px 14px;display:flex;flex-direction:column;justify-content:center;font-weight:600;font-size:13.5px;line-height:1.2;border-right:1px solid var(--line)}
.g-name small{font-weight:400;font-size:11.5px;color:var(--muted);font-family:var(--f-data)}
.g-track{position:relative;margin-right:18px}
.g-tick{position:absolute;top:0;bottom:0;border-left:1px solid var(--line)}
.g-tick span{position:absolute;top:12px;left:4px;font-family:var(--f-data);font-size:11px;color:var(--muted);white-space:nowrap}
.g-bar{position:absolute;top:16px;height:18px;border-radius:3px;background:var(--pc);color:var(--paper);font:600 10.5px/18px var(--f-data);padding:0 5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:default}
.g-bar.prop{background:repeating-linear-gradient(135deg,var(--pc) 0 5px,color-mix(in srgb,var(--pc) 45%,var(--surface)) 5px 10px);color:var(--ink);text-shadow:0 0 3px var(--surface),0 0 3px var(--surface)}
.g-mk{position:absolute;top:18px;width:14px;height:14px;margin-left:-7px;transform:rotate(45deg);background:var(--pc);border:2px solid var(--pc);z-index:2;cursor:default}
.g-mk.c{border-radius:50%;transform:none}
.g-mk.prop{background:var(--surface)}
.g-line{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed var(--pc);z-index:1;pointer-events:none}
.g-line.lft span{left:auto;right:7px}
.g-line span{position:absolute;bottom:-22px;left:5px;font:600 10.5px/1 var(--f-data);color:var(--pc);background:var(--surface);padding:2px 3px;white-space:nowrap}
.g-overlay{position:absolute;top:0;bottom:30px;left:200px;right:18px;pointer-events:none}
.tbl-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
table.tbl th{text-align:left;font-family:var(--f-data);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:9px 12px;border-bottom:1px solid var(--line-strong)}
table.tbl td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tr.past td{color:var(--muted)}
table.tbl tr.wk td{background:var(--paper);font-family:var(--f-data);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:6px 12px}
table.tbl .d{font-family:var(--f-data);font-variant-numeric:tabular-nums;white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;white-space:nowrap}
.src{font-family:var(--f-data);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line-strong);border-radius:2px;padding:2px 5px;color:var(--muted)}
.src.ok{border-color:var(--moss);color:var(--moss)}
.checks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px}
.checks li{display:flex;gap:10px;align-items:baseline}
.checks .d{font-family:var(--f-data);font-size:12px;font-weight:600;min-width:46px}
.foot{font-family:var(--f-data);font-size:11.5px;color:var(--muted);border-top:1px solid var(--line-strong);padding-top:12px}

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