/*
 * Elo Cotação - estilos isolados, prefixo .elo-cot- em TUDO, sem
 * depender de nenhuma classe/variável do tema ativo.
 *
 * Referência estética: Wise - números grandes e com peso tipográfico
 * forte, cartões de canto bem arredondado, sem borda, fundo neutro
 * claro, muito respiro, informação secundária pequena e discreta, cor
 * de destaque usada com parcimônia. A estrutura de informação segue essa
 * referência; nada aqui copia o visual do Compras Paraguai.
 *
 * Cor de destaque numa única variável, bem aqui no topo - troque só
 * este valor pra mudar a cor em toda a interface do plugin de uma vez.
 * Placeholder: verde escuro. As variáveis de positivo/negativo (pill de
 * variação) são uma categoria à parte - cor SEMÂNTICA (alta/baixa), não
 * a cor de marca/destaque - por isso vivem separadas, mesmo princípio já
 * usado no restante do Elo (cor semântica nunca conta como "a" cor de
 * destaque).
 */
:root {
    --elo-cot-accent: #0b4f3f;

    --elo-cot-bg: #f6f5f2;
    --elo-cot-bg-alt: #eae8e3;
    --elo-cot-text-primary: #1a1a1a;
    --elo-cot-text-secondary: #6b6b6b;
    --elo-cot-radius: 24px;

    --elo-cot-positivo-bg: #e6f4ea;
    --elo-cot-positivo-text: #1e7d32;
    --elo-cot-negativo-bg: #fbeaea;
    --elo-cot-negativo-text: #c0392b;

    /* Balão de máxima/mínima do gráfico - fundo branco sólido (distinto
       de --elo-cot-bg-alt, o "chip" cinza usado em pill/botão de
       período). Rótulo MAX no mesmo vermelho sóbrio da pill negativa
       (reaproveitado de propósito, mesma família de cor);
       MIN num azul sóbrio próprio, sem equivalente em nenhum outro lugar
       do plugin até aqui - os dois discretos, nunca saturados. */
    --elo-cot-extremo-bg: #ffffff;
    --elo-cot-extremo-max-text: var(--elo-cot-negativo-text);
    --elo-cot-extremo-min-text: #2f5f8f;
}

.elo-cot,
.elo-cot * {
    box-sizing: border-box;
}

/* Todo módulo (cartão, gráfico, tabela, bloco) ocupa 100% do CONTÊINER em
   que for colocado - nunca um max-width/largura fixa próprios. O
   dimensionamento é responsabilidade de quem posiciona o shortcode (ex:
   uma coluna do Gutenberg), nunca do plugin - é isso que permite três
   colunas no desktop renderizarem três cartões lado a lado, empilhando
   sozinhas no celular, sem nenhum parâmetro de largura no shortcode. */
.elo-cot {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--elo-cot-text-primary);
    background: var(--elo-cot-bg);
    border: none;
    border-radius: var(--elo-cot-radius);
    padding: 28px 24px;
    width: 100%;
    margin: 0 0 16px;
    line-height: 1.4;
}

.elo-cot-bloco {
    padding: 32px 28px;
}

@media (min-width: 640px) {
    .elo-cot {
        padding: 36px 32px;
    }
}

/* O valor é o elemento dominante do cartão (referência Wise: o número é
   o assunto) - peso tipográfico forte, bem maior que o resto. */
.elo-cot-numero {
    font-size: clamp(2.5rem, 10vw, 3.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 6px;
    color: var(--elo-cot-text-primary);
    /* Segurança pra coluna muito estreita (ex: 1/3 numa tela pequena de
       desktop) - quebra a palavra em vez de estourar a largura do
       contêiner, já que o tamanho não é sensível à largura real da
       coluna (CSS não tem como saber isso sem container query, evitada
       aqui por segurança de suporte de navegador). */
    overflow-wrap: break-word;
}

.elo-cot-idade,
.elo-cot-acumulando,
.elo-cot-aviso {
    font-size: 0.75rem;
    color: var(--elo-cot-text-secondary);
    margin: 4px 0;
}

.elo-cot-vazio {
    font-size: 0.9rem;
    color: var(--elo-cot-text-secondary);
    margin: 0;
}

/* [elo_cotacao] - uso inline no meio de texto (regra 1 do pedido): herda
   a tipografia de onde for colocado, nunca impõe tamanho/peso/cor
   próprios. tabular-nums só alinha dígitos, não muda a aparência. */
.elo-cot-inline {
    font: inherit;
    color: inherit;
    font-variant-numeric: tabular-nums;
}

.elo-cot-vazio-inline {
    font-style: italic;
    opacity: 0.7;
}

/* Cartões de par ([elo_cotacao_real]/_guarani/_peso) - sem layout
   especial próprio: header (flex, só a linha bandeira+nome), depois
   número/pill/idade em fluxo de bloco normal, já empilhados na ordem
   certa sem precisar de flex/grid no cartão inteiro. O layout lado a
   lado de três cartões é responsabilidade de colunas do Gutenberg (ou
   qualquer contêiner externo), nunca deste CSS - por isso NADA aqui
   define largura, inline-flex ou % - só a hierarquia visual interna.
   transition sempre presente (custa nada sem hover) - o efeito em si
   (transform/box-shadow) só é ativado dentro do media query de hover
   mais abaixo, pra não ficar preso no estado "levantado" depois de um
   toque em celular (sem :hover de verdade). */
.elo-cot-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
    .elo-cot-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(26, 26, 26, 0.1);
    }
}

