/* MAV Produção: a marca da MAV (preto neutro, vermelho ao pêssego só no principal, DM Sans, cartões lisos, botões em pílula) */
:root {
  --fundo: #0A0B0E; --cartao: #121419; --cartao2: #171A20; --cartao3: #1D2129; --linha: #252932; --linha2: #313641;
  --texto: #F2F3F5; --suave: #A0A6B0; --fraco: #6E7480;
  --vermelho: #FF3B4E; --vermelho2: #E8164E; --pessego: #FFC3A6; --ok: #22C55E; --alerta: #F59E0B; --erro: #F59E0B;
  --e-clientes: #3B82F6; --e-pra_editar: #FACC15; --e-editando: #FF4D4D; --e-editado: #22C55E; --e-postado: #8B93A1;
  --grad: linear-gradient(135deg, #E8164E 0%, #FF3B4E 55%, #FFC3A6 120%);
  --sombra: 0 10px 30px rgba(0,0,0,.35);
  --raio: 14px;
  color-scheme: dark;
}
:root[data-tema="claro"] {
  --fundo: #F4F4F6; --cartao: #FFFFFF; --cartao2: #F7F7F9; --cartao3: #EEEFF2; --linha: #E3E4E8; --linha2: #D3D5DB;
  --texto: #131418; --suave: #5A606B; --fraco: #8A909B;
  --e-pra_editar: #CA8A04; --e-editado: #16A34A; --e-clientes: #2563EB; --e-editando: #DC2626; --e-postado: #6B7280;
  --sombra: 0 10px 30px rgba(20,20,30,.12);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fundo); color: var(--texto); font: 15px/1.45 "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
.suave { color: var(--suave); }
.fraco { color: var(--fraco); }
.erro { color: var(--erro); }

/* logo: as três barras da MAV */
.logo { display: flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.logo b { font-weight: 700; }
.barras { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.barras i { display: block; width: 5px; border-radius: 2px; background: var(--grad); }
.barras i:nth-child(1) { height: 8px; opacity: .55; } .barras i:nth-child(2) { height: 13px; opacity: .8; } .barras i:nth-child(3) { height: 18px; }
.logo.grande { font-size: 22px; justify-content: center; }
.logo.grande .barras { height: 26px; } .logo.grande .barras i { width: 7px; }
.logo.grande .barras i:nth-child(1) { height: 11px; } .logo.grande .barras i:nth-child(2) { height: 18px; } .logo.grande .barras i:nth-child(3) { height: 26px; }

/* botões */
.bt { border: 1px solid var(--linha2); background: var(--cartao2); border-radius: 999px; padding: 7px 14px; cursor: pointer;
  font-weight: 500; font-size: 14px; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s; }
.bt:hover { background: var(--cartao3); }
.bt:active { transform: scale(.97); }
.bt:disabled { opacity: .5; cursor: default; }
.bt.principal { background: var(--grad); border-color: transparent; color: #fff; font-weight: 600; }
.bt.principal:hover { filter: brightness(1.08); }
.bt.fino { padding: 4px 11px; font-size: 13px; }
.bt.icone { padding: 7px 11px; }
.bt.texto { border-color: transparent; background: transparent; padding: 4px 8px; color: var(--suave); }
.bt.texto:hover { color: var(--texto); background: var(--cartao3); }
.bt.perigo { color: var(--erro); }

/* entrada (link do editor) */
.entrada { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; }
.entrada-caixa { width: min(360px, 100%); display: grid; gap: 12px; text-align: center; background: var(--cartao);
  border: 1px solid var(--linha); border-radius: 20px; padding: 28px 22px; }
.entrada-caixa input { background: var(--cartao2); border: 1px solid var(--linha2); border-radius: 12px; padding: 11px 14px; }
.entrada-caixa .bt { padding: 11px; }

/* tela larga: o quadro fica no meio, com margem dos lados (o topo acompanha) */
.miolo { max-width: 1640px; margin: 0 auto; }

/* topo */
.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px;
  padding: 12px max(18px, calc((100% - 1640px) / 2 + 18px));
  background: color-mix(in srgb, var(--fundo) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.busca { flex: 1; min-width: 120px; max-width: 420px; }
.busca input { width: 100%; background: var(--cartao); border: 1px solid var(--linha); border-radius: 999px; padding: 8px 14px; outline: none; }
.busca input:focus { border-color: var(--linha2); }
.topo-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.status { font-size: 13px; color: var(--suave); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.status .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; }
.status .ponto.ruim { background: var(--alerta); }
.status .ponto.vivo { animation: pulsar 1.2s infinite; }
@keyframes pulsar { 50% { opacity: .35; } }

.faixa { margin: 10px 18px 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; }
.erro-faixa { background: color-mix(in srgb, var(--alerta) 14%, transparent); border: 1px solid color-mix(in srgb, var(--alerta) 40%, transparent); }

/* filtros e tempos */
.barra-filtros { display: flex; align-items: center; gap: 14px; padding: 12px 18px 4px; flex-wrap: wrap; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1 1 100%; min-width: 0; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linha); background: var(--cartao); border-radius: 999px;
  padding: 5px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.chip.ativo { border-color: var(--texto); }
.chip .n { color: var(--fraco); font-variant-numeric: tabular-nums; }
.bolinha { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--fraco)); flex: none; }
.tempos { display: flex; gap: 16px; font-size: 13px; color: var(--suave); flex-wrap: wrap; }
.tempos b { color: var(--texto); font-weight: 600; }

/* quadro */
.abas-etapas { display: none; }
.quadro { display: grid; grid-template-columns: repeat(5, minmax(268px, 1fr)); gap: 12px; padding: 12px 18px 90px; align-items: start; overflow-x: auto; }
.coluna { background: var(--cartao); border: 1px solid var(--linha); border-radius: 18px; min-height: 200px; display: flex; flex-direction: column;
  max-height: calc(100vh - 190px); transition: border-color .15s, background .15s; }
.coluna.alvo { border-color: var(--e); background: color-mix(in srgb, var(--e) 7%, var(--cartao)); }
.coluna-topo { display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px; border-bottom: 1px solid var(--linha); }
.coluna-topo .bolinha { --c: var(--e); }
.coluna-topo h2 { font-size: 14px; font-weight: 600; margin: 0; }
.coluna-topo .n { color: var(--fraco); font-size: 13px; font-variant-numeric: tabular-nums; }
.coluna-topo .drive { margin-left: auto; font-size: 12px; color: var(--fraco); text-decoration: none; }
.coluna-topo .drive:hover { color: var(--texto); }
.coluna-lista { padding: 8px; display: grid; gap: 8px; overflow-y: auto; align-content: start; flex: 1; }
.coluna-vazia { color: var(--fraco); font-size: 13px; text-align: center; padding: 26px 10px; }
.mais { text-align: center; font-size: 13px; }

.entrega { border: 1px solid var(--linha); border-radius: 14px; background: var(--cartao2); }
.entrega-topo { display: flex; align-items: center; gap: 8px; padding: 9px 10px; font-size: 13.5px; cursor: pointer; user-select: none; }
.entrega-txt { display: grid; min-width: 0; line-height: 1.3; }
.entrega-txt b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entrega-txt span { font-size: 12px; color: var(--fraco); }
.entrega-topo .bt { flex: none; }
.entrega-topo .seta { color: var(--fraco); transition: transform .15s; }
.entrega.fechada .seta { transform: rotate(-90deg); }
.entrega-topo .bt { margin-left: auto; }
.entrega-lista { display: grid; gap: 6px; padding: 0 6px 6px; }
.mini-capas { display: flex; gap: 3px; margin-left: auto; align-items: center; flex: none; }
.mini-capas img, .mini-capas i { width: 18px; height: 32px; border-radius: 4px; object-fit: cover; background: var(--cartao3); display: block; }
.mini-capas em { font-style: normal; font-size: 11px; color: var(--fraco); margin-left: 2px; }
.entrega:not(.fechada) .mini-capas { display: none; }
.entrega.fechada .entrega-lista { display: none; }

.card { position: relative; display: grid; grid-template-columns: 82px 1fr; gap: 12px; padding: 9px; border-radius: 14px;
  background: var(--cartao2); border: 1px solid var(--linha); cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; }
.entrega .card { background: var(--cartao); }
.card:hover { border-color: var(--linha2); }
.card.escolhido { border-color: var(--vermelho); box-shadow: 0 0 0 1px var(--vermelho) inset; }
.card.arrastando { opacity: .45; }
.card.novo { animation: chegar .6s ease-out; }
@keyframes chegar { from { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--vermelho); } }
.thumb { position: relative; width: 82px; height: 146px; border-radius: 10px; overflow: hidden; background: var(--cartao3); display: grid; place-items: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .dur { position: absolute; right: 4px; bottom: 4px; font-size: 11px; font-weight: 600; background: rgba(0,0,0,.65); color: #fff; padding: 1px 5px; border-radius: 5px; }
.thumb .carregando { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--linha2); border-top-color: var(--suave); animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.card-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 2px 0; }
.card-l1 { display: flex; align-items: center; gap: 6px; font-size: 14.5px; min-width: 0; }
.card-l1 b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-quando { font-size: 12px; color: var(--fraco); font-variant-numeric: tabular-nums; }
.card-rot { font-size: 12.5px; color: var(--suave); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-rot.confirmar { color: var(--e-pra_editar); }
.card-rot.sem { color: var(--fraco); }
.card-l3 { display: flex; align-items: center; gap: 6px; margin-top: auto; flex-wrap: wrap; row-gap: 6px; }
.card-l3 .tempo { font-size: 12px; color: var(--fraco); white-space: nowrap; }
.card-l3 .tempo.velho { color: var(--alerta); }
.card-l3 .bt { margin-left: auto; padding: 3px 10px; font-size: 12px; }
.marca { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--linha2); color: var(--suave); white-space: nowrap; }
.marca.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.marca.alerta { color: var(--e-pra_editar); border-color: color-mix(in srgb, var(--e-pra_editar) 40%, transparent); }
button.marca { background: transparent; font-family: inherit; cursor: pointer; }
button.marca:hover { background: var(--cartao3); }
.sel { position: absolute; top: 6px; left: 6px; z-index: 2; width: 20px; height: 20px; border-radius: 6px; background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.35); display: none; place-items: center; color: #fff; font-size: 12px; }
.card:hover .sel, .card.escolhido .sel, .quadro.selecionando .sel { display: grid; }
.card.escolhido .sel { background: var(--vermelho); border-color: var(--vermelho); }

.selecao { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 10px;
  background: var(--cartao3); border: 1px solid var(--linha2); border-radius: 999px; padding: 8px 10px 8px 16px; box-shadow: var(--sombra); max-width: calc(100vw - 24px); overflow-x: auto; }
.selecao-acoes { display: flex; gap: 6px; }
#selecao-n { font-weight: 600; white-space: nowrap; }

/* o vídeo aberto: uma janela no meio da tela, o vídeo à esquerda e as informações à direita (no celular, tela cheia) */
.gaveta { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px; }
.gaveta-fundo, .janela-fundo { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.gaveta-painel { position: relative; width: min(1200px, 100%); height: min(860px, 100%); display: flex; flex-direction: column;
  background: var(--cartao); border: 1px solid var(--linha); border-radius: 20px; overflow: hidden; box-shadow: var(--sombra);
  animation: subir .18s ease-out; }
.g-topo { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--cartao); border-bottom: 1px solid var(--linha); }
.g-topo h3 { margin: 0; font-size: 16px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fechar { border: 0; background: var(--cartao3); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 18px; flex: none; }
.g-corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); }
.g-video { padding: 16px; border-right: 1px solid var(--linha); overflow-y: auto; display: grid; align-content: start; gap: 10px; }
.g-info { padding: 16px 18px; overflow-y: auto; display: grid; align-content: start; gap: 14px; min-width: 0; }
.g-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; align-items: start; }
.player { background: #000; border-radius: 14px; overflow: hidden; display: grid; place-items: center; }
.player video { width: 100%; max-height: min(68vh, 700px); display: block; background: #000; }
.player-abas { display: flex; gap: 6px; }
.etapas-botoes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; background: var(--cartao2); border: 1px solid var(--linha); border-radius: 999px; padding: 4px; }
.etapas-botoes button { border: 0; background: transparent; border-radius: 999px; padding: 7px 4px; cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--suave); }
.etapas-botoes button:hover { color: var(--texto); background: var(--cartao3); }
.etapas-botoes button.atual { background: var(--e); color: #0A0B0E; font-weight: 600; }
.bloco { border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; display: grid; gap: 10px; background: var(--cartao2); }
.bloco h4 { margin: 0; font-size: 13px; font-weight: 600; color: var(--suave); }
.bloco.destaque { border-color: color-mix(in srgb, var(--e-pra_editar) 45%, transparent); }
.linhas { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.linhas dt { color: var(--suave); }
.linhas dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.texto-roteiro { white-space: pre-wrap; font-size: 14px; line-height: 1.55; max-height: 320px; overflow-y: auto; }
.opcoes { display: grid; gap: 6px; }
.opcao { display: flex; align-items: center; gap: 10px; border: 1px solid var(--linha); border-radius: 12px; padding: 8px 10px; background: var(--cartao); }
.opcao span { flex: 1; min-width: 0; }
.opcao .pct { color: var(--fraco); font-size: 12px; font-variant-numeric: tabular-nums; }
.campo { display: grid; gap: 6px; font-size: 13px; color: var(--suave); }
.campo input, .campo select, .campo textarea, .entrada-texto { background: var(--cartao); border: 1px solid var(--linha2); border-radius: 10px; padding: 9px 11px; color: var(--texto); width: 100%; }
.campo textarea { resize: vertical; min-height: 70px; }
.tempo-linha { display: grid; gap: 0; }
.passo { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: start; font-size: 13.5px; position: relative; padding-bottom: 12px; }
.passo::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 0; width: 2px; background: var(--linha); }
.passo:last-child::before { display: none; }
.passo .bolinha { margin-top: 5px; width: 10px; height: 10px; border: 2px solid var(--cartao2); box-sizing: content-box; position: relative; z-index: 1; margin-left: -1px; }
.passo .quanto { color: var(--fraco); font-size: 12.5px; white-space: nowrap; }
details.abrir summary { cursor: pointer; color: var(--suave); font-size: 13px; }
.transcricao { display: grid; gap: 2px; max-height: 52vh; overflow-y: auto; border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 8px 10px; background: var(--cartao2); }
.trecho { display: grid; grid-template-columns: 42px 1fr; gap: 10px; padding: 5px 4px; font-size: 14.5px; line-height: 1.5; }
.trecho .quando { color: var(--fraco); font-size: 12.5px; font-variant-numeric: tabular-nums; padding-top: 2px; }

/* janelas */
.janela { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.janela-caixa { position: relative; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--cartao);
  border: 1px solid var(--linha); border-radius: 20px; box-shadow: var(--sombra); animation: subir .18s ease-out; }
.janela-caixa.larga { width: min(980px, 100%); }
@keyframes subir { from { transform: translateY(10px); opacity: .6; } }
.j-topo { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; background: var(--cartao); }
.j-topo h3 { margin: 0; font-size: 17px; font-weight: 600; flex: 1; }
.j-corpo { padding: 4px 18px 18px; display: grid; gap: 14px; }
.soltar { border: 1.5px dashed var(--linha2); border-radius: 16px; padding: 26px 16px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.soltar:hover, .soltar.em-cima { border-color: var(--vermelho); background: color-mix(in srgb, var(--vermelho) 6%, transparent); }
.soltar b { display: block; font-size: 16px; margin-bottom: 4px; }
.lista-envio { display: grid; gap: 8px; }
.envio { display: grid; gap: 6px; border: 1px solid var(--linha); border-radius: 12px; padding: 9px 12px; font-size: 13.5px; }
.envio-l { display: flex; gap: 8px; align-items: center; }
.envio-l span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra { height: 6px; border-radius: 99px; background: var(--cartao3); overflow: hidden; }
.barra i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .2s; }
.envio.pronto .barra i { background: var(--ok); }
.envio.falhou .barra i { background: var(--alerta); }
.segmento { display: inline-flex; background: var(--cartao2); border: 1px solid var(--linha); border-radius: 999px; padding: 3px; gap: 3px; }
.segmento button { border: 0; background: transparent; border-radius: 999px; padding: 6px 12px; cursor: pointer; color: var(--suave); }
.segmento button.atual { background: var(--cartao3); color: var(--texto); }
.grade-2 { display: grid; grid-template-columns: 220px 1fr; gap: 14px; }
.lista-lateral { display: grid; gap: 4px; align-content: start; }
.lista-lateral button { text-align: left; border: 0; background: transparent; border-radius: 10px; padding: 8px 10px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.lista-lateral button:hover { background: var(--cartao2); }
.lista-lateral button.atual { background: var(--cartao3); }
.lista-lateral button .n { margin-left: auto; color: var(--fraco); font-size: 12px; }
/* roteiros em lotes (cada PDF é um lote) */
.lote { border: 1px solid var(--linha); border-radius: 16px; background: var(--cartao2); }
.lote > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; flex-wrap: wrap; }
.lote > summary::-webkit-details-marker, .rot > summary::-webkit-details-marker { display: none; }
.lote-n { background: var(--cartao3); border: 1px solid var(--linha2); border-radius: 999px; padding: 3px 11px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.lote-txt { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
.lote-txt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lote-txt span { font-size: 12.5px; color: var(--fraco); }
.lote-conta { font-size: 12.5px; color: var(--suave); white-space: nowrap; }
.lote-conta b { color: var(--texto); font-weight: 600; }
.lote-conta b.ok { color: var(--ok); }
.lote-conta b.alerta { color: var(--e-pra_editar); }
.lote-lista { display: grid; border-top: 1px solid var(--linha); }
.lote > .acoes { padding: 6px 10px 8px; }
.rot { border-bottom: 1px solid var(--linha); }
.rot:last-child { border-bottom: 0; }
.rot > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 14px; flex-wrap: wrap; }
.rot > summary:hover { background: var(--cartao3); }
.rot[open] > summary { background: var(--cartao3); }
.rot-n { color: var(--fraco); font-size: 12.5px; font-variant-numeric: tabular-nums; width: 20px; flex: none; }
.rot-t { flex: 1; min-width: 180px; font-weight: 500; }
.chip-c { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 10%, transparent); white-space: nowrap; }
.rot-sit { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rot-corpo { padding: 4px 14px 12px 44px; display: grid; gap: 10px; }
.rot-parte span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: var(--suave); margin-bottom: 2px; }
.rot-parte p { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.rot-parte.orientacao { border-left: 2px solid var(--linha2); padding-left: 10px; }
.rot-parte.orientacao p { color: var(--suave); font-size: 13px; }
@media (max-width: 900px) { .rot-corpo { padding-left: 14px; } .lote-conta { white-space: normal; } }
.cliente-linha { display: flex; align-items: center; gap: 10px; border: 1px solid var(--linha); border-radius: 12px; padding: 9px 12px; }
.cliente-linha .nome { flex: 1; min-width: 0; font-weight: 600; }
.cliente-linha .conta { color: var(--fraco); font-size: 12.5px; white-space: nowrap; }
.cliente-linha.inativo { opacity: .55; }
.linha-form { display: flex; gap: 8px; }
.linha-form input { flex: 1; }
.caixa-link { display: flex; gap: 8px; align-items: center; background: var(--cartao2); border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px; font-size: 14px; overflow-wrap: anywhere; }
.caixa-link code { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.dica { font-size: 13px; color: var(--suave); }

/* editado e pronto para postar */
.prontos { margin: 12px 18px 0; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--ok) 14%, var(--cartao)); border: 1px solid color-mix(in srgb, var(--ok) 50%, transparent); }
.prontos b { display: block; font-size: 17px; font-weight: 700; }
.prontos .nomes { color: var(--suave); font-size: 13.5px; }
.prontos .bt { margin-left: auto; }
.icone-ok { width: 40px; height: 40px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center;
  font-size: 21px; font-weight: 700; flex: none; }
.prontos.chegou { animation: pulso-ok 1.1s ease-out 3; }
@keyframes pulso-ok { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 65%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
.marca.pronto { background: var(--ok); color: #fff; border-color: transparent; font-weight: 600; }
.pronto-bloco { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px; border-radius: var(--raio);
  background: color-mix(in srgb, var(--ok) 14%, var(--cartao2)); border: 1px solid color-mix(in srgb, var(--ok) 50%, transparent); }
.pronto-bloco b { display: block; font-size: 16px; }
.pronto-bloco .acoes { margin-left: auto; }
.aviso.pronto-chegou { width: 100%; gap: 14px; padding: 16px 14px 16px 16px; border-radius: 18px; animation: estourar .35s cubic-bezier(.2, 1.4, .4, 1);
  background: color-mix(in srgb, var(--ok) 20%, var(--cartao3)); border-color: color-mix(in srgb, var(--ok) 60%, transparent); }
.pronto-chegou .txt { flex: 1; min-width: 0; }
.pronto-chegou b { display: block; font-size: 18px; font-weight: 700; line-height: 1.25; }
.pronto-chegou small { display: block; margin-top: 3px; color: var(--suave); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pronto-chegou .bolinha { display: inline-block; margin-right: 6px; vertical-align: 1px; }
@keyframes estourar { from { transform: translateY(16px) scale(.96); opacity: 0; } }
@media (max-width: 900px) { .prontos { margin: 8px 12px 0; } .prontos .bt { margin-left: 0; } .prontos { flex-wrap: wrap; }
  .aviso.pronto-chegou { gap: 10px; padding: 12px; } .pronto-chegou b { font-size: 16px; }
  .pronto-chegou .icone-ok { width: 34px; height: 34px; font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .prontos.chegou, .aviso.pronto-chegou { animation: none; } }

/* avisos */
.avisos { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; display: grid; justify-items: center; gap: 8px;
  grid-template-columns: minmax(0, 1fr); width: min(580px, calc(100vw - 24px)); }
.aviso { display: flex; align-items: center; gap: 10px; background: var(--cartao3); border: 1px solid var(--linha2); border-radius: 14px; padding: 10px 12px 10px 14px;
  box-shadow: var(--sombra); font-size: 14px; animation: subir .18s ease-out; width: min(440px, 100%); }
.aviso span { flex: 1; }
.aviso.ruim { border-color: color-mix(in srgb, var(--alerta) 55%, transparent); }

/* celular e janelas estreitas: uma etapa por vez, deslizando de lado */
@media (max-width: 900px) {
  body { font-size: 15px; }
  .topo { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  .busca { order: 3; flex-basis: 100%; max-width: none; }
  .topo-acoes { gap: 6px; }
  #bt-link, .status { display: none; }
  .barra-filtros { padding: 8px 12px 0; }
  .tempos { display: none; }
  .abas-etapas { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px 2px; scrollbar-width: none; }
  .abas-etapas::-webkit-scrollbar { display: none; }
  .abas-etapas button { border: 1px solid var(--linha); background: var(--cartao); border-radius: 999px; padding: 6px 12px; font-size: 13px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
  .abas-etapas button.atual { border-color: var(--e); color: var(--texto); }
  .abas-etapas .bolinha { --c: var(--e); }
  .quadro { grid-template-columns: repeat(5, 88vw); gap: 10px; padding: 10px 12px 90px; scroll-snap-type: x mandatory; scroll-padding: 12px; }
  .coluna { scroll-snap-align: start; max-height: none; }
  .gaveta { padding: 0; }
  .gaveta-painel { width: 100%; height: 100%; border: 0; border-radius: 0; }
  .g-corpo { display: block; overflow-y: auto; }
  .g-video { border-right: 0; overflow: visible; padding-bottom: 0; }
  .g-info { overflow: visible; padding: 16px; }
  .player video { max-height: 58vh; }
  .card { grid-template-columns: 70px 1fr; }
  .thumb { width: 70px; height: 124px; }
  .grade-2 { grid-template-columns: 1fr; }
  .lista-lateral { display: flex; overflow-x: auto; }
  .lista-lateral button { white-space: nowrap; }
}
@media (max-width: 520px) {
  .topo-acoes .bt:not(.principal):not(.icone) { padding: 7px 10px; }
  #bt-enviar { padding: 7px 12px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }