/* IGP App · Cotações do mercado (recursos/cotacoes.js).
   Cartão estreito no Início, tela cheia que nasce do cartão e folha empilhada de câmbio. Só tokens do app.css (cores, raios,
   --facil), as três fontes da marca e o vocabulário dos rótulos em maiúsculas. Cor de estado só em números, setas e
   minilinhas; alta e queda nunca dependem só da cor (seta e sinal sempre juntos). Sem backdrop-filter novo; tudo o que se
   move usa transform e opacity (o traço das minilinhas usa stroke-dashoffset, como o gráfico da carteira). */

.cot-tela, .cot-entrada { --cot-ios: cubic-bezier(.32, .72, 0, 1); }

/* ---------- 1. Cartão do Início ---------- */
/* Mesma família dos vizinhos (TOTAL SOB GESTÃO, CARTEIRA IGP): rótulo em maiúsculas com a hora à direita e, embaixo, a mini
   cotação em mono como o "número" do cartão. A minilinha do Ibovespa fica atrás, só na ponta direita, e desvanece para a
   esquerda (máscara estática), para nunca passar por baixo do texto. */
.cot-entrada {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 36px minmax(0, 1fr) 20px; align-items: center; gap: 0 12px;
  width: calc(100% - 32px); min-height: 66px; margin-inline: 16px; padding: 12px 12px 12px 14px;
  font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none;
  background: radial-gradient(70% 160% at 100% 100%, var(--marca-suave), transparent 70%), var(--superficie);
  transition: transform .18s var(--facil), background-color .2s ease-out;
}
.cot-entrada > * + * { border-top: 0; } /* .grupo separa filhos com borda; aqui não há lista */
.cot-entrada:active { transform: scale(.985); }
.cot-entrada:focus-visible { outline: 2px solid var(--marca-tinta); outline-offset: -3px; }
.cot-entrada.is-levantado { opacity: 0; transition: none; } /* a casca da tela cheia está no lugar dele */
.cot-entrada-fundo { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.cot-entrada-spark {
  position: absolute; right: 0; bottom: 0; width: 46%; height: 64%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%);
}
.cot-entrada-spark .cot-spark-linha { stroke: var(--marca); stroke-opacity: .3; stroke-width: 1.4; }
.cot-entrada-spark .cot-spark-area { fill: var(--marca); fill-opacity: .06; }
.cot-entrada-spark .cot-spark-base, .cot-entrada-spark .cot-spark-ponto { display: none; }
.cot-entrada-ic, .cot-ic {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--marca-suave); color: var(--marca-tinta);
}
.cot-entrada-ic svg, .cot-ic svg { width: 22px; height: 22px; stroke-width: 1.6; }
.cot-entrada-texto { display: grid; gap: 5px; min-width: 0; }
.cot-entrada-cabeca { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cot-entrada-rotulo { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cot-entrada-hora { flex: none; font-size: .7rem; line-height: 1.3; color: var(--tinta-3); white-space: nowrap; }
.cot-entrada-cabeca .selo { padding: 3px 6px; font-size: .52rem; }
.cot-selo-exemplo { color: var(--atencao); border-color: color-mix(in srgb, var(--atencao) 50%, transparent); }
.cot-entrada-chevron svg { width: 18px; height: 18px; }
.cot-fita { position: relative; display: block; height: 1.4em; overflow: hidden; font-size: .95rem; line-height: 1.4; }
.cot-quadro { position: absolute; inset: 0; display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.cot-mini { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.cot-mini-nome { font: 600 .88rem/1.4 var(--f-texto); color: var(--tinta-2); }
.cot-mini-preco { color: var(--tinta); }
.cot-mini-sep { color: var(--tinta-4); }
.cot-mini-var { display: inline-flex; align-items: center; gap: 3px; font-family: var(--f-mono); font-size: .82rem; font-variant-numeric: tabular-nums; }

/* seta da variação (triângulo cheio) e o "=" do estável */
.cot-seta { flex: none; width: .62em; height: .62em; }
.cot-seta-baixo { transform: rotate(180deg); }
.cot-igual { font-family: var(--f-mono); }
.estavel { color: var(--tinta-3); }

/* ---------- 2. Tela cheia ---------- */
.cot-tela {
  position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--tinta); overflow: hidden;
  --cot-veu: rgba(5, 20, 42, .5);
}
.cot-tela::backdrop { background: transparent; }
.cot-tela:focus { outline: none; }
@media (prefers-color-scheme: dark) {
  :root:not(:has(> head > meta[name="color-scheme"][content="light"])) .cot-tela { --cot-veu: rgba(0, 4, 12, .62); }
}
:root:has(> head > meta[name="color-scheme"][content="dark"]) .cot-tela { --cot-veu: rgba(0, 4, 12, .62); }
.cot-veu { position: absolute; inset: 0; background: var(--cot-veu); }
.cot-palco { position: absolute; inset: 0; transform-origin: 50% 0; }
.cot-palco.is-arrastando { overflow: hidden; border-radius: 28px; }
/* câmbio por cima: a tela recua e arredonda como uma folha empilhada do iOS */
.cot-palco.is-empilhada {
  overflow: hidden; border-radius: 22px;
  transform: translateY(calc(env(safe-area-inset-top, 0px) + 10px)) scale(.93);
  transition: transform .5s var(--cot-ios), border-radius .5s var(--cot-ios);
}
.cot-palco.is-desempilhando { overflow: hidden; transition: transform .38s var(--cot-ios), border-radius .38s var(--cot-ios); }
.cot-casca { position: absolute; inset: 0; overflow: hidden; background: var(--bg); transform-origin: 0 0; }
.cot-casca-cartao { position: absolute; inset: 0; background: var(--superficie); opacity: 0; }
/* o fantasma é uma cópia fiel do cartão (fundo, gradiente, minilinha, borda e raio): quando o cartão real volta no lugar dele,
   nenhum pixel muda. Ele só perde a posição no fluxo e o toque. */
.cot-fantasma { position: absolute; left: 0; top: 0; margin: 0; pointer-events: none; box-shadow: none; transition: none; }

.cot-rolagem {
  position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  transform-origin: 50% 0; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 36px);
}

/* topo fixo: alça, título, status, atualizar e o ✕ grande; os chips logo abaixo */
.cot-topo { position: sticky; top: 0; z-index: 2; padding-top: env(safe-area-inset-top, 0px); background: var(--bg); }
.cot-topo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linha); opacity: 0; transition: opacity .2s ease-out; }
.cot-topo.is-rolado::after { opacity: 1; }
.cot-tela.is-abrindo .cot-topo { background: transparent; } /* a casca cresce por baixo; o fundo do topo não aparece antes dela */
.cot-pega { max-width: 720px; margin: 0 auto; padding: 4px 16px 0 20px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.cot-pega:active { cursor: grabbing; }
.cot-alca { display: block; width: 38px; height: 5px; margin: 4px auto 6px; border-radius: 3px; background: var(--linha-forte); }
.cot-topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cot-topo-texto { min-width: 0; }
.cot-titulo { font: 700 1.75rem/1.1 var(--f-titulo); letter-spacing: -.02em; color: var(--tinta); outline: none; }
.cot-status { margin-top: 4px; font: 500 .78rem/1.35 var(--f-texto); color: var(--tinta-3); text-wrap: pretty; }
.cot-topo-acoes { display: flex; gap: 8px; flex: none; }
.cot-botao { width: 44px; height: 44px; }
.cot-botao svg { width: 22px; height: 22px; }
.cot-fechar { background: var(--superficie-3); color: var(--tinta); }
.cot-fechar svg { stroke-width: 2.2; }

.cot-chips { position: relative; max-width: 720px; margin: 0 auto; }
/* pista de que o trilho rola: a borda direita desvanece enquanto houver chip escondido (sem vidro, sem máscara animada) */
.cot-chips::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 64px; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, var(--bg) 72%); transition: opacity .2s ease-out; }
.cot-chips.is-mais::after { opacity: 1; }
.cot-chips-trilho { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px 12px; scrollbar-width: none; touch-action: pan-x; }
.cot-chips-trilho::-webkit-scrollbar { display: none; }
.cot-chip {
  position: relative; flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--tinta-2); font: 600 .8rem/1 var(--f-texto);
  transition: background-color .25s ease-out, color .25s ease-out, border-color .25s ease-out;
}
.cot-chip::after { content: ""; position: absolute; inset: -5px -2px; } /* alvo de 44 px de altura */
.cot-chip[aria-current="true"] { background: var(--marca-suave); border-color: color-mix(in srgb, var(--marca-tinta) 40%, transparent); color: var(--marca-tinta); }
.cot-chip:active { transform: scale(.96); }

