/*
 * Elo Calculadora - estilos isolados, prefixo .elo-calc- em TUDO, sem
 * depender de nenhuma classe/variável do tema ativo NEM do plugin Elo
 * Cotação (mesma linguagem visual, mas token set 100% próprio - os dois
 * plugins são independentes, o único contrato entre eles é a função PHP
 * elo_cotacao_valor_atual()).
 *
 * Referência estética: mesma do elo-cotacao (Wise) - números grandes e
 * com peso tipográfico forte, cartão 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.
 *
 * Cor de destaque numa única variável, bem aqui no topo.
 */
:root {
    --elo-calc-accent: #0b4f3f;

    --elo-calc-bg: #f6f5f2;
    --elo-calc-bg-alt: #eae8e3;
    --elo-calc-card: #ffffff;
    --elo-calc-convertido-bg: #f7f7f6;
    /* Fundo do aviso de simulação - era --elo-calc-card (branco), agora
       um bege claro próprio, testado no DevTools. Token à parte porque o
       resto do sistema continua usando --elo-calc-card pra "cartão
       branco padrão" (tabela, caixa de entrada) - o aviso diverge só
       ele. */
    --elo-calc-aviso-bg: #eeede9;
    --elo-calc-text-primary: #1a1a1a;
    --elo-calc-text-secondary: #6b6b6b;
    --elo-calc-radius: 24px;

    /* Zona de excedente da barra de cota - cor semântica (alerta),
       categoria à parte da cor de marca, mesmo princípio já usado no
       elo-cotacao. */
    --elo-calc-excedente: #c0392b;
    --elo-calc-excedente-bg: #fbeaea;
    --elo-calc-excedente-text: #c0392b;

    /* Cartões de resultado e coluna de imposto da tabela - mesma cor
       semântica de alerta acima, tokens próprios porque o USO é
       diferente (fundo de cartão inteiro / texto de célula, não
       preenchimento de barra). Total: azul/neutro suave, número na cor
       de destaque (pedido explícito). */
    --elo-calc-imposto-bg: #fbeaea;
    --elo-calc-imposto-text: #c0392b;
    --elo-calc-total-bg: #eaf1fb;

    /* Tamanhos GRANDES testados no DevTools pelo Robson - um token por
       elemento, nunca hardcoded direto no seletor, pra existir UM lugar
       só onde a versão reduzida de celular (ver @media abaixo) redefine
       todos de uma vez, sem duplicar a declaração em cada seletor.
       Valores desta rodada incorporam um CSS externo que o Robson vinha
       aplicando por fora (com !important, só necessário porque eram
       regras de fora do plugin) - trazido pra dentro do arquivo, usando
       os tokens que já existiam, sem !important nenhum. */
    --elo-calc-fs-titulo: 30px;
    --elo-calc-fs-fonte: 13px;
    --elo-calc-fs-coluna-rotulo: 20px; /* rótulo esquerdo E direito, mesmo token */
    --elo-calc-lh-coluna-rotulo: 33px;
    --elo-calc-fs-campo: 30px; /* .elo-calc-input e .elo-calc-resultado-numero - mesmo valor, mesmo token */
    --elo-calc-lh-campo: 36px;
    --elo-calc-fs-pill-nome: 16px;
    --elo-calc-fs-cartao-rotulo: 15px;
    --elo-calc-fs-cartao-numero: 30px; /* imposto E total - mesmo token, mesma classe */
    --elo-calc-fs-cartao-detalhe: 14px;
    --elo-calc-fs-aviso-linha: 15px;
    --elo-calc-fs-tabela-titulo: 30px;
    --elo-calc-lh-tabela-titulo: 38px;

    /* Ícone - SVG inline via mask-image (nunca <img>/biblioteca externa),
       cor sempre herdada de background-color no elemento que usa (mesma
       técnica já documentada no restante do sistema Elo pro papel de
       parede do módulo Respostas) - o SVG em si só existe como "molde" de
       forma, nunca fixa cor própria. Só o de informação sobrevive nesta
       rodada - o de cifrão (.elo-calc-fonte) foi removido a pedido, a
       pill ficou só com fundo/padding. */
    --elo-calc-icon-info: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229.5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%2210.5%22%20width%3D%222%22%20height%3D%227%22%20rx%3D%221%22%20fill%3D%22black%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%221.4%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}

/* Versão reduzida de TODOS os tamanhos grandes acima - 30px estoura em
   tela estreita - um lugar só redefine os tokens, cada seletor que usa
   var(--elo-calc-fs-*) recebe o valor menor automaticamente, sem
   precisar redeclarar a propriedade de novo aqui. */
