/* ============================================================================
   MP6 - 3D EM TODAS AS PAGINAS (V7.85) - estilo
   ----------------------------------------------------------------------------
   Regra: o CSS NAO redesenha os componentes do site. Ele so' (1) emoldura a
   faixa 3D, (2) da' relevo aos botoes ja' existentes e (3) estiliza o selo, os
   controles e os plugins. Cores de fundo dos botoes ficam como estao: quem
   manda na cor e' o tema de cada pagina.
   ============================================================================ */

.mp6d3-faixa {
  position: relative;
  width: 100%;
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 -18px 40px rgba(0, 0, 0, .55);
  overflow: hidden;
  contain: paint;
}
.mp6d3-host { position: relative; width: 100%; }
.mp6d3-canvas,
.mp6d3-leve-canvas { display: block; width: 100%; height: 100%; }
.mp6d3-faixa::after {           /* vinheta: costura o 3D com o fundo da pagina */
  content: "";
  position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.mp6d3-selo {
  position: absolute; right: 10px; bottom: 6px; z-index: 2;
  font: 600 10px/1.4 "Segoe UI", system-ui, sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(223, 230, 234, .55); pointer-events: none;
}
.mp6d3-controles {
  position: absolute; left: 10px; bottom: 8px; z-index: 3;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.mp6d3-controles .mp6d3-botao { padding: 5px 10px; font-size: 11px; }

/* --- BOTOES COM RELEVO 3D (aplicado tambem aos botoes que ja' existem) ----- */
.mp6d3-botao {
  --mp6d3-x: 50%;
  --mp6d3-y: 50%;
  position: relative;
  isolation: isolate;
  box-shadow: 0 4px 0 -1px rgba(0, 0, 0, .55), 0 10px 22px rgba(0, 0, 0, .32);
  transition: transform .16s ease, box-shadow .16s ease;
}
.mp6d3-botao::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(120px circle at var(--mp6d3-x) var(--mp6d3-y),
                              rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 62%);
  opacity: .8; transition: opacity .2s ease;
}
.mp6d3-botao:hover { transform: translateY(-2px); box-shadow: 0 7px 0 -1px rgba(0, 0, 0, .5), 0 16px 30px rgba(0, 0, 0, .42); }
.mp6d3-botao:active { transform: translateY(2px); box-shadow: 0 2px 0 0 rgba(0, 0, 0, .6), 0 6px 14px rgba(0, 0, 0, .38); }
.mp6d3-botao:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }

/* Variante suave: para <button> generico (toolbars densas do /admin, por
   exemplo) o 3D fica so' na luz que segue o ponteiro - sem relevo nem salto, o
   que preserva o alinhamento das barras de ferramenta. */
.mp6d3-suave { box-shadow: none; }
.mp6d3-suave:hover, .mp6d3-suave:active { transform: none; box-shadow: none; }
.mp6d3-suave::after {
  background: radial-gradient(90px circle at var(--mp6d3-x) var(--mp6d3-y),
                              rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 60%);
}

/* --- PLUGIN 3D (widget embutido em qualquer pagina) ------------------------ */
.mp6d3-plug {
  position: relative;
  background: #05080a;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.mp6d3-plug-canvas { display: block; }
.mp6d3-plug-linha {
  max-width: 960px; margin: 26px auto 34px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .10); border-radius: 16px;
  overflow: hidden; background: #05080a;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.mp6d3-plug-linha + .mp6d3-plug-linha { margin-top: 0; }
.mp6d3-plug-cap {
  padding: 10px 14px 6px; font: 600 11px/1.4 "Segoe UI", system-ui, sans-serif;
  letter-spacing: .06em; text-transform: uppercase; color: rgba(223, 230, 234, .55);
}

/* --- MODO LEVE / RECOLHIDO ------------------------------------------------- */
.mp6d3-faixa.mp6d3-leve .mp6d3-canvas { display: none; }
.mp6d3-recolhida .mp6d3-host { display: none; }
.mp6d3-recolhida { box-shadow: none; }

@media (max-width: 640px) {
  .mp6d3-controles { left: 6px; bottom: 6px; gap: 4px; }
  .mp6d3-controles .mp6d3-botao { padding: 4px 7px; font-size: 10px; }
  .mp6d3-selo { font-size: 9px; right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .mp6d3-botao, .mp6d3-botao::after { transition: none; }
  .mp6d3-botao:hover, .mp6d3-botao:active { transform: none; }
}
@media print { .mp6d3-faixa, .mp6d3-plug { display: none !important; } }