/* seções e linhas */
.cot-secoes { max-width: 720px; margin: 0 auto; padding-top: 6px; display: grid; gap: 28px; }
.cot-exemplo { display: flex; align-items: center; gap: 8px; margin: 0 16px; padding: 10px 12px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--atencao) 55%, transparent); font-size: .8rem; line-height: 1.4; color: var(--tinta-2); }
.cot-secao-cabeca { display: grid; gap: 3px; padding: 0 20px 10px; }
.cot-secao-titulo { font: 600 1.15rem/1.25 var(--f-titulo); letter-spacing: -.01em; outline: none; }
.cot-secao-nota { font-size: .72rem; line-height: 1.4; } /* atraso e fonte: em letra pequena, sem competir com o título */
.cot-lista { margin-inline: 16px; }
.cot-linha {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 60px minmax(76px, auto); align-items: center; gap: 12px;
  width: 100%; min-height: 64px; padding: 10px 16px; margin: 0; border: 0; border-radius: 0; background: none;
  color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none;
  --cot-cor: var(--tinta-3);
}
.cot-linha:has(.cot-chevron) { grid-template-columns: 36px minmax(0, 1fr) 60px minmax(76px, auto) 14px; gap: 12px 10px; }
.cot-linha:active { background: var(--superficie-2); }
.cot-linha:focus-visible { outline-offset: -3px; }
.cot-linha[data-dir="alta"] { --cot-cor: var(--alta); }
.cot-linha[data-dir="queda"] { --cot-cor: var(--queda); }
.cot-linha[data-dir="parado"] { --cot-cor: var(--tinta-4); }
.cot-ic .cot-monograma text { font-family: var(--f-texto); } /* o monograma das ações: letras por cima da grade fraca dos h-* */
.cot-nome { display: grid; gap: 3px; min-width: 0; }
.cot-nome-t { font: 600 .92rem/1.25 var(--f-texto); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cot-simbolo { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: .72rem; line-height: 1.2; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cot-simbolo-sep { color: var(--tinta-4); }
.cot-por { overflow: hidden; text-overflow: ellipsis; } /* "por onça troy", "por barril": a medida do preço, fora da coluna do número */
.cot-externo { flex: none; width: 11px; height: 11px; color: var(--tinta-4); stroke-width: 2.2; }
.cot-parado { color: var(--tinta-3); }
.cot-parado svg { flex: none; width: 12px; height: 12px; }
.cot-chevron svg { width: 16px; height: 16px; }

.cot-spark-caixa { display: block; width: 60px; height: 26px; }
.cot-spark { display: block; width: 100%; height: 100%; overflow: visible; }
.cot-spark path, .cot-spark circle { vector-effect: non-scaling-stroke; }
.cot-spark-linha { stroke: var(--cot-cor); stroke-width: 1.6; }
.cot-spark-area { fill: var(--cot-cor); fill-opacity: .1; stroke: none; }
.cot-spark-base { stroke: var(--tinta-4); stroke-width: 1; stroke-dasharray: 2 3; opacity: .55; }
.cot-spark-ponto { fill: var(--cot-cor); stroke: none; transform-box: fill-box; transform-origin: center; }
.cot-spark-vazio { stroke: var(--linha-forte); stroke-width: 1.2; stroke-dasharray: 2 3; }

.cot-valores { position: relative; display: grid; justify-items: end; gap: 4px; margin: -5px -7px; padding: 5px 7px; border-radius: 9px; text-align: right; }
.cot-flash { position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; background: color-mix(in srgb, var(--alta) 22%, transparent); }
.cot-flash[data-dir="queda"] { background: color-mix(in srgb, var(--queda) 22%, transparent); }
.cot-preco, .cot-after-preco, .cot-cambio-valor { position: relative; display: inline-flex; align-items: baseline; gap: .22em; white-space: nowrap; }
.cot-preco-num { display: inline-block; font-size: 1.04rem; line-height: 1.15; letter-spacing: -.02em; color: var(--tinta); }
.cot-unidade { font: 500 .66rem/1 var(--f-texto); color: var(--tinta-3); }
.cot-var { position: relative; display: inline-flex; align-items: center; gap: 3px; font: 400 .78rem/1 var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cot-var.positivo, .cot-mini-var.positivo, .cot-after-var.positivo { color: var(--alta); }
.cot-var.negativo, .cot-mini-var.negativo, .cot-after-var.negativo { color: var(--queda); }
.cot-linha.is-indisponivel .cot-ic { background: var(--superficie-2); color: var(--tinta-3); }
.cot-linha.is-indisponivel .cot-nome { grid-column: span 2; }
.cot-var-parado { font: 500 .7rem/1 var(--f-texto); color: var(--tinta-3); }
.cot-linha.is-indisponivel .cot-preco-num, .cot-linha.is-indisponivel .cot-nome-t { color: var(--tinta-3); }

/* EWZ: o after-hours em destaque, dentro do mesmo grupo */
.cot-secao-ewz .cot-lista { background: radial-gradient(120% 120% at 100% 0%, var(--marca-suave), transparent 60%), var(--superficie); }
.cot-lista > .cot-after { border-top: 0; }
.cot-after {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 2px 12px; margin: 0 12px 12px; padding: 10px 12px; border-radius: 12px;
  background: var(--marca-suave); border: 1px solid color-mix(in srgb, var(--marca) 22%, transparent); font-size: .84rem;
}
.cot-after-ic { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie); color: var(--marca-tinta); }
.cot-after-ic svg { width: 16px; height: 16px; }
.cot-after-rotulo { font: 600 .66rem/1.3 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--marca-tinta); }
.cot-after-valores { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.cot-after-preco .cot-preco-num { font-size: 1.05rem; }
.cot-after-var { display: inline-flex; align-items: center; gap: 3px; font: 400 .82rem/1 var(--f-mono); }
.cot-after-hora { letter-spacing: 0; text-transform: none; color: var(--tinta-3); }
.cot-after-hora .numero { font-weight: 400; }

.cot-rodape { max-width: 720px; margin: 28px auto 0; padding: 0 20px; }
.cot-rodape .aviso { padding-top: 16px; border-top: 1px solid var(--linha); }

/* telas a partir de 720 px: a mesma margem de 24 px dos cartões vizinhos (app.css, "Telas maiores") */
@media (min-width: 720px) {
  .cot-entrada { width: calc(100% - 48px); margin-inline: 24px; }
}
/* celular estreito: minilinha e vãos menores, para o nome caber inteiro ("Dólar comercial", "Libra esterlina") */
@media (max-width: 399px) {
  .cot-linha { grid-template-columns: 36px minmax(0, 1fr) 48px minmax(72px, auto); gap: 10px; padding-inline: 14px; }
  .cot-linha:has(.cot-chevron) { grid-template-columns: 36px minmax(0, 1fr) 48px minmax(72px, auto) 12px; gap: 10px 8px; }
  .cot-spark-caixa { width: 48px; }
  .cot-nome-t { font-size: .88rem; }
}
/* 360 px (Android compacto): ícone de 32, minilinha de 40 e o preço um fio menor; nomes longos cortam com reticências */
@media (max-width: 369px) {
  .cot-linha { grid-template-columns: 32px minmax(0, 1fr) 40px minmax(68px, auto); gap: 8px; padding-inline: 12px; }
  .cot-linha:has(.cot-chevron) { grid-template-columns: 32px minmax(0, 1fr) 40px minmax(68px, auto) 12px; gap: 8px 6px; }
  .cot-ic { width: 32px; height: 32px; border-radius: 9px; }
  .cot-ic svg { width: 20px; height: 20px; }
  .cot-spark-caixa { width: 40px; }
  .cot-preco-num { font-size: .98rem; }
  .cot-titulo { font-size: 1.6rem; }
  .cot-entrada { padding-inline: 12px 10px; }
}
@media (min-width: 600px) {
  .cot-linha { grid-template-columns: 40px minmax(0, 1fr) 112px minmax(96px, auto); gap: 16px; }
  .cot-linha:has(.cot-chevron) { grid-template-columns: 40px minmax(0, 1fr) 112px minmax(96px, auto) 14px; }
  .cot-spark-caixa { width: 112px; height: 30px; }
}

/* ---------- 3. Câmbio (folha empilhada) ---------- */
.cot-cambio { max-height: calc(100dvh - 56px); }
.cot-cambio-corpo { padding-bottom: 8px; }
.cot-cambio-cotacao { display: grid; gap: 6px; }
.cot-cambio-preco { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.cot-cambio-valor .cot-preco-num { font-size: 2.2rem; line-height: 1; letter-spacing: -.03em; }
.cot-cambio-valor { gap: 6px; }
.cot-cambio-valor .cot-unidade { font-size: 1rem; }
.cot-cambio-preco .cot-var { font-size: .9rem; }
.cot-embreve {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px; border-radius: 16px;
  background: radial-gradient(120% 160% at 0% 0%, var(--marca-suave), transparent 70%), var(--superficie-2);
}
.cot-embreve-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--superficie); color: var(--marca-tinta); }
.cot-embreve-ic svg { width: 26px; height: 26px; stroke-width: 1.5; }
.cot-embreve-rotulo { color: var(--marca-tinta); }
.cot-embreve-texto p { margin-top: 3px; font: 500 .92rem/1.4 var(--f-texto); color: var(--tinta-2); text-wrap: pretty; }
.cot-rank-cabeca { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px 8px; }
.cot-rank { position: relative; list-style: none; margin: 0; padding: 0; }
.cot-rank-item {
  position: relative; display: grid; grid-template-columns: 20px 34px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 58px; padding: 8px 16px; background: var(--superficie);
}
.cot-rank-item + .cot-rank-item { border-top: 1px solid var(--linha); }
.cot-rank-brilho { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: color-mix(in srgb, var(--alta) 14%, transparent); }
.cot-rank-pos { position: relative; font-size: .9rem; color: var(--tinta-3); text-align: center; }
.cot-rank-item:first-child .cot-rank-pos { color: var(--marca-tinta); }
.cot-rank-logo { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie-2); font: 700 .9rem/1 var(--f-titulo); color: var(--tinta-2); }
.cot-rank-texto { position: relative; display: grid; gap: 6px; min-width: 0; }
.cot-rank-nome { font: 600 .92rem/1.25 var(--f-texto); color: var(--tinta); }
.cot-rank-detalhe { font-size: .74rem; }
.cot-rank-valor { position: relative; display: grid; justify-items: end; gap: 4px; }
.cot-rank-valor .numero { font-size: 1rem; }
.cot-rank-unidade { font-size: .68rem; }
.cot-rank.is-esqueleto .cot-rank-logo { background: var(--superficie-3); }
.cot-rank.is-esqueleto .esqueleto { height: 10px; }
.cot-rank.is-esqueleto .cot-rank-esq-fino { height: 8px; opacity: .7; }
.cot-rank.is-esqueleto .cot-rank-esq-valor { width: 64px; height: 12px; }
.cot-rank-nota { padding: 10px 16px 12px; }
.cot-botao-link {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 14px;
  border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--marca-tinta); font: 600 .92rem/1.2 var(--f-texto); text-decoration: none;
}
.cot-botao-link svg { width: 16px; height: 16px; flex: none; }
.cot-botao-link:active { background: var(--superficie-2); }

@media (prefers-reduced-motion: reduce) {
  .cot-entrada, .cot-chip, .cot-topo::after, .cot-chips::after { transition: none; }
  .cot-entrada:active, .cot-chip:active { transform: none; }
  .cot-palco.is-empilhada, .cot-palco.is-desempilhando { transition: none; }
}