/* Portal de Aprovação — estilos. Cores e tipografia vêm de assets/tokens.css (design system TraQ). */
@font-face{font-family:'Mustica Pro';src:url('assets/fonts/MusticaPro-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/SpaceGrotesk-Variable.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'Space Mono';src:url('assets/fonts/SpaceMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url('assets/fonts/SpaceMono-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --font-display:'Mustica Pro','Space Grotesk',sans-serif;
  --font-body:'Space Grotesk',system-ui,sans-serif;
  --font-mono:'Space Mono',monospace;
  --st-aguardando:#f1e41a; --st-revisao:#e8731a; --st-ajuste:#2f8fe0; --st-aprovado:#1f9d63; --st-enviado:#8fa0ae; --st-rascunho:#52616e;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--navy);background:var(--paper)}
h1,h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;line-height:var(--lh-title);margin:0}
h3,h4{font-family:var(--font-body);font-weight:600;margin:0;line-height:1.25}
p{margin:0}
a{color:inherit}
button{font:inherit;cursor:pointer}
.mono{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);text-transform:uppercase}
.muted{color:var(--mut-l)}
.s-dark .muted{color:var(--mut-d)}
.dot{color:var(--accent)}
.carregando{min-height:100vh;display:grid;place-content:center;gap:.6rem;text-align:center;color:var(--mut-l)}

.s-dark{--accent:var(--yellow);color:#fff;background:
  radial-gradient(1100px 700px at 88% -8%, rgba(241,228,26,.075), transparent 62%),
  radial-gradient(1000px 720px at -6% 108%, rgba(38,108,166,.20), transparent 60%),
  linear-gradient(152deg,#052E4E 0%,var(--navy) 44%,var(--navy-deep) 100%);position:relative;isolation:isolate;overflow:clip}
.s-light{color:var(--navy);background:
  radial-gradient(900px 600px at 106% -10%, rgba(241,228,26,.10), transparent 55%),
  radial-gradient(900px 640px at -8% 112%, rgba(3,36,62,.05), transparent 55%),
  var(--paper);position:relative;isolation:isolate;overflow:clip}
.grain::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--r-btn);padding:.8rem 1.4rem;font-weight:600;border:1.5px solid transparent;transition:transform .2s var(--ease),box-shadow .2s var(--ease);white-space:nowrap;text-decoration:none}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary{background:var(--yellow);color:var(--navy);box-shadow:var(--shadow-cta)}
.btn-navy{background:var(--navy);color:#fff}
.s-dark .btn-navy{background:#fff;color:var(--navy)}
.btn-ghost{background:transparent;color:var(--navy);border-color:rgba(3,36,62,.25)}
.s-dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.btn-sm{padding:.5rem 1rem;font-size:var(--fs-small)}
.btn-danger{background:transparent;color:#b3261e;border-color:rgba(179,38,30,.35)}
.btn:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(241,228,26,.9);outline-offset:2px}

.pill{display:inline-flex;align-items:center;gap:.45rem;border-radius:var(--r-btn);padding:.3rem .8rem .3rem .6rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;background:rgba(3,36,62,.06);color:var(--navy);white-space:nowrap}
.s-dark .pill{background:rgba(255,255,255,.1);color:#fff}
.pill::before{content:'';width:.55rem;height:.55rem;border-radius:50%;background:var(--c,var(--mut-l))}
.pill[data-st="aguardando"]{--c:var(--st-aguardando)}
.pill[data-st="revisao"]{--c:var(--st-revisao)}
.pill[data-st="ajuste"]{--c:var(--st-ajuste)}
.pill[data-st="aprovado"]{--c:var(--st-aprovado)}
.pill[data-st="enviado"]{--c:var(--st-enviado)}
.pill[data-st="rascunho"]{--c:var(--st-rascunho)}
.pill.pend{outline:1.5px dashed rgba(3,36,62,.35);outline-offset:1px}

header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;height:var(--header-h);display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--gutter);background:var(--navy);color:#fff;box-shadow:0 10px 40px -20px rgba(3,36,62,.6)}
header.top .logo{height:22px;display:block}
header.top .sep{width:1px;height:28px;background:var(--hair-d)}
header.top .client{display:flex;align-items:center;gap:.7rem;font-weight:600;text-decoration:none;color:#fff}
header.top .client .mark{width:32px;height:32px;border-radius:8px;background:var(--yellow);display:grid;place-items:center;color:var(--navy);font-weight:700;font-size:.8rem;overflow:hidden}
header.top .client .mark img{width:100%;height:100%;object-fit:cover}
header.top .spacer{flex:1}
header.top .cart{display:inline-flex;align-items:center;gap:.6rem;background:var(--yellow);color:var(--navy);border:0;border-radius:var(--r-btn);padding:.55rem 1rem;font-weight:600}
header.top .cart .n{background:var(--navy);color:#fff;border-radius:999px;min-width:1.5rem;height:1.5rem;display:grid;place-items:center;font-family:var(--font-mono);font-size:.75rem}
header.top .cart.empty{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.25)}
header.top .cart.empty .n{background:rgba(255,255,255,.15)}
header.top .user{font-size:var(--fs-small);color:var(--mut-d)}
header.top .user b{color:#fff;font-weight:600}
header.top .user a{color:var(--mut-d)}
@media (max-width:760px){
  header.top{gap:var(--sp-2)}
  header.top .user,header.top .sep{display:none}
  header.top .client .name{display:none}
  header.top .cart .txt{display:none}
  header.top .cart{padding:.45rem .7rem}
  .card.pres{flex-direction:column!important;align-items:stretch!important}
  .card.pres .thumb{width:100%!important}
}

main{min-height:calc(100vh - var(--header-h))}
.wrap{max-width:var(--container);margin:0 auto;padding-block:var(--sp-5);padding-inline:var(--gutter)}
.crumbs{display:flex;gap:.6rem;align-items:center;font-size:var(--fs-small);color:var(--mut-l);margin-bottom:var(--sp-3);flex-wrap:wrap}
.crumbs a{text-decoration:none;color:var(--mut-l)}
.crumbs a:hover{color:var(--navy)}
.crumbs .cur{color:var(--navy);font-weight:600}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:'';width:.5rem;height:.5rem;border-radius:50%;background:var(--accent)}
.hgroup{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.hgroup h1{font-size:var(--fs-h2);margin-top:.5rem;text-wrap:balance}
.grid{display:grid;gap:var(--sp-3)}
.grid.c3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{background:#fff;border:1px solid var(--hair-l);border-radius:var(--r-out);padding:var(--sp-3);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:.9rem;text-decoration:none;color:inherit;transition:transform .25s var(--ease);min-width:0}
a.card:hover{transform:translateY(-3px)}
.card .thumb{aspect-ratio:4/3;border-radius:var(--r-in);overflow:hidden;background:var(--navy);position:relative;max-width:100%}
.card .thumb img{width:100%;height:100%;display:block;object-fit:cover}
.card .thumb .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--yellow)}
.card .thumb .type{position:absolute;left:.8rem;top:.8rem}
.card .thumb .type .pill{background:rgba(3,36,62,.75);color:#fff;backdrop-filter:blur(6px)}
.card h3{font-size:var(--fs-h3);font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}
.card .meta{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:var(--fs-small);color:var(--mut-l)}
.stats{display:flex;gap:.4rem;flex-wrap:wrap}
.hero{border-radius:var(--r-out);padding:var(--sp-5);margin-bottom:var(--sp-4);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap}
.hero h1{font-size:var(--fs-h2);max-width:640px;margin-top:.6rem;text-wrap:balance}
.hero p{max-width:560px;margin-top:.8rem}

.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login .art{padding:var(--sp-6);display:flex;flex-direction:column;justify-content:space-between}
.login .art h1{font-size:var(--fs-hero);max-width:11ch;margin-top:var(--sp-4);text-wrap:balance}
.login .art .wm{position:absolute;right:-8%;bottom:-12%;width:60%;opacity:.055;pointer-events:none}
.login .form{display:grid;place-items:center;padding:var(--sp-5) var(--gutter)}
.login form{width:min(420px,100%);display:flex;flex-direction:column;gap:1rem}
.login form h2{font-size:var(--fs-h3);margin-bottom:.4rem}
.login .erro{background:#fde8e6;color:#8a1c14;border-radius:var(--r-in);padding:.7rem 1rem;font-size:var(--fs-small)}
label{display:flex;flex-direction:column;gap:.35rem;font-size:var(--fs-small);font-weight:600}
input,textarea{font:inherit;padding:.85rem 1rem;border-radius:var(--r-in);border:1.5px solid rgba(3,36,62,.18);background:#fff;color:var(--navy);width:100%}
textarea{min-height:120px;resize:vertical}
@media (max-width:900px){.login{grid-template-columns:1fr}.login .art{min-height:40vh;padding:var(--sp-5) var(--gutter)}}

.piece{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--sp-4);align-items:start}
@media (max-width:1000px){.piece{grid-template-columns:1fr}}
.stage{background:#fff;border:1px solid var(--hair-l);border-radius:var(--r-out);padding:var(--sp-3);box-shadow:var(--shadow-card);min-width:0}
.stage .bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:var(--sp-2)}
.canvas{position:relative;border-radius:var(--r-in);overflow:hidden;background:var(--navy-deep);cursor:crosshair;user-select:none;max-width:100%}
.canvas.nopin{cursor:default}
.canvas > img,.canvas > video{display:block;width:100%;height:auto}
.canvas .hint{position:absolute;left:50%;bottom:.8rem;transform:translateX(-50%);background:rgba(3,36,62,.8);color:#fff;padding:.4rem .9rem;border-radius:var(--r-btn);font-size:.8rem;pointer-events:none;backdrop-filter:blur(6px);white-space:nowrap}
.pin{position:absolute;width:28px;height:28px;margin:-28px 0 0 -14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--yellow);color:var(--navy);border:2px solid var(--navy);display:grid;place-items:center;font-family:var(--font-mono);font-size:.75rem;font-weight:700;cursor:pointer;box-shadow:0 8px 20px -6px rgba(3,36,62,.7);z-index:5}
.pin span{transform:rotate(45deg)}
.pin.sent{background:#fff}
.pin.draft{animation:pop .3s var(--ease)}
@keyframes pop{from{transform:rotate(-45deg) scale(.4)}to{transform:rotate(-45deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.pin.draft{animation:none}.btn,a.card{transition:none}}
.popover{position:absolute;z-index:20;width:min(300px,90%);background:#fff;border-radius:var(--r-in);box-shadow:0 30px 60px -20px rgba(3,36,62,.45);border:1px solid var(--hair-l);padding:1rem;display:flex;flex-direction:column;gap:.7rem;cursor:default}
.popover .row{display:flex;gap:.5rem;justify-content:flex-end}
.side{display:flex;flex-direction:column;gap:var(--sp-3);position:sticky;top:calc(var(--header-h) + var(--sp-3))}
.panel{background:#fff;border:1px solid var(--hair-l);border-radius:var(--r-out);padding:var(--sp-3);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:1rem}
.panel h4{font-size:1rem}
.actions{display:flex;flex-direction:column;gap:.6rem}
.actions .btn{justify-content:center;width:100%}
.decided{border:1.5px solid var(--hair-l);border-radius:var(--r-in);padding:1rem;display:flex;flex-direction:column;gap:.5rem;background:var(--paper)}
.decided .val{display:flex;align-items:center;gap:.6rem;font-weight:600}
.notes{display:flex;flex-direction:column;gap:.6rem}
.note{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-small)}
.note .n{flex:none;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--yellow);color:var(--navy);display:grid;place-items:center;font-family:var(--font-mono);font-size:.7rem;font-weight:700}
.note .x{margin-left:auto;background:none;border:0;color:var(--mut-l);font-size:1rem;line-height:1}
.hist{display:flex;flex-direction:column;gap:.8rem;font-size:var(--fs-small)}
.hist .ev{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:baseline}
.hist .ev .t{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:var(--mut-l);white-space:nowrap}

.strip{display:flex;gap:.6rem;overflow-x:auto;padding:.3rem .2rem;margin-top:var(--sp-2)}
.strip button{flex:none;width:92px;aspect-ratio:4/5;border-radius:10px;border:2px solid transparent;padding:0;overflow:hidden;background:var(--navy);position:relative}
.strip button.on{border-color:var(--yellow);box-shadow:0 0 0 2px var(--navy)}
.strip button img{width:100%;height:100%;display:block;object-fit:cover}
.strip button i{position:absolute;right:5px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--c,transparent);border:1.5px solid #fff}
.strip button b{position:absolute;left:6px;bottom:5px;color:#fff;font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;text-shadow:0 1px 4px rgba(0,0,0,.6)}

.roteiro{display:flex;flex-direction:column;gap:1.4rem;padding:var(--sp-4);border-radius:var(--r-in)}
.roteiro .head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.roteiro h2{font-size:clamp(1.6rem,1.2rem+1.6vw,2.4rem);margin-top:.6rem}
.badge{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .8rem;border-radius:var(--r-btn);background:var(--navy);color:#fff}
.badge.ghost{background:transparent;border:1px solid rgba(3,36,62,.3);color:var(--navy)}
.shell{border-radius:var(--r-in);padding:var(--r-pad);background:rgba(3,36,62,.06)}
.core{border-radius:calc(var(--r-in) - var(--r-pad));padding:1.6rem 1.8rem;display:flex;flex-direction:column;gap:.6rem;background:linear-gradient(158deg,#0B3A5E 0%,var(--navy) 60%);color:#fff;border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 1px rgba(255,255,255,.13)}
.kicker{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow)}
.hook{font-family:var(--font-display);font-size:clamp(1.25rem,1rem+1vw,1.7rem);line-height:1.3;font-weight:600}
.beats{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
@media (max-width:700px){.beats{grid-template-columns:1fr}}
.beat{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.beat .t{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mut-l)}
.why{border-top:1px solid var(--hair-l);padding-top:1rem;color:var(--mut-l);font-size:var(--fs-small)}
.why strong{color:var(--navy)}

.deck .page{border-radius:var(--r-in);overflow:hidden;background:var(--navy-deep);max-width:100%}
.deck .page img{display:block;width:100%;height:auto}
.deck .nav{display:flex;justify-content:space-between;align-items:center;margin-top:var(--sp-2);gap:1rem}
.deck .dots{display:flex;gap:.4rem;flex-wrap:wrap}
.deck .dots i{width:.5rem;height:.5rem;border-radius:50%;background:rgba(3,36,62,.2)}
.deck .dots i.on{background:var(--navy)}

.lpwrap{border-radius:var(--r-in);overflow:hidden;background:#e9e8e2;border:1px solid var(--hair-l)}
.lpwrap .chrome{display:flex;align-items:center;gap:.5rem;padding:.6rem .9rem;background:#fff;border-bottom:1px solid var(--hair-l);font-size:.8rem;color:var(--mut-l)}
.lpwrap .chrome i{width:.7rem;height:.7rem;border-radius:50%;background:rgba(3,36,62,.15)}
.lpwrap .chrome .url{flex:1;background:var(--paper);border-radius:999px;padding:.3rem .8rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lpscroll{max-height:680px;overflow:auto}
.lpscroll .canvas{border-radius:0;margin:0 auto}
.lpscroll.mobile .canvas{width:390px;max-width:100%}
.seg{display:inline-flex;border:1.5px solid rgba(3,36,62,.2);border-radius:var(--r-btn);padding:3px;gap:2px}
.seg button{border:0;background:transparent;padding:.35rem .9rem;border-radius:999px;font-size:var(--fs-small);font-weight:600;color:var(--mut-l)}
.seg button.on{background:var(--navy);color:#fff}

.video{max-width:420px;margin:0 auto;border-radius:var(--r-in);overflow:hidden;background:var(--navy-deep)}
.video video{display:block;width:100%;height:auto}

.rev{display:flex;flex-direction:column;gap:var(--sp-2)}
.rev .item{display:grid;grid-template-columns:96px 1fr auto;gap:1.2rem;align-items:center;background:#fff;border:1px solid var(--hair-l);border-radius:var(--r-out);padding:1rem 1.2rem;box-shadow:var(--shadow-card)}
.rev .item .th{aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--navy);display:grid;place-items:center;color:var(--yellow);font-family:var(--font-mono);font-size:.6rem}
.rev .item .th img{width:100%;height:100%;display:block;object-fit:cover}
.rev .item .body{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.rev .item .body .obs{font-size:var(--fs-small);color:var(--mut-l)}
.rev .item .tools{display:flex;gap:.4rem;flex-direction:column;align-items:flex-end}
@media (max-width:640px){.rev .item{grid-template-columns:72px 1fr}.rev .item .tools{grid-column:1/-1;flex-direction:row}}
.summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;border-radius:var(--r-out);padding:var(--sp-3) var(--sp-4);margin-top:var(--sp-4)}
.empty{text-align:center;padding:var(--sp-6) var(--sp-3);color:var(--mut-l);border:1.5px dashed rgba(3,36,62,.2);border-radius:var(--r-out)}

.modal-bg{position:fixed;inset:0;background:rgba(2,26,46,.55);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:100;padding:1rem}
.modal{background:#fff;border-radius:var(--r-out);padding:var(--sp-4);width:min(560px,100%);display:flex;flex-direction:column;gap:1rem;box-shadow:0 40px 80px -30px rgba(2,26,46,.6);color:var(--navy)}
.modal h3{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:600}
.modal .row{display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--navy);color:#fff;padding:.9rem 1.4rem;border-radius:var(--r-btn);box-shadow:0 20px 50px -20px rgba(2,26,46,.8);z-index:120;display:flex;align-items:center;gap:.8rem;max-width:min(92vw,560px)}
.toast b{color:var(--yellow)}