/* Sala de produção. Protótipo F0.
   Tokens herdados do site oficial (site/assets/css/base.css). Laranja só para
   "precisa de você", ação principal e foco. Etapa concluída fica branca.
   Movimento: mola em transform e opacity; nada anima layout caro. */

:root {
  color-scheme: dark;

  --tinta:   #070908;
  --tinta-2: #0e1110;
  --tinta-3: #161a19;
  --tinta-4: #1e2322;
  --brasa:    #fc3800;
  --ferrugem: #e4660c;
  --brasa-fundo: rgba(252, 56, 0, .13);
  --brasa-borda: rgba(252, 56, 0, .4);
  --perigo: #ff7a66;
  /* verde só para o que o cliente validou: aprovado, etapa validada, projeto entregue */
  --verde:       #30d158;
  --verde-texto: #6be38c;
  --verde-fundo: rgba(48, 209, 88, .14);
  --verde-borda: rgba(48, 209, 88, .42);

  /* três níveis de cor do comentário. Pedido do Arthur: abre uma exceção à regra do
     verde, que aqui é "Manter". O texto sobre o preenchimento é sempre --tinta. */
  --nivel-manter:  #3ddc72;
  --nivel-ajustar: #ffd60a;
  --nivel-remover: #ff4d5e;

  --texto:   #ffffff;
  --texto-2: rgba(255, 255, 255, .68);
  --texto-3: rgba(255, 255, 255, .44);
  --linha:       rgba(255, 255, 255, .12);
  --linha-forte: rgba(255, 255, 255, .26);
  --linha-suave: rgba(255, 255, 255, .07);

  --vidro: rgba(30, 34, 33, .9);
  --sombra-alta: 0 30px 80px -20px rgba(0, 0, 0, .85), 0 10px 28px -10px rgba(0, 0, 0, .6);

  --f-texto: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;

  --e-saida: cubic-bezier(.16, 1, .3, 1);
  --e-entrada: cubic-bezier(.4, 0, 1, 1);
  --mola: var(--e-saida);

  --chanfro: 16px;
  --gutter: 16px;
  /* o corte da marca em peça pequena: botão, selo, chip */
  --c-p: 5px;
  --c-m: 8px;
}

/* mola de verdade, com um leve overshoot */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --mola: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
      0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.6%, 1);
  }
}

@media (min-width: 720px) { :root { --gutter: clamp(24px, 4vw, 56px); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.travado { overflow: hidden; }
/* a doca do rodapé (página do cliente) não pode cobrir o que recebe foco: a página
   grava a altura dela em --doca-alt e o navegador rola o campo para cima dela */
html { scroll-padding-bottom: calc(var(--doca-alt, 0px) + 16px); }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--tinta);
  color: var(--texto);
  font: 400 15px/1.5 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(1100px 520px at 50% -240px, rgba(252, 56, 0, .07), transparent 70%);
}

img, video, svg, iframe { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--brasa); outline-offset: 2px; border-radius: 6px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }
::selection { background: var(--brasa); color: #fff; }

.sem-js { padding: 40px; color: var(--texto-2); }
.app { min-height: 100svh; }
.tela { min-height: 100svh; }

.ico { display: inline-grid; place-items: center; flex: none; }
.ico svg { width: 18px; height: 18px; }

.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* rótulo: micro, caixa alta. Sem traço na frente: nada que leia como travessão */
.rotulo {
  display: flex; align-items: center; gap: .65rem;
  font: 600 .75rem/1.2 var(--f-texto);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.nota { font-size: 13px; color: var(--texto-3); line-height: 1.5; }
.erro { font-size: 13px; color: var(--perigo); }

/* ---------------------------------------------------------------- botões */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 16px;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  color: var(--texto);
  font: 600 14px/1 var(--f-texto); letter-spacing: -.005em;
  white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .4s var(--mola), background-color .2s, opacity .2s, color .2s;
}
.botao:hover { background: rgba(255, 255, 255, .14); }
.botao:active { transform: scale(.95); transition-duration: .12s; }
.botao:disabled { opacity: .4; pointer-events: none; }
.botao svg { width: 16px; height: 16px; flex: none; }
/* Botão de ação principal: placa de brasa com o corte da marca. No hover e no foco ela
   esfria para branco, como o portal do site. O corte tira o contorno do foco, por isso
   o foco é a mudança de cor. */
.botao-primario {
  --c: 10px;
  border-radius: 0; background: var(--brasa); color: var(--tinta);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.botao-g.botao-primario { --c: 13px; }
.botao-p.botao-primario { --c: 8px; }
.botao-primario:hover, .botao-primario:focus-visible { background: #fff; color: var(--tinta); outline: none; }
.botao-primario:disabled { background: rgba(255, 255, 255, .1); color: var(--texto-3); opacity: 1; }
.botao-fantasma { background: transparent; color: var(--texto-2); }
.botao-fantasma:hover { background: rgba(255, 255, 255, .08); color: var(--texto); }
.botao-perigo { background: transparent; color: var(--perigo); }
.botao-perigo:hover { background: rgba(255, 90, 70, .12); }
.botao-perigo-cheio { background: rgba(255, 90, 70, .18); color: var(--perigo); }
.botao-perigo-cheio:hover { background: rgba(255, 90, 70, .26); }
.botao-p { height: 30px; padding: 0 12px; font-size: 13px; }
.botao-p svg { width: 14px; height: 14px; }
.botao-g { height: 44px; padding: 0 22px; font-size: 15px; }

.botao-ico {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: var(--texto-2);
  cursor: pointer;
  transition: transform .4s var(--mola), background-color .2s, color .2s;
}
.botao-ico:hover { background: rgba(255, 255, 255, .13); color: var(--texto); }
.botao-ico:active { transform: scale(.9); }
.botao-ico svg { width: 15px; height: 15px; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 15px;
  border: 1px solid var(--linha); border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: var(--texto);
  font: 500 13.5px/1 var(--f-texto);
  cursor: pointer;
  transition: transform .4s var(--mola), background-color .2s, border-color .2s;
}
.chip:hover { background: rgba(255, 255, 255, .07); border-color: var(--linha-forte); }
.chip:active { transform: scale(.95); }
.chip .ico svg { width: 15px; height: 15px; color: var(--texto-2); }

/* ---------------------------------------------------------------- campos */

.campo {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--linha); border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  color: var(--texto);
  font: 400 14px/1.4 var(--f-texto);
  outline: none;
  transition: border-color .2s, box-shadow .25s, background-color .2s;
}
.campo:hover { border-color: var(--linha-forte); }
.campo:focus { border-color: rgba(252, 56, 0, .75); box-shadow: 0 0 0 3px rgba(252, 56, 0, .22); background: rgba(255, 255, 255, .07); }
.campo::placeholder { color: var(--texto-3); }
textarea.campo { resize: none; min-height: 40px; overflow: hidden; }
.campo-p { padding: 6px 10px; font-size: 13px; border-radius: 8px; }
.campo-data { color-scheme: dark; width: auto; min-width: 150px; }

/* ---------------------------------------------------------------- controle segmentado */

.seg {
  position: relative; isolation: isolate;
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 2px; border-radius: 10px;
  background: rgba(255, 255, 255, .07);
}
.seg-botao {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 14px;
  border: 0; border-radius: 8px; background: none;
  color: var(--texto-2);
  font: 500 13px/1 var(--f-texto);
  white-space: nowrap; cursor: pointer;
  transition: color .25s;
  -webkit-tap-highlight-color: transparent;
}
.seg-botao:hover { color: var(--texto); }
.seg-botao[aria-pressed="true"] { color: var(--texto); }
.seg-polegar {
  position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .16);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4), inset 0 .5px 0 rgba(255, 255, 255, .16);
  transition: transform .55s var(--mola), width .55s var(--mola), background-color .3s;
}
.seg-estados { display: grid; width: 100%; }
.seg-estados .seg-botao { padding: 0 4px; font-size: 11.5px; }
.seg-estados[data-estado="aguardando_cliente"] .seg-polegar { background: var(--brasa); }
.seg-estados[data-estado="concluida"] .seg-polegar { background: #fff; }
.seg-estados[data-estado="aguardando_cliente"] .seg-botao[aria-pressed="true"],
.seg-estados[data-estado="concluida"] .seg-botao[aria-pressed="true"] { color: var(--tinta); font-weight: 650; }

.contador {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-grid; place-items: center;
  border-radius: 9px;
  background: var(--brasa); color: var(--tinta);
  font-size: 11px; font-weight: 700;
}

/* ---------------------------------------------------------------- interruptor */

.interruptor {
  position: relative; flex: none;
  width: 38px; height: 23px;
  padding: 0; border: 0; border-radius: 12px;
  background: rgba(255, 255, 255, .16);
  cursor: pointer;
  transition: background-color .3s;
}
.interruptor::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 19px; height: 19px; border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
  transition: transform .5s var(--mola), width .25s var(--e-saida);
}
.interruptor[aria-checked="true"] { background: var(--brasa); }
.interruptor[aria-checked="true"]::after { transform: translateX(15px); }
.interruptor:active::after { width: 23px; }
.interruptor[aria-checked="true"]:active::after { transform: translateX(11px); }

/* ---------------------------------------------------------------- pílulas */

.pilula {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--texto-2);
  font: 600 11.5px/1 var(--f-texto);
  white-space: nowrap;
}
/* Cada estado tem o seu glifo, no espírito dos SF Symbols, desenhado em CSS.
   Os glifos repetem o desenho do nó na linha do tempo. */
.pilula::before {
  content: ""; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.pilula-brasa { background: var(--brasa-fundo); color: var(--brasa); }
.pilula-brasa::before { width: 7px; height: 7px; box-shadow: 0 0 0 2.5px rgba(252, 56, 0, .28); }
.pilula-ajuste { background: rgba(228, 102, 12, .15); color: #f3a463; }
.pilula-ajuste::before {
  width: 11px; height: 11px; border-radius: 0;
  -webkit-mask: var(--g-ajuste) center / contain no-repeat; mask: var(--g-ajuste) center / contain no-repeat;
}
.pilula-ok { background: var(--verde-fundo); color: var(--verde-texto); box-shadow: inset 0 0 0 1px rgba(48, 209, 88, .22); }
.pilula-ok::before, .pilula-feita::before {
  width: 12px; height: 12px; border-radius: 0;
  -webkit-mask: var(--g-check) center / contain no-repeat; mask: var(--g-check) center / contain no-repeat;
}
.pilula-feita { background: rgba(255, 255, 255, .12); color: #fff; }
.pilula-andamento { color: #fff; background: rgba(255, 255, 255, .1); }
.pilula-andamento::before {
  width: 9px; height: 9px;
  background: conic-gradient(currentColor 180deg, transparent 0);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
/* Com a equipe: neutro e apagado. Não pede nada de você. */
.pilula-equipe { color: var(--texto-2); background: rgba(255, 255, 255, .07); }
.pilula-equipe::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pilula-pausa::before {
  width: 7px; height: 8px; border-radius: 1px;
  background: linear-gradient(90deg, currentColor 0 2.5px, transparent 2.5px 4.5px, currentColor 4.5px);
}
.pilula-proxima::before { width: 8px; height: 8px; background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.pilula-sem-ponto::before { display: none; }
:root {
  --g-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.8l4.4 4.4L19 7.4'/%3E%3C/svg%3E");
  --g-ajuste: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5L4.5 9.5 9 14'/%3E%3Cpath d='M4.5 9.5H14a5.5 5.5 0 010 11h-3'/%3E%3C/svg%3E");
}
/* a pílula que acabou de mudar entra com mola e o glifo se redesenha */
.pilula.nova { animation: pilula-nova .7s var(--mola) both; }
@keyframes pilula-nova { from { transform: scale(.6); opacity: 0; } 40% { opacity: 1; } }

/* ---------------------------------------------------------------- barra do editor */

.editor { min-height: 100svh; display: flex; flex-direction: column; }

.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  height: 56px; padding: 0 var(--gutter);
  background: rgba(7, 9, 8, .72);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--linha-suave);
}
.barra-voltar {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 6px 10px 6px 4px; border-radius: 8px;
  color: var(--texto-2); font-size: 14px;
  transition: background-color .2s, color .2s;
}
.barra-voltar:hover { color: var(--texto); background: rgba(255, 255, 255, .06); }
.barra-voltar svg { width: 18px; height: 18px; }
.barra-caminho { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color: var(--texto-3); }
.barra-caminho strong { color: var(--texto); font-weight: 600; }
.barra-dir { display: flex; align-items: center; gap: 14px; }

.salvo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-3); white-space: nowrap; }
.salvo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .4); transition: background-color .3s; }
.salvo[data-estado="salvando"]::before { background: var(--brasa); }
.salvo[data-estado="erro"] { color: var(--perigo); }
.salvo[data-estado="erro"]::before { background: var(--perigo); }

