/* Briefing MSE — identidade do relatorios-mse (assets/report-pdf.css):
   folhas brancas sobre fundo cinza, faixa navy/ciano/teal, Open Sans, títulos leves em navy.
   Animações: tudo em CSS; o JS só liga a classe .on na folha quando ela entra na tela. */
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
}

:root {
  --navy: #002f6c; --blue: #2d5fa8; --cyan: #00c8d7; --teal: #1fb5a0; --green: #0d8a74;
  --ink: #17223a; --ink2: #58647a; --muted: #8a94a6; --rule: #c4cdda; --grid: #e2e7ee;
  --hair: rgba(0, 47, 108, .12); --ground: #f0f3f7; --mesa: #b9bec6;
  --amber: #b7791f; --red: #c0392b;
  --faixa: linear-gradient(90deg, var(--navy) 0 58%, var(--cyan) 58% 76%, var(--teal) 76% 100%);
  --suave: cubic-bezier(.2, .7, .2, 1);
  --mola: cubic-bezier(.3, 1.5, .5, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body { margin: 0; background: var(--mesa); color: var(--ink); font: 13px/1.55 'Open Sans', 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }

/* Fundo: mosaico discreto da marca (img/mosaico.png, gerado por img/gera-mosaico.py) sobre o cinza da mesa.
   Camada fixa, levemente inclinada, que desliza devagar um ladrilho inteiro por ciclo (sem emenda).
   Só transform: não redesenha a página enquanto anda. */
body::before {
  content: ''; position: fixed; z-index: -1; left: 50%; top: 50%; width: 160vmax; height: 160vmax;
  margin: -80vmax 0 0 -80vmax; pointer-events: none;
  background: url('img/mosaico.png') 0 0 / 340px 170px repeat;
  transform: rotate(-8deg); will-change: transform;
  animation: mosaico 90s linear infinite;
}
@keyframes mosaico { to { transform: rotate(-8deg) translate(-340px, -170px); } }

/* ---------- Entrada: a marca aparece e a cortina sobe ---------- */
.intro { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--navy); pointer-events: none; animation: intro-sai .5s var(--suave) .75s forwards; will-change: transform; }
.intro .lg { font-size: 26px; animation: intro-marca .45s var(--suave) both; }
@keyframes intro-marca { from { opacity: 0; transform: translateY(8px); } }
@keyframes intro-sai { to { transform: translateY(-100%); visibility: hidden; } }

/* ---------- Barra superior ---------- */
.barra { position: sticky; top: 0; z-index: 10; height: 48px; display: flex; align-items: center; gap: 14px; padding: 0 20px; background: var(--navy); color: #fff; }
.barra-marca { display: flex; align-items: center; text-decoration: none; }
.barra-marca .lg { font-size: 12px; }
.barra-marca .lg-c { font-size: 9px; }
.barra-data { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .22); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.barra-sp { flex: 1; }

/* Navegação lateral: bolinhas à direita, uma por obra. Ativa = alongada em ciano; nome ao passar o mouse. */
.pontos { position: fixed; z-index: 9; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; padding: 10px 7px; border-radius: 999px; background: rgba(0, 47, 108, .82); box-shadow: 0 6px 20px rgba(0, 20, 50, .25); }
.ponto { position: relative; display: grid; place-items: center; width: 18px; height: 18px; text-decoration: none; opacity: 0; transform: translateX(10px); animation: ponto-entra .45s var(--suave) both; animation-delay: calc(var(--k) * 60ms + 1.2s); }
@keyframes ponto-entra { to { opacity: 1; transform: none; } }
.ponto i { display: block; width: 7px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .45); transition: height .35s var(--suave), background .25s, transform .2s var(--mola); }
.ponto:hover i { background: #fff; transform: scale(1.3); }
.ponto.ativo i { height: 16px; background: var(--cyan); transform: none; }
.ponto-rot { position: absolute; right: 30px; top: 50%; display: flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 4px; background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(8px, -50%); transition: opacity .2s, transform .25s var(--suave); box-shadow: 0 6px 18px rgba(0, 20, 50, .25); }
.ponto-rot b { font-size: 9.5px; color: var(--cyan); font-variant-numeric: tabular-nums; }
.ponto:hover .ponto-rot, .ponto:focus-visible .ponto-rot { opacity: 1; transform: translate(0, -50%); }
.ponto:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; border-radius: 50%; }
.barra-btn { position: relative; overflow: hidden; border: 0; border-radius: 999px; padding: 7px 14px; background: var(--green); color: #fff; font: 600 11px 'Open Sans', sans-serif; cursor: pointer; transition: transform .2s var(--suave), box-shadow .2s; }
.barra-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translateX(-120%); }
.barra-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.barra-btn:hover::after { transform: translateX(120%); transition: transform .6s var(--suave); }
.barra-sair { border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: 6px 12px; background: transparent; color: #fff; font: 600 11px 'Open Sans', sans-serif; cursor: pointer; transition: background .2s, border-color .2s; }
.barra-sair:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); }
.barra-sair[hidden] { display: none; }
/* Com a tela de login aberta, a cortina de entrada não aparece por cima */
body.com-login .intro { display: none; }
/* Progresso de leitura: acompanha a rolagem (CSS puro, onde o navegador suporta) */
.barra::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--teal)); transform-origin: left; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  .barra::after { animation: leitura linear both; animation-timeline: scroll(root); }
  @keyframes leitura { to { transform: scaleX(1); } }
}

