.wf-spectrum{
    font-family:var(--wf-sans);color:var(--wf-text-primary);
    display:flex;flex-direction:column;align-items:center;
    padding:1rem;width:100%;max-width:100%;box-sizing:border-box;background:#fff;
    overflow:hidden;
}

/* Header */
.wf-spectrum__header{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.6rem;flex-wrap:wrap;justify-content:center;width:100%;max-width:100%}
.wf-spectrum__nav{
    background:#fff;border:1.5px solid rgba(0,0,0,0.08);border-radius:8px;
    width:36px;height:36px;display:flex;align-items:center;justify-content:center;
    font-size:0.9rem;cursor:pointer;color:var(--wf-text-primary);transition:background 0.12s;
}
.wf-spectrum__nav:hover{background:rgba(0,0,0,0.04)}
.wf-spectrum__nav:disabled{opacity:0.3;cursor:default}
.wf-spectrum__play.is-playing{background:var(--wf-accent);color:#fff;border-color:var(--wf-accent)}
.wf-spectrum__select{
    flex:1;min-width:180px;padding:0.55rem 0.7rem;border:1.5px solid rgba(0,0,0,0.08);
    border-radius:8px;font-family:var(--wf-sans);font-size:0.9rem;font-weight:600;
    color:var(--wf-text-primary);background:#fff;cursor:pointer;text-align:center;
}

/* Summary */
.wf-spectrum__summary{
    display:flex;gap:1.5rem;margin-bottom:1rem;font-size:0.95rem;color:var(--wf-text-secondary);
    flex-wrap:wrap;justify-content:center;
}
.wf-spectrum__summary strong{font-size:1.2rem;font-weight:800;color:var(--wf-text-primary)}
.wf-spectrum__dp-deg{font-size:0.78rem;font-weight:500;color:var(--wf-text-muted);margin-left:0.15rem}

/* Polar container */
.wf-spectrum__polar{
    position:relative;width:100%;max-width:min(100%, 500px);aspect-ratio:1/1;
    border-radius:50%;overflow:hidden;
}
/* Chip de data/hora no canto superior direito (mesmo estilo do Mapa do Pico). */
.wf-spectrum__caption{
    position:absolute;top:10px;right:12px;z-index:600;
    background:rgba(255,255,255,0.88);color:#1a1e2a;
    font-size:13px;font-weight:600;line-height:1;
    padding:5px 10px;border-radius:6px;
    box-shadow:0 1px 4px rgba(0,0,0,0.18);
    pointer-events:none;white-space:nowrap;
}
.wf-spectrum__caption:empty{display:none}
.wf-spectrum__map{
    position:absolute;inset:0;z-index:0;border-radius:50%;overflow:hidden;opacity:0.8;
}
.wf-spectrum__canvas{
    position:relative;z-index:1;width:100%;height:100%;display:block;
}
.wf-spectrum__compass{position:absolute;inset:0;z-index:2;pointer-events:none}
.wf-spectrum__lbl{
    position:absolute;font-size:0.82rem;font-weight:800;color:var(--wf-text-primary);
    text-shadow:0 0 4px #fff,0 0 4px #fff,0 0 4px #fff;
}

/* Legend */
.wf-spectrum__legend{display:flex;align-items:center;gap:0.6rem;margin-top:1rem}
.wf-spectrum__legend-label{font-size:0.78rem;font-weight:600;color:var(--wf-text-muted)}
.wf-spectrum__legend-bar{height:14px;width:180px;border-radius:3px}

.wf-spectrum__no-data{
    padding:1.5rem;text-align:center;color:var(--wf-text-muted);font-size:0.9rem;
}

@media(max-width:768px){
    .wf-spectrum{padding:0.5rem}
    .wf-spectrum__polar{max-width:100%}
    .wf-spectrum__summary{gap:0.8rem;font-size:0.85rem}
    .wf-spectrum__summary strong{font-size:1.05rem}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Modo "legado" (.wf-spectrum--sync): empilhamento e proporção do wavescheck.

   O palco é a arte da rosa (254×250, a mesma buoy_bg.png do original). O campo
   de energia é um canvas do mesmo tamanho por baixo dela, e o peak-thumb
   preenche o fundo. Nada é circular aqui — a moldura é retangular, como no
   legado; o recorte redondo do modo antigo é do componente standalone.
   ═══════════════════════════════════════════════════════════════════════════ */

/* .wf-spectrum é flex: sem largura explícita o palco vira item shrink-to-fit e
   o width:100% do polar resolveria contra zero.
   Teto de largura para não estourar em colunas largas do Elementor (a coluna do
   espectro chega a ~895px); centralizado, preenche colunas normais mas mantém a
   proporção do gráfico ao lado. Abaixo de 500px o width:100% assume. */
.wf-spectrum--sync .wf-spectrum__preview-stage{
    width:100%;
    max-width:500px;
    margin:0 auto;
    align-self:center;
}

.wf-spectrum--sync .wf-spectrum__polar{
    position:relative;
    width:100%;
    max-width:500px;
    margin:0 auto;
    aspect-ratio:254/250;
    border-radius:16px;
    overflow:hidden;
    background:#000;
}

/* Fundo do disco da rosa. A arte trazia esse preenchimento embutido (branco
   semitransparente) e por isso não havia como regulá-lo nem removê-lo; o PNG foi
   limpo e o disco virou esta camada, com cor e opacidade próprias.
   Opacidade 0 = disco totalmente transparente, mapa à mostra.

   O diâmetro acompanha o anel de 20 s: 2 × 91,4 / 254 = 71,97% da largura. */
.wf-spectrum--sync .wf-spectrum__polar::before{
    content:"";
    position:absolute;
    z-index:1;
    pointer-events:none;
    left:50%;
    top:50%;
    width:71.97%;
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:var(--wf-spectrum-disc,#fff);
    opacity:var(--wf-spectrum-disc-opacity,.55);
}

/* Véu retangular sobre o mapa inteiro, independente do disco. */
.wf-spectrum--sync .wf-spectrum__polar::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:#fff;
    opacity:var(--wf-spectrum-veil,0);
}

.wf-spectrum--sync .wf-spectrum__bg,
.wf-spectrum--sync .wf-spectrum__canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border-radius:0;
}

/* Fundo em opacidade quase cheia. O clareamento é responsabilidade exclusiva do
   disco e do véu, ambos reguláveis — rebaixar o thumb aqui também lavaria a
   imagem sem controle. */
.wf-spectrum--sync .wf-spectrum__bg{
    z-index:0;
    object-fit:cover;
    opacity:.95;
}

/* Campo de energia acima do véu, para o clareamento não apagar o espectro. */
.wf-spectrum--sync .wf-spectrum__canvas{z-index:2}

/* ═══ Rosa em SVG ═══════════════════════════════════════════════════════════
   Vale nos DOIS modos (legado e standalone). Prender estas regras ao seletor
   --sync deixava o SVG sem posicionamento fora do modo legado: ele virava um
   bloco solto em largura cheia e quebrava o preview do Elementor.

   Espessura, cor e opacidade são parâmetros; a arte antiga era bitmap e
   engrossava ao ampliar, sem como afinar. `non-scaling-stroke` mantém o peso
   visual constante em qualquer tamanho do componente. */
.wf-spectrum__rose{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:3;
    pointer-events:none;
    opacity:var(--wf-rose-opacity,1);
}

/* Linhas e texto têm cores INDEPENDENTES: sobre satélite escuro costuma-se
   querer linha branca e rótulo branco com contorno escuro; sobre o disco claro,
   o inverso. Um controle só não cobria os dois casos. */
.wf-rose__lines{
    stroke:var(--wf-rose-line-color,#2b2b2b);
    fill:none;
    stroke-linecap:butt;
    vector-effect:non-scaling-stroke;
}

/* Hierarquia de peso copiada do legado: anéis internos discretos, ticks e
   círculo externo firmes. É o que dá o ar leve do original. */
.wf-rose__ring {stroke-width:calc(var(--wf-rose-w,1) * 1);   opacity:.5}
.wf-rose__axis {stroke-width:calc(var(--wf-rose-w,1) * 1);   opacity:.6}
.wf-rose__diag {stroke-width:calc(var(--wf-rose-w,1) * .9);  opacity:.4}
.wf-rose__tick {stroke-width:calc(var(--wf-rose-w,1) * 1.3); opacity:.8}
.wf-rose__outer{stroke-width:calc(var(--wf-rose-w,1) * 1.8); opacity:1}

/* Contorno do texto por paint-order: delineia colado na letra. Sombra borrada
   se somava sobre centenas de traços e preenchia o miolo do disco. */
.wf-spectrum__rose text{
    font-family:inherit;
    font-weight:700;
    fill:var(--wf-rose-text-color,#2b2b2b);
    paint-order:stroke fill;
    stroke:var(--wf-rose-halo-color,#ffffff);
    stroke-opacity:var(--wf-rose-halo-opacity,.9);
    stroke-width:calc(var(--wf-rose-halo,1) * 1.6px);
    stroke-linejoin:round;
}

.wf-rose__periods text{font-size:8.5px}
.wf-rose__quads   text{font-size:11px}
.wf-rose__degree{font-size:7.5px;opacity:.9}
.wf-rose__badge{fill:var(--wf-rose-badge,#1a1e2a);stroke:var(--wf-rose-line-color,#2b2b2b);stroke-width:calc(var(--wf-rose-w,1) * .9)}
.wf-rose__badge-letter{font-size:10px;fill:var(--wf-rose-badge-letter,#fff);stroke:none}

/* Sem controles nem legenda no modo legado. */
.wf-spectrum--sync .wf-spectrum__header[hidden],
.wf-spectrum--sync .wf-spectrum__legend[hidden]{display:none}

/* O sumário (Ondas/Período/Direção) continua: é o equivalente ao rodapé que o
   legado mostrava logo abaixo do espectro. */
.wf-spectrum--sync .wf-spectrum__summary{
    justify-content:center;
    gap:14px;
    font-size:12px;
}