/* ---------------------------------------------------------------- palco (container único) */

.palco {
  position: relative;
  padding: clamp(20px, 3.2vw, 44px);
  background: linear-gradient(180deg, var(--tinta-2), rgba(14, 17, 16, .55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  clip-path: polygon(var(--chanfro) 0, 100% 0, 100% calc(100% - var(--chanfro)),
    calc(100% - var(--chanfro)) 100%, 0 100%, 0 var(--chanfro));
}

/* o palco ocupa a tela. Sem painel, a linha fica no meio. Com painel aberto,
   ela desce para a base e o painel ocupa o meio (FLIP no editor.js) */
.editor-area {
  flex: 1;
  display: flex; flex-direction: column;
  width: 100%; max-width: 1440px;
  margin: 0 auto;
  padding: clamp(16px, 3vh, 32px) var(--gutter) clamp(20px, 4vh, 40px);
}
.palco-editor {
  flex: 1; display: flex; flex-direction: column; min-height: 560px;
  padding-bottom: calc(clamp(20px, 3.2vw, 44px) + 30px);
}
.palco-miolo { margin-block: auto; padding-top: 24px; }
.palco .palco-miolo > .linha { margin-top: 0; }
/* o palco do editor e o do cliente compartilham o foco: a dica (ou a nota) some quando a linha desce */
.palco-foco > .palco-dica,
.palco-foco > .palco-nota {
  position: absolute; left: 0; right: 0; bottom: clamp(18px, 2.8vw, 34px);
  margin: 0;
  transition: opacity .35s var(--e-saida), transform .6s var(--mola);
}
.palco-foco .linha { min-height: 190px; }
@media (min-width: 720px) {
  .palco-foco.focando > .palco-miolo { margin-bottom: 0; }
  .palco-foco.focando > .palco-dica,
  .palco-foco.focando > .palco-nota { opacity: 0; transform: translateY(10px); pointer-events: none; }
}

.palco-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: clamp(22px, 4vw, 44px); }
.palco-marca { height: 13px; width: auto; }
.palco-x { color: var(--texto-3); font-size: 13px; }
.campo-cliente {
  width: 16ch; padding: 4px 6px; margin-left: -6px;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--texto-2);
  font: 600 12px/1 var(--f-texto); letter-spacing: .1em; text-transform: uppercase;
  outline: none; transition: background-color .2s;
}
.campo-cliente:hover { background: rgba(255, 255, 255, .05); }
.campo-cliente:focus { background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 2px rgba(252, 56, 0, .5); }
.palco-rotulo { margin-left: auto; gap: 10px; }
.palco-leitura { margin-top: 4px; font-size: 12.5px; color: var(--texto-3); }

.palco-titulo {
  width: 100%;
  padding: 4px 10px; margin: 0 -10px;
  border: 0; border-radius: 12px; background: transparent;
  color: var(--texto);
  font: 700 clamp(30px, 1.2rem + 3vw, 62px)/1.04 var(--f-display);
  letter-spacing: -.045em; text-overflow: ellipsis;
  outline: none;
  transition: background-color .2s, box-shadow .25s;
}
.palco-titulo:hover { background: rgba(255, 255, 255, .035); }
.palco-titulo:focus { background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 2px rgba(252, 56, 0, .45); }

.palco .linha { margin-top: clamp(28px, 6vw, 72px); }

.palco-dica {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  margin-top: 26px;
  font-size: 12.5px; color: var(--texto-3);
}
.tecla {
  display: inline-block; margin-right: 4px; padding: 2px 7px;
  border-radius: 6px; background: rgba(255, 255, 255, .08);
  color: var(--texto-2); font-size: 11.5px; font-weight: 600;
}

.recolhe {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .5s var(--mola), opacity .3s;
}
.recolhe.aberto { grid-template-rows: 1fr; opacity: 1; }
.recolhe > * { min-height: 0; overflow: hidden; }

.modelos { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 18px; }
.modelos p { font-size: 13.5px; color: var(--texto-3); text-align: center; }
.modelos-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ---------------------------------------------------------------- linha do tempo */

.linha { position: relative; }
.linha-trilho {
  overflow-x: auto; overflow-y: hidden;
  padding: 26px 0 10px;
  scrollbar-width: none;
}
.linha-trilho::-webkit-scrollbar { display: none; }
.linha.tem-dir .linha-trilho { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.linha.tem-esq .linha-trilho { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); mask-image: linear-gradient(90deg, transparent, #000 15%); }
.linha.tem-esq.tem-dir .linha-trilho { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }

.linha-etapas {
  position: relative;
  display: flex;
  min-width: 100%;
  margin: 0; padding: 0;
  list-style: none;
}
.linha.vazia .linha-etapas { justify-content: center; }

.etapa {
  position: relative;
  flex: 1 0 150px;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 10px;
  text-align: center;
}
.linha.vazia .etapa-mais { flex: 0 0 170px; }
.linha-cliente .etapa { flex-basis: 124px; padding: 0 6px; }

.etapa-no {
  position: relative; z-index: 2;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%; background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.etapa-no::before {
  content: "";
  grid-area: 1 / 1;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--linha-forte);
  background: var(--tinta-2);
  transition: transform .55s var(--mola), border-color .4s, background-color .4s, box-shadow .5s;
}
.etapa-no:hover::before { transform: scale(1.16); }
.etapa-no:active::before { transform: scale(.9); transition-duration: .15s; }
/* ângulo do meio disco de "em andamento"; registrado para poder animar */
@property --varre { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.no-miolo {
  grid-area: 1 / 1;
  width: 8px; height: 8px; border-radius: 50%;
  background: transparent;
  transform: scale(0);
  --varre: 0deg;
  transition: transform .55s var(--mola), background-color .3s, width .3s, height .3s, border-radius .3s,
    --varre .9s var(--e-saida) .1s;
}
.no-check { grid-area: 1 / 1; width: 13px; height: 13px; color: var(--tinta); opacity: 0; transition: opacity .2s; }
.no-check svg { width: 13px; height: 13px; stroke-width: 2.6; }
.no-check path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .5s var(--e-saida) .12s; }
.no-badge {
  position: absolute; top: 2px; right: 0;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--brasa); color: var(--tinta);
  font: 700 10px/1 var(--f-texto);
  transform: scale(0);
  transition: transform .5s var(--mola);
  box-shadow: 0 0 0 2px var(--tinta-2);
}
.no-badge.on { transform: scale(1); }
/* selo verde de etapa validada: canto de baixo do nó, como um badge do iOS */
.no-valida {
  position: absolute; right: 1px; bottom: 1px;
  width: 17px; height: 17px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--verde); color: var(--tinta);
  box-shadow: 0 0 0 2px var(--tinta-2);
  transform: scale(0);
  transition: transform .6s var(--mola);
}
.no-valida svg { width: 11px; height: 11px; stroke-width: 3.2; }
.no-valida path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .45s var(--e-saida) .2s; }
.validada .no-valida { transform: scale(1); }
.validada .no-valida path { stroke-dashoffset: 0; }
.no-badge.on ~ .no-valida { display: none; }

/* Estados sem nada pulsando. Em andamento é um meio disco dentro do anel:
   lê como "em curso" sem prometer percentual. Ao entrar no estado, o meio
   disco varre de 0 a 180 graus uma vez e para. */
.est-em_andamento .etapa-no::before { border: 2px solid #fff; }
.est-em_andamento .no-miolo {
  width: 12px; height: 12px;
  transform: scale(1);
  --varre: 180deg;
  background: conic-gradient(#fff var(--varre), transparent 0);
}
.est-com_equipe .etapa-no::before { border: 2px solid rgba(255, 255, 255, .42); }
.est-com_equipe .no-miolo {
  width: 12px; height: 12px;
  transform: scale(1);
  background: conic-gradient(rgba(255, 255, 255, .42) 180deg, transparent 0);
}
.est-aguardando_cliente .etapa-no::before { border: 2px solid var(--brasa); box-shadow: 0 0 0 5px rgba(252, 56, 0, .14), 0 0 22px rgba(252, 56, 0, .32); }
.est-aguardando_cliente .no-miolo { background: var(--brasa); transform: scale(1); }
/* Retorno do cliente no editor: ele respondeu tudo, então o nó para de dizer
   "aguardando". Verde é tudo aprovado. Âmbar com a seta de volta é ajuste
   pedido: a vez é da equipe. Sem halo, porque ninguém está esperando o cliente. */
.ret-validada .etapa-no::before { border: 2px solid var(--verde); box-shadow: 0 0 0 5px rgba(48, 209, 88, .12); }
.ret-validada .no-miolo { width: 9px; height: 9px; background: var(--verde); transform: scale(1); }
.ret-ajuste .etapa-no::before { border: 2px solid #f3a463; box-shadow: 0 0 0 5px rgba(243, 164, 99, .1); }
.ret-ajuste .no-miolo {
  width: 15px; height: 15px; border-radius: 0;
  background: #f3a463; transform: scale(1);
  -webkit-mask: var(--g-ajuste) center / contain no-repeat; mask: var(--g-ajuste) center / contain no-repeat;
}
.est-concluida .etapa-no::before { background: #fff; border-color: #fff; }
.est-concluida .no-check { opacity: 1; }
.est-concluida .no-check path { stroke-dashoffset: 0; }
/* pausada: duas barras de pausa, não um traço */
.est-pausada .no-miolo {
  width: 8px; height: 9px; border-radius: 1px;
  background: linear-gradient(90deg, var(--texto-2) 0 3px, transparent 3px 5px, var(--texto-2) 5px);
  transform: scale(1);
}

.etapa.selecionada .etapa-no::before { box-shadow: 0 0 0 5px rgba(255, 255, 255, .14); }
.etapa.selecionada.est-aguardando_cliente .etapa-no::before { box-shadow: 0 0 0 5px rgba(252, 56, 0, .3), 0 0 26px rgba(252, 56, 0, .38); }

/* foco: a etapa aberta cresce um pouco e as outras recuam, apagadas e fora de foco */
.etapa { transition: opacity .5s var(--e-saida), filter .5s var(--e-saida); }
.etapa-no { transition: transform .65s var(--mola); }
.linha.focada .etapa:not(.selecionada) { opacity: .26; filter: blur(2.5px); }
.linha.focada .etapa:not(.selecionada):hover { opacity: .6; filter: blur(.8px); }
.linha.focada .etapa.selecionada > .etapa-liga { opacity: .35; }
.linha.focada .etapa.selecionada .etapa-no { transform: scale(1.24); }
.linha.focada .etapa.selecionada .etapa-titulo { color: var(--texto); }

.etapa-liga {
  position: absolute; z-index: 1;
  top: 22px; left: 50%;
  width: 100%; height: 2px; margin-top: -1px;
  border-radius: 2px;
  background: var(--linha);
  overflow: hidden;
  transition: opacity .3s;
}
.etapa-liga-cheia {
  position: absolute; inset: 0;
  background: #fff;
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--mola) calc(var(--i, 0) * 80ms + 160ms);
}
.est-concluida > .etapa-liga .etapa-liga-cheia { transform: scaleX(1); }
.linha.montando .etapa-liga-cheia { transform: scaleX(0) !important; transition: none !important; }
.etapa.ultima .etapa-liga { display: none; }
.linha-editor .etapa.ultima .etapa-liga {
  display: block;
  background: repeating-linear-gradient(90deg, var(--linha) 0 6px, transparent 6px 12px);
}
.linha-editor .etapa.ultima .etapa-liga-cheia { display: none; }
.etapa-mais .etapa-liga { display: none; }

.no-mais::before { border: 1.5px dashed var(--linha-forte); background: transparent; }
.no-mais svg { grid-area: 1 / 1; width: 13px; height: 13px; color: var(--texto-2); transition: color .2s, transform .5s var(--mola); stroke-width: 2.2; }
.no-mais:hover::before { border-color: var(--brasa); }
.no-mais:hover svg { color: var(--brasa); transform: rotate(90deg); }

.etapa-texto { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; max-width: 100%; margin-top: 12px; }
.etapa-titulo { font: 600 14px/1.25 var(--f-texto); letter-spacing: -.01em; color: var(--texto); text-wrap: balance; }
.est-pendente .etapa-titulo, .est-pausada .etapa-titulo, .etapa-mais .etapa-titulo { color: var(--texto-2); }
.etapa-estado { font-size: 12px; color: var(--texto-3); }
.est-aguardando_cliente .etapa-estado { color: var(--brasa); font-weight: 600; }
.est-em_andamento .etapa-estado, .est-com_equipe .etapa-estado { color: var(--texto-2); }
.ret-validada .etapa-estado { color: var(--verde-texto); font-weight: 600; }
.ret-ajuste .etapa-estado { color: #f3a463; font-weight: 600; }
.etapa-prazo { font-size: 12px; color: var(--texto-3); }
.etapa-prazo:empty { display: none; }

.linha-editor .etapa:not(.etapa-mais) .etapa-no { touch-action: none; }
.etapa.arrastando { z-index: 5; }
.etapa.arrastando .etapa-no { cursor: grabbing; }
.etapa.arrastando .etapa-no::before { transform: scale(1.3); box-shadow: 0 12px 30px rgba(0, 0, 0, .7), 0 0 0 7px rgba(255, 255, 255, .1); }
.linha.arrastando .etapa-liga { opacity: .25; }
.linha.arrastando .etapa:not(.arrastando) .etapa-texto { opacity: .6; }
.etapa-texto { transition: opacity .3s; }

.linha-cursor {
  position: absolute; z-index: 3; top: 11px;
  width: 22px; height: 22px; margin-left: -11px;
  border: 1.5px dashed var(--brasa); border-radius: 50%;
  box-shadow: 0 0 20px rgba(252, 56, 0, .5);
  pointer-events: none;
}

/* ---------------------------------------------------------------- camadas: menu */

.menu {
  position: fixed; z-index: 80;
  min-width: 232px; max-height: calc(100vh - 16px); overflow-y: auto;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px;
  background: rgba(38, 42, 41, .84);
  -webkit-backdrop-filter: blur(26px) saturate(1.8);
  backdrop-filter: blur(26px) saturate(1.8);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .8), 0 0 0 .5px rgba(0, 0, 0, .7);
  font-size: 13px;
  user-select: none; -webkit-user-select: none;
}
.menu:focus { outline: none; }
.menu-item {
  display: flex; align-items: center; gap: 7px;
  width: 100%; height: 27px;
  padding: 0 10px 0 4px;
  border: 0; border-radius: 6px; background: none;
  color: var(--texto);
  font: 400 13px/1 var(--f-texto);
  text-align: left; cursor: default;
}
.menu-item.ativo { background: rgba(255, 255, 255, .13); }
.menu-item:focus { outline: none; }
.menu-item.perigo { color: var(--perigo); }
.menu-item:disabled { color: var(--texto-3); }
.menu-marca { width: 16px; display: grid; place-items: center; flex: none; }
.menu-marca svg { width: 12px; height: 12px; stroke-width: 2.4; }
.menu-ico { width: 18px; display: grid; place-items: center; flex: none; color: var(--texto-2); }
.menu-item.perigo .menu-ico { color: var(--perigo); }
.menu-ico svg { width: 15px; height: 15px; }
.menu-rotulo { flex: 1; white-space: nowrap; }
.menu-seta { color: var(--texto-3); display: grid; }
.menu-seta svg { width: 11px; height: 11px; stroke-width: 2.2; }
.menu-secao { padding: 7px 10px 4px 27px; font: 600 11px/1 var(--f-texto); color: var(--texto-3); }
.menu-sep { height: 1px; margin: 5px 9px; background: rgba(255, 255, 255, .1); }

/* ---------------------------------------------------------------- camadas: popover */

/* o visor abre por cima do painel que o chamou: o painel some enquanto a folha existe e volta quando ela fecha */
.popover:has(~ .folha-palco) { opacity: 0; pointer-events: none; }

.popover {
  position: fixed; z-index: 60;
  border: 1px solid rgba(255, 255, 255, .11); border-radius: 20px;
  background: var(--vidro);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  backdrop-filter: blur(30px) saturate(1.5);
  box-shadow: var(--sombra-alta), inset 0 1px 0 rgba(255, 255, 255, .06);
  color: var(--texto);
}
.popover:focus { outline: none; }
.popover-corpo {
  overflow-y: auto; overscroll-behavior: contain; border-radius: inherit;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.folha, .menu { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.popover-seta { position: absolute; width: 20px; height: 10px; top: 100%; pointer-events: none; }
.popover-seta svg { width: 20px; height: 10px; overflow: visible; }
.popover-seta path { fill: var(--vidro); stroke: rgba(255, 255, 255, .11); stroke-width: 1; }
.popover[data-lado="baixo"] .popover-seta { top: auto; bottom: 100%; transform: rotate(180deg); }

/* véu de foco: a tela inteira esmaece e desfoca; só o nó escolhido (furo redondo na
   máscara) e o painel aberto ficam nítidos. Fica sob o painel e sobre o resto, e não
   pega clique (o clique fora já fecha, ver camada.js). Some quando o visor abre. */
.veu-foco {
  --nx: 50%; --ny: 50%;
  position: fixed; inset: 0; z-index: 55; pointer-events: none;
  background: rgba(7, 9, 8, .6);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  -webkit-mask-image: radial-gradient(circle at var(--nx) var(--ny), transparent 34px, #000 50px);
  mask-image: radial-gradient(circle at var(--nx) var(--ny), transparent 34px, #000 50px);
}
.veu-foco:has(~ .folha-palco) { opacity: 0; }

/* ---------------------------------------------------------------- camadas: folhas */

.veu {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .58);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.folha-palco {
  position: fixed; inset: 0; z-index: 51;
  display: grid; place-items: center;
  padding: 3vh 24px;
  pointer-events: none;
}
.folha {
  width: min(980px, 100%); max-height: 100%;
  overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--linha); border-radius: 24px;
  background: var(--tinta-2);
  box-shadow: var(--sombra-alta);
  pointer-events: auto;
}
.folha:focus { outline: none; }

/* cartão central: caixa no meio da tela, que nasce do ponto clicado.
   Serve à etapa na página do cliente e a todo painel no celular. */
.veu-central { z-index: 58; }
.central-palco {
  position: fixed; inset: 0; z-index: 59;
  display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  pointer-events: none;
}
.central {
  max-height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11); border-radius: 26px;
  background: rgba(24, 28, 27, .94);
  -webkit-backdrop-filter: blur(34px) saturate(1.5);
  backdrop-filter: blur(34px) saturate(1.5);
  box-shadow: var(--sombra-alta), inset 0 1px 0 rgba(255, 255, 255, .07);
  pointer-events: auto;
}
.central:focus { outline: none; }
.central-rolagem {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

/* ---------------------------------------------------------------- avisos */

.avisos {
  position: fixed; left: 0; right: 0; z-index: 90;
  bottom: calc(22px + env(safe-area-inset-bottom));
  display: flex; justify-content: center;
  padding: 0 16px;
  pointer-events: none;
}
.aviso {
  display: flex; align-items: center; gap: 12px;
  max-width: 100%;
  padding: 10px 10px 10px 18px;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px;
  background: rgba(40, 44, 43, .92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .8);
  font-size: 14px;
  pointer-events: auto;
}
.aviso-acao {
  height: 28px; padding: 0 12px;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: var(--texto);
  font: 600 13px/1 var(--f-texto); cursor: pointer;
}
.aviso-acao:hover { background: rgba(255, 255, 255, .2); }
.aviso:not(:has(.aviso-acao)) { padding-right: 18px; }

/* ---------------------------------------------------------------- confirmações e formulários curtos */

.confirma { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.confirma h3 { font: 650 16px/1.25 var(--f-display); letter-spacing: -.015em; }
.confirma p { font-size: 13.5px; color: var(--texto-2); line-height: 1.45; }
.confirma-botoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* ---------------------------------------------------------------- painel da etapa (popover) */

.painel { display: flex; flex-direction: column; gap: 18px; padding: 16px 18px 14px; }
.painel-topo { display: flex; align-items: center; gap: 12px; }
.painel-ico {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .2);
}
.painel-ico svg { width: 20px; height: 20px; }
.painel-cab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.painel-titulo {
  width: 100%;
  padding: 2px 6px; margin: -2px -6px;
  border: 0; border-radius: 7px; background: transparent;
  color: var(--texto);
  font: 700 18px/1.2 var(--f-display); letter-spacing: -.02em;
  outline: none; transition: background-color .2s, box-shadow .2s;
}
.painel-titulo:hover { background: rgba(255, 255, 255, .05); }
.painel-titulo:focus { background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 2px rgba(252, 56, 0, .5); }
.painel-titulo-texto { font: 700 18px/1.2 var(--f-display); letter-spacing: -.02em; }
.painel-tipo { font-size: 12px; color: var(--texto-3); }
.painel-secao { display: flex; flex-direction: column; gap: 8px; }
.painel-secao > h3 {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 600 12px/1 var(--f-texto); letter-spacing: .02em;
  color: var(--texto-3);
}
.painel-secao > h3 span:last-child { font-weight: 500; }
.painel-descricao { font-size: 15px; line-height: 1.5; color: var(--texto-2); }
.painel-motivo-texto { font-size: 14px; color: var(--texto-2); padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.painel-prazo-texto { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--texto-2); }
.painel-prazo-texto svg { width: 15px; height: 15px; color: var(--texto-3); }
.prazo-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prazo-nota { font-size: 12px; color: var(--texto-3); }
.recolhe-dentro { padding-top: 8px; }
.painel-rodape {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linha-suave);
}
.painel-atualizado { font-size: 12px; color: var(--texto-3); }
.painel-extra { display: flex; flex-direction: column; gap: 18px; }
.painel-extra:empty, .painel-retorno:empty { display: none; }
.painel-cliente { gap: 14px; padding-bottom: 18px; }

.sugestao {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--brasa-borda); border-radius: 12px;
  background: var(--brasa-fundo);
  font-size: 13px;
}

/* ---------------------------------------------------------------- materiais */

.zona {
  position: relative;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 14px;
  border: 1.5px dashed var(--linha-forte); border-radius: 14px;
  background: rgba(255, 255, 255, .02);
  transition: border-color .25s, background-color .25s, transform .45s var(--mola);
}
.zona.sobre { border-color: var(--brasa); background: var(--brasa-fundo); transform: scale(1.02); }
.zona-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .07); color: var(--texto-2); }
.zona-ico svg { width: 18px; height: 18px; }
.zona.sobre .zona-ico { color: var(--brasa); }
.zona-texto { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.zona-texto strong { font-size: 13.5px; font-weight: 600; }
.zona-texto span { font-size: 12px; color: var(--texto-3); }
.zona-botoes { display: flex; gap: 6px; }

.materiais-lista { display: flex; flex-direction: column; gap: 2px; }
.material {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px; margin: 0 -8px;
  border-radius: 12px;
  transition: background-color .2s;
}
.material:hover { background: rgba(255, 255, 255, .04); }
.material-thumb {
  position: relative;
  width: 76px; aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 8px;
  overflow: hidden;
  background: var(--tinta-4);
  color: var(--texto-3);
  cursor: pointer;
  transition: transform .45s var(--mola);
}
.material-thumb:hover { transform: scale(1.05); }
.material-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.material-thumb svg { width: 18px; height: 18px; }
.material-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.material-nome {
  width: 100%;
  padding: 1px 4px; margin: -1px -4px;
  border: 0; border-radius: 5px; background: transparent;
  color: var(--texto);
  font: 600 14px/1.25 var(--f-texto);
  text-overflow: ellipsis;
  outline: none;
}
.material-nome:hover { background: rgba(255, 255, 255, .05); }
.material-nome:focus { background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 2px rgba(252, 56, 0, .5); }
.material-nome-texto { font: 600 14px/1.25 var(--f-texto); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.material-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; color: var(--texto-3); }
.material-coment { display: inline-flex; align-items: center; gap: 3px; color: var(--brasa); font-weight: 600; }
.material-coment svg { width: 13px; height: 13px; }
.material-acoes { display: flex; align-items: center; gap: 8px; }
.material-validacao { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--texto-2); cursor: pointer; }
.material-mudou { grid-column: 2 / -1; }
.material.carregando .material-thumb { background: linear-gradient(100deg, var(--tinta-4) 30%, rgba(255, 255, 255, .1) 50%, var(--tinta-4) 70%) 0 0 / 300% 100%; animation: brilho 1.3s linear infinite; }

.progresso { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.progresso > i { display: block; height: 100%; background: var(--brasa); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--e-saida); }

.lista-compacta { display: flex; flex-direction: column; gap: 2px; }
.compacto {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: calc(100% + 16px);
  padding: 7px 8px; margin: 0 -8px;
  border: 0; border-radius: 12px; background: none;
  color: var(--texto); text-align: left; cursor: pointer;
  transition: background-color .2s, transform .4s var(--mola);
}
.compacto:hover { background: rgba(255, 255, 255, .05); }
.compacto:active { transform: scale(.98); }
.compacto .material-thumb { width: 56px; cursor: inherit; }
.compacto-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.compacto-info strong { font-size: 13.5px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.compacto-info span { font-size: 12px; color: var(--texto-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.ajuste-grupo { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.ajuste-grupo strong { font-size: 13.5px; }
.ajuste-pedido { font-size: 13px; color: var(--texto-2); }
.ajuste-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--texto-2); }
.ajuste-item .resolver { width: 22px; height: 22px; margin-top: -1px; }
.ajuste-item.feito { color: var(--texto-3); text-decoration: line-through; }

/* ---------------------------------------------------------------- visor do material */

.visor { display: flex; flex-direction: column; min-height: 100%; }
/* nenhuma parte do visor encolhe: o vídeo mantém a altura útil e quem rola é a lista de comentários */
.visor > * { flex-shrink: 0; }
.visor-video, .visor-imagem { min-height: min(46vh, 360px); }
.folha-visor .comentarios-lista { max-height: 38vh; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.visor-topo {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 14px 22px;
  background: rgba(14, 17, 16, .86);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--linha-suave);
}
.visor-titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.visor-titulo span { font-size: 12px; color: var(--texto-3); }
.visor-titulo h2 { font: 650 18px/1.2 var(--f-display); letter-spacing: -.02em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.seletor-versao {
  -webkit-appearance: none; appearance: none;
  height: 30px; padding: 0 30px 0 13px;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-opacity='.6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 12px;
  color: var(--texto);
  font: 500 13px/1 var(--f-texto);
  cursor: pointer;
}
.seletor-versao:focus-visible { box-shadow: 0 0 0 2px var(--brasa); }

.visor-midia { position: relative; display: grid; place-items: center; min-height: 220px; background: #000; }
.visor-midia video, .visor-midia img { width: 100%; max-height: 60vh; object-fit: contain; background: #000; }
.visor-imagem img { cursor: zoom-in; transition: max-height .5s var(--mola); }
.visor-imagem img.ampliada { max-height: none; cursor: zoom-out; }
.visor-pdf iframe { width: 100%; height: 68vh; border: 0; background: #fff; }
.visor-audio { gap: 18px; padding: 44px 32px; background: linear-gradient(160deg, var(--tinta-4), #000); }
.visor-audio .ico svg { width: 44px; height: 44px; color: var(--texto-3); }
.visor-audio audio { width: min(560px, 100%); }
.visor-vazio { gap: 10px; padding: 48px; color: var(--texto-3); }
.visor-vazio svg { width: 30px; height: 30px; }

.visor-midia-texto { display: block; background: var(--tinta-3); }
.visor-texto { max-height: 58vh; overflow-y: auto; padding: 30px clamp(20px, 6vw, 64px); font-size: 17px; line-height: 1.65; }
.visor-texto p { position: relative; padding: 8px 12px 8px 40px; margin: 0 -12px; border-radius: 10px; cursor: pointer; transition: background-color .2s, box-shadow .3s; }
.visor-texto p:hover { background: rgba(255, 255, 255, .04); }
.visor-texto p.escolhido { background: var(--brasa-fundo); box-shadow: inset 2px 0 0 var(--brasa); }
.visor-texto .num { position: absolute; left: 12px; top: 11px; font-size: 12px; font-weight: 600; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.visor-texto-vazio { color: var(--texto-3); cursor: default !important; }
.visor-texto-acoes { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--linha-suave); }
.editor-texto {
  display: block; width: 100%; min-height: 260px; max-height: 58vh;
  padding: 26px clamp(20px, 6vw, 64px);
  border: 0; background: transparent; color: var(--texto);
  font: 400 17px/1.65 var(--f-texto);
  resize: none; outline: none;
}

.marcadores { position: relative; height: 16px; margin: 0 22px; border-bottom: 1px solid var(--linha-suave); }
.marcador {
  position: absolute; top: 4px;
  width: 9px; height: 9px; margin-left: -4.5px;
  padding: 0; border: 0; border-radius: 0;
  background: var(--nv, var(--brasa));
  box-shadow: 0 0 0 2px var(--tinta-2);
  transform: rotate(45deg);
  cursor: pointer;
  transition: transform .35s var(--mola);
}
.marcador:hover { transform: rotate(45deg) scale(1.5); }
.marcador.resolvido { background: var(--texto-3); }

/* vídeo com quadro exato: controles próprios, timecode com quadro e pino no ponto clicado */
.visor-video { display: flex; flex-direction: column; align-items: stretch; outline: none; }
.visor-video:focus-visible { box-shadow: inset 0 0 0 2px var(--brasa); }
.quadro { position: relative; display: grid; place-items: center; min-height: 200px; background: #000; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.quadro video { display: block; }
.quadro-play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  display: none; place-items: center; border-radius: 50%;
  background: rgba(7, 9, 8, .62); color: #fff; pointer-events: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .5s var(--mola);
}
.quadro-play svg { width: 26px; height: 26px; margin-left: 3px; }
.quadro[data-inicio] .quadro-play { display: grid; }
.quadro[data-inicio]:hover .quadro-play { transform: scale(1.08); }
.pinos { position: absolute; pointer-events: none; }
.pino {
  position: absolute; width: 26px; height: 26px; padding: 0; border: 0;
  transform: translate(-50%, -100%); margin-top: -9px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--nv, var(--brasa)); color: var(--tinta);
  font: 700 12px/1 var(--f-texto); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px rgba(7, 9, 8, .85), 0 6px 16px -4px rgba(0, 0, 0, .8);
  cursor: pointer; pointer-events: auto;
  transition: box-shadow .3s;
}
/* a agulha: desce do disco até o ponto exato */
.pino::before {
  content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 9px; margin-left: -1px;
  background: inherit; box-shadow: 0 0 0 1px rgba(7, 9, 8, .85);
}
.pino::after {
  content: ""; position: absolute; left: 50%; top: calc(100% + 9px); width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px rgba(7, 9, 8, .9);
}
.pino span { position: relative; z-index: 1; display: grid; place-items: center; }
.pino svg { width: 14px; height: 14px; }
.pino.resolvido { background: #6d7371; color: #fff; }
.pino.em-foco { box-shadow: 0 0 0 2px rgba(7, 9, 8, .85), 0 0 0 4px #fff, 0 6px 16px -4px rgba(0, 0, 0, .8); z-index: 2; }
.pino.rascunho { background: #fff; color: var(--tinta); z-index: 3; pointer-events: none; }
.pino.rascunho svg { stroke-width: 2.4; }

/* área: caixa na cor do nível, fundo translúcido e o número no canto. Só o número recebe clique. */
.area {
  position: absolute; border: 2px solid var(--nv, var(--brasa)); border-radius: 6px;
  background: var(--nv-fundo, rgba(252, 56, 0, .16));
  box-shadow: 0 0 0 1px rgba(7, 9, 8, .7), inset 0 0 0 1px rgba(7, 9, 8, .35);
  pointer-events: none; transition: box-shadow .3s;
}
.area-num {
  position: absolute; left: -2px; top: -2px; min-width: 22px; height: 22px; padding: 0 6px;
  border: 0; border-radius: 4px 0 8px 0;
  background: var(--nv, var(--brasa)); color: var(--tinta);
  font: 700 12px/1 var(--f-texto); font-variant-numeric: tabular-nums;
  cursor: pointer; pointer-events: auto;
}
.area.resolvido { border-color: #6d7371; background: rgba(109, 115, 113, .16); }
.area.resolvido .area-num { background: #6d7371; color: #fff; }
.area.em-foco { box-shadow: 0 0 0 2px rgba(7, 9, 8, .85), 0 0 0 4px #fff; z-index: 2; }
.area.rascunho { border: 2px dashed #fff; background: rgba(255, 255, 255, .12); z-index: 3; }

/* imagem: o clique amplia, o botão direito ou o toque longo marca */
.visor-imagem { display: flex; flex-direction: column; align-items: stretch; }
.imagem-quadro { position: relative; display: grid; place-items: center; background: #000; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.imagem-quadro img { -webkit-user-drag: none; }
.imagem-dica { padding: 7px 14px; border-top: 1px solid var(--linha-suave); background: var(--tinta-2); font-size: 12.5px; color: var(--texto-3); text-align: right; }

.quadro-barra { display: flex; flex-direction: column; gap: 4px; padding: 6px 12px 8px; background: var(--tinta-2); border-top: 1px solid var(--linha-suave); }
.qb-trilho-caixa { position: relative; height: 20px; display: flex; align-items: center; }
.qb-trilho {
  -webkit-appearance: none; appearance: none; width: 100%; height: 20px; margin: 0; padding: 0;
  background: none; cursor: pointer; outline: none;
}
.qb-trilho::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #fff var(--p, 0%), rgba(255, 255, 255, .2) var(--p, 0%)); }
.qb-trilho::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #fff var(--p, 0%), rgba(255, 255, 255, .2) var(--p, 0%)); }
.qb-trilho::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); transition: transform .35s var(--mola); }
.qb-trilho::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.qb-trilho:active::-webkit-slider-thumb { transform: scale(1.25); }
.qb-trilho:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--brasa); }
/* os comentários marcados em cima do trilho, alinhados com o curso do botão */
.quadro-barra .marcadores { position: absolute; left: 7px; right: 7px; top: 0; height: 20px; margin: 0; border: 0; pointer-events: none; }
.quadro-barra .marcadores[hidden] { display: none; }
.quadro-barra .marcador { top: 5.5px; pointer-events: auto; box-shadow: 0 0 0 2px var(--tinta-2); }
.qb-linha { display: flex; align-items: center; gap: 4px; min-width: 0; }
.qb-botao {
  flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px;
  display: grid; place-items: center; background: none; color: var(--texto-2);
  cursor: pointer; transition: background-color .2s, color .2s, transform .4s var(--mola);
}
.qb-botao:hover { background: rgba(255, 255, 255, .08); color: var(--texto); }
.qb-botao:active { transform: scale(.9); }
.qb-botao:focus-visible { outline: 2px solid var(--brasa); outline-offset: -2px; }
.qb-botao svg { width: 18px; height: 18px; }
.qb-play { color: var(--texto); }
.qb-play svg { width: 20px; height: 20px; }
.qb-tempo {
  min-width: 68px; padding: 6px 8px; border-radius: 8px; text-align: center;
  background: rgba(255, 255, 255, .07); color: var(--texto);
  font: 650 13.5px/1 ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.qb-total { margin-left: 6px; font: 500 12px/1 var(--f-texto); color: var(--texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qb-dica { flex: 1; min-width: 0; margin: 0 6px; text-align: right; font-size: 12.5px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ancora.com-ponto { display: inline-flex; align-items: center; gap: 5px; vertical-align: baseline; }
.ancora-pino { display: inline-grid; place-items: center; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 4px 4px 4px 0; background: var(--nv, var(--brasa)); color: var(--tinta); font: 700 10px/1 var(--f-texto); }
@media (max-width: 719px) {
  .qb-total { display: none; }
  .qb-linha { flex-wrap: wrap; }
  .qb-linha > .qb-botao:last-child { margin-left: auto; }
  .qb-dica { order: 9; flex: 0 0 100%; margin: 2px 4px 0; text-align: left; font-size: 12px; white-space: normal; }
  .quadro-barra { padding: 4px 8px 6px; }
}

/* ---------------------------------------------------------------- níveis, áudio e escrita da consideração */

.nv-manter { --nv: var(--nivel-manter); --nv-fundo: rgba(61, 220, 114, .17); }
.nv-ajustar { --nv: var(--nivel-ajustar); --nv-fundo: rgba(255, 214, 10, .17); }
.nv-remover { --nv: var(--nivel-remover); --nv-fundo: rgba(255, 77, 94, .17); }
.nivel-ico { display: inline-grid; place-items: center; flex: none; }
.nivel-ico svg { width: 14px; height: 14px; stroke-width: 2.4; }
/* seletor: três placas com o corte da marca. A forma (check, seta de volta, x) diz o nível além da cor. */
.nivel-seg {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 2px;
  background: rgba(255, 255, 255, .07);
  clip-path: polygon(var(--c-m) 0, 100% 0, 100% calc(100% - var(--c-m)), calc(100% - var(--c-m)) 100%, 0 100%, 0 var(--c-m));
}
.nivel-op {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; padding: 0 10px; border: 0; background: none;
  color: var(--texto-2); font: 600 12.5px/1 var(--f-texto); white-space: nowrap; cursor: pointer;
  clip-path: polygon(var(--c-p) 0, 100% 0, 100% calc(100% - var(--c-p)), calc(100% - var(--c-p)) 100%, 0 100%, 0 var(--c-p));
  transition: background-color .25s, color .25s, transform .4s var(--mola);
}
.nivel-op:hover { color: var(--texto); }
.nivel-op:active { transform: scale(.94); }
.nivel-op:focus-visible { outline: none; background: rgba(255, 255, 255, .16); color: var(--texto); }
.nivel-op[aria-checked="true"] { background: var(--nv); color: var(--tinta); }
.nivel-op .nivel-ico svg { width: 13px; height: 13px; }
.nivel-selo {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px 0 5px;
  background: var(--nv-fundo); color: var(--nv); font: 650 11px/1 var(--f-texto); white-space: nowrap;
  clip-path: polygon(var(--c-p) 0, 100% 0, 100% calc(100% - var(--c-p)), calc(100% - var(--c-p)) 100%, 0 100%, 0 var(--c-p));
}
.nivel-selo { flex: none; }
.nivel-selo .nivel-ico svg { width: 12px; height: 12px; }

/* Ditar: o microfone mora dentro do campo, à direita, sempre visível. Gravando, a onda
   segue o volume real do microfone (AnalyserNode) e o tempo corre; nada pulsa por conta própria. */
.campo-ditar { position: relative; display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.campo-ditar > textarea { flex: 1; min-width: 0; }
.campo-ditar[data-estado="gravando"] > textarea { display: none; }
.ditar-mic {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0;
  background: rgba(255, 255, 255, .09); color: var(--texto-2); cursor: pointer;
  clip-path: polygon(var(--c-p) 0, 100% 0, 100% calc(100% - var(--c-p)), calc(100% - var(--c-p)) 100%, 0 100%, 0 var(--c-p));
  transition: background-color .2s, color .2s, transform .4s var(--mola);
}
.ditar-mic svg { width: 17px; height: 17px; }
.ditar-mic:hover, .ditar-mic:focus-visible { background: rgba(255, 255, 255, .2); color: var(--texto); outline: none; }
.ditar-mic:active { transform: scale(.92); }
.ditar-mic[aria-disabled="true"] { background: rgba(255, 255, 255, .05); color: var(--texto-3); cursor: not-allowed; opacity: .6; }
.ditar-mic[aria-disabled="true"]:hover { background: rgba(255, 255, 255, .05); color: var(--texto-3); }
.campo-ditar[data-estado="gravando"] .ditar-mic { background: var(--brasa); color: var(--tinta); }
.campo-ditar[data-estado="gravando"] .ditar-mic:hover { background: #fff; }
.campo-ditar[data-estado="gravando"] .ditar-mic svg { width: 15px; height: 15px; }
.ditar-faixa { flex: 1; min-width: 0; align-self: center; display: flex; align-items: center; gap: 12px; padding-left: 4px; }
.ditar-tempo { flex: none; min-width: 34px; font: 650 13px/1 ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; color: var(--texto); }
.ditar-onda { flex: 1; min-width: 0; height: 28px; display: flex; align-items: center; gap: 2px; overflow: hidden; }
.ditar-onda i { flex: 1 1 0; min-width: 2px; max-width: 4px; height: 100%; background: var(--texto-2); transform: scaleY(.1); transform-origin: center; }
.ditar-onda i:nth-last-child(-n+3) { background: var(--brasa); }
/* nos popovers o campo é uma caixa só: texto e microfone dentro dela */
.campo-caixa {
  align-items: flex-end; padding: 6px 6px 6px 12px;
  border: 1px solid var(--linha); border-radius: 10px; background: rgba(255, 255, 255, .05);
  transition: border-color .2s, box-shadow .25s, background-color .2s;
}
.campo-caixa:hover { border-color: var(--linha-forte); }
.campo-caixa:focus-within { border-color: rgba(252, 56, 0, .75); box-shadow: 0 0 0 3px rgba(252, 56, 0, .22); background: rgba(255, 255, 255, .07); }
.campo-caixa > textarea {
  padding: 3px 0; border: 0; background: transparent; color: var(--texto);
  font: 400 15px/1.4 var(--f-texto); resize: none; outline: none; overflow: hidden; min-height: 76px;
}
.campo-caixa > textarea::placeholder { color: var(--texto-3); }
.campo-caixa > .ditar-faixa { padding-left: 0; }
.ditar-previa { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ditar-previa[hidden] { display: none; }
.mic-descartar { flex: none; width: 28px; height: 28px; }
.player-audio { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; max-width: 340px; padding: 3px 12px 3px 3px; background: rgba(255, 255, 255, .08); clip-path: polygon(var(--c-p) 0, 100% 0, 100% calc(100% - var(--c-p)), calc(100% - var(--c-p)) 100%, 0 100%, 0 var(--c-p)); }
.player-audio audio { display: none; }
.pa-botao { flex: none; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; background: #fff; clip-path: polygon(var(--c-p) 0, 100% 0, 100% calc(100% - var(--c-p)), calc(100% - var(--c-p)) 100%, 0 100%, 0 var(--c-p)); color: var(--tinta); cursor: pointer; transition: transform .4s var(--mola); }
.pa-botao:active { transform: scale(.88); }
.pa-botao svg { width: 13px; height: 13px; }
.pa-botao svg[viewBox] path { transform: translateX(.6px); }
.pa-trilho { -webkit-appearance: none; appearance: none; flex: 1; min-width: 56px; height: 20px; margin: 0; padding: 0; background: none; cursor: pointer; outline: none; }
.pa-trilho:disabled { cursor: default; }
.pa-trilho::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, #fff var(--p, 0%), rgba(255, 255, 255, .22) var(--p, 0%)); }
.pa-trilho::-moz-range-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, #fff var(--p, 0%), rgba(255, 255, 255, .22) var(--p, 0%)); }
.pa-trilho::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -3.5px; border-radius: 50%; background: #fff; }
.pa-trilho::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: #fff; }
.pa-trilho:disabled::-webkit-slider-thumb { opacity: 0; }
.pa-trilho:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--brasa); }
.pa-tempo { flex: none; font: 500 11.5px/1 var(--f-texto); font-variant-numeric: tabular-nums; color: var(--texto-3); white-space: nowrap; }

/* popover da marca: escrever e ler. A sombra é curta para não escurecer a marca logo abaixo. */
.popover-marca { box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .06); }
.marca-form, .marca-leitura { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.marca-form textarea.campo { min-height: 76px; font-size: 15px; }
.marca-cab { display: flex; align-items: center; gap: 8px; }
.marca-cab strong { font: 650 14px/1.2 var(--f-display); letter-spacing: -.01em; }
.marca-leitura .marca-cab { flex-wrap: wrap; }
.marca-leitura .nivel-selo { margin-left: auto; }
.marca-leitura .comentario-texto { margin: 0; }
.marca-base { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.marca-base .enviar { margin-left: auto; }
.marca-base { flex-wrap: nowrap; }
.marca-base .nivel-op { padding: 0 6px; gap: 4px; font-size: 12px; }
.marca-autor { font-size: 12.5px; color: var(--texto-3); }

/* itens da lista: edição, apagar e a transcrição (só a equipe vê) */
.comentario-corpo { min-width: 0; }
.comentario-conteudo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.comentario-conteudo > .comentario-texto { margin-top: 4px; }
.tag-editado { font-size: 11.5px; color: var(--texto-3); }
.transcricao { align-self: stretch; padding: 7px 10px; border-left: 2px solid var(--linha-forte); border-radius: 0 8px 8px 0; background: rgba(255, 255, 255, .04); font-size: 13px; line-height: 1.45; color: var(--texto-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.transcricao.pendente { color: var(--texto-3); font-style: italic; }
.comentario-acoes { display: flex; gap: 14px; }
.texto-botao { padding: 0; border: 0; background: none; color: var(--texto-3); font: 600 12px/1 var(--f-texto); cursor: pointer; transition: color .2s; }
.texto-botao:hover { color: var(--texto); }
.texto-botao.perigo:hover { color: var(--perigo); }
.comentario-edicao { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.comentario-edicao .nivel-seg { align-self: flex-start; }
.comentario-edicao .confirma-botoes { margin-top: 0; }
/* "Mudar decisão" é uma saída real do bloco da decisão: botão cheio, em linha própria, sempre à vista */
.decisao-mudar { flex: 1 1 100%; justify-content: center; height: 34px; background: rgba(255, 255, 255, .13); }
.decisao-mudar:hover { background: rgba(255, 255, 255, .22); }
.decisao-mudar svg { width: 15px; height: 15px; stroke-width: 2.2; }

.visor-corpo { display: flex; flex-direction: column; gap: 22px; width: 100%; max-width: 780px; margin: 0 auto; padding: 22px 22px 26px; }
.aviso-versao {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 14px 22px 0; padding: 10px 10px 10px 14px;
  border-radius: 12px; background: rgba(255, 255, 255, .07);
  font-size: 13.5px; color: var(--texto-2);
}
.mudou { font-size: 14px; color: var(--texto-2); }
.mudou strong { color: var(--texto); font-weight: 600; }

.decisao {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 16px 18px;
  border: 1px solid var(--linha); border-radius: 16px;
  background: rgba(255, 255, 255, .035);
}
.decisao.precisa { border-color: var(--brasa-borda); background: linear-gradient(120deg, rgba(252, 56, 0, .13), rgba(252, 56, 0, .02) 70%); }
.decisao-texto { flex: 1 1 240px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; color: var(--texto-2); }
.decisao-texto strong { font: 600 15.5px/1.3 var(--f-display); color: var(--texto); letter-spacing: -.01em; }
.decisao-pedido { margin-top: 6px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); color: var(--texto-2); white-space: pre-wrap; }
.decisao-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.decisao-feita { justify-content: flex-start; flex-wrap: wrap; }
.decisao-feita .decisao-texto { flex: 1 1 0; min-width: 160px; }
.decisao-selo {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: #fff; color: var(--tinta);
  clip-path: polygon(var(--c-m) 0, 100% 0, 100% calc(100% - var(--c-m)), calc(100% - var(--c-m)) 100%, 0 100%, 0 var(--c-m));
}
.decisao-selo.ajuste { background: rgba(228, 102, 12, .2); color: #f3a463; }
.decisao-selo svg { width: 17px; height: 17px; stroke-width: 2.4; }
.decisao-selo.aprovar path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: desenha .6s var(--e-saida) .15s forwards; }

/* Aprovado: o momento de recompensa. Círculo verde que se desenha, enche e
   recebe o check, como a confirmação do Apple Pay. Anel abre uma vez só. */
.decisao.aprovada {
  border-color: var(--verde-borda);
  background: radial-gradient(120% 140% at 0% 50%, rgba(48, 209, 88, .16), rgba(48, 209, 88, .03) 60%, transparent);
  gap: 16px;
}
.aprovado-selo { position: relative; width: 52px; height: 52px; flex: none; }
.aprovado-selo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.aprovado-selo .as-aro { fill: none; stroke: var(--verde); stroke-width: 2.5; stroke-dasharray: 145; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 26px 26px; }
.aprovado-selo .as-disco { fill: var(--verde); }
.aprovado-selo .as-check { fill: none; stroke: var(--tinta); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 34; stroke-dashoffset: 0; }
.aprovado-selo::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(48, 209, 88, .5);
  opacity: 0; pointer-events: none;
}
.decisao.aprovada.agora .as-aro { animation: as-aro .55s var(--e-saida) both; }
.decisao.aprovada.agora .as-disco { animation: as-disco .5s var(--mola) .42s both; }
.decisao.aprovada.agora .as-check { animation: as-check .42s var(--e-saida) .72s both; }
.decisao.aprovada.agora .aprovado-selo::after { animation: as-anel 1s cubic-bezier(.2, .8, .2, 1) .6s; }
.decisao.aprovada.agora .decisao-texto > * { animation: as-texto .7s var(--mola) both; }
.decisao.aprovada.agora .decisao-texto > :nth-child(2) { animation-delay: .08s; }
.decisao.aprovada.agora .decisao-texto > :nth-child(3) { animation-delay: .16s; }
@keyframes as-aro { from { stroke-dashoffset: 145; } }
@keyframes as-disco { from { transform: scale(0); } }
@keyframes as-check { from { stroke-dashoffset: 34; } }
@keyframes as-anel { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(48, 209, 88, .5); } 100% { opacity: 1; box-shadow: 0 0 0 22px rgba(48, 209, 88, 0); } }
@keyframes as-texto { from { opacity: 0; transform: translateX(-8px); } }
.aprovado-selo .as-disco { transform-origin: 26px 26px; }
.decisao.aprovada .decisao-texto strong { font-size: 17px; }
.decisao-registro { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-3); font-size: 12.5px; }

/* Ajuste pedido: tom de ferrugem, sem drama */
.decisao.ajustada { border-color: rgba(228, 102, 12, .32); background: linear-gradient(120deg, rgba(228, 102, 12, .1), transparent 70%); }

/* aviso com glifo: o de aprovação ganha um check verde */
.aviso-glifo { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; margin-left: -6px; }
.aviso-glifo svg { width: 13px; height: 13px; stroke-width: 3; }
.aviso-glifo.ok { background: var(--verde); color: var(--tinta); }
.aviso-glifo.ajuste { background: rgba(228, 102, 12, .22); color: #f3a463; }

.comentarios > h3 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; font: 650 16px/1.2 var(--f-display); letter-spacing: -.015em; }
.comentarios > h3 span { font: 500 13px/1 var(--f-texto); color: var(--texto-3); }
.comentarios-lista { display: flex; flex-direction: column; margin-bottom: 14px; }
.comentarios-lista > .nota { padding: 10px 0; }
.comentario { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 11px; padding: 13px 0; border-top: 1px solid var(--linha-suave); }
.comentario:first-child { border-top: 0; }
.avatar {
  width: 30px; height: 30px; display: grid; place-items: center; background: rgba(255, 255, 255, .11);
  font: 650 13px/1 var(--f-texto);
  clip-path: polygon(var(--c-m) 0, 100% 0, 100% calc(100% - var(--c-m)), calc(100% - var(--c-m)) 100%, 0 100%, 0 var(--c-m));
}
.avatar.equipe { background: var(--brasa); color: var(--tinta); }
.comentario-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; color: var(--texto-3); }
.comentario-cab strong { color: var(--texto); font-weight: 600; font-size: 13.5px; }
.comentario-texto { margin-top: 4px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.comentario.resolvido .comentario-texto { color: var(--texto-3); }
.tag-resolvido { padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 11px; font-weight: 600; color: var(--texto-2); }
.ancora {
  height: 22px; padding: 0 8px; margin-right: 4px;
  border: 0;
  clip-path: polygon(var(--c-p) 0, 100% 0, 100% calc(100% - var(--c-p)), calc(100% - var(--c-p)) 100%, 0 100%, 0 var(--c-p));
  background: var(--brasa-fundo); color: var(--brasa);
  font: 650 12px/1 var(--f-texto); font-variant-numeric: tabular-nums;
  vertical-align: 1px; cursor: pointer;
  transition: background-color .2s;
}
.ancora:hover { background: rgba(252, 56, 0, .24); }
.resolver {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 0;
  background: rgba(255, 255, 255, .09); color: rgba(255, 255, 255, .3);
  clip-path: polygon(var(--c-p) 0, 100% 0, 100% calc(100% - var(--c-p)), calc(100% - var(--c-p)) 100%, 0 100%, 0 var(--c-p));
  cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s, transform .4s var(--mola);
}
.resolver:hover { background: rgba(255, 255, 255, .2); color: var(--texto-2); }
.resolver:active { transform: scale(.85); }
.resolver[aria-pressed="true"] { background: #fff; color: var(--tinta); }
.resolver svg { width: 13px; height: 13px; stroke-width: 2.6; }

.compositor {
  position: sticky; bottom: 12px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 12px 10px;
  border: 1px solid var(--linha); border-radius: 18px;
  background: rgba(24, 28, 27, .94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 -10px 34px -12px rgba(0, 0, 0, .7);
  transition: border-color .2s, box-shadow .3s;
}
.compositor:focus-within { border-color: rgba(252, 56, 0, .55); box-shadow: 0 0 0 3px rgba(252, 56, 0, .14), 0 -10px 34px -12px rgba(0, 0, 0, .7); }
.compositor textarea {
  min-height: 24px; max-height: 180px;
  padding: 2px 4px;
  border: 0; background: transparent; color: var(--texto);
  font: 400 15px/1.45 var(--f-texto);
  resize: none; outline: none;
}
.compositor textarea::placeholder { color: var(--texto-3); }
/* o chip de onde o comentário cai e o Enviar na primeira linha; os três níveis inteiros na segunda */
.compositor-base { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.compositor-base > .ancora-chip { grid-column: 1; grid-row: 1; justify-self: start; }
.compositor-base > .enviar { grid-column: 2; grid-row: 1; }
.compositor-base > .nivel-seg { grid-column: 1 / -1; grid-row: 2; justify-self: start; max-width: 100%; }
.ancora-chip {
  height: 26px; padding: 0 10px;
  border: 0;
  clip-path: polygon(var(--c-p) 0, 100% 0, 100% calc(100% - var(--c-p)), calc(100% - var(--c-p)) 100%, 0 100%, 0 var(--c-p));
  background: var(--brasa-fundo); color: var(--brasa);
  font: 650 12px/1 var(--f-texto); font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color .2s, color .2s, transform .4s var(--mola);
}
.ancora-chip:active { transform: scale(.94); }
.ancora-chip.geral { background: rgba(255, 255, 255, .08); color: var(--texto-2); }
.ancora-chip:disabled { cursor: default; }
.compositor-nome {
  width: 150px; height: 28px; padding: 0 10px;
  border: 1px solid var(--linha); border-radius: 999px;
  background: rgba(255, 255, 255, .05); color: var(--texto);
  font: 400 13px/1 var(--f-texto); outline: none;
}
.compositor-nome:focus { border-color: rgba(252, 56, 0, .7); }
/* Enviar: placa de brasa com o corte da marca, texto e seta. Ativo é brasa cheia com tinta
   escura; sem nada para enviar fica cinza e sem cor, bem diferente do ativo. */
.enviar {
  --c: 9px;
  height: 32px; margin-left: auto; flex: none; padding: 0 12px 0 14px;
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: var(--brasa); color: var(--tinta);
  font: 700 13px/1 var(--f-texto); letter-spacing: -.005em; white-space: nowrap;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  cursor: pointer;
  transition: transform .4s var(--mola), background-color .25s, color .25s;
}
.enviar:hover:not(:disabled), .enviar:focus-visible { background: #fff; outline: none; }
.enviar:active { transform: scale(.94); }
.enviar:disabled { background: rgba(255, 255, 255, .09); color: var(--texto-3); cursor: default; }
.enviar svg { width: 15px; height: 15px; stroke-width: 2.4; transition: transform .45s var(--e-saida); }
.enviar:hover:not(:disabled) svg { transform: translateX(3px); }

/* ---------------------------------------------------------------- página do cliente */

/* a página do cliente é uma coluna da altura da tela: o painel cresce, o
   rodapé fecha o conteúdo e a doca da linha do tempo fica presa embaixo */
.sala { display: flex; flex-direction: column; min-height: 100svh; }
.sala > main { flex: 1; display: flex; flex-direction: column; }
.pilula-equipe-faixa { position: fixed; top: 12px; left: 0; right: 0; z-index: 30; display: flex; justify-content: center; pointer-events: none; }
.pilula-equipe {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 6px 6px 14px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px;
  background: rgba(30, 34, 33, .82);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .8);
  font-size: 13px; color: var(--texto-2);
  pointer-events: auto;
}
.pilula-equipe a { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--texto); font-weight: 600; transition: background-color .2s; }
.pilula-equipe a:hover { background: rgba(255, 255, 255, .18); }

.marcas { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marcas img { height: 13px; width: auto; }
.marcas-sep { width: 1px; height: 18px; background: var(--linha-forte); flex: none; }
.marcas-cliente { font: 600 11.5px/1 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sala-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding-top: 8px; }
.sala-atualizado { font-size: 12.5px; color: var(--texto-3); text-align: right; }
.sala-topo-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
.sala-nome {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 26px; padding: 0 3px 0 11px;
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, .06);
  color: var(--texto-3); font: 500 12.5px/1 var(--f-texto); cursor: pointer; transition: background-color .2s;
}
.sala-nome[hidden] { display: none; }
.sala-nome-valor { min-width: 0; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); font-weight: 600; }
.sala-nome-trocar { flex: none; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--texto); font-size: 12px; font-weight: 600; transition: background-color .2s; }
.sala-nome:hover .sala-nome-trocar { background: rgba(255, 255, 255, .2); }
.sala-nome:focus-visible { outline: 2px solid var(--brasa); outline-offset: 2px; }
.entrada-nome h3 { font-size: 19px; }
/* ---------------------------------------------------------------- página do cliente
   Uma tela, duas peças. O painel é onde o cliente avalia: o material já está
   aberto, com a decisão do lado. A linha do tempo é contexto e mora na doca do
   rodapé. O nome do projeto é rótulo, não cartaz. */
/* Cabeçalho do projeto: o cliente em sobretítulo, o nome do projeto como manchete,
   com o isotipo da Warehouse em brasa como único ornamento. */
.proj-cab { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 1.4vw, 18px); padding: clamp(8px, 2.2vw, 30px) 0 clamp(20px, 2.8vw, 38px); }
.proj-sobre { display: flex; align-items: center; gap: 11px; min-width: 0; max-width: 100%; }
.proj-iso {
  flex: none; width: 29px; height: 12px; background: var(--brasa);
  -webkit-mask: url("../marca/isotipo-branco.png") center / contain no-repeat; mask: url("../marca/isotipo-branco.png") center / contain no-repeat;
}
.proj-cliente { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12px/1 var(--f-texto); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-2); }
.proj-nome {
  max-width: 20ch; margin: 0 0 0 -.04em;
  font: 700 clamp(38px, 1rem + 3.8vw, 76px)/.95 var(--f-display);
  letter-spacing: -.047em; text-wrap: balance; overflow-wrap: anywhere;
}
/* com um material aberto a manchete encolhe e sai da frente dele */
.proj-cab.compacto { gap: 8px; padding: 4px 0 clamp(14px, 1.8vw, 20px); }
.proj-cab.compacto .proj-nome { max-width: none; font-size: clamp(24px, .9rem + 1.5vw, 34px); letter-spacing: -.035em; line-height: 1.02; }

.painel-cliente {
  isolation: isolate;
  display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 22px);
  padding: clamp(16px, 2.4vw, 30px);
}
/* a cor do painel acompanha o estado: laranja pede você, verde é a sua parte feita */
.painel-cliente::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity .8s var(--e-saida);
}
.painel-cliente[data-tom="precisa"]::before { opacity: 1; background: radial-gradient(70% 420px at 0% 0%, rgba(252, 56, 0, .2), transparent 64%); }
.painel-cliente[data-tom="entregue"]::before { opacity: 1; background: radial-gradient(70% 420px at 0% 0%, rgba(48, 209, 88, .15), transparent 64%); }
/* sem material aberto o painel é só o resumo: ganha corpo e respiro */
.painel-cliente.so-resumo { flex: 1; min-height: clamp(200px, 28svh, 340px); padding: clamp(22px, 3.2vw, 44px); }
/* resumo e fila formam um grupo só, no meio do painel */
.painel-cliente.so-resumo { justify-content: center; gap: clamp(22px, 3vw, 36px); }

.pc-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.pc-estado { flex: 1 1 320px; min-width: 0; max-width: 660px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pc-estado h2 { font: 700 clamp(24px, 1rem + 1.6vw, 34px)/1.08 var(--f-display); letter-spacing: -.032em; text-wrap: balance; }
.pc-estado p { font-size: 15px; line-height: 1.5; color: var(--texto-2); text-wrap: pretty; }
/* com material aberto a frase vira uma linha: quem manda na tela é o material */
.pc-cab.compacto { align-items: center; }
.pc-cab.compacto .pc-estado { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 12px; max-width: none; }
.pc-cab.compacto h2 { font: 650 clamp(17px, .92rem + .5vw, 21px)/1.2 var(--f-display); letter-spacing: -.02em; }
.pc-lado { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pc-lado:empty { display: none; }
.pc-conta { font-size: 13px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.pc-conta.cheia { color: var(--verde-texto); }

/* o material aberto no painel */
.pc-material { border-radius: 20px; overflow: clip; background: rgba(7, 9, 8, .5); box-shadow: inset 0 0 0 1px var(--linha-suave); }
.pc-material[hidden], .pc-fila[hidden] { display: none; }
.visor-embutido { min-height: 0; }
.visor-embutido .visor-topo { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 12px 14px 12px 20px; }
.visor-embutido .visor-midia video, .visor-embutido .visor-midia img { max-height: min(58svh, 640px); }
.visor-embutido .visor-pdf iframe { height: min(62svh, 680px); }
.visor-embutido .visor-texto { max-height: min(56svh, 620px); }
.visor-embutido .visor-corpo { max-width: none; margin: 0; padding: 20px; gap: 20px; }
/* o campo de comentário não gruda no rodapé: ali mora a doca */
.visor-embutido .compositor { position: static; box-shadow: none; }
@media (min-width: 980px) {
  /* mídia à esquerda, decisão e comentários à direita: avaliar sem rolar */
  .visor-embutido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 34%); grid-template-rows: auto auto auto 1fr; }
  .visor-embutido > .visor-topo { grid-column: 1 / -1; grid-row: 1; }
  .visor-embutido > .aviso-versao { grid-column: 1 / -1; grid-row: 2; margin-bottom: 14px; }
  .visor-embutido > .visor-midia { grid-column: 1; grid-row: 3; align-self: start; }
  .visor-embutido > .marcadores { grid-column: 1; grid-row: 4; align-self: start; }
  /* a coluna da direita cabe sempre na tela, acima da doca: decisão em cima, o campo de
     comentar embaixo e, no meio, a lista, que é quem rola */
  .visor-embutido > .visor-corpo {
    grid-column: 2; grid-row: 3 / span 2; border-left: 1px solid var(--linha-suave);
    align-self: start; position: sticky; top: 12px;
    max-height: calc(100svh - var(--doca-alt, 0px) - 24px);
  }
  .visor-embutido .comentarios { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .visor-embutido .comentarios-lista { flex: 1 1 auto; min-height: 72px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
  .visor-embutido .comentarios > h3, .visor-embutido .compositor { flex: none; }
  /* a coluna é estreita: o texto em cima, Aprovar inteiro e Pedir ajuste embaixo */
  .visor-embutido .visor-corpo > * { min-width: 0; }
  .visor-embutido .decisao.precisa { flex-direction: column; align-items: stretch; }
  .visor-embutido .decisao.precisa .decisao-texto { flex: none; }
  .visor-embutido .decisao-botoes { display: grid; grid-template-columns: minmax(0, 1fr); }
  .visor-embutido .decisao-botoes .botao { justify-content: center; }
  .visor-embutido .decisao-botoes .botao-primario { order: -1; height: 44px; }
  .visor-embutido .decisao-botoes .botao-fantasma { order: 2; }
}

/* no topo do projeto a fila fica toda à vista, em grade, sem rolar de lado */
.so-resumo .pc-fila-trilho { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); overflow: visible; padding: 0; margin: 0; }
.so-resumo .pc-item { width: auto; }
/* a fila: todos os materiais, um toque para trocar */
.pc-fila { display: flex; flex-direction: column; gap: 10px; }
.pc-fila h3 { font: 600 12px/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.pc-fila-trilho { display: flex; gap: 10px; overflow-x: auto; padding: 2px; margin: -2px; scrollbar-width: none; }
.pc-fila-trilho::-webkit-scrollbar { display: none; }
.pc-item {
  flex: none; width: 216px;
  display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 11px;
  padding: 6px 12px 6px 6px; border: 0; border-radius: 14px;
  background: rgba(255, 255, 255, .05); color: var(--texto); text-align: left;
  cursor: pointer;
  transition: transform .5s var(--mola), background-color .2s, box-shadow .3s;
}
.pc-item:hover { background: rgba(255, 255, 255, .09); }
.pc-item:active { transform: scale(.97); transition-duration: .15s; }
.pc-item.atual { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .62); }
.pc-item-thumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--tinta-4), var(--tinta-3)); color: var(--texto-3);
}
.pc-item-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pc-item-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pc-item-info strong { font: 600 13px/1.2 var(--f-texto); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pc-item-sit { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-item-sit::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pc-item.sit-aguardando .pc-item-sit { color: var(--brasa); }
.pc-item.sit-ajuste .pc-item-sit { color: #f3a463; }
.pc-item.sit-aprovado .pc-item-sit { color: var(--verde-texto); }

/* ---------------------------------------------------------------- doca da linha do tempo
   Presa no rodapé da tela e retrátil. Recolhida é uma linha: em que etapa o
   projeto está. Aberta mostra as etapas; tocar numa abre o cartão dela. */
.doca {
  position: sticky; bottom: 0; z-index: 20;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(10, 12, 11, .84);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 -1px 0 var(--linha-suave), 0 -18px 40px -20px rgba(0, 0, 0, .8);
}
.doca[hidden] { display: none; }
.doca-alca {
  width: 100%; height: 48px;
  display: flex; align-items: center; gap: 14px;
  padding: 0; border: 0; background: none;
  color: var(--texto-2); font: 500 13.5px/1 var(--f-texto); text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.doca-rotulo { flex: none; font: 600 11.5px/1 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.doca .doca-pontos { flex: 0 1 150px; min-width: 60px; margin-top: 0; }
.doca-resumo { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--texto); }
.doca-acao { flex: none; color: var(--texto-3); transition: color .2s; }
.doca-alca:hover .doca-acao { color: var(--texto); }
.doca-seta { flex: none; display: grid; place-items: center; color: var(--texto-3); transform: rotate(-90deg); transition: transform .6s var(--mola); }
.doca-seta svg { width: 15px; height: 15px; }
.doca.aberta .doca-seta { transform: rotate(90deg); }
/* aberta, as etapas já dizem tudo: o resumo em pontos sai */
.doca.aberta .doca-pontos { display: none; }
.doca.aberta .doca-resumo { color: var(--texto-2); }
.doca-corpo { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--mola), opacity .3s var(--e-saida); }
.doca.aberta .doca-corpo { grid-template-rows: 1fr; opacity: 1; }
.doca-dentro { min-height: 0; overflow: hidden; }
.doca:not(.aberta) .doca-dentro { visibility: hidden; transition: visibility 0s .5s; }
/* na doca a linha é compacta: nó, nome e estado. O prazo fica no cartão da etapa */
.doca .linha-trilho { padding: 6px 0 14px; }
.doca .etapa-texto { margin-top: 4px; }
.doca .etapa-prazo { display: none; }
/* para o cliente a etapa inteira é o alvo: nó e nome */
.linha-cliente .etapa { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.linha-cliente .etapa:hover .etapa-no::before { transform: scale(1.16); }
.linha-cliente .etapa:hover .etapa-titulo { color: var(--texto); }
.etapa-seta { display: none; }
/* nome em duas linhas não pode empurrar o estado do vizinho: as linhas de texto
   de todas as etapas compartilham a mesma grade */
@media (min-width: 720px) {
  .linha-cliente .linha-etapas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(124px, 1fr); grid-template-rows: repeat(4, auto); }
  .linha-cliente .etapa { display: grid; grid-template-rows: subgrid; grid-row: span 4; justify-items: center; }
  .linha-cliente .etapa-texto { display: grid; grid-template-rows: subgrid; grid-row: span 3; justify-items: center; align-items: start; row-gap: 3px; }
}

.ec-pilulas { display: flex; flex-wrap: wrap; gap: 6px; }

.cartao-play {
  position: relative;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(7, 9, 8, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  transition: transform .5s var(--mola);
}

.cartao-play svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }

/* cartão da etapa (cliente) */
.ec { position: relative; }
.ec-fechar { position: absolute; top: 14px; right: 14px; z-index: 2; }
.ec-vaga { overflow: hidden; touch-action: pan-y; }
.ec-corpo { display: flex; flex-direction: column; gap: 18px; padding: 26px 26px 22px; }
.ec-cab { display: flex; align-items: flex-start; gap: 16px; padding-right: 40px; }
.ec-ico {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  color: var(--texto-2);
}
.ec-ico svg { width: 24px; height: 24px; }
.ec-ico.est-em_andamento { color: #fff; background: rgba(255, 255, 255, .11); }
.ec-ico.est-com_equipe { color: var(--texto-2); background: rgba(255, 255, 255, .07); }
.ec-ico.est-aguardando_cliente { color: var(--brasa); background: var(--brasa-fundo); box-shadow: inset 0 0 0 1px var(--brasa-borda); }
.ec-ico.est-concluida { color: var(--tinta); background: #fff; }
.ec-cab-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.ec-passo { font: 600 11.5px/1 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.ec-titulo { font: 700 clamp(24px, 1rem + 2vw, 30px)/1.1 var(--f-display); letter-spacing: -.03em; text-wrap: balance; }
.ec-desc { font-size: 16px; line-height: 1.55; color: var(--texto-2); text-wrap: pretty; }
.ec-fatos { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 4px; border-radius: 16px; background: rgba(255, 255, 255, .04); }
.ec-fato { display: grid; grid-template-columns: 20px auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 10px; font-size: 14px; }
.ec-fato .ico { color: var(--texto-3); }
.ec-fato .ico svg { width: 16px; height: 16px; }
.ec-fato dt { color: var(--texto-3); }
.ec-fato dd { margin: 0; text-align: right; color: var(--texto); font-weight: 500; }
.ec-materiais { display: flex; flex-direction: column; gap: 10px; }
.ec-materiais h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 600 12px/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.ec-conta { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.ec-conta.cheia { color: var(--verde-texto); }
/* a faixa que fecha a parte do cliente na etapa */
.ec-retorno, .retorno-nota {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 16px;
  background: var(--verde-fundo); box-shadow: inset 0 0 0 1px rgba(48, 209, 88, .2);
}
.ec-retorno > div, .retorno-nota > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ec-retorno strong, .retorno-nota strong { font: 600 14.5px/1.25 var(--f-texto); color: var(--texto); }
.ec-retorno span, .retorno-nota div span { font-size: 13px; line-height: 1.4; color: var(--texto-2); }
.ec-retorno-glifo, .retorno-glifo {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--verde); color: var(--tinta);
}
.ec-retorno-glifo svg { width: 15px; height: 15px; stroke-width: 3; }
.retorno-glifo::before {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--g-check) center / contain no-repeat; mask: var(--g-check) center / contain no-repeat;
}
/* no painel da equipe, ajuste pedido é âmbar: pede ação nossa */
.retorno-nota.ajuste { background: rgba(228, 102, 12, .13); box-shadow: inset 0 0 0 1px rgba(243, 164, 99, .24); }
.retorno-nota.ajuste .retorno-glifo { background: #f3a463; }
.retorno-nota.ajuste .retorno-glifo::before { -webkit-mask-image: var(--g-ajuste); mask-image: var(--g-ajuste); }
.ec-lista { display: flex; flex-direction: column; gap: 8px; }
.ec-material {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 8px 12px 8px 8px; border: 0; border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  color: var(--texto); text-align: left; cursor: pointer;
  transition: background-color .2s, transform .45s var(--mola);
}
.ec-material:hover { background: rgba(255, 255, 255, .09); }
.ec-material:active { transform: scale(.98); transition-duration: .12s; }
.ec-thumb {
  position: relative; aspect-ratio: 16 / 9;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(150deg, var(--tinta-4), var(--tinta-3)); color: var(--texto-3);
}
.ec-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ec-thumb .cartao-play { position: absolute; left: 5px; bottom: 5px; width: 20px; height: 20px; }
.ec-thumb .cartao-play svg { width: 9px; height: 9px; margin-left: 1px; }
.ec-material-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ec-material-info strong { font-weight: 600; font-size: 14.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ec-material-info span { font-size: 12.5px; color: var(--texto-3); }
.ec-acao { align-self: stretch; }

.ec-nav {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 10px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--linha-suave);
}
.ec-nav-botao {
  display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 48px;
  padding: 8px 10px; border: 0; border-radius: 12px; background: none;
  color: var(--texto); text-align: left; cursor: pointer;
  transition: background-color .2s, opacity .25s, transform .4s var(--mola);
}
.ec-nav-botao:hover { background: rgba(255, 255, 255, .06); }
.ec-nav-botao:active { transform: scale(.96); }
.ec-nav-botao:disabled { opacity: 0; pointer-events: none; }
.ec-nav-botao > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ec-nav-botao small { font-size: 11px; color: var(--texto-3); }
.ec-nav-botao > span > span { font-size: 13.5px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ec-nav-botao .ico svg { width: 16px; height: 16px; color: var(--texto-3); }
.ec-nav-prox { justify-content: flex-end; text-align: right; }
.ec-nav-prox > span { align-items: flex-end; }

.vazio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 16px; text-align: center; color: var(--texto-3); }
.vazio strong { font: 600 18px/1.3 var(--f-display); color: var(--texto); }

.sala-rodape {
  display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap;
  margin-top: clamp(18px, 2.4vw, 28px); padding-bottom: 20px;
  font-size: 13px; color: var(--texto-3);
}

/* ---------------------------------------------------------------- lista de projetos */

.inicio { padding-bottom: 64px; }
.inicio-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding-top: 8px; }
.inicio h1 { margin-top: clamp(28px, 6vw, 72px); font: 700 clamp(40px, 1.6rem + 4vw, 76px)/1 var(--f-display); letter-spacing: -.042em; }
.inicio-sub { margin: 12px 0 clamp(26px, 4vw, 40px); max-width: 560px; font-size: 16px; color: var(--texto-2); }
.projetos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.projeto-caixa { position: relative; }
.projeto {
  display: flex; flex-direction: column; gap: 16px;
  height: 100%; min-height: 210px;
  padding: 22px;
  border-radius: 22px;
  background: var(--tinta-2);
  box-shadow: inset 0 0 0 1px var(--linha-suave);
  color: var(--texto);
  transition: transform .55s var(--mola), box-shadow .3s;
}
.projeto:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--linha), 0 26px 50px -26px rgba(0, 0, 0, .95); }
.projeto:active { transform: scale(.985); transition-duration: .15s; }
.projeto-cliente { font: 600 11px/1 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.projeto-nome { margin-top: 8px; padding-right: 30px; font: 650 23px/1.15 var(--f-display); letter-spacing: -.026em; }
.projeto-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; color: var(--texto-3); }
.projeto-mais { position: absolute; top: 16px; right: 16px; }
.projeto-novo {
  width: 100%; height: 100%; min-height: 210px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 1.5px dashed var(--linha); border-radius: 22px;
  background: transparent; color: var(--texto-2);
  font: 600 15px/1 var(--f-texto);
  cursor: pointer;
  transition: border-color .25s, color .25s, background-color .25s, transform .5s var(--mola);
}
.projeto-novo:hover { border-color: var(--brasa); color: var(--texto); background: rgba(252, 56, 0, .04); }
.projeto-novo:active { transform: scale(.98); }
.projeto-novo .ico { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .06); }
.projeto-novo .ico svg { width: 20px; height: 20px; }

.mini-linha { display: flex; align-items: center; margin-top: auto; }
.mini-no { width: 10px; height: 10px; flex: none; border: 1.5px solid var(--linha-forte); border-radius: 50%; }
.mini-no.concluida { background: #fff; border-color: #fff; }
.mini-no.em_andamento { border-color: #fff; background: linear-gradient(90deg, transparent 50%, #fff 50%); }
.mini-no.pausada { border-style: dashed; }
/* validada pelo cliente: o anel verde é o único verde de etapa fora da página do cliente */
.mini-no.validada { border-color: var(--verde); box-shadow: 0 0 0 2px rgba(48, 209, 88, .22); }
.mini-no.com-ajuste { border-color: #f3a463; box-shadow: 0 0 0 2px rgba(243, 164, 99, .22); }
.mini-no.aguardando_cliente { border: 2px solid var(--brasa); background: var(--brasa); box-shadow: 0 0 10px rgba(252, 56, 0, .6); }
/* o cliente já respondeu: a bolinha para de dizer "aguardando" */
.mini-no.aguardando_cliente.validada { border-color: var(--verde); background: var(--verde); box-shadow: 0 0 0 2px rgba(48, 209, 88, .22); }
.mini-no.aguardando_cliente.com-ajuste, .mini-no.em_andamento.com-ajuste { border: 2px solid #f3a463; background: none; box-shadow: 0 0 0 2px rgba(243, 164, 99, .22); }
.mini-liga { flex: 1; min-width: 6px; height: 1.5px; background: var(--linha); }
.mini-liga.cheia { background: #fff; }

.novo { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.novo > h3 { font: 650 17px/1.2 var(--f-display); letter-spacing: -.015em; }
.modelos-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.modelo-op {
  height: 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--linha); border-radius: 12px;
  background: rgba(255, 255, 255, .03); color: var(--texto);
  font: 500 12.5px/1 var(--f-texto);
  cursor: pointer;
  transition: border-color .2s, background-color .2s, transform .4s var(--mola);
}
.modelo-op:hover { background: rgba(255, 255, 255, .07); }
.modelo-op:active { transform: scale(.95); }
.modelo-op .ico svg { width: 18px; height: 18px; color: var(--texto-2); transition: color .2s; }
.modelo-op[aria-checked="true"] { border-color: var(--brasa); background: var(--brasa-fundo); }
.modelo-op[aria-checked="true"] .ico svg { color: var(--brasa); }
.modelo-previa { min-height: 38px; font-size: 12.5px; line-height: 1.5; color: var(--texto-3); }

.indisponivel { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; }
.indisponivel img { height: 14px; opacity: .8; }
.indisponivel p { font-size: 17px; color: var(--texto-2); }

/* ---------------------------------------------------------------- celular */

@media (max-width: 719px) {
  .barra { gap: 10px; }
  .barra-caminho { display: none; }
  .barra-dir { margin-left: auto; }
  .salvo { display: none; }
  .palco-rotulo { display: none; }

  .linha-trilho { overflow: visible; padding: 6px 0; }
  .linha.tem-dir .linha-trilho, .linha.tem-esq .linha-trilho { -webkit-mask-image: none; mask-image: none; }
  .linha-etapas { flex-direction: column; }
  .etapa, .linha-cliente .etapa { flex: none; flex-direction: row; align-items: flex-start; gap: 12px; padding: 0 0 18px; text-align: left; }
  .linha.vazia .etapa-mais { flex: none; }
  .etapa-texto { align-items: flex-start; margin-top: 12px; }
  .etapa-liga { top: 22px; left: 22px; width: 2px; height: 100%; margin: 0 0 0 -1px; }
  .etapa-liga-cheia { transform: scaleY(0); transform-origin: top; }
  .est-concluida > .etapa-liga .etapa-liga-cheia { transform: scaleY(1); }
  .linha.montando .etapa-liga-cheia { transform: scaleY(0) !important; }
  .linha-editor .etapa.ultima .etapa-liga { background: repeating-linear-gradient(180deg, var(--linha) 0 6px, transparent 6px 12px); }
  .no-badge { right: -2px; }

  .sala-topo { min-height: 64px; flex-wrap: wrap; row-gap: 6px; }
  .sala-topo-dir { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
  .sala-atualizado { white-space: nowrap; }
  .sala-topo .marcas { flex: none; }
  .sala-topo .marcas img { height: 11px; }
  .sala-atualizado { min-width: 0; font-size: 11px; line-height: 1.3; }
  .sala-nome-rotulo { display: none; }
  .painel-cliente { padding: 16px 14px 18px; }
  .painel-cliente.so-resumo { padding: 26px 18px; }
  .painel-cliente.so-resumo .pc-cab { flex-direction: column; align-items: stretch; }
  .painel-cliente.so-resumo .pc-estado { flex: none; max-width: none; }
  .pc-estado h2 { font-size: 24px; }
  .pc-lado .botao { width: 100%; }
  .pc-material { border-radius: 16px; margin-inline: -4px; }
  .visor-embutido .visor-topo { padding: 10px 10px 10px 14px; }
  .visor-embutido .visor-corpo { padding: 16px 14px 18px; }
  .visor-embutido .visor-corpo > * { min-width: 0; }
  .visor-embutido .decisao.precisa { flex-direction: column; align-items: stretch; }
  .visor-embutido .decisao.precisa .decisao-texto { flex: none; }
  .visor-embutido .decisao-botoes { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .visor-embutido .decisao-botoes .botao { justify-content: center; }
  .visor-embutido .decisao-botoes .botao-primario { order: -1; height: 46px; }
  .visor-embutido .decisao-botoes .botao-fantasma { order: 2; }
  .pc-item { width: 196px; }
  .so-resumo .pc-fila-trilho { grid-template-columns: 1fr; }
  /* na doca a linha continua deitada no celular: rola para o lado */
  .linha-cliente .linha-trilho { overflow-x: auto; overflow-y: hidden; padding: 6px 0 14px; }
  .linha-cliente.tem-dir .linha-trilho { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .linha-cliente.tem-esq .linha-trilho { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%); mask-image: linear-gradient(90deg, transparent, #000 18%); }
  .linha-cliente.tem-esq.tem-dir .linha-trilho { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
  .linha-cliente .etapa-titulo { font-size: 13px; }
  .linha-cliente .linha-etapas { flex-direction: row; }
  .linha-cliente .etapa { flex: 1 0 86px; flex-direction: column; align-items: center; gap: 0; padding: 0 4px; text-align: center; }
  .linha-cliente .etapa-texto { flex: none; align-items: center; margin-top: 4px; }
  .linha-cliente .etapa-liga { top: 22px; left: 50%; width: 100%; height: 2px; margin: -1px 0 0; }
  .linha-cliente .etapa-liga-cheia { transform: scaleX(0); transform-origin: left; }
  .linha-cliente .est-concluida > .etapa-liga .etapa-liga-cheia { transform: scaleX(1); }
  .linha-cliente.montando .etapa-liga-cheia { transform: scaleX(0) !important; }
  .linha-cliente .etapa:active .etapa-texto { opacity: .55; }
  .doca-rotulo { display: none; }
  .doca .doca-pontos { flex-basis: 84px; }
  .doca-alca { gap: 12px; font-size: 13px; }

  .folha-palco { padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
  .folha { width: 100%; max-height: 100%; border-radius: 22px; }
  .central { border-radius: 22px; }
  .seg-estados { grid-auto-columns: minmax(0, 1fr); }
  .seg-estados .seg-botao { height: auto; min-height: 36px; padding: 4px 2px; white-space: normal; line-height: 1.15; text-align: center; }
  .ec-corpo { padding: 22px 18px 18px; gap: 16px; }
  .ec-ico { width: 44px; height: 44px; border-radius: 13px; }
  .ec-material { grid-template-columns: 76px minmax(0, 1fr); }
  .ec-material > .pilula { grid-column: 2; justify-self: start; margin-top: -6px; }
  .ec-nav { padding: 8px 8px 10px; gap: 4px; }
  .visor-topo { padding: 12px 12px 12px 18px; }
  .visor-corpo { padding: 18px 16px 22px; }
  .compositor { bottom: 8px; }
  .compositor-nome { width: 120px; }
  .material { grid-template-columns: 64px minmax(0, 1fr); }
  .material-thumb { width: 64px; }
  .material-acoes { grid-column: 1 / -1; justify-content: space-between; }
  .projetos { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- troca de tela */

@keyframes vt-sai { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(12px); } }
::view-transition-old(root) { animation: 170ms var(--e-entrada) both vt-sai; }
::view-transition-new(root) { animation: 460ms var(--e-saida) both vt-entra; }

@keyframes brilho { to { background-position: -100% 0; } }
@keyframes desenha { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------------------------------------------------------------- vídeo longo: carregamento, tempo sob o cursor e tela cheia */

.qb-trilho::-webkit-slider-runnable-track { background: linear-gradient(90deg, #fff var(--p, 0%), rgba(255, 255, 255, .42) var(--p, 0%), rgba(255, 255, 255, .42) var(--b, 0%), rgba(255, 255, 255, .16) var(--b, 0%)); }
.qb-trilho::-moz-range-track { background: linear-gradient(90deg, #fff var(--p, 0%), rgba(255, 255, 255, .42) var(--p, 0%), rgba(255, 255, 255, .42) var(--b, 0%), rgba(255, 255, 255, .16) var(--b, 0%)); }
.qb-sobre {
  position: absolute; bottom: 22px; transform: translateX(-50%); padding: 4px 7px; border-radius: 7px;
  background: rgba(7, 9, 8, .92); border: 1px solid var(--linha-suave); color: var(--texto);
  font: 600 11.5px/1 ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
}
.quadro video { transition: opacity .3s; }
.quadro.carregando video { opacity: .55; }

.visor-video.cinema {
  position: fixed; inset: 0; z-index: 45; min-height: 0; margin: 0; border-radius: 0; background: #000;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.visor-video.cinema .quadro { flex: 1 1 0; min-height: 0; }
.visor-video.cinema .quadro video { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.visor-video.cinema .quadro-barra { flex: none; }
.visor-video.cinema:focus-visible { box-shadow: none; }

/* ---------------------------------------------------------------- entrada da equipe e link do cliente */

.entrar { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px var(--gutter); text-align: center; }
.entrar-marca { height: 16px; width: auto; margin-bottom: 22px; opacity: .9; }
.entrar h1 { font: 650 clamp(26px, 4vw, 34px)/1.1 var(--f-display); letter-spacing: -.02em; }
.entrar-sub { color: var(--texto-3); font-size: 14px; margin-bottom: 14px; }
.entrar-form { width: min(340px, 100%); display: flex; flex-direction: column; gap: 10px; }
.entrar-form .botao { height: 44px; margin-top: 4px; }
.entrar-form .erro { text-align: left; }
.inicio-acoes { display: flex; align-items: center; gap: 8px; }
.indisponivel .nota { font-size: 13px; color: var(--texto-3); margin-top: -8px; }
.indisponivel .texto-botao { margin-top: 18px; font-size: 12.5px; }

.links { display: flex; flex-direction: column; gap: 12px; }
.links h3 { font-size: 15px; }
.links-lista { display: flex; flex-direction: column; gap: 8px; }
.link-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.link-item-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.link-item-texto strong { font-size: 13.5px; }
.link-item-texto span { font-size: 12px; color: var(--texto-3); }
.link-novo { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; border: 1px solid var(--linha-forte); }
.link-novo strong { font-size: 13px; }
.link-novo-linha, .links-novo { display: flex; gap: 8px; }
.link-novo-linha .campo, .links-novo .campo:first-child { flex: 1; min-width: 0; }
.links-dias { width: auto; flex: none; }
@media (max-width: 719px) { .links-novo { flex-wrap: wrap; } .links-novo .campo:first-child { flex: 1 0 100%; } }
.qb-volta { width: auto; padding: 0 8px 0 6px; display: inline-flex; align-items: center; gap: 3px; }
.qb-volta svg { width: 16px; height: 16px; }
.qb-volta span { font: 700 12px/1 var(--f-texto); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.links { padding: 18px; }
.link-novo-linha .campo { text-overflow: ellipsis; }
.indisponivel p { text-wrap: balance; max-width: 34ch; }