/* QuantoVale — carta.css: estilos da tela "Carta" (spec 0001 §4.3; layout "D", set/2026).
 * Faixa de cartas da coleção (ou da vitrine, numerada) em cima; embaixo, ficha (foto, nome, ações, links) | gráfico. O preço de hoje
 * aparece só na ponta das linhas do gráfico (nada de número repetido na tela).
 * Todas as classes desta tela usam o prefixo "ct-" (componentes comuns vêm de base.css).
 * Quebras: 1150 (compra em 3 colunas), 1099 (ficha mais estreita), 899 (ficha em cima do gráfico), 639 (celular). */

/* ------------------------------------------------------------------ migalha */
.ct-crumb { min-width: 0; }
.ct-crumb-atual { color: var(--tinta); min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }

/* ------------------------------------------------------------------ faixa de cartas da coleção */
.ct-faixa { background: var(--papel); border: 1px solid var(--fio); border-radius: 6px; padding: 10px 12px 12px; min-width: 0; }
.ct-faixa-cab { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 9px; font-size: 12.5px; color: var(--cinza); }
.ct-faixa-nome { color: var(--tinta); font-size: 13px; }
.ct-faixa-setas { margin-left: auto; display: flex; gap: 4px; }
/* vitrine: valor do top e variação de 7 dias (os números da galeria) e cartas numeradas */
.ct-faixa-v { color: var(--tinta); font-weight: 600; }
.ct-faixa-var { font-weight: 700; white-space: nowrap; }
.ct-faixa-var i { font-style: normal; font-weight: 500; color: var(--cinza); }
.ct-faixa-var .ico { width: 13px; height: 13px; stroke-width: 2.2; vertical-align: -2px; margin-right: 2px; }
.ct-fm-pos { font-style: normal; font-weight: 700; color: var(--tinta2); margin-right: 3px; }
.ct-seta { width: 30px; height: 30px; padding: 0; }
.ct-seta .gira { transform: scaleX(-1); }
.ct-faixa-corpo { position: relative; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; padding: 3px 3px 2px; }
.ct-faixa-corpo::-webkit-scrollbar { display: none; }
.ct-fm { flex: none; width: 64px; display: grid; gap: 5px; justify-items: center; scroll-snap-align: start; color: var(--cinza); text-decoration: none; font-size: 11px; line-height: 1.2; position: relative; }
.ct-fm .ct-fm-th { width: 64px; height: 89px; object-fit: contain; border-radius: 4px; background: var(--papel2); }
.ct-fm .ct-fm-th.ph { display: grid; place-items: center; overflow: hidden; font-size: 9px; }
.ct-fm-nome { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-fm:hover .ct-fm-nome { color: var(--tinta); }
.ct-fm[aria-current="page"] .ct-fm-th { outline: 2px solid var(--cobalto); outline-offset: 2px; }
.ct-fm[aria-current="page"] .ct-fm-nome { color: var(--tinta); font-weight: 700; }
.ct-fm:focus-visible { outline: none; }
.ct-fm:focus-visible .ct-fm-th { outline: 2px solid var(--cobalto); outline-offset: 2px; }
.ct-fm-alerta::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 0 2px var(--papel); }
.ct-fm-esq { height: 107px; }
.ct-fm-esq .esq { width: 64px; height: 89px; border-radius: 4px; }
.ct-lista-vazio { padding: 6px 2px; font-size: 13px; color: var(--cinza); }