/* ---------- Pilha de folhas: uma por obra, com gap de página ---------- */
.folhas { padding: 28px 24px 56px; }
.folha {
  position: relative; max-width: 1040px; margin: 0 auto 28px; padding: 44px 48px 52px;
  background: #fff; box-shadow: 0 10px 40px rgba(0, 20, 50, .25);
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--suave), transform .7s var(--suave);
  content-visibility: auto; contain-intrinsic-size: auto 560px;
}
.folha.on { opacity: 1; transform: none; }
/* Faixa tricolor: se desenha da esquerda e recebe um brilho */
.folha::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--faixa); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--suave) .15s; }
.folha.on::before { transform: scaleX(1); }
.folha::after { content: ''; position: absolute; left: 0; top: 0; width: 22%; height: 5px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); transform: translateX(-100%); }
.folha.on::after { animation: brilho 1.2s var(--suave) 1.1s both; }
@keyframes brilho { to { transform: translateX(560%); } }

/* Peças internas entram em cascata: --i é a ordem */
.anim { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--suave), transform .6s var(--suave); transition-delay: calc(var(--i, 0) * 70ms + 150ms); }
.folha.on .anim { opacity: 1; transform: none; }

/* Cabeçalho e rodapé da folha */
.ph { position: absolute; left: 48px; right: 48px; top: 19px; display: flex; gap: 6px; align-items: center; font-size: 8.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ph em { font-style: normal; color: var(--rule); padding: 0 2px; }

.pf { position: absolute; left: 48px; right: 48px; bottom: 19px; display: flex; justify-content: space-between; align-items: center; font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pf .num { font-size: 11px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }

/* ---------- Abertura da obra ---------- */
.abre { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; padding: 14px 0 18px; border-bottom: .7px solid var(--hair); }
.kicker { display: flex; align-items: center; gap: 10px; font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink2); }
.kicker::before { content: ''; width: 28px; height: 1.5px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--suave) .3s; }
.folha.on .kicker::before { transform: scaleX(1); }
.abre h1 { margin: 8px 0 0; font-size: clamp(22px, 2.5vw, 29px); font-weight: 300; line-height: 1.08; letter-spacing: -.025em; color: var(--navy); }
.lide { margin: 10px 0 0; max-width: 78ch; font-size: 13px; color: var(--ink2); }
.lide strong { color: var(--ink); font-weight: 600; }
.selo { justify-self: end; display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px; border-radius: 3px; background: var(--c, var(--navy)); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.selo { position: relative; }
.selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; flex: none; }
.selo.vivo::after { content: ''; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #fff; opacity: 0; }
.folha.pronta .selo.vivo::after { animation: pulso 2s ease-out infinite; }
@keyframes pulso { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
.aviso { margin: 12px 0 0; padding: 7px 11px; border-left: 3px solid var(--amber); background: #fdf6e7; color: #6b4a12; font-size: 11.5px; max-width: 92ch; }

/* ---------- Tópico ---------- */
.topico { margin-top: 20px; }
.st { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.st .n { font-size: 10.5px; font-weight: 700; color: var(--cyan); font-variant-numeric: tabular-nums; }
.st h2 { margin: 0; font-size: 18px; font-weight: 300; line-height: 1.1; letter-spacing: -.02em; color: var(--navy); }
.st .s { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--ink2); }

.kpis { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; }
.cbox { position: relative; border: .7px solid var(--hair); border-radius: 6px; padding: 13px 15px 12px; background: var(--ground); min-width: 0; overflow: hidden; }
/* Ao passar o mouse: o cartão sobe e ganha um fio ciano no topo */
.cbox::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--teal)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--suave); }
/* .pronta entra depois da cascata de entrada (app.js), para o hover não herdar o atraso dela */
.folha.pronta .cbox { transition: transform .35s var(--suave), box-shadow .35s; transition-delay: 0s; }
.folha.pronta .cbox:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 30, 70, .13); }
.cbox:hover::after { transform: scaleX(1); }
.k-acum { grid-column: span 5; background: #fff; }
.k-sem { grid-column: span 3; }
.k-ader { grid-column: span 4; }
/* Previsão de término: data à esquerda, régua (linha de base × previsão) à direita */
.k-fim { grid-column: span 12; display: grid; grid-template-columns: auto 1fr; gap: 6px 34px; align-items: center; }
.fim-data { padding-right: 34px; border-right: .7px solid var(--hair); }
.fim-sit { display: inline-flex; align-items: center; gap: 6px; margin: 9px 0 0; font-size: 11px; font-weight: 700; color: var(--c); }
.fim-sit::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.regua { position: relative; height: 44px; }
.regua::before { content: ''; position: absolute; left: 0; right: 0; top: 21px; height: 2px; border-radius: 1px; background: var(--grid); }
.regua-f { position: absolute; left: 0; top: 21px; width: var(--w); height: 2px; border-radius: 1px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--suave) .9s; }
.folha.on .regua-f { transform: scaleX(1); }
.marco { position: absolute; left: var(--x); top: 16px; width: 2px; height: 12px; margin-left: -1px; background: var(--navy); opacity: 0; transition: opacity .4s 1.3s; }
.marco.prev { top: 17px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px #fff; transform: scale(0); transition: opacity .3s 1.9s, transform .5s var(--mola) 1.9s; }
.folha.on .marco { opacity: 1; }
.folha.on .marco.prev { transform: none; }
.marco span { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 600; color: var(--ink2); white-space: nowrap; }
.marco.cima span { top: auto; bottom: 15px; }
.marco.ini span { left: 0; transform: none; }
.marco.fim span { left: auto; right: 0; transform: none; }
.marco.prev span { color: var(--c); }

.cttl { margin: 0 0 6px; font-size: 8.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.big { margin: 0; font-weight: 600; line-height: 1; letter-spacing: -.035em; color: var(--navy); font-variant-numeric: tabular-nums; }
.big small { font-size: .4em; font-weight: 600; letter-spacing: 0; margin-left: 3px; color: var(--ink2); }
.b-xl { font-size: clamp(40px, 4.6vw, 56px); }
.b-l { font-size: clamp(24px, 2.6vw, 31px); }
.cap { margin: 7px 0 0; font-size: 11px; color: var(--ink2); }
.cap b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pos { color: var(--green) !important; }
.atn { color: var(--amber) !important; }
.neg { color: var(--red) !important; }

/* Trilho realizado × previsto: a barra enche e o marcador do previsto cai no lugar */
.trilho { position: relative; height: 6px; margin-top: 14px; background: var(--grid); border-radius: 3px; }
.trilho .r { position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, var(--navy), var(--blue)); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--suave) .5s; }
.folha.on .trilho .r { transform: scaleX(1); }
/* Realizado abaixo do previsto: barra vermelha */
.trilho.atrasado .r { background: linear-gradient(90deg, #9b2c22, var(--red)); }
.trilho .p { position: absolute; left: var(--x); top: -5px; bottom: -5px; width: 2px; background: var(--cyan); opacity: 0; transform: translateY(-8px); transition: opacity .4s 1.5s, transform .5s var(--mola) 1.5s; }
.folha.on .trilho .p { opacity: 1; transform: none; }
.leg { display: flex; gap: 14px; margin-top: 7px; font-size: 9.5px; color: var(--muted); }
.leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* Aderência: as 3 barras sobem uma após a outra */
.s3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 10px; }
.s3 div { font-size: 9.5px; color: var(--muted); }
.s3 .bar { height: 32px; position: relative; overflow: hidden; border-radius: 3px; background: var(--grid); }
.s3 .bar span { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); background: var(--blue); transform: scaleY(0); transform-origin: bottom; transition: transform .9s var(--suave); transition-delay: calc(var(--j) * 140ms + 700ms); }
.folha.on .s3 .bar span { transform: scaleY(1); }
.s3 b { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Faixas de aderência (barras, percentuais e número grande) */
.s3 .bar.ad-ok span { background: var(--green); }
.s3 .bar.ad-atn span { background: #d4a017; }
.s3 .bar.ad-crit span { background: var(--red); }
.ad-ok { color: var(--green) !important; }
.ad-atn { color: #b8860b !important; }
.ad-crit { color: var(--red) !important; }
.big.ad-ok small, .big.ad-atn small, .big.ad-crit small { color: inherit; opacity: .75; }
/* Real e previsto de cada semana */
.s3-rp { display: flex; flex-direction: column; gap: 1px; margin: 3px 0 2px; font-size: 9.5px; color: var(--muted); line-height: 1.3; }
.s3-rp i { font-style: normal; font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; }
.s3-data { display: block; font-size: 9px; }



/* ---------- Tópico 02: Encarregados ---------- */
.topico + .topico { margin-top: 26px; padding-top: 18px; border-top: .7px solid var(--hair); }
.enc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.enc-col .cttl { padding-bottom: 6px; border-bottom: 2px solid var(--green); }
.enc-col.piores .cttl { border-bottom-color: var(--red); }
.enc-lista { list-style: none; margin: 0; padding: 0; }
.enc-todos { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.enc { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 10px 6px; border-bottom: .7px solid var(--grid); border-radius: 4px; }
.folha.pronta .enc { transition: background .25s; }
.folha.pronta .enc:hover { background: var(--ground); }
.enc-pos { font-size: 11px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.enc-meio { min-width: 0; }
.enc-nome { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enc-barra { display: flex; height: 5px; margin-top: 6px; border-radius: 3px; background: var(--grid); overflow: hidden; }
.enc-barra i, .enc-leg i { display: block; }
.enc-barra i { width: var(--w); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--suave); transition-delay: calc(var(--j) * 120ms + 900ms); }
.folha.on .enc-barra i { transform: scaleX(1); }
.ad { background: var(--navy); }
.ql { background: var(--cyan); }
.as { background: var(--teal); }
/* O detalhe dos pontos aparece só ao passar o mouse (e sempre no PDF) */
.enc-det { margin: 0; max-height: 0; overflow: hidden; opacity: 0; font-size: 10px; color: var(--ink2); transition: max-height .3s var(--suave), opacity .3s, margin .3s; }
.enc-det b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.enc:hover .enc-det { max-height: 30px; margin-top: 5px; opacity: 1; }
.enc-nota { min-width: 46px; padding: 4px 8px; border-radius: 4px; background: var(--c); color: #fff; font-size: 15px; font-weight: 700; text-align: center; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.enc-vazio { margin: 0; padding: 12px 14px; border-radius: 6px; background: var(--ground); color: var(--ink2); font-size: 12px; }
.enc-rod { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 10px 0 0; font-size: 10.5px; color: var(--muted); }
.enc-rod b { color: var(--ink); font-weight: 600; }
/* Itens do rodapé separados por " · " (na tela larga); no celular cada um na sua linha */
.enc-rod > span:not(.enc-leg) + span:not(.enc-leg)::before { content: '· '; }
.so-estreito { display: none; }
.enc-leg { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.enc-leg i { width: 8px; height: 8px; border-radius: 2px; margin-left: 8px; }

/* ---------- Tópico 03: Custos ---------- */
/* Cartão de custo em 3 faixas: cabeçalho (título + selo da situação), valor realizado em destaque,
   rodapé com Previsto | Desvio. Fio superior e um véu suave na cor da situação. */
.k-custo {
  grid-column: span 4; display: flex; flex-direction: column; padding: 0; overflow: hidden;
  border-top: 3px solid var(--c);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 6%, #fff) 0%, #fff 62%);
}
.kc-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 15px 0; }
.kc-cab .cttl { margin: 0; }
.custo-sit { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 4px 9px; border-radius: 999px; background: var(--c); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.custo-sit i { font-style: normal; font-size: 7.5px; }
.kc-valor { flex: 1; display: flex; align-items: baseline; gap: 4px; padding: 14px 15px 16px; font-size: clamp(26px, 2.9vw, 34px); }
.kc-moeda { align-self: flex-start; margin-top: .22em; font-size: .42em; font-weight: 600; letter-spacing: 0; color: var(--ink2); }
.kc-valor small { margin-left: 2px; }
.kc-rodape { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); border-top: .7px solid var(--hair); background: rgba(240, 243, 247, .75); }
.kc-rodape > div { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px 10px 15px; min-width: 0; }
.kc-rodape > div + div { border-left: .7px solid var(--hair); }
.kc-rodape span { font-size: 8.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.kc-rodape b { display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.kc-desvio b { color: var(--c); font-weight: 700; }
.kc-desvio em { padding: 1px 5px; border-radius: 3px; background: var(--c); color: #fff; font-style: normal; font-size: 9px; font-weight: 700; }
/* .cbox ganha padding no celular; o cartão de custo controla o seu por faixa */
.cbox.k-custo { padding: 0; }

/* Bloco Medições (dentro de Custos): último BM medido | próximo BM (tendência), mesmo cartão em faixas do custo */
.med-tit { margin: 16px 0 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.k-med {
  grid-column: span 4; display: flex; flex-direction: column; padding: 0; overflow: hidden;
  border-top: 3px solid var(--c);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 5%, #fff) 0%, #fff 62%);
}
.cbox.k-med { padding: 0; }
.k-med .kc-cab { flex-wrap: nowrap; }
.k-med .cttl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-med .custo-sit { flex-shrink: 0; }
.km-per b { color: var(--ink); }
.km-vazio { flex: 1; display: flex; align-items: center; margin: 0; padding: 10px 15px 16px; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.k-vazio { background: var(--ground); }
.km-per { margin: 4px 0 0; padding: 0 15px; font-size: 10.5px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.km-per b { font-weight: 700; color: var(--ink); }
.k-med .kc-valor { padding: 8px 15px 14px; }

/* ---------- Tópico 04: Pontos de atenção (Reunião Semanal) ---------- */
.reu-resumo { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; padding: 12px 14px; border-radius: 6px; background: var(--ground); }
.reu-resumo .cap { margin-top: 2px; }
.reu-nota { display: flex; align-items: baseline; gap: 2px; padding: 6px 12px; border-radius: 6px; background: var(--c); color: #fff; }
.reu-nota span { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.reu-nota small { font-size: 11px; font-weight: 600; opacity: .8; }
.reu-var { display: inline-block; margin-top: 4px; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.reu-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.reu { position: relative; display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 10px 12px 10px 10px; border: .7px solid var(--hair); border-left: 3px solid var(--c); border-radius: 4px; background: #fff; }
.folha.pronta .reu { transition: box-shadow .25s, transform .25s var(--suave); }
.folha.pronta .reu:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 30, 70, .1); }
.reu-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #fff; font-size: 12px; font-weight: 700; }
.reu-txt { min-width: 0; }
.reu-tema { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--ink); }
.reu-tema em { margin-left: 8px; font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* Comentário sempre completo (pedido de 10/11) */
.reu-anot { margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: var(--ink2); }

/* Tópico 04 — Qualidade (checklist): um quadro na linha toda — pizza + legenda · itens em aberto em destaque */
.ql-graf { display: flex; align-items: center; gap: 22px; }
.ql-pizza { flex: 0 0 auto; width: 92px; height: 92px; transform: rotate(-90deg); border-radius: 50%; }
.ql-pizza circle { fill: none; stroke-width: 32; }
.ql-meio { flex: 1; min-width: 0; max-width: 420px; }
.ql-pct { margin-left: 4px; font-size: 13px; letter-spacing: -.01em; color: var(--green); }
.ql-leg { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 22px; }
.ql-leg li { display: grid; grid-template-columns: 9px 1fr auto 34px; align-items: center; gap: 6px; font-size: 11px; color: var(--ink2); }
.ql-leg i { width: 9px; height: 9px; border-radius: 2px; background: var(--c); }
.ql-leg b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ql-leg em { font-style: normal; text-align: right; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ql-dest { margin-left: auto; padding: 4px 6px 4px 26px; border-left: .7px solid var(--hair); text-align: right; }
.ql-dest .big { font-size: 46px; color: var(--navy); }
.ql-dest .cttl { margin: 6px 0 0; color: var(--navy); }
/* Linha dividida: Checklist | RNC */
.ql-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.ql-linha .ql-graf { gap: 16px; }
.ql-linha .ql-pizza { width: 80px; height: 80px; }
.ql-linha .ql-leg { grid-template-columns: 1fr; gap: 2px; }
.ql-linha .ql-dest { padding-left: 18px; }
.ql-linha .ql-dest .big { font-size: 40px; }
.ql-linha .ql-ok, .ql-linha .ql-indisp { display: flex; align-items: center; }
.ql-rnc.tem .ql-dest .big { color: var(--red); }
.rnc-lista { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.rnc-lista li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; font-size: 11.5px; color: var(--ink); }
.rnc-lista b { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.rnc-lista span { font-weight: 600; }
.rnc-lista em { flex-basis: 100%; font-style: normal; font-size: 10px; color: var(--ink2); }
.ql-ok { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 14px; border-radius: 6px; background: #e8f5f1; color: var(--green); font-size: 12.5px; font-weight: 600; }
.ql-ok i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; font-style: normal; font-size: 13px; font-weight: 700; }

/* Carregando: folha-esqueleto com brilho passando */
.estado { max-width: 1040px; margin: 0 auto; padding: 40px 48px; background: #fff; color: var(--ink2); font-size: 14px; }
.esqueleto { max-width: 1040px; margin: 0 auto; padding: 44px 48px; background: #fff; box-shadow: 0 10px 40px rgba(0, 20, 50, .25); }
.esqueleto i { display: block; height: 14px; margin-bottom: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--grid) 25%, #f4f6f9 50%, var(--grid) 75%); background-size: 200% 100%; animation: onda 1.3s linear infinite; }
.esqueleto i:nth-child(1) { width: 18%; height: 9px; }
.esqueleto i:nth-child(2) { width: 46%; height: 26px; }
.esqueleto i:nth-child(3) { width: 72%; }
.esqueleto i:nth-child(4) { height: 150px; margin-top: 26px; }
@keyframes onda { to { background-position: -200% 0; } }

/* Telas médias: os cartões de custo ficam estreitos — o percentual desce em vez de ser cortado */
@media screen and (min-width: 901px) and (max-width: 1120px) {
  .kc-rodape b { flex-wrap: wrap; white-space: normal; row-gap: 3px; }
  .k-med .kc-cab { gap: 6px; }
  .k-med .cttl { letter-spacing: .06em; }
  .k-med .custo-sit { letter-spacing: 0; padding: 4px 7px; }
}
@media screen and (min-width: 901px) and (max-width: 1000px) {
  .k-med .kc-cab { padding-left: 12px; padding-right: 12px; }
  .k-med .cttl { font-size: 8.5px; }
  .k-med .custo-sit { font-size: 8.5px; padding: 3px 6px; }
}
@media screen and (max-width: 900px) {
  .ql-linha { grid-template-columns: 1fr; }
  .ql-linha .ql-dest { padding-left: 0; }
  .ql-graf { flex-wrap: wrap; gap: 14px; }
  .ql-leg { grid-template-columns: 1fr; }
  .ql-dest { flex-basis: 100%; margin-left: 0; padding: 10px 0 0; border-left: 0; border-top: .7px solid var(--hair); text-align: left; display: flex; align-items: baseline; gap: 10px; }
  .ql-dest .cttl { margin: 0; }
  .barra { gap: 8px; padding: 0 12px; padding-top: env(safe-area-inset-top); height: calc(48px + env(safe-area-inset-top)); }
  .barra-data { display: none; }
  .barra-btn { padding: 7px 12px; }

  /* Navegação: as bolinhas viram uma faixa de obras no rodapé, rolável com o dedo (alcance do polegar) */
  .pontos {
    left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); transform: none;
    flex-direction: row; gap: 4px; padding: 5px; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: 999px;
  }
  .pontos::-webkit-scrollbar { display: none; }
  .ponto { width: auto; height: 34px; flex: none; padding: 0 13px; border-radius: 999px; scroll-snap-align: center; transform: translateY(10px); }
  .ponto i { display: none; }
  .ponto-rot { position: static; opacity: 1; transform: none; padding: 0; background: none; box-shadow: none; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .78); gap: 6px; }
  .ponto-rot b { font-size: 10px; }
  .ponto:hover .ponto-rot, .ponto:focus-visible .ponto-rot { transform: none; }
  .ponto.ativo { background: var(--cyan); }
  .ponto.ativo .ponto-rot { color: var(--navy); }
  .ponto.ativo .ponto-rot b { color: var(--navy); }
  .ponto:focus-visible { border-radius: 999px; }

  .folhas { padding: 10px 0 calc(72px + env(safe-area-inset-bottom)); }
  .folha { padding: 34px 14px 40px; margin-bottom: 10px; }
  .ph, .pf { left: 14px; right: 14px; }
  .ph { top: 15px; }
  .pf { bottom: 14px; }

  /* Abertura: nome e selo compactos */
  .abre { grid-template-columns: 1fr; gap: 10px; padding: 10px 0 14px; }
  .abre h1 { font-size: 25px; }
  .selo { justify-self: start; }

  /* Subtítulo do tópico (semana, data da reunião, marca do Club) desce para a linha de baixo */
  .st { flex-wrap: wrap; row-gap: 2px; }
  .st .s { display: block; flex-basis: 100%; margin-left: 0; padding-left: 22px; font-size: 10px; }
  .topico { margin-top: 16px; }
  .topico + .topico { margin-top: 18px; padding-top: 14px; }

  /* Avanço: acumulado inteiro; última semana e aderência lado a lado; término inteiro */
  .kpis { gap: 8px; }
  .cbox { padding: 12px 13px 11px; }
  .k-acum { grid-column: span 12; }
  .k-sem, .k-ader { grid-column: span 6; }
  .b-xl { font-size: 44px; }
  .b-l { font-size: 26px; }
  .s3 { gap: 5px; }
  .s3 .bar { height: 26px; }
  .s3-sem { display: none; }
  .k-fim { grid-template-columns: 1fr; gap: 8px; }
  .fim-data { padding: 0 0 10px; border-right: 0; border-bottom: .7px solid var(--hair); }
  /* Régua: na tela estreita os rótulos colidem mesmo com os marcos afastados — linha de base
     sempre acima, previsão sempre abaixo */
  .regua { height: 50px; margin-top: 16px; }
  .regua::before, .regua-f { top: 24px; }
  .marco { top: 19px; }
  .marco.prev { top: 20px; }
  .marco.lb span { top: auto; bottom: 16px; }
  .marco.prev span { top: 16px; bottom: auto; }

  /* Encarregados: uma coluna; o detalhe da nota fica sempre visível (não existe "passar o mouse" no toque) */
  .enc-cols, .enc-todos { grid-template-columns: 1fr; }
  .enc-col.piores { margin-top: 6px; }
  .enc { padding: 9px 2px; gap: 10px; grid-template-columns: 26px 1fr auto; }
  .enc-det { max-height: none; opacity: 1; margin-top: 4px; font-size: 10.5px; }
  .enc-det .den { display: none; }
  .enc-rod { flex-direction: column; align-items: flex-start; gap: 2px; }
  .enc-rod > span:not(.enc-leg) + span:not(.enc-leg)::before { content: none; }
  .enc-leg { margin-top: 4px; }
  .so-largo { display: none; }
  .so-estreito { display: inline; }
  .enc-leg { margin-left: 0; flex-basis: 100%; }
  .enc-leg i:first-child { margin-left: 0; }

  /* Custos: cada indicador numa linha compacta — título; valor | diferença; previsto | situação */
  .k-custo { grid-column: span 12; }
  .kc-valor { font-size: 30px; padding: 10px 15px 13px; }
  .k-med { grid-column: span 12; }
  .k-med .kc-valor { font-size: 26px; padding: 6px 15px 11px; }

  /* Pontos de atenção */
  .reu-lista { grid-template-columns: 1fr; gap: 8px; }
  .reu-resumo { gap: 12px; padding: 10px 12px; }
  .reu-tema em { display: block; margin: 2px 0 0; }
  .reu-anot { font-size: 12px; }
}
@media screen and (max-width: 520px) {
  .barra-marca .lg-palavra { display: none; }
}

/* Quem pede menos movimento vê tudo já no lugar */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro { display: none; }
  .ponto { opacity: 1; transform: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .folha, .anim, .trilho .p { opacity: 1; transform: none; }
  .folha::before, .kicker::before, .trilho .r, .s3 .bar span, .regua-f, .marco.prev { transform: none; }
  .marco { opacity: 1; }
  .enc-barra i { transform: none; }
}

/* ---------- PDF: A4 retrato ----------
   Área útil 186 × 265 mm (~703 px). Cada obra começa numa página nova; tópicos e cartões não
   quebram ao meio; título de tópico nunca fica sozinho no pé da página. Cabeçalho da obra na
   primeira página dela; numeração "página X de Y" no rodapé de todas (caixas de margem do @page). */
@page {
  size: A4 portrait;
  margin: 12mm 12mm 14mm;
  @bottom-left { content: "Briefing MSE"; font: 600 7pt 'Open Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8a94a6; }
  @bottom-right { content: "Página " counter(page) " de " counter(pages); font: 600 7pt 'Open Sans', sans-serif; color: #002f6c; }
}
@media print {
  html, body { background: #fff; }
  body { font-size: 9.5px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .barra, .intro, .pontos, .login, .pf, .esqueleto { display: none !important; }
  body::before, .folha::after { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }

  /* Estado final de tudo que anima na tela */
  .folha, .anim, .trilho .p, .marco { opacity: 1 !important; transform: none !important; }
  .folha::before, .kicker::before, .trilho .r, .s3 .bar span, .regua-f, .marco.prev, .enc-barra i { transform: none !important; }

  /* Folha = obra: sem moldura, começa em página nova */
  .folhas { padding: 0; }
  .folha { max-width: none; margin: 0; padding: 0; box-shadow: none; content-visibility: visible; contain-intrinsic-size: none; }
  .folha + .folha { break-before: page; }
  .folha::before { height: 4px; }
  .ph { position: static; padding: 7px 0 0; font-size: 7px; }

  /* Abertura */
  .abre { padding: 6px 0 8px; gap: 12px; grid-template-columns: 1fr auto; }
  .kicker { font-size: 7.5px; }
  .abre h1 { margin-top: 4px; font-size: 20px; }
  .selo { font-size: 7.5px; padding: 3px 7px; }
  .aviso { font-size: 8.5px; padding: 5px 8px; margin-top: 8px; }

  /* Tópicos */
  .topico { margin-top: 7px; break-inside: auto; }
  .topico + .topico { margin-top: 6px; padding-top: 5px; }
  .st { margin-bottom: 5px; gap: 8px; break-after: avoid; }
  .st h2 { font-size: 14px; }
  .st .n { font-size: 8.5px; }
  .st .s { font-size: 8px; }
  .kpis { gap: 6px; }
  .cbox { padding: 7px 10px; border-radius: 4px; break-inside: avoid; box-shadow: none !important; transform: none !important; }
  .cttl { font-size: 6.8px; margin-bottom: 4px; }
  .b-xl { font-size: 30px; }
  .b-l { font-size: 19px; }
  .cap { font-size: 8px; margin-top: 4px; }
  .trilho { margin-top: 7px; height: 5px; }
  .leg { font-size: 7.5px; margin-top: 5px; }
  .s3 { margin-top: 6px; gap: 5px; }
  .s3 .bar { height: 16px; }
  .s3 div { font-size: 7.5px; }
  .s3 b { font-size: 9px; }
  .s3-rp { font-size: 6.8px; margin: 1px 0; }
  .s3-data { font-size: 6.8px; }
  .k-fim { gap: 4px 18px; }
  .fim-data { padding-right: 18px; }
  .fim-sit { font-size: 8.5px; margin-top: 5px; }
  .regua { height: 32px; }
  .marco span { font-size: 7.5px; }

  /* Encarregados */
  .enc-cols { gap: 6px 16px; }
  .enc-todos { column-gap: 16px; }
  .enc { padding: 2px 4px; gap: 8px; grid-template-columns: 22px 1fr auto; break-inside: avoid; }
  .enc-pos { font-size: 8.5px; }
  .enc-nome { font-size: 9.5px; }
  .enc-barra { height: 3px; margin-top: 3px; }
  .enc-det { max-height: none; opacity: 1; margin-top: 2px; font-size: 7.2px; }
  .enc-nota { min-width: 34px; padding: 2px 6px; font-size: 10.5px; }
  .enc-rod { font-size: 7.5px; margin-top: 4px; }
  .enc-leg { display: none; }
  .enc-vazio { font-size: 8.5px; padding: 7px 10px; }

  /* Qualidade no PDF: o mesmo quadro, mais baixo */
  .ql-graf { gap: 14px; padding: 5px 10px; }
  .ql-pizza { width: 44px; height: 44px; }
  .ql-meio { max-width: 280px; }
  .ql-graf .cttl { margin-bottom: 1px; }
  .ql-pct { font-size: 8.5px; }
  .ql-leg { gap: 0 14px; margin-top: 1px; }
  .ql-leg li { font-size: 7.2px; gap: 4px; grid-template-columns: 6px 1fr auto 22px; }
  .ql-leg i { width: 6px; height: 6px; }
  .ql-leg em { font-size: 6.5px; }
  .ql-dest { padding: 2px 4px 2px 16px; }
  .ql-dest .big { font-size: 24px; }
  .ql-dest .cttl { margin-top: 3px; }
  .ql-linha { gap: 6px; }
  .ql-linha .ql-pizza { width: 44px; height: 44px; }
  .ql-linha .ql-leg { gap: 0; }
  .ql-linha .ql-dest { padding-left: 12px; }
  .ql-linha .ql-dest .big { font-size: 22px; }
  .rnc-lista { gap: 2px; margin-top: 1px; }
  .rnc-lista li { font-size: 7.8px; column-gap: 5px; }
  .rnc-lista em { font-size: 6.8px; }
  .ql-ok { font-size: 8.5px; padding: 5px 10px; gap: 7px; }
  .ql-ok i { width: 14px; height: 14px; font-size: 8.5px; }
  /* Custos */
  .k-custo { border-top-width: 2px; padding: 0; }
  .kc-cab { padding: 7px 10px 0; }
  .custo-sit { font-size: 6.5px; padding: 2px 6px; }
  .kc-valor { font-size: 20px; padding: 6px 10px 8px; }
  .kc-rodape > div { padding: 5px 10px 6px; gap: 1px; }
  .kc-rodape span { font-size: 6.5px; }
  .kc-rodape b { font-size: 9.5px; gap: 4px; }
  .kc-desvio em { font-size: 7px; }
  /* Medições e OCs no PDF: 3 cartões compactos — título + selo numa linha, período, valor */
  .med-tit { display: none; }
  .kpis + .med-tit + .kpis { margin-top: 5px; }
  .k-med { border-top-width: 2px; }
  .k-med .kc-cab { padding: 5px 8px 0; gap: 5px; }
  .k-med .custo-sit { font-size: 5.5px; padding: 1px 5px; }
  .km-per { padding: 0 8px; margin-top: 2px; font-size: 7px; }
  .k-med .kc-valor { font-size: 15px; padding: 2px 8px 5px; }
  .km-vazio { padding: 4px 8px 7px; font-size: 7.5px; }

  /* Pontos de atenção: comentário completo, cartões alinhados em 2 colunas */
  .reu-resumo { padding: 5px 9px; gap: 10px; margin-bottom: 6px; break-inside: avoid; break-after: avoid; }
  .reu-nota span { font-size: 15px; }
  .reu-nota { padding: 4px 9px; }
  .reu-resumo .cttl { margin-bottom: 1px; }
  .reu-resumo .cap { margin-top: 1px; }
  .reu-var { font-size: 8px; }
  .reu-lista { display: block; column-count: 2; column-gap: 8px; }
  .reu { padding: 3px 8px 3px 7px; margin-bottom: 3px; gap: 7px; grid-template-columns: 18px 1fr; break-inside: avoid; transform: none !important; box-shadow: none !important; }
  .reu-n { width: 17px; height: 17px; font-size: 9px; }
  .reu-tema { font-size: 9px; margin: 1px 0 0; }
  .reu-tema em { font-size: 6.5px; }
  .reu-anot { font-size: 7.5px; line-height: 1.27; margin-top: 1px; }

  .club-marca { --s: 13px !important; }
}