/* ==========================================================================
   CARDS DE COTAÇÃO — a grade no feitio de app de ações
   Prefixo: coto-
   Tokens usados: --bg --fg --fg-2 --fg-muted --rule --rule-2 --accent
                  --display --sans --ease --radius-media --radius-pill

   O ESTADO MANDA, e o estado vem do script:
     (sem atributo)          sem JavaScript. Cards datados, sem selo "ao vivo".
     data-estado="vivo"      leitura dentro da validade. SÓ AQUI o selo aparece.
     data-estado="datado"    data-validade="0" — fechamento, não tempo real.
     data-estado="vencido"   passou do prazo. Preços retirados, aviso à mostra.

   UMA SÓ FONTE DE DIREÇÃO. O [data-dir] do card resolve --coto-dir, e o
   minigráfico, a seta e o percentual leem essa variável. Não há como o traço
   subir e a seta apontar para baixo: os três saem do mesmo atributo, que o
   script escreve a partir do NÚMERO da variação.

   Nenhuma cor está escrita neste arquivo. As duas cores de direção são
   custom properties DO COMPONENTE (§3 permite), com token no fallback: quem
   quiser o verde/vermelho de mercado escreve --coto-sobe e --coto-cai no
   próprio bloco, sem tocar aqui e sem pedir um token global de estado.
   ========================================================================== */

.coto-sec{
  --coto-min:230px;        /* largura mínima do card antes de quebrar coluna */
  --coto-gap:14px;
  --coto-pad:18px;         /* respiro interno do card */
  --coto-linha-h:44px;     /* altura do minigráfico */
  --coto-preco:26px;       /* corpo do preço */
  /* Os dois leem os tokens de estado do core, que o escopo de tom da seção já
     calibrou para o fundo em que ela está. Continuam sendo parafuso: um
     projeto que não queira o par de mercado escreve outro valor aqui, sem
     tocar no core e sem que este arquivo precise saber. */
  --coto-sobe:var(--alta);
  --coto-cai:var(--baixa);
}

/* ---- cabeçalho da dobra ---- */
.coto-topo{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:20px clamp(24px,4vw,56px);
  margin-bottom:clamp(28px,4vh,44px);
}
.coto-titulo{flex:1 1 320px}

/* A linha de procedência é estrutura, não rodapé decorativo: sem provedor e
   sem instante, o preço acima não é cotação — é um número grande. */
.coto-fonte{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  font-family:var(--sans);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);
}
.coto-em::before,
.coto-atraso::before{content:"·";margin-inline-end:12px;color:var(--rule-2)}

/* ---- o selo "ao vivo" ----
   Só existe no estado vivo, e é a afirmação visual de que o número é de
   agora — o equivalente, em card, ao movimento de uma faixa. Não há como
   escrevê-lo no markup e fazê-lo ficar: quem o mostra é o seletor de estado. */
.coto-pulso{display:none;align-items:center;gap:7px;color:var(--fg-2)}
.coto-sec[data-estado="vivo"] .coto-pulso{display:inline-flex}
.coto-ponto{
  width:7px;height:7px;border-radius:var(--radius-pill);
  /* --alta e não --accent: aqui o token está fazendo o único trabalho de
     VEREDITO que ele faz nesta peça — "a leitura está boa" —, e é a convenção
     que todo indicador de "ao vivo" usa, o que poupa uma legenda. Vale
     registrar porque é a exceção: em todo o resto do componente o par é
     DIREÇÃO, não julgamento. */
  background:var(--alta);
  animation:cotoPulso 2.4s var(--ease) infinite;
}
@keyframes cotoPulso{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.35;transform:scale(.8)}
}
/* Colado à regra que desliga, como o §6.6 pede. O ponto FICA — ele diz que a
   leitura está dentro do prazo, e isso é informação, não enfeite. Some só a
   pulsação. */
@media(prefers-reduced-motion:reduce){
  .coto-ponto{animation:none}
}

/* ---- a grade ----
   auto-fit e não auto-fill: com quatro papéis numa tela larga, o auto-fill
   deixaria colunas vazias no fim da fileira e os cards ficariam estreitos
   sem motivo. */
.coto-grade{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(var(--coto-min),1fr));
  gap:var(--coto-gap);
}

