/* =====================================================================
   A BLACK FRIDAY COMO EVENTO DO PAINEL (lote 597, 27/10/2026; saas/evento_do_painel.py)
   So entra no mes do evento (e, ate o dono liberar, so na previa dele). Tres pecas:
     1. a FAIXA da contagem no alto de toda tela ("Black Friday em 31 dias", "E hoje", "Cyber Monday");
     2. na Visao geral, o SELO "Modo Black Friday" no centro de comando e o CONVITE para ligar o Modo nos posts
        (a pessoa liga; o painel nunca liga sozinho);
     3. o que cada plano tem a mais no SEU tema da Black: no Overpower e no Ultra, as brasas subindo no centro de
        comando e a varredura de ouro nos numeros do dia. O PRO fica com o tema discreto (temas.css).
   A regra da casa: so transform e opacity se mexem, e tudo para com "menos movimento" (no fim da folha).
   ===================================================================== */

/* ------------------------------------------------------------------ 1. a faixa */
.faixa-da-black {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 9px 14px;
  border-radius: 12px; font-size: 13.5px; line-height: 1.35; color: var(--texto);
  border: 1px solid rgba(245, 196, 81, .42);
  background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(245, 196, 81, .09));
}
.faixa-da-black b { color: #f5c451; font-family: var(--fonte-titulo); letter-spacing: .04em; }
.faixa-da-black .fb-detalhe { color: var(--texto-2, #b9b1a1); }
.faixa-da-black .fb-selo { font-size: 15px; line-height: 1; }
.faixa-da-black.fase-hoje { border-color: rgba(245, 196, 81, .8); background: linear-gradient(90deg, rgba(245, 196, 81, .2), rgba(0, 0, 0, .55)); }
html.tema-claro .faixa-da-black { background: rgba(245, 196, 81, .12); }
html.tema-claro .faixa-da-black b { color: #8a6410; }

/* ------------------------------------------------------------------ 2. o selo no centro de comando e o convite */
.vg-selo-da-black {
  display: inline-flex; align-self: flex-start; width: fit-content; max-width: 100%; align-items: center; gap: 6px;
  margin: 8px 0 0; padding: 4px 10px; border-radius: 999px;
  font: 700 11px/1.2 var(--fonte-titulo); letter-spacing: .14em; text-transform: uppercase; color: #f5c451;
  border: 1px solid rgba(245, 196, 81, .5); background: rgba(0, 0, 0, .45);
}
html.tema-claro .vg-selo-da-black { color: #8a6410; background: rgba(245, 196, 81, .14); }

.convite-da-black {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 18px; border-radius: 16px;
  border: 1px solid rgba(245, 196, 81, .45);
  background: radial-gradient(120% 160% at 0% 0%, rgba(245, 196, 81, .12), transparent 60%), var(--painel);
}
.convite-da-black .cb-texto { flex: 1 1 320px; min-width: 0; }
.convite-da-black h2 { margin: 0 0 4px; font: 700 16px/1.3 var(--fonte-titulo); color: var(--texto); }
.convite-da-black h2 span { color: #f5c451; }
.convite-da-black p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--texto-2, #b9b1a1); }
.convite-da-black .cb-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.convite-da-black .cb-recado { font-size: 13px; color: var(--texto-2, #b9b1a1); }
.convite-da-black .cb-recado.ok { color: var(--ok); }
.convite-da-black .cb-recado.erro { color: #ff7a8a; }
.convite-da-black.ligado { border-color: rgba(var(--ok-rgb, 52, 211, 153), .45); }
html.tema-claro .convite-da-black h2 span { color: #8a6410; }

/* ------------------------------------------------------------------ 3. o Overpower e o Ultra: brasas e ouro */
.vg-brasas-da-black { display: none; }
html:is(.cor-black-friday-overpower, .cor-black-friday-ultra) .conteudo .vg-heroi .vg-brasas-da-black {
  display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none;
}
.vg-brasas-da-black i {
  position: absolute; left: var(--x); bottom: -8px; width: var(--t, 4px); height: var(--t, 4px); border-radius: 50%; opacity: 0;
  background: #f5c451; box-shadow: 0 0 8px rgba(245, 196, 81, .8);
  animation: brasa-da-black var(--dur, 6s) linear var(--d, 0s) infinite;
}
.vg-brasas-da-black i:nth-child(3n) { background: #ff6a3d; box-shadow: 0 0 8px rgba(255, 106, 61, .7); }
html.cor-black-friday-ultra .vg-brasas-da-black i:nth-child(3n) { background: #fff3c4; box-shadow: 0 0 8px rgba(255, 243, 196, .7); }
@keyframes brasa-da-black {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  15% { opacity: .9; }
  100% { transform: translateY(-220px) translateX(18px) scale(1); opacity: 0; }
}

/* a varredura de ouro nos numeros do dia: o .vg-brilho de cada cartao (o brilho do mouse) vira a faixa que passa */
html:is(.cor-black-friday-overpower, .cor-black-friday-ultra) .conteudo .vg-numeros .numero { position: relative; overflow: hidden; }
html:is(.cor-black-friday-overpower, .cor-black-friday-ultra) .conteudo .vg-numeros .numero > .vg-brilho {
  position: absolute; inset: 0; z-index: 0; opacity: 1; overflow: hidden; border-radius: inherit; pointer-events: none; background: none;
}
html:is(.cor-black-friday-overpower, .cor-black-friday-ultra) .conteudo .vg-numeros .numero > .vg-brilho::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(var(--op-ouro-rgb, 245, 196, 81), .16), transparent);
  transform: translateX(-120%); animation: brilho-da-black 6s ease-in-out infinite;
}
html:is(.cor-black-friday-overpower, .cor-black-friday-ultra) .conteudo .vg-numeros .numero:nth-child(2) > .vg-brilho::after { animation-delay: .5s; }
html:is(.cor-black-friday-overpower, .cor-black-friday-ultra) .conteudo .vg-numeros .numero:nth-child(3) > .vg-brilho::after { animation-delay: 1s; }
html:is(.cor-black-friday-overpower, .cor-black-friday-ultra) .conteudo .vg-numeros .numero:nth-child(4) > .vg-brilho::after { animation-delay: 1.5s; }
@keyframes brilho-da-black { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(330%); } }

/* ------------------------------------------------------------------ menos movimento: tudo parado */
html.menos-movimento .vg-brasas-da-black i { animation: none; opacity: 0; }
html.menos-movimento .conteudo .vg-numeros .numero > .vg-brilho::after { animation: none; opacity: 0; }

@media (max-width: 720px) {
  .faixa-da-black { font-size: 13px; padding: 8px 12px; }
  .faixa-da-black .fb-detalhe { display: none; }
  .convite-da-black { padding: 14px; }
  .convite-da-black .cb-acoes, .convite-da-black .cb-acoes .acao { width: 100%; }
}

/* lote 597 cont.: o relogio ao vivo na faixa (telas/evento_do_painel.js) */
.faixa-da-black .fb-relogio { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--fonte-titulo); }
.faixa-da-black .fb-relogio small { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--texto-2, #b9b1a1); }
.faixa-da-black .fb-relogio b { font-variant-numeric: tabular-nums; letter-spacing: .04em; color: #fff1c7; }
html.tema-claro .faixa-da-black .fb-relogio b { color: #8a6410; }
@media (max-width: 720px) {
  .faixa-da-black .fb-relogio small { display: none; }
}

/* ------------------------------------------------------------------ lote 597 cont. 17: a faixa vira o PAINEL DO EVENTO */
/* O dono, olhando o painel dele no tema da Black: "ta muito simples, nao parece uma atualizacao de verdade, so tem uma
   faixinha". A faixa ganhou forma de evento: a fita listrada na ponta esquerda, o letreiro BLACK FRIDAY em metal (BLACK
   em cromo, FRIDAY no metal do plano), o texto e a contagem em quatro blocos. A cor vem de --black-rgb (o tema da Black
   de cada plano, telas/tema_da_black.css); com outro tema escolhido, o ouro. So a luz que ja passava se mexe. */
.faixa-da-black {
  position: relative; overflow: hidden; isolation: isolate; gap: 18px; min-height: 66px; padding: 10px 14px 10px 24px;
  border-radius: 14px; border: 1px solid rgba(var(--black-rgb, 245, 196, 81), .5);
  background:
    radial-gradient(60% 140% at 0% 50%, rgba(var(--black-rgb, 245, 196, 81), .26), transparent 70%),
    linear-gradient(90deg, rgba(10, 10, 12, .92), rgba(6, 6, 8, .96) 60%, rgba(var(--black-rgb, 245, 196, 81), .1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 44px -28px rgba(var(--black-rgb, 245, 196, 81), .75);
}
/* o fio de metal da ponta (cont. 17b: era uma fita listrada amarela e preta - o dono reprovou, lia como obra/aviso e
   nao como Black de luxo) */
.faixa-da-black::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--black2-rgb, 255, 241, 199), .95), rgb(var(--black-rgb, 245, 196, 81)) 45%, rgba(var(--black-rgb, 245, 196, 81), .55));
  box-shadow: 0 0 18px 2px rgba(var(--black-rgb, 245, 196, 81), .45);
}
.faixa-da-black > * { position: relative; z-index: 1; }
.faixa-da-black .fb-marca {
  display: inline-flex; flex-direction: column; gap: 1px; font: 800 21px/.9 var(--fonte-titulo); letter-spacing: .1em;
  padding-right: 18px; border-right: 1px solid rgba(var(--black-rgb, 245, 196, 81), .3);
}
.faixa-da-black .fb-palavra {
  display: block; color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, #ffffff 0%, #e9e9ee 42%, #8d8d96 58%, #f4f4f7 100%);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .65));
}
.faixa-da-black .fb-palavra + .fb-palavra {
  background-image: linear-gradient(180deg, #fff6d9 0%, #ffd36b 45%, #b8860b 60%, #ffe7a3 100%);
}
.faixa-da-black .fb-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.faixa-da-black .fb-texto b { font: 800 17px/1.1 var(--fonte-titulo); letter-spacing: .02em; color: #fff; }
.faixa-da-black .fb-texto .fb-detalhe { font-size: 12.5px; line-height: 1.2; color: var(--texto-2, #b9b1a1); }
.faixa-da-black .fb-relogio { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; }
.faixa-da-black .fb-relogio small {
  font: 700 10px/1.25 var(--fonte-titulo); letter-spacing: .24em; text-transform: uppercase; text-align: right; max-width: 60px;
  color: rgba(var(--black2-rgb, 255, 241, 199), .8);
}
.faixa-da-black .fb-blocos { display: inline-flex; gap: 6px; }
.faixa-da-black .fb-blocos i {
  display: grid; justify-items: center; gap: 4px; min-width: 50px; padding: 7px 6px 6px; border-radius: 9px; font-style: normal;
  border: 1px solid rgba(var(--black-rgb, 245, 196, 81), .38);
  background: linear-gradient(180deg, #17171c 0%, #0c0c10 50%, #050507 51%, #0d0d11 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 16px -10px rgba(var(--black-rgb, 245, 196, 81), .8);
}
.faixa-da-black .fb-blocos b {
  font: 800 21px/1 var(--fonte-titulo); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: #fff;
  text-shadow: 0 0 14px rgba(var(--black-rgb, 245, 196, 81), .45);
}
.faixa-da-black .fb-blocos em {
  font: 700 8.5px/1 var(--fonte-titulo); font-style: normal; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(var(--black2-rgb, 255, 241, 199), .7);
}
/* a leitura inteira (o leitor de tela le "28d 12:38:44"; os blocos sao so para o olho) */
.faixa-da-black .fb-leitura {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.faixa-da-black.fase-hoje { border-color: rgba(var(--black-rgb, 245, 196, 81), .85); }
html.tema-claro .faixa-da-black { background: linear-gradient(90deg, rgba(245, 196, 81, .16), #fff 60%); }
html.tema-claro .faixa-da-black .fb-texto b { color: #1b1408; }
html.tema-claro .faixa-da-black .fb-palavra { background-image: linear-gradient(180deg, #3a3a40, #0d0d10); filter: none; }
html.tema-claro .faixa-da-black .fb-palavra + .fb-palavra { background-image: linear-gradient(180deg, #b8860b, #6b4708); }
html.tema-claro .faixa-da-black .fb-blocos i { background: #fff; box-shadow: none; }
html.tema-claro .faixa-da-black .fb-blocos b { color: #1b1408; text-shadow: none; }
@media (max-width: 720px) {
  .faixa-da-black { gap: 10px 12px; padding: 10px 10px 10px 18px; min-height: 0; }
  .faixa-da-black::before { width: 3px; }
  .faixa-da-black .fb-marca { font-size: 16px; padding-right: 12px; }
  .faixa-da-black .fb-texto b { font-size: 15px; }
  .faixa-da-black .fb-texto .fb-detalhe { display: block; font-size: 11.5px; }
  .faixa-da-black .fb-relogio { margin-left: 0; width: 100%; justify-content: space-between; }
  .faixa-da-black .fb-relogio small { display: block; max-width: none; text-align: left; }
  .faixa-da-black .fb-blocos i { min-width: 44px; padding: 6px 4px 5px; }
  .faixa-da-black .fb-blocos b { font-size: 18px; }
}