@media (max-width: 639px) {
    :root {
        --elo-calc-fs-titulo: 24px;
        --elo-calc-fs-fonte: 12px;
        --elo-calc-fs-coluna-rotulo: 17px;
        --elo-calc-lh-coluna-rotulo: 27px;
        --elo-calc-fs-campo: 24px;
        --elo-calc-lh-campo: 29px;
        --elo-calc-fs-pill-nome: 13px;
        --elo-calc-fs-cartao-rotulo: 14px;
        --elo-calc-fs-cartao-numero: 22px;
        --elo-calc-fs-cartao-detalhe: 13px;
        --elo-calc-fs-aviso-linha: 14px;
        --elo-calc-fs-tabela-titulo: 21px;
        --elo-calc-lh-tabela-titulo: 28px;
    }
}

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

/* Ocupa 100% do CONTÊINER em que for colocado - nunca um max-width/
   largura fixa próprios, mesmo princípio do elo-cotacao (o dimensionamento
   é responsabilidade de quem posiciona o shortcode). */
.elo-calc {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--elo-calc-text-primary);
    background: var(--elo-calc-bg);
    border: none;
    border-radius: var(--elo-calc-radius);
    padding: 32px 26px;
    width: 100%;
    margin: 0 0 16px;
    line-height: 1.4;
}

@media (min-width: 640px) {
    .elo-calc {
        padding: 44px 40px;
    }
}

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

.elo-calc-header {
    margin-bottom: 30px;
}

.elo-calc-titulo {
    font-size: var(--elo-calc-fs-titulo);
    font-weight: 700;
    margin: 0 0 6px;
    padding-bottom: 23px;
    color: var(--elo-calc-text-primary);
}

/* Carimbo da cotação - pill ancorada logo abaixo do título (margem
   pequena, ver .elo-calc-titulo acima), nunca texto solto: fundo claro
   suave, canto arredondado, padding generoso. SEM ícone (removido nesta
   rodada a pedido - só a pill de fundo/padding permanece). */
.elo-calc-fonte {
    display: inline-block;
    background: var(--elo-calc-bg-alt);
    border-radius: 999px;
    padding: 5px 38px;
    font-size: var(--elo-calc-fs-fonte);
    font-weight: 600;
    color: var(--elo-calc-text-secondary);
    margin: 0;
}

/* Entrada + convertido lado a lado no desktop - grid de 2 colunas só a
   partir de 640px; abaixo disso, 1 coluna (empilhado, entrada em cima -
   item 5a). As duas colunas têm exatamente a MESMA forma - rótulo
   (mesma classe) seguido direto da caixa, sem nada entre os dois em
   nenhuma das colunas - é isso que garante alinhar no topo e ter a
   mesma altura (item 4). As pills de moeda vivem DEPOIS da caixa (ver
   markup), nunca entre o rótulo e ela. */
.elo-calc-linha-principal {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 28px;
}

@media (min-width: 640px) {
    .elo-calc-linha-principal {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.elo-calc-coluna {
    display: flex;
    flex-direction: column;
}

/* Mesma classe nos dois rótulos ("Valor da compra" / "Valor convertido")
   - reset explícito de font-family/line-height/padding além do
   font-size, pra nunca depender do que o tema define pra <label>/<p> (a
   esquerda é um <label>, a direita é um <p> - sem esse reset, um tema
   que estilize algum dos dois genericamente, inclusive com padding,
   poderia desalinhar as duas colunas mesmo com a mesma classe aplicada
   nos dois - item 4). */
.elo-calc-coluna-rotulo {
    display: block;
    font-family: inherit;
    font-size: var(--elo-calc-fs-coluna-rotulo);
    line-height: var(--elo-calc-lh-coluna-rotulo);
    font-weight: 600;
    color: var(--elo-calc-text-secondary);
    margin: 0 0 8px;
    padding: 0;
    padding-bottom: 0;
}

/* Campo de entrada - bandeira dos EUA em círculo + "US$" + número, tudo
   na MESMA linha, dentro de um único campo com borda. min-height fixo
   (não só padding) pra garantir a MESMA altura exata da caixa de
   convertido ao lado, não uma altura "quase igual" dependendo de
   detalhe de fonte (item 4). */
.elo-calc-input-usd {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    background: var(--elo-calc-card);
    border: 1.5px solid var(--elo-calc-bg-alt);
    border-radius: 16px;
    padding: 12px 18px;
}

.elo-calc-bandeira {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--elo-calc-bg-alt);
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.elo-calc-input-prefixo {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--elo-calc-text-secondary);
    flex-shrink: 0;
}

/* A BORDA é da caixa (.elo-calc-input-usd acima), nunca do input em si -
   por isso border:none aqui, de propósito, não um esquecimento. Fundo
   branco explícito (antes era transparente, revelando o branco da caixa
   por baixo - agora é o próprio input que é branco, mais robusto se um
   dia a caixa mudar de cor). */
.elo-calc-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: #fff;
    font-family: inherit;
    font-size: var(--elo-calc-fs-campo);
    line-height: var(--elo-calc-lh-campo);
    font-weight: 800;
    color: var(--elo-calc-text-primary);
}