/* ------------------------------------------------------------------ ficha | gráfico */
.ct-det { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 18px; }
.ct-faixa-slot:empty + .ct-det { margin-top: 4px; }
.ct-principal { min-width: 0; }
.ct-ficha { min-width: 0; display: grid; gap: 14px; align-content: start; }
.ct-arte { min-width: 0; }
.ct-arte .ct-img { display: block; width: 100%; height: auto; aspect-ratio: 63 / 88; object-fit: contain; border-radius: 8px; background: var(--papel2); }
.ct-arte .ct-img.ph { display: grid; font-size: 13px; border-radius: 8px; }
.ct-arte-esq { display: block; width: 100%; aspect-ratio: 63 / 88; border-radius: 8px; background: var(--fio2); }
.ct-tit { min-width: 0; }
.ct-tit h1 { font-size: 28px; line-height: 1.08; margin-top: 3px; overflow-wrap: anywhere; }
.ct-estado { margin-top: 6px; }
.ct-total { margin-top: 6px; font-size: 13.5px; color: var(--tinta2); }
.ct-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ct-acoes .ct-cta-topo { flex: 1 1 100%; }
.ct-acoes .bt.sec { flex: 1 1 0; }
.ct-alertas { display: grid; gap: 8px; }
.ct-links { display: grid; gap: 7px; padding-top: 12px; border-top: 1px solid var(--fio); font-size: 12.5px; color: var(--tinta2); }
.ct-links > div { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.ct-links > div > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.ct-links .ct-ext, .ct-links .mut { margin-left: auto; }
.ct-ext { font-size: 12.5px; color: var(--cobalto); font-weight: 600; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.ct-ext:hover { text-decoration: underline; text-underline-offset: 2px; color: var(--cobalto-h); }

/* editor manual em linha (abre pelo "Mais") */
.ct-manual { padding: 12px 14px; border: 1px solid var(--fio); border-radius: 5px; background: var(--papel2); display: grid; gap: 10px; }
.ct-manual .campo input { background: var(--branco); }
.ct-manual-msg { font-size: 12.5px; color: var(--queda); min-height: 0; }
.ct-manual-msg:empty { display: none; }
.ct-manual-pe { display: flex; gap: 6px 8px; align-items: center; flex-wrap: wrap; }
.ct-manual-dica { font-size: 12px; color: var(--cinza); flex-basis: 100%; }

/* ------------------------------------------------------------------ gráfico */
.ct-sec-tit { font-size: 15px; margin: 0 0 8px; }
.ct-graf-sec { min-width: 0; }
.ct-graf-cab { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.ct-graf-cab .ct-sec-tit { margin: 0 4px 0 0; font-size: 16px; }
.ct-per-c { display: none; }
/* linha-resumo: variação do período · diferença MyP × Liga (os preços de hoje estão na ponta das linhas) */
.ct-graf-res { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 2px 0 10px; font-size: 13.5px; }
.ct-graf-res:empty { display: none; }
.ct-res-var { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ct-res-var b { font-weight: 700; }
.ct-res-var span { color: var(--cinza); }
.ct-res-var .ico { width: 14px; height: 14px; stroke-width: 2.2; }
.ct-res-dif { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta2); }
.ct-graf { width: 100%; min-width: 0; min-height: 120px; }
.ct-graf-notas .nota { margin-top: 4px; }
.ct-graf-vazio { font-size: 13px; color: var(--cinza); padding: 14px 0; border-top: 1px solid var(--fio2); }

/* ------------------------------------------------------------------ compra */
.ct-compra-sec { margin-top: 26px; }
.ct-compra { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio); }
.ct-compra > div { min-width: 0; padding: 12px 12px 12px 0; }
.ct-compra > div + div { padding-left: 12px; border-left: 1px solid var(--fio2); }
.ct-compra dt { font-size: 12px; color: var(--cinza); }
.ct-compra dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; font-variant-numeric: lining-nums proportional-nums; overflow-wrap: anywhere; }
.ct-compra dd small { display: block; font-size: 12px; font-weight: 500; color: var(--cinza); }
.ct-compra dd small.up { color: var(--alta); }
.ct-compra dd small.dn { color: var(--queda); }
.ct-monitor { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; margin-top: 26px; padding: 12px 0; border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio); }
.ct-monitor-txt { flex: 1 1 220px; min-width: 0; }
.ct-monitor-txt b { display: block; }
.ct-monitor-txt span { font-size: 13px; color: var(--cinza); }
.ct-nota-vit { margin-top: 22px; }

/* ------------------------------------------------------------------ carregando / vazio */
.ct-esq-30 { width: 30%; }
.ct-esq-60 { width: 60%; }
.ct-esq-80 { width: 80%; }
.ct-esq-graf { display: block; height: 320px; border-top: 1px solid var(--fio2); border-bottom: 1px solid var(--fio2); }
.ct-vazio .bt { margin-top: 12px; }

/* CTA fixo do celular (fica escondido no desktop) */
.ct-cta-barra { display: none; }

/* ------------------------------------------------------------------ responsivo */
@media (max-width: 1150px) {
  .ct-compra { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ct-compra > div:nth-child(4) { border-left: 0; padding-left: 0; }
  .ct-compra > div:nth-child(-n+3) { border-bottom: 1px solid var(--fio2); }
}
@media (max-width: 1099px) {
  .ct-det { grid-template-columns: 250px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 899px) {
  /* ficha em cima do gráfico: foto pequena à esquerda, dados à direita */
  .ct-det { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ct-ficha { grid-template-columns: 150px minmax(0, 1fr); column-gap: 18px; row-gap: 12px; }
  .ct-ficha > .ct-arte { grid-row: 1 / span 6; }
  .ct-ficha > :not(.ct-arte) { grid-column: 2; }
}
@media (max-width: 639px) {
  .ct-faixa { padding: 8px 10px 10px; }
  .ct-faixa-setas { display: none; }
  .ct-faixa-corpo { gap: 8px; }
  .ct-fm { width: 52px; }
  .ct-fm .ct-fm-th, .ct-fm-esq .esq { width: 52px; height: 73px; }
  .ct-fm-nome { max-width: 52px; }
  .ct-ficha { grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; }
  .ct-ficha > .ct-arte { grid-row: 1 / span 2; }
  .ct-ficha > .ct-acoes, .ct-ficha > .ct-manual, .ct-ficha > .ct-links, .ct-ficha > .ct-alertas { grid-column: 1 / -1; }
  .ct-tit h1 { font-size: 23px; }
  .ct-graf-cab .seg { display: flex; width: 100%; }
  .ct-graf-cab .seg button { flex: 1; }
  .ct-per-l { display: none; }
  .ct-per-c { display: inline; }
  .ct-compra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-compra > div, .ct-compra > div + div, .ct-compra > div:nth-child(4) { border-left: 0; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--fio2); }
  .ct-compra > div:nth-last-child(-n+2) { border-bottom: 0; }
  .ct-cta-topo { display: none; }
  .ct-com-cta .ct-pag { padding-bottom: 96px; }
  .ct-cta-barra {
    display: block; position: fixed; left: 0; right: 0; z-index: 35;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    background: var(--papel); border-top: 1px solid var(--fio); padding: 8px 12px;
  }
}