.elo-cot-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

/* Bandeira em círculo, um pouco maior que antes. */
.elo-cot-card-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--elo-cot-bg-alt);
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}

/* Nome do par - maior que antes, mas continua claramente secundário
   diante do número (font-weight igual, tamanho bem menor). */
.elo-cot-card-label {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--elo-cot-text-secondary);
}

/* Valor dentro do cartão de par - tamanho e respiro abaixo ajustados à
   mão (pedido específico, só pros três cartões dedicados - o valor do
   [elo_cotacao_bloco] continua no clamp() responsivo da regra geral
   .elo-cot-numero acima, sem essa sobrescrita). */
.elo-cot-card .elo-cot-numero {
    font-size: 37px;
    padding-bottom: 13px;
}

/* "Dado de DD/MM/AAAA" dentro do cartão de par - o texto MENOR do
   cartão, propositalmente mais discreto que em outros contextos
   (.elo-cot-idade sozinho, usado no bloco, continua no tamanho padrão
   acima - aqui é uma sobrescrita só pra dentro do cartão de par). */
.elo-cot-card .elo-cot-idade {
    font-size: 0.68rem;
}

/* Sem aviso de aproximação dentro dos três cartões de par - ele se
   repetiria três vezes quando os cartões ficam lado a lado. Continua
   existindo (.elo-cot-aviso, estilo acima) só dentro do
   [elo_cotacao_bloco], que não tem esse problema de repetição. */

/* Pill de variação - largura do CONTEÚDO (inline-block, nunca esticado
   até a borda do cartão - antes ficava parecendo uma barra de
   progresso). Cor por sinal: fundo bem suave + texto na cor
   correspondente (nunca bloco de cor saturada, espírito sóbrio da
   Wise). Zero/sem dado fica no visual neutro padrão (sem classe extra). */
.elo-cot-pill {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--elo-cot-bg-alt);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--elo-cot-text-secondary);
}

.elo-cot-pill-positivo {
    background: var(--elo-cot-positivo-bg);
    color: var(--elo-cot-positivo-text);
}

.elo-cot-pill-negativo {
    background: var(--elo-cot-negativo-bg);
    color: var(--elo-cot-negativo-text);
}

/* Gráfico - o SVG em si é desenhado no JS (assets/js/elo-cotacao-grafico.js);
   aqui só o visual das peças (linha, área, marcadores, tooltip, abas de
   período). */

.elo-cot-bloco-grafico {
    margin-top: 20px;
}

.elo-cot-chart-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.elo-cot-chart-btn {
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 14px;
    border: none;
    border-radius: 999px;
    background: var(--elo-cot-bg-alt);
    color: var(--elo-cot-text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.elo-cot-chart-btn:hover:not(:disabled) {
    opacity: 0.75;
}

.elo-cot-chart-btn-active {
    background: var(--elo-cot-accent);
    color: #fff;
}

.elo-cot-chart-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Proporção responsiva via "padding-bottom hack" (220/600 = 36,666%, o
   padrão - o valor real vem inline do PHP, calculado a partir de
   $height, ver Elo_Cotacao_Chart::render()) em vez de "aspect-ratio" no
   <svg> - <svg> é elemento substituído (como <img>), e alguns motores de
   layout ainda tratam width:100%+aspect-ratio de forma inconsistente
   nesse caso específico. A técnica clássica (wrapper com padding-bottom
   percentual + filho absoluto preenchendo tudo) não depende de nenhum
   comportamento específico de elemento substituído - o <svg> vira só
   mais um bloco absoluto 100%x100%, sempre preenchendo a largura real do
   cartão, nunca mais estreito que a tabela do mesmo cartão (mesmo
   container pai, mesma largura disponível). */
.elo-cot-chart-wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 36.666%;
    /* SEM overflow:hidden, de propósito - o <svg> abaixo já é
       absolutamente posicionado e dimensionado 100%x100% (não depende de
       corte pra caber), e o tooltip (também filho deste wrap) precisa
       poder "escapar" um pouco acima do topo quando o ponto do hover
       está perto da borda superior do gráfico - overflow:hidden cortaria
       ele nesse caso. */
}

.elo-cot-chart-svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Libera rolagem vertical da página durante um toque no gráfico,
       ainda entregando os eventos de pointer pro JS (tooltip/scrub) -
       sem isso, o navegador trataria qualquer arrasto no SVG só como
       rolagem de página. */
    touch-action: pan-y;
}