/* Remove as setas nativas do <input type="number"> - tiram o foco do
   número digitado, que já é o elemento principal da tela. */
.elo-calc-input::-webkit-outer-spin-button,
.elo-calc-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.elo-calc-input[type="number"] {
    -moz-appearance: textfield;
}

/* Caixa do valor convertido - MESMO min-height/padding/borda do campo de
   entrada (item 4: mesma altura, mesma linha de base) - só o fundo é
   levemente diferente (cinza bem claro, não branco puro), sinalizando
   "isto é calculado, não editável", distinto do campo de entrada
   interativo ao lado. */
.elo-calc-convertido-caixa {
    display: flex;
    align-items: center;
    min-height: 64px;
    background: var(--elo-calc-convertido-bg);
    border: 1.5px solid var(--elo-calc-bg-alt);
    border-radius: 16px;
    padding: 21px 23px;
    margin-bottom: 13px;
}

.elo-calc-resultado-numero {
    font-size: var(--elo-calc-fs-campo);
    line-height: var(--elo-calc-lh-campo);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--elo-calc-accent);
    margin: 0;
    overflow-wrap: break-word;
}

/* Seletor de moeda em pill - ABAIXO da caixa de convertido, nunca entre
   o rótulo e ela. Cada pill tem bandeira em círculo + nome por extenso;
   a ativa ganha fundo sólido na cor de destaque, as demais só contorno
   leve. */