.coto-card{
  /* POSICIONADO DE PROPÓSITO, e não pelo desenho: é o bloco de contenção do
     .visually-hidden que diz a direção por extenso. Sem isto o span absoluto
     sobe até a <section> para achar onde se ancorar, SAI do recorte do
     trilho de celular (overflow-x:auto não corta descendente absoluto cujo
     contêiner está fora dele) e estica a página. Medido em 390px pelo
     bin/varredura.js: documento de 937px, 547 de estouro — a página inteira
     abria afastada no celular, e nada no inspetor apontava o card. */
  position:relative;
  display:grid;gap:12px;
  padding:var(--coto-pad);
  border:1px solid var(--rule);
  border-radius:var(--radius-media);
  /* Superfície derivada de --fg, e não de uma cor: é o que faz o mesmo
     arquivo servir a .sec-deep e a .sec-paper sem uma variação de código. */
  background:color-mix(in srgb,var(--fg) 4%,transparent);
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.coto-card:hover{
  border-color:var(--rule-2);
  background:color-mix(in srgb,var(--fg) 7%,transparent);
}

/* A direção resolvida uma vez, aqui. Todo o resto do card lê --coto-dir. */
.coto-card[data-dir="sobe"]{--coto-dir:var(--coto-sobe)}
.coto-card[data-dir="cai"]{--coto-dir:var(--coto-cai)}
.coto-card[data-dir="zero"]{--coto-dir:var(--fg-muted)}

/* ---- cabeça do card ---- */
.coto-cab{display:grid;gap:3px}
.coto-simbolo{
  font-family:var(--display);font-weight:700;
  font-size:15px;letter-spacing:.04em;
  color:var(--fg);
}
/* O nome corta em uma linha: papel com razão social longa ("Companhia
   Energética de ...") empurraria o preço para baixo e desalinharia a
   fileira inteira de cards. */
.coto-nome{
  font-size:12.5px;letter-spacing:.02em;line-height:1.3;
  color:var(--fg-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---- o minigráfico ----
   preserveAspectRatio="none" no SVG faz a série esticar até a largura do
   card, seja ela qual for — é o que permite a mesma série servir a um card
   de 230px e a um de 400px. O preço disso é que a ESCALA fica anisotrópica,
   e sem vector-effect o traço engorda na horizontal e afina na vertical. */
.coto-linha{
  display:block;width:100%;height:var(--coto-linha-h);
  overflow:visible;   /* a linha encosta na borda do viewBox; sem isto, corta */
}
.coto-traco{
  fill:none;
  stroke:var(--coto-dir,var(--fg-muted));
  stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

/* A área sob a linha é o que separa "gráfico pequeno" de "card de mercado".
   Opacidade baixa e cor de direção: ela não acrescenta informação nenhuma
   que a linha já não dê — o papel dela é dar peso ao card e ancorar a curva
   no rodapé, para o traço não flutuar no vazio.

   Fica em opacity, e não numa cor mais fraca, porque a cor vem de
   --coto-dir: qualquer valor fixo aqui quebraria a promessa de o mesmo
   arquivo servir a .sec-deep e a .sec-paper. */
.coto-area{
  fill:var(--coto-dir,var(--fg-muted));
  opacity:.13;
  stroke:none;
}

/* ---- pé do card: preço e variação ---- */
.coto-pe{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:4px 10px;
}

/* tabular-nums não é estética: sem ele, a troca de um dígito na atualização
   do feed muda a largura do preço e o bloco inteiro dança a cada leitura. */
.coto-preco{
  font-family:var(--display);font-weight:700;
  font-size:var(--coto-preco);letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums;
  color:var(--fg);
}

.coto-var{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-weight:400;
  font-size:13px;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  color:var(--coto-dir,var(--fg-2));
}

/* ---- a seta ----
   Triângulo de borda, e não glifo: ▲ e ▼ têm peso e altura diferentes em
   cada família tipográfica, e num tema de fonte própria a seta de alta
   apareceria maior que a de queda. O triângulo de borda é a mesma forma em
   qualquer fonte, e herda a cor de direção sozinho. */
.coto-seta{
  width:0;height:0;
  border-inline:4.5px solid transparent;
  border-block-end:6px solid currentColor;
}
.coto-card[data-dir="cai"] .coto-seta{
  border-block-end:0;
  border-block-start:6px solid currentColor;
}
/* Estável não tem seta: um traço. Zerar as bordas é obrigatório — sem isso,
   o triângulo de alta continuaria desenhado por baixo do traço. */
.coto-card[data-dir="zero"] .coto-seta{
  border:0;
  width:9px;height:1.5px;
  background:currentColor;
}

/* ---- vencido ----
   O script troca o texto por travessão e apaga o atributo value. Isto aqui é
   só o tom do que sobra — apagar por CSS (opacity, color:transparent)
   deixaria o preço velho intacto na árvore de acessibilidade, e o leitor de
   tela seguiria anunciando a cotação que a página acabou de retirar. */
.coto-sec[data-estado="vencido"] .coto-card{
  border-style:dashed;
  background:none;
}
.coto-sec[data-estado="vencido"] .coto-preco{color:var(--fg-muted)}
.coto-sec[data-estado="vencido"] .coto-linha{opacity:.25}

/* ---- o aviso ----
   Nasce [hidden] no markup. A regra abaixo é obrigatória: esta declaração de
   display venceria o [hidden] do navegador e o aviso apareceria sempre (§6.5). */
.coto-aviso{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  margin-top:20px;
  font-size:13px;
}
.coto-aviso[hidden]{display:none}
.coto-aviso-txt{color:var(--fg-2)}
.coto-aviso-det{color:var(--fg-muted)}

/* ==========================================================================
   Abaixo de 720px a grade vira TRILHO, e não uma coluna de cards empilhados.
   É o que o app de ações e o painel do Google fazem no celular, e a razão é
   a mesma: quatro papéis empilhados ocupam a tela inteira e empurram o resto
   da página para baixo, enquanto o trilho mostra dois e sugere o terceiro.
   ========================================================================== */
@media(max-width:720px){
  .coto-sec{--coto-preco:22px;--coto-linha-h:38px}
  .coto-grade{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:min(64vw,240px);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    /* O trilho sangra até a borda da tela e devolve o respiro por padding,
       para o primeiro card nascer alinhado à coluna e o último não encostar
       no vidro. Margem negativa em vez de sair do .wrap porque a grade é
       filha do cabeçalho, que precisa continuar na coluna (§4). */
    margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
    /* Barra escondida: o card cortado na borda já diz que a fila continua. */
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .coto-grade::-webkit-scrollbar{width:0;height:0;display:none}
  .coto-card{scroll-snap-align:start}
}