.elo-cot-chart-line {
    fill: none;
    stroke: var(--elo-cot-accent);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.elo-cot-chart-area {
    fill: var(--elo-cot-accent);
    fill-opacity: 0.08;
    stroke: none;
}

.elo-cot-chart-dot {
    fill: var(--elo-cot-accent);
    stroke: var(--elo-cot-bg);
    stroke-width: 2;
}

/* Balão de máxima/mínima - fundo branco sólido, pequeno e discreto em
   estado normal. Quando o ponto sob o cursor é a própria máxima/mínima,
   o balão ABSORVE o hover (nunca sobreposto ao tooltip escuro - ver
   ativarExtremo()/mostrarTooltip() no JS, que decide qual dos dois
   renderizar): ganha a classe .elo-cot-chart-extremo-ativo (sombra +
   leve elevação, ver abaixo) e uma terceira linha com a data
   (.elo-cot-chart-extremo-data). O rótulo (MAX/MIN) leva a cor semântica
   de cada extremo (.elo-cot-chart-extremo-prefixo-max/-min, classe extra
   que o JS adiciona conforme ehMaxima); valor e data continuam na cor de
   texto padrão do plugin (primária/secundária), sem cor semântica. */
.elo-cot-chart-extremo {
    transition: transform 0.15s ease, filter 0.15s ease;
}

/* filter:drop-shadow() em vez de box-shadow (CSS não tem box-shadow pra
   forma de SVG) - projeta sombra em volta do conteúdo visível do grupo
   inteiro (rect + texto). translateY em unidades do viewBox (600x220),
   não px de tela - "levemente" de propósito, o gráfico já é pequeno. */
.elo-cot-chart-extremo-ativo {
    transform: translateY(-3px);
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.22));
}

.elo-cot-chart-extremo-bg {
    fill: var(--elo-cot-extremo-bg);
}

.elo-cot-chart-extremo-prefixo {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.elo-cot-chart-extremo-prefixo-max {
    fill: var(--elo-cot-extremo-max-text);
}

.elo-cot-chart-extremo-prefixo-min {
    fill: var(--elo-cot-extremo-min-text);
}

.elo-cot-chart-extremo-valor {
    font-size: 9.5px;
    font-weight: 700;
    fill: var(--elo-cot-text-primary);
}

/* Terceira linha, só existe visualmente no estado ativo (display:none no
   JS enquanto normal) - a data do ponto, mesmo tom discreto do texto
   secundário do plugin (nunca a cor semântica do prefixo). */
.elo-cot-chart-extremo-data {
    font-size: 7px;
    font-weight: 600;
    fill: var(--elo-cot-text-secondary);
}

.elo-cot-chart-tooltip {
    position: absolute;
    transform: translate(-50%, -130%);
    background: var(--elo-cot-text-primary);
    color: var(--elo-cot-bg);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
}

.elo-cot-chart-legenda {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    font-size: 0.7rem;
    color: var(--elo-cot-text-secondary);
}

.elo-cot-chart-minmax {
    flex: 1;
    text-align: center;
}

/* Tabela dos últimos dias - sempre 100% da largura disponível (herda de
   .elo-cot, sem max-width próprio), nunca divide espaço lado a lado com
   o gráfico. */

.elo-cot-tabela {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.85rem;
}

.elo-cot-tabela th,
.elo-cot-tabela td {
    padding: 8px 6px;
    text-align: right;
}

.elo-cot-tabela th:first-child,
.elo-cot-tabela td:first-child {
    text-align: left;
}

.elo-cot-tabela thead th {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--elo-cot-text-secondary);
    border-bottom: 1px solid var(--elo-cot-bg-alt);
}

.elo-cot-tabela tbody tr + tr {
    border-top: 1px solid var(--elo-cot-bg-alt);
}

/* [elo_cotacao_atualizado] é inline (span), não um cartão - discreto por
   natureza, pensado pra ficar embutido em qualquer lugar de um texto. */

span.elo-cot-atualizado {
    display: inline;
    background: none;
    padding: 0;
    margin: 0;
    max-width: none;
    font-size: 0.75rem;
    color: var(--elo-cot-text-secondary);
    border-radius: 0;
}