.elo-calc-moeda-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* No celular, as três pills viram três colunas de largura IGUAL (item
   5b) - minmax(0, 1fr) evita que uma pill com nome mais longo ("Peso
   argentino") estoure a grade; o nome quebra linha dentro da própria
   pill nesse caso (nunca corta/estoura a tela), já que nada aqui força
   white-space:nowrap. */
@media (max-width: 639px) {
    .elo-calc-moeda-pills {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .elo-calc-moeda-pill {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

.elo-calc-moeda-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 5px;
    border-radius: 999px;
    border: 1.5px solid var(--elo-calc-bg-alt);
    background: transparent;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--elo-calc-text-primary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.elo-calc-moeda-pill-bandeira {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--elo-calc-bg-alt);
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
}

.elo-calc-moeda-pill-nome {
    font-size: var(--elo-calc-fs-pill-nome);
}

.elo-calc-moeda-pill-ativo {
    background: var(--elo-calc-accent);
    border-color: var(--elo-calc-accent);
    color: #fff;
}

.elo-calc-moeda-pill-ativo .elo-calc-moeda-pill-bandeira {
    background: rgba(255, 255, 255, 0.25);
}

/* Barra de uso da cota - duas zonas de largura FIXA na trilha (60% pra
   0-100% da cota, 40% pra o excedente numa escala logarítmica, ver
   fracaoExcedente() no JS) - nunca "satura" de forma binária quando
   ultrapassa: US$ 50 de excedente e US$ 4.000 de excedente ocupam
   frações bem diferentes dos 40% finais, sempre visíveis lado a lado
   com o texto exato abaixo (a barra nunca é a única fonte do número). */
.elo-calc-cota {
    margin-top: 70px;
    margin-bottom: 70px;
}

/* Testado no DevTools pelo Robson: 66px no celular, próximo do valor de
   desktop (70px) - decisão revisada em relação à rodada anterior (que
   reduzia bastante, pra 28px). Intencional, não reverter sem pedido
   explícito. Mesmo padrão de override direto por seletor já usado em
   .elo-calc-aviso/.elo-calc-tabela-wrap (não é um tamanho de fonte
   compartilhado entre vários elementos, não precisa virar token).
   .elo-calc-cota-legenda é irmã de .elo-calc-cota aqui dentro, nunca
   aninhada - achado real: uma versão anterior deste CSS (aplicada por
   fora, com !important) tinha .elo-calc-cota abrindo e nunca fechando,
   com a legenda "dentro" dela por erro de chave - CSS puro não suporta
   aninhar seletores assim, então a legenda nunca tinha efeito nenhum
   daquele jeito. */
@media (max-width: 639px) {
    .elo-calc-cota {
        margin-top: 66px;
        margin-bottom: 66px;
    }

    .elo-calc-cota-legenda {
        line-height: 22px;
        margin-top: 24px;
    }
}

.elo-calc-cota-barra-trilha {
    position: relative;
    width: 100%;
    height: 14px;
    border-radius: 999px;
    background: var(--elo-calc-bg-alt);
    overflow: hidden;
}

.elo-calc-cota-barra-fill-cota {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: var(--elo-calc-accent);
    border-radius: 999px 0 0 999px;
    transition: width 0.15s ease;
}

.elo-calc-cota-barra-fill-excedente {
    position: absolute;
    top: 0;
    left: 60%;
    height: 100%;
    width: 0%;
    background: var(--elo-calc-excedente);
    transition: width 0.15s ease;
}

/* Marcador vertical exatamente no limite das duas zonas (60%) - mostra
   visualmente onde fica "a cota", independente do valor digitado. */
.elo-calc-cota-marcador {
    position: absolute;
    top: -3px;
    left: 60%;
    width: 2px;
    height: 20px;
    background: var(--elo-calc-text-primary);
    opacity: 0.3;
    transform: translateX(-1px);
}

.elo-calc-cota-legenda {
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: var(--elo-calc-accent);
}

.elo-calc-cota-excedida .elo-calc-cota-legenda {
    color: var(--elo-calc-excedente-text);
    font-weight: 600;
}

/* Dois cartões lado a lado no desktop - imposto SEMPRE em cima no
   markup (ver PHP), então empilhar em qualquer breakpoint já deixa
   imposto acima do total automaticamente (item 5c) - o breakpoint foi
   unificado com o resto do celular (639px, era 480px antes, causando
   uma faixa de tela onde só ESTE bloco ainda estava em 2 colunas
   enquanto o resto já tinha empilhado). Barra lateral fina (border-left)
   marca cada cartão na cor correspondente. */
.elo-calc-resultado-cartoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 12px;
}

@media (max-width: 639px) {
    .elo-calc-resultado-cartoes {
        grid-template-columns: 1fr;
    }
}

.elo-calc-cartao {
    border-radius: 18px;
    padding: 22px 24px;
    border-left: 4px solid transparent;
}

.elo-calc-cartao-imposto {
    background: var(--elo-calc-imposto-bg);
    border-left-color: var(--elo-calc-imposto-text);
}

.elo-calc-cartao-total {
    background: var(--elo-calc-total-bg);
    border-left-color: var(--elo-calc-accent);
}

.elo-calc-cartao-rotulo {
    font-size: var(--elo-calc-fs-cartao-rotulo);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--elo-calc-text-secondary);
    margin: 0;
    padding-bottom: 8px;
}

/* Rótulo ganha a cor do próprio cartão (antes só o número tinha cor
   semântica) - vermelho no imposto, cor de destaque no total. */
.elo-calc-cartao-imposto .elo-calc-cartao-rotulo {
    color: var(--elo-calc-imposto-text);
}

.elo-calc-cartao-total .elo-calc-cartao-rotulo {
    color: var(--elo-calc-accent);
}

/* Número dominante do cartão - token PRÓPRIO (--elo-calc-fs-cartao-numero,
   30px), independente do campo de entrada/convertido (mesmo valor por
   coincidência nesta rodada - os dois tokens continuam separados, podem
   divergir de novo no futuro). */
.elo-calc-cartao-numero {
    font-size: var(--elo-calc-fs-cartao-numero);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    padding-bottom: 16px;
    overflow-wrap: break-word;
}

.elo-calc-cartao-numero-imposto {
    color: var(--elo-calc-imposto-text);
}

.elo-calc-cartao-numero-total {
    color: var(--elo-calc-accent);
}

/* Linha de detalhe embaixo do número - pequena e discreta (opacidade
   reduzida), nunca compete com o número acima. Cor padrão neutra como
   fallback; nos dois cartões reais (imposto/total) a cor é sempre
   sobrescrita pela regra abaixo, acompanhando a cor do próprio cartão -
   antes era cinza neutro nos dois, mudança desta rodada. */
.elo-calc-cartao-detalhe {
    font-size: var(--elo-calc-fs-cartao-detalhe);
    line-height: 18px;
    color: var(--elo-calc-text-secondary);
    opacity: 0.85;
    margin: 0;
}

.elo-calc-cartao-imposto .elo-calc-cartao-detalhe {
    color: var(--elo-calc-imposto-text);
}

.elo-calc-cartao-total .elo-calc-cartao-detalhe {
    color: var(--elo-calc-accent);
}

/* Aviso de "sempre em reais" - uma linha curta e discreta, não um
   parágrafo grande competindo com os números. */
.elo-calc-aviso-moeda-linha {
    font-size: var(--elo-calc-fs-aviso-linha);
    color: var(--elo-calc-text-secondary);
    text-align: center;
    padding: 20px;
    margin: 0 0 24px;
}

/* Aviso de simulação - cartão próprio (fundo bege claro - era branco,
   mudou nesta rodada -, cantos arredondados, respiro generoso) com um
   ícone de informação alinhado à esquerda do texto, no topo da primeira
   linha (align-items: flex-start, não center - é isso que ancora o
   ícone na PRIMEIRA linha mesmo quando o texto quebra em várias). */
.elo-calc-aviso {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--elo-calc-aviso-bg);
    border-radius: 10px;
    padding: 32px;
    line-height: 23px;
    font-size: 0.72rem;
    color: var(--elo-calc-text-secondary);
    margin: 0 0 12px;
}

