/* =====================================================================
   VISUAL DO CONVERSOR DE MOEDAS
   Usa as cores do site (variáveis de _nucleo/estilo.css), então
   funciona nos modos claro e escuro. Classes começam com .cm-
   Sem animações (leve no celular).
   ===================================================================== */

/* ---------- Base ---------- */
.cm { display: grid; gap: 1rem; margin-top: .4rem; }
.cm [hidden] { display: none !important; }
.cm-cartao { padding: 1.1rem 1rem 1.2rem; min-width: 0; }
.cm-rotulo-campo { display: block; margin-bottom: .45rem; font-weight: 700; color: var(--titulo); }
.cm-dica { margin: .55rem 0 0; font-size: .84rem; color: var(--texto-2); line-height: 1.5; }
.cm-status { margin: .5rem 0 0; font-size: .84rem; color: var(--texto-2); line-height: 1.5; }
.cm-status:empty { margin: 0; }
.cm-erro { color: var(--perigo); font-weight: 600; }
.cm-sub { margin: 1.4rem 0 .5rem; font-size: 1rem; }
.cm-link { border: 0; background: none; padding: 0; font: inherit; color: var(--primaria); font-weight: 700; text-align: left; cursor: pointer; }
.cm-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.cm-sobe { color: var(--sucesso); }
.cm-desce { color: var(--perigo); }
.cm-agora { font-weight: 700; color: var(--titulo); }

/* ---------- Abas ---------- */
.cm-abas { display: flex; gap: 3px; padding: 4px; border-radius: 18px; background: var(--superficie-2); }
.cm-abas button { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .2rem; flex: 1 1 0; min-width: 0; min-height: 54px; padding: .3rem .35rem; border: 0; border-radius: 14px; background: transparent; color: var(--texto-2); font-weight: 650; font-size: .76rem; line-height: 1.15; cursor: pointer; }
.cm-abas button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-abas .ico { width: 20px; height: 20px; flex: none; }
.cm-abas [aria-selected="true"] { background: var(--superficie); color: var(--titulo); box-shadow: inset 0 0 0 1px var(--borda), var(--sombra); }
.cm-abas [aria-selected="true"] .ico { color: var(--destaque-texto); }

/* ---------- Campos ---------- */
.cm-entrada { width: 100%; min-width: 0; min-height: 52px; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cm-escolha { display: grid; gap: .35rem; margin: 0; min-width: 0; }
.cm-escolha > span { font-size: .82rem; font-weight: 700; color: var(--texto-2); }
.cm-escolha select { width: 100%; min-width: 0; min-height: 48px; }
.cm-par { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: .5rem; margin-top: .8rem; }
.cm-inverter { width: 48px; height: 48px; border: 1.5px solid var(--borda); border-radius: 50%; background: var(--superficie); color: var(--primaria); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.cm-inverter:hover { border-color: var(--primaria); }
.cm-grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: .8rem; }
.cm-iof { display: flex; align-items: center; min-height: 48px; font-size: 1.15rem; color: var(--titulo); }

/* Formas de pagar */
.cm-formas { margin: 1rem 0; padding: 0; border: 0; min-width: 0; }
.cm-formas legend { padding: 0; }
.cm-forma { display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; margin-top: .4rem; border: 1.5px solid var(--borda); border-radius: 12px; cursor: pointer; font-weight: 600; }
.cm-forma:has(input:checked) { border-color: var(--primaria); background: var(--primaria-suave); }
.cm-forma input { width: 18px; height: 18px; accent-color: var(--primaria); flex: none; }

/* ---------- Resultado ---------- */
.cm-resultado { margin-top: 1rem; padding: 1rem; border-radius: 16px; background: var(--superficie-2); border: 1.5px solid color-mix(in srgb, var(--destaque) 45%, var(--borda)); }
.cm-resultado p { margin: 0; }
.cm-r-de { font-size: .92rem; color: var(--texto-2); font-weight: 600; overflow-wrap: anywhere; }
.cm-r-valor { margin: .15rem 0 .3rem !important; font-family: var(--fonte-titulo, inherit); font-size: clamp(1.7rem, 8vw, 2.4rem); font-weight: 800; line-height: 1.15; color: var(--titulo); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cm-r-taxa, .cm-r-turismo { font-size: .86rem; color: var(--texto-2); line-height: 1.5; font-variant-numeric: tabular-nums; }
.cm-r-turismo { margin-top: .3rem !important; color: var(--texto); font-weight: 600; }
.cm-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.cm-acoes .btn { flex: 1 1 auto; }

/* Conta detalhada e resumo do gráfico */
.cm-conta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: .5rem; margin: 1rem 0 0; }
.cm-conta:empty { display: none; }
.cm-conta div { padding: .6rem .75rem; border-radius: 12px; background: var(--superficie-2); min-width: 0; }
.cm-conta dt { font-size: .76rem; font-weight: 700; color: var(--texto-2); }
.cm-conta dd { margin: .1rem 0 0; font-weight: 700; color: var(--titulo); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cm-conta .cm-total { background: var(--destaque-suave); }
.cm-conta .cm-sobe dd { color: var(--sucesso); }
.cm-conta .cm-desce dd { color: var(--perigo); }

/* ---------- Tabelas ---------- */
.cm-tabela { width: 100%; }
.cm-tabela th, .cm-tabela td { padding: .55rem .5rem; font-size: .9rem; text-align: left; font-variant-numeric: tabular-nums; }
.cm-tabela td { white-space: nowrap; }
.cm-tabela tbody th { font-weight: 600; }
.cm-tabela small { color: var(--texto-2); font-weight: 600; }
.cm-tabela .cm-escolhida { background: var(--primaria-suave); }
.cm-selo { display: inline-block; padding: .1rem .45rem; border-radius: 999px; background: var(--destaque-suave); color: var(--destaque-texto) !important; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.cm-rapida td:last-child { font-weight: 700; color: var(--titulo); }

/* ---------- Gráfico ---------- */
.cm-periodos { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 .4rem; }
.cm-periodo { flex: 1 1 0; min-width: 64px; min-height: 42px; padding: .3rem .6rem; border: 1.5px solid var(--borda); border-radius: 999px; background: var(--superficie); color: var(--texto); font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; }
.cm-periodo[aria-pressed="true"] { border-color: var(--primaria); background: var(--primaria-suave); color: var(--titulo); }
.cm-grafico { margin: .4rem 0 0; }
.cm-h-area { min-height: 200px; }
.cm-svg { display: block; width: 100%; height: 220px; touch-action: pan-y; }
.cm-svg-linha { fill: none; stroke: var(--primaria); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.cm-svg-area { fill: var(--primaria-suave); opacity: .8; }
.cm-svg-guia { stroke: var(--borda); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.cm-svg-marca { stroke: var(--texto-2); vector-effect: non-scaling-stroke; }
.cm-svg-ponto.cm-sobe { fill: var(--sucesso); }
.cm-svg-ponto.cm-desce { fill: var(--perigo); }
.cm-svg-texto { fill: var(--texto-2); font-size: 12px; font-weight: 600; }
.cm-h-ponto { margin: .3rem 0 0; font-size: .86rem; font-weight: 700; color: var(--texto); text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Links para as páginas de caso e lista de moedas ---------- */
.cm-casos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: .5rem; }
.cm-casos a { display: flex; align-items: center; gap: .5rem; min-height: 48px; padding: .55rem .8rem; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--superficie); font-weight: 700; color: var(--titulo); text-decoration: none; }
.cm-casos a:hover { border-color: var(--primaria); }
.cm-lista-moedas { columns: 2 180px; padding-left: 0; list-style: none; }
.cm-lista-moedas li { padding: .15rem 0; break-inside: avoid; }

/* ---------- Computador ---------- */
@media (min-width: 760px) {
  .cm-cartao { padding: 1.4rem 1.5rem 1.5rem; }
  .cm-abas button { flex-direction: row; gap: .45rem; font-size: .9rem; min-height: 48px; }
  .cm-acoes .btn { flex: 0 0 auto; }
}
/* Celular: "De" e "Para" um embaixo do outro (o nome da moeda aparece inteiro) */
@media (max-width: 599px) {
  .cm-col-compra { display: none; }   /* na tela pequena, a tabela mostra só venda e variação */
  .cm-par { grid-template-columns: 1fr; align-items: stretch; gap: .35rem; }
  .cm-inverter { justify-self: center; transform: rotate(90deg); width: 44px; height: 44px; }
}
@media print {
  .cm-abas, .cm-acoes, .cm-periodos { display: none; }
}