/* Página /cotacoes. Padrão do site: topo .pg-hero, cartões de raio 14, borda e sombra leves. */
.page-cotacoes { background: #f6f7f9; }
.cot-corpo { margin-top: -44px; padding-bottom: 48px; position: relative; }
.cot-corpo .container { display: grid; gap: 16px; min-width: 0; }
.cot-corpo .container > * { min-width: 0; }

.cot-painel, .cot-conversor, .cot-vazio { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); padding: 22px; text-align: left; }

/* Cabeçalho do gráfico */
.cot-painel-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cot-painel-id { display: flex; align-items: center; gap: 14px; }
.cot-glifo { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; border-radius: 12px; background: #e0e7ff; color: #3730a3; font-weight: 800; font-size: 1.375rem; }
.cot-glifo-usd { background: #d1fae5; color: #065f46; }
.cot-glifo-eur { background: #dbeafe; color: #1e40af; }
.cot-glifo-gbp { background: #ede9fe; color: #5b21b6; }
.cot-glifo-ars, .cot-glifo-cad { background: #e0f2fe; color: #075985; }
.cot-glifo-aud { background: #ccfbf1; color: #115e59; }
.cot-glifo-jpy { background: #fee2e2; color: #991b1b; }
.cot-glifo-chf { background: #fce7f3; color: #9d174d; }
.cot-glifo-cny { background: #ffedd5; color: #9a3412; }
.cot-glifo-btc { background: #fef3c7; color: #92400e; }
.cot-glifo-eth { background: #e0e7ff; color: #3730a3; }
.cot-painel .cot-painel-nome { margin: 0; padding: 0; font-size: 1.375rem; font-weight: 800; line-height: 1.2; color: #111827; text-align: left; }
.cot-painel-sub { margin: 2px 0 0; font-size: .875rem; color: #525c66; }
.cot-painel-valor { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cot-painel-valor strong { font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; color: #111827; line-height: 1; }

.cot-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; font-size: .8125rem; font-weight: 800; background: #f1f5f9; color: #374151; white-space: nowrap; }
.cot-pill .ic { width: 16px; height: 16px; }
.cot-pill.is-alta { background: #d1fae5; color: #065f46; }
.cot-pill.is-baixa { background: #fee2e2; color: #991b1b; }

.cot-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 18px 0 16px; }
.cot-stats > div { padding: 10px 12px; border-radius: 12px; background: #f8fafc; border: 1px solid #eef0f3; }
.cot-stats dt { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #525c66; }
.cot-stats dd { margin: 2px 0 0; font-size: 1.0625rem; font-weight: 800; color: #111827; }

.cot-periodos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px; scrollbar-width: thin; }
.cot-per { flex: none; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #e5e7eb; background: #fff; color: #374151; font-weight: 700; font-size: .875rem; cursor: pointer; }
.cot-per:hover { border-color: var(--primary, #1d4ed8); }
.cot-per.is-ativa { background: var(--primary, #1d4ed8); border-color: var(--primary, #1d4ed8); color: #fff; }
.cot-per:focus-visible, .cot-card:focus-visible, .cot-troca:focus-visible, .cot-btn:focus-visible { outline: 3px solid var(--primary, #1d4ed8); outline-offset: 2px; }

/* Gráfico */
.cot-grafico { position: relative; min-height: 240px; }
.cot-grafico.is-carregando { opacity: .5; }
.cot-grafico-vazio { margin: 0; padding: 70px 0; text-align: center; color: #525c66; }
.cot-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cot-grade { stroke: #e5e7eb; stroke-width: 1; stroke-dasharray: 3 4; }
.cot-eixo { fill: #525c66; font-size: 11px; font-weight: 600; }
.cot-linha { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke: #047857; }
.cot-svg.is-baixa .cot-linha { stroke: #b42318; }
.cot-grad-a { stop-color: #047857; stop-opacity: .22; }
.cot-grad-b { stop-color: #047857; stop-opacity: 0; }
.cot-svg.is-baixa .cot-grad-a, .cot-svg.is-baixa .cot-grad-b { stop-color: #b42318; }
.cot-guia { stroke: #94a3b8; stroke-width: 1; stroke-dasharray: 4 4; }
.cot-ponto { fill: #fff; stroke: #047857; stroke-width: 3; }
.cot-svg.is-baixa .cot-ponto { stroke: #b42318; }
.cot-dica { position: absolute; pointer-events: none; display: flex; flex-direction: column; padding: 8px 12px; border-radius: 10px; background: #111827; color: #fff; font-size: .8125rem; box-shadow: 0 6px 18px rgba(15, 23, 42, .25); white-space: nowrap; z-index: 2; }
.cot-dica[hidden] { display: none; }
.cot-dica strong { font-size: 1rem; }
.cot-dica span { color: #cbd5e1; }
.cot-nota { margin: 10px 0 0; font-size: .875rem; color: #525c66; }

/* Conversor */
.cot-conv-titulo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cot-icone { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(var(--primary-rgb, 29, 78, 216), .1); color: var(--primary, #1d4ed8); }
.cot-icone .ic { width: 20px; height: 20px; }
.cot-conversor .cot-conv-titulo h2 { margin: 0; padding: 0; font-size: 1.125rem; font-weight: 800; color: #111827; text-align: left; }
.cot-conv-campos { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; align-items: end; }
.cot-campo { display: flex; flex-direction: column; gap: 4px; font-size: .8125rem; font-weight: 700; color: #525c66; }
.cot-campo input, .cot-campo select { min-height: 48px; padding: 0 12px; border: 1.5px solid #d1d5db; border-radius: 12px; font-size: 1rem; font-weight: 700; color: #111827; background: #fff; width: 100%; }
.cot-campo input:focus, .cot-campo select:focus { outline: 3px solid rgba(var(--primary-rgb, 29, 78, 216), .35); border-color: var(--primary, #1d4ed8); }
.cot-troca { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; border: 1.5px solid #e5e7eb; background: #fff; color: var(--primary, #1d4ed8); cursor: pointer; }
.cot-troca .ic { width: 20px; height: 20px; }
.cot-conv-res { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 12px; background: #f8fafc; border: 1px solid #eef0f3; font-size: 1.125rem; font-weight: 800; color: #111827; overflow-wrap: anywhere; }

/* Cartões */
.cot-corpo .cot-grupo { margin: 8px 0 0; padding: 0; font-size: 1.125rem; font-weight: 800; color: #111827; text-align: left; }
.cot-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cot-card { display: flex; flex-direction: column; gap: 8px; width: 100%; height: 100%; padding: 14px; text-align: left; border-radius: 14px; border: 1.5px solid #e5e7eb; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.cot-card:hover { border-color: color-mix(in srgb, var(--primary, #1d4ed8) 45%, #fff); box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
.cot-card.is-ativa { border-color: var(--primary, #1d4ed8); background: color-mix(in srgb, var(--primary, #1d4ed8) 5%, #fff); }
.cot-card-topo { display: flex; align-items: center; gap: 10px; }
.cot-card .cot-glifo { width: 40px; height: 40px; font-size: 1.125rem; }
.cot-card-nome { font-size: .9375rem; font-weight: 700; color: #111827; line-height: 1.2; }
.cot-card-nome small { display: block; font-size: .75rem; font-weight: 700; color: #525c66; }
.cot-card-valor { font-size: 1.25rem; font-weight: 800; color: #111827; }
.cot-card .cot-pill { align-self: flex-start; }
.cot-spark { width: 100%; height: 36px; margin-top: auto; }
.cot-spark-linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cot-spark.is-alta .cot-spark-linha { stroke: #047857; }
.cot-spark.is-baixa .cot-spark-linha { stroke: #b42318; }
.cot-spark-area { stroke: none; }
.cot-spark.is-alta .cot-spark-area { fill: rgba(4, 120, 87, .1); }
.cot-spark.is-baixa .cot-spark-area { fill: rgba(180, 35, 24, .1); }
.cot-fonte { margin: 4px 0 0; font-size: .8125rem; color: #525c66; }

.cot-vazio { text-align: center; padding: 48px 20px; }
.cot-vazio .ic { width: 40px; height: 40px; color: #525c66; }
.cot-vazio h2 { margin: 12px 0 6px; font-size: 1.25rem; font-weight: 800; text-align: center; }
.cot-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 12px; background: var(--primary, #1d4ed8); color: #fff; font-weight: 800; text-decoration: none; }

@media (max-width: 1023px) {
    .cot-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cot-conv-campos { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .cot-conv-res { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
    .cot-painel, .cot-conversor { padding: 16px; }
    .cot-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cot-stats { grid-template-columns: 1fr; gap: 8px; }
    .cot-stats > div { display: flex; align-items: center; justify-content: space-between; }
    .cot-stats dd { margin: 0; }
    .cot-conv-campos { grid-template-columns: 1fr; }
    .cot-troca { justify-self: center; transform: rotate(90deg); }
    .cot-card-valor { font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) { .cot-card { transition: none; } }
.cot-eixo { paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }

/* Abas do menu "Cotações" dentro do topo */
.cot-abas { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.cot-aba { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, .45); color: #fff; font-weight: 700; font-size: .9375rem; text-decoration: none; background: rgba(255, 255, 255, .08); }
.cot-aba .ic { width: 18px; height: 18px; }
.cot-aba:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.cot-aba.is-ativa { background: #fff; color: var(--primary, #1d4ed8); border-color: #fff; }
.cot-aba:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 599px) { .cot-abas { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -12px; padding: 0 12px 4px; scrollbar-width: none; } .cot-aba { flex: none; } }

.cot-stats > div[hidden] { display: none; }
.cot-aviso { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: 12px; background: #fffbeb; border: 1px solid #fde68a; color: #78350f; font-size: .875rem; line-height: 1.5; text-align: left; }
.cot-aviso .ic { width: 20px; height: 20px; flex: none; margin-top: 2px; }

/* Ícones novos (ações, agro, metais, cripto) */
.cot-glifo .ic { width: 22px; height: 22px; }
.cot-glifo-ibov { background: #e0e7ff; color: #3730a3; }
.cot-glifo-petr { background: #dcfce7; color: #166534; font-size: 1rem; }
.cot-glifo-vale { background: #cffafe; color: #155e75; font-size: 1rem; }
.cot-glifo-banco { background: #ffedd5; color: #9a3412; font-size: 1rem; }
.cot-glifo-bbas { background: #fef9c3; color: #854d0e; font-size: 1rem; }
.cot-glifo-abev { background: #fee2e2; color: #991b1b; font-size: 1rem; }
.cot-glifo-wege { background: #dbeafe; color: #1e40af; font-size: 1rem; }
.cot-glifo-b3 { background: #e0e7ff; color: #3730a3; font-size: 1rem; }
.cot-glifo-suzb { background: #d1fae5; color: #065f46; font-size: 1rem; }
.cot-glifo-sol { background: #ede9fe; color: #5b21b6; }
.cot-glifo-xrp { background: #e0f2fe; color: #075985; }
.cot-glifo-xau { background: #fef3c7; color: #92400e; font-size: 1rem; }
.cot-glifo-xag { background: #e5e7eb; color: #374151; font-size: 1rem; }
.cot-glifo-soja { background: #ecfccb; color: #3f6212; }
.cot-glifo-milho { background: #fef9c3; color: #854d0e; }
.cot-glifo-trigo { background: #fef3c7; color: #92400e; }
.cot-glifo-cafe { background: #fde8d7; color: #7c2d12; }
.cot-glifo-acucar { background: #fce7f3; color: #9d174d; }
.cot-glifo-algodao { background: #e0f2fe; color: #075985; }

/* Loterias */
.lot-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lot-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px; border-radius: 14px; background: #fff; border: 1px solid color-mix(in srgb, var(--lot-cor, #209869) 30%, #e5e7eb); box-shadow: 0 1px 3px rgba(15, 23, 42, .06); text-align: left; }
.lot-topo { display: flex; align-items: center; gap: 12px; }
.lot-topo > div { min-width: 0; }
.lot-logo { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex: none; border-radius: 14px; background: var(--lot-cor, #209869); color: #fff; }
.lot-logo .ic { width: 28px; height: 28px; }
.lot-card .lot-nome { margin: 0; padding: 0; font-size: 1.25rem; font-weight: 800; color: #111827; text-align: left; line-height: 1.2; }
.lot-conc { margin: 2px 0 0; font-size: .875rem; color: #525c66; }
.lot-selo { margin: 0 0 0 auto; flex: none; }
.lot-bolas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lot-bola { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 6px; border-radius: 50%; border: 2px solid var(--lot-cor, #209869); color: var(--lot-cor, #209869); background: color-mix(in srgb, var(--lot-cor, #209869) 6%, #fff); font-weight: 800; font-size: .9375rem; }
.lot-rot { display: block; margin: 0; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #525c66; }
.lot-rodape { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 24px; margin-top: auto; padding-top: 14px; border-top: 1px solid #eef0f3; }
.lot-premio { display: block; font-size: 1.375rem; font-weight: 800; color: var(--lot-cor, #209869); }
.lot-prox strong { font-size: 1.0625rem; color: #111827; }
.lot-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: auto; font-weight: 800; font-size: .9375rem; color: var(--primary, #1d4ed8); text-decoration: none; }
.lot-link .ic { width: 16px; height: 16px; }
.lot-link:hover { text-decoration: underline; }
.lot-link:focus-visible { outline: 3px solid var(--primary, #1d4ed8); outline-offset: 2px; }
@media (max-width: 799px) { .lot-grade { grid-template-columns: 1fr; } }
@media (max-width: 479px) { .lot-card { padding: 16px; } .lot-bola { min-width: 40px; height: 40px; } .lot-link { margin-left: 0; } }
.fin-selo { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: .8125rem; font-weight: 800; }
.fin-selo.is-acumulou { background: #fef3c7; color: #92400e; }
.fin-selo.is-ganhou { background: #d1fae5; color: #065f46; }
.cot-glifo-rent { background: #dcfce7; color: #166534; font-size: 1rem; }



/* Bandeiras, moedas digitais e logos de empresas */
.cot-glifo-img { position: relative; overflow: hidden; }
.cot-glifo-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: #fff; }
.cot-glifo-img:not(.cot-glifo-logo) { background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08); }
.cot-glifo-logo > img { object-fit: contain; padding: 7px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08); border-radius: 12px; }

/* Logotipo dos jogos da Caixa (trevo + nome na cor oficial) ou arquivo oficial em assets/images/loterias */
.fin-logo-jogo { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; border-radius: 12px; background: var(--lot-cor, #209869); color: #fff; line-height: 1; vertical-align: middle; }
.fin-logo-jogo b { font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; text-transform: lowercase; white-space: nowrap; }
.fin-logo-trevo { flex: none; }
.fin-logo-jogo--img { padding: 4px 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .1); }
.fin-logo-jogo--img img { display: block; height: 32px; width: auto; max-width: 160px; object-fit: contain; }
.lot-card .lot-nome .fin-logo-jogo { min-height: 44px; }


/* Logotipo no estilo do portal Loterias CAIXA: trevo de corações + nome em itálico caixa-alta, na cor do jogo */
.fin-logo-jogo { background: transparent; color: var(--lot-cor, #209869); padding: 0; min-height: 0; gap: 10px; border-radius: 0; }
.fin-logo-jogo b { font-style: italic; text-transform: uppercase; font-size: 1.1875rem; font-weight: 800; letter-spacing: -.01em; }
.fin-logo-trevo { width: 34px; height: 34px; }
.fin-aba-logo { width: 20px; height: 20px; color: var(--fin-cor, #209869); }
.fin-logo-jogo--img { background: #fff; padding: 4px 10px; border-radius: 10px; }
.lot-card .lot-nome .fin-logo-jogo { min-height: 0; }