.elo-calc-aviso::before {
    content: "";
    flex-shrink: 0;
    /* Ícone maior, testado no DevTools (era 20x20) - a caixa não é mais
       quadrada, mas mask-size:contain preserva a proporção original do
       SVG (círculo), sem distorcer. margin-top ajusta o alinhamento
       vertical do ícone com a primeira linha de texto, igual antes, só
       que com o valor recalibrado pro tamanho novo. */
    width: 46px;
    height: 34px;
    margin-top: 10px;
    background-color: var(--elo-calc-text-secondary);
    -webkit-mask-image: var(--elo-calc-icon-info);
    mask-image: var(--elo-calc-icon-info);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

@media (max-width: 639px) {
    .elo-calc-aviso {
        padding: 18px;
    }
}

/* Tabela de referência - BLOCO SEPARADO, fundo e respiro próprios,
   visualmente destacado do resto da calculadora (margem acima ampla,
   nunca colado no bloco de cima). Sempre 100% da largura disponível
   (herda de .elo-calc, sem max-width próprio). */
.elo-calc-tabela-wrap {
    margin-top: 36px;
    background: var(--elo-calc-card);
    border-radius: 20px;
    padding: 22px 24px;
}

@media (max-width: 639px) {
    .elo-calc-tabela-wrap {
        padding: 16px;
    }
}

.elo-calc-tabela-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.elo-calc-tabela-titulo {
    font-size: var(--elo-calc-fs-tabela-titulo);
    line-height: var(--elo-calc-lh-tabela-titulo);
    font-weight: 700;
    color: var(--elo-calc-text-primary);
    margin: 20px 0 0;
    padding-bottom: 23px;
}

/* Pill discreto no canto superior direito do bloco - mostra qual cotação
   (dólar/real) está sendo usada nos cálculos, pra conferência rápida. */
.elo-calc-tabela-cotacao-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--elo-calc-bg-alt);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--elo-calc-text-secondary);
    white-space: nowrap;
}

/* Rolagem horizontal SÓ DELA MESMA em tela estreita, nunca da página
   inteira (item 5e) - com o padding/fonte das células já reduzidos
   abaixo, a intenção é a tabela caber sem precisar rolar; quando ainda
   assim não couber, o "CSS scroll shadow" (técnica clássica,
   background-attachment:local vs scroll) mostra um degradê discreto na
   borda que tem mais conteúdo, sem precisar de nenhum JS pra saber a
   posição do scroll - ele aparece/some sozinho conforme rola, dos dois
   lados (o pedido citou só a direita, mas o mesmo mecanismo dos dois
   lados não custa nada a mais e é mais correto: se um dia o usuário rolar
   pra explorar, o lado esquerdo também precisa avisar que dá pra voltar). */
.elo-calc-tabela-scroll {
    overflow-x: auto;
    background:
        linear-gradient(to right, var(--elo-calc-card) 30%, rgba(255, 255, 255, 0)) 0 0,
        linear-gradient(to left, var(--elo-calc-card) 30%, rgba(255, 255, 255, 0)) 100% 0,
        linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)) 0 0,
        linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)) 100% 0;
    background-repeat: no-repeat;
    background-color: var(--elo-calc-card);
    background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
}

.elo-calc-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    white-space: nowrap;
}

@media (max-width: 639px) {
    .elo-calc-tabela {
        font-size: 0.72rem;
    }
}

.elo-calc-tabela th,
.elo-calc-tabela td {
    padding: 10px 14px;
    text-align: right;
}

@media (max-width: 639px) {
    .elo-calc-tabela th,
    .elo-calc-tabela td {
        padding: 7px 8px;
    }
}

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

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

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

/* Coluna de dólares em negrito, na cor de destaque. */
.elo-calc-tabela-usd {
    font-weight: 700;
    color: var(--elo-calc-accent);
}

/* Coluna de imposto - vermelho quando há imposto, "Isento" discreto
   quando não há. */
.elo-calc-tabela-imposto-valor {
    color: var(--elo-calc-imposto-text);
    font-weight: 600;
}

.elo-calc-tabela-imposto-isento {
    color: var(--elo-calc-text-secondary);
    opacity: 0.65;
}

/* Linha correspondente ao valor digitado - fundo suave + barra lateral
   na cor de destaque. Barra aplicada via border-left na PRIMEIRA célula
   (não box-shadow no <tr>, que é inconsistente entre navegadores com
   border-collapse:collapse).
   ACHADO REAL (07/2026): o destaque sumia em linhas de posição ÍMPAR
   (3a, 7a, 9a, 11a) e funcionava nas pares - a lógica de marcação (JS)
   já estava correta (investigado e testado à parte, sem bug), o
   problema era puramente de CASCATA. Este arquivo não tem NENHUM
   seletor :nth-child - o padrão par/ímpar só pode vir do CSS do TEMA
   ativo do WordPress (zebrado de tabela é comum em temas de blog, ex.
   `table tr:nth-child(even) { background: ... }`), que este plugin não
   controla nem pode inspecionar daqui. Um seletor de tema assim já bate
   uma classe única (.elo-calc-tabela-linha-atual, especificidade 0-1-0)
   só por incluir elemento + pseudo-classe (0-1-1 no mínimo) - mesmo sem
   saber a regra exata do tema, qualquer variante plausível de zebrado
   specifica mais que uma classe solta. Como o cabeçalho deste arquivo
   promete "sem depender de nenhuma classe/variável do tema ativo", a
   cor de estado (atual/hover) precisa ganhar SEMPRE, não só quando o
   tema "deixar" por acaso - por isso !important aqui, uso cirúrgico,
   nunca visto antes neste arquivo, só nas declarações que comunicam
   estado (não em toda a folha). */
.elo-calc-tabela-linha-atual {
    background: var(--elo-calc-bg-alt) !important;
}

.elo-calc-tabela-linha-atual td:first-child {
    border-left: 3px solid var(--elo-calc-accent) !important;
    padding-left: 11px;
}

/* Hover sutil por linha - só em telas com hover de verdade (mouse), nunca
   em toque (o pedido é explícito: sem isso, um toque no celular acionaria
   e prenderia o "hover" na última linha tocada, sem meio de tirar). Fundo
   reaproveita --elo-calc-bg (o mesmo neutro claro da calculadora inteira)
   - propositalmente DIFERENTE de --elo-calc-bg-alt (o fundo da linha
   "atual"), pra hover comum nunca ser confundido com o destaque do valor
   digitado. Mesmo !important do bloco acima e pelo mesmo motivo - um
   zebrado de tema também poderia mascarar o hover em metade das linhas. */
@media (hover: hover) and (pointer: fine) {
    .elo-calc-tabela tbody tr {
        transition: background 0.12s ease;
    }

    .elo-calc-tabela tbody tr:hover {
        background: var(--elo-calc-bg) !important;
    }

    /* A linha "atual" nunca perde a própria identidade visual ao ser
       hoverada - especificidade maior que a regra de hover comum acima
       (três classes/pseudo-classes + dois elementos contra duas
       classes/pseudo-classes + dois elementos) garante que o fundo dela
       vence entre as duas regras DESTE plugin; o !important garante que
       vence também contra qualquer coisa vinda de fora dele. */
    .elo-calc-tabela tbody tr.elo-calc-tabela-linha-atual:hover {
        background: var(--elo-calc-bg-alt) !important;
    }
}