/* QuantoVale — colecoes.css: estilos da tela "Coleções" (spec 0001 §4.2).
 * Todas as classes desta tela usam o prefixo "cl-" (componentes comuns vêm de base.css).
 * Quebras: 1080 (some o spark), 900 (trilho vira faixa de chips), 639 (celular). */

/* ------------------------------------------------------------------ grade: trilho | painel */
.cl-area { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; }
.cl-faixa { display: none; }

.cl-trilho {
  position: sticky; top: calc(var(--topo-h) + 10px);
  max-height: calc(100vh - var(--topo-h) - 20px); overflow-y: auto;
  display: grid; gap: 12px; align-content: start; padding: 2px; min-width: 0;
  scrollbar-width: thin;
}
.cl-novo { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border-radius: 5px; font-size: 13px; font-weight: 600; color: var(--cobalto); }
.cl-novo:hover:not(:disabled) { background: var(--papel); }
.cl-novo:disabled { color: var(--cinza); }
.cl-motivo { font-size: 12px; color: var(--cinza); }
.cl-trilho > .cl-motivo { padding: 0 8px; margin-top: -10px; }
.cl-grp { display: grid; gap: 2px; min-width: 0; }
.cl-grp-t { font-family: var(--f-t); font-size: 12.5px; font-weight: 600; color: var(--cinza); letter-spacing: 0; padding: 0 8px 4px; }
.cl-ci { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; padding: 7px 8px; border: 1px solid transparent; border-radius: 5px; color: var(--tinta); text-decoration: none; min-width: 0; }
.cl-ci:hover { background: var(--papel); }
.cl-ci[aria-current="page"] { background: var(--papel); border-color: var(--fio); }
.cl-trilho .cl-ci:focus-visible, .cl-trilho .cl-novo:focus-visible { outline-offset: -2px; }   /* o trilho rola: anel por dentro */
.cl-ci-n { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-ci-v { font-size: 12.5px; align-self: center; white-space: nowrap; color: var(--tinta2); }
.cl-ci-m { grid-column: 1 / -1; font-size: 12px; color: var(--cinza); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* faixa do celular/tablet */
.cl-faixa .cl-chips { padding: 3px 2px; }
.cl-faixa a.chip { text-decoration: none; max-width: 260px; }
.cl-faixa a.chip:not([aria-current="true"]) { color: var(--tinta); }
.cl-faixa a.chip:not([aria-current="true"]):hover { border-color: var(--cinza); }
.cl-faixa .chip { overflow: hidden; text-overflow: ellipsis; }
.cl-faixa .chip.novo:disabled { color: var(--cinza); }
.cl-pfx { color: var(--cinza); font-weight: 500; }
.chip[aria-current="true"] .cl-pfx { color: var(--fio); }
.cl-plano-solo { margin-top: 14px; max-width: 320px; }

/* ------------------------------------------------------------------ cabeçalho da coleção */
.cl-cab { display: flex; gap: 12px 16px; align-items: flex-start; flex-wrap: wrap; padding: 18px 20px 14px; }
.cl-tit { flex: 1 1 280px; min-width: 0; }
.cl-nome { font-size: 24px; line-height: 1.1; overflow-wrap: anywhere; }
.cl-acoes { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-left: auto; }
.cl-acoes .cl-motivo { flex-basis: 100%; text-align: right; }
.cl-ren { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cl-ren .inp { flex: 1 1 220px; max-width: 440px; height: 34px; font-family: var(--f-d); font-size: 18px; font-weight: 700; }

/* ------------------------------------------------------------------ ferramentas */
.cl-ferr { display: flex; gap: 10px 12px; align-items: center; flex-wrap: wrap; padding: 12px 20px; }
.cl-ferr .cl-ord { margin-left: auto; }

/* ------------------------------------------------------------------ lista */
.cl-lista { width: 100%; container: lista / inline-size; }
.cl-lh, .cl-linha { grid-template-columns: 44px minmax(0, 1fr) auto 112px 150px; gap: 14px; }
.cl-sem-res .cl-lh, .cl-sem-res .cl-linha { grid-template-columns: 44px minmax(0, 1fr) auto 120px; }
.cl-lh { display: grid; align-items: center; padding: 6px 20px; font-size: 12px; font-weight: 600; color: var(--cinza); border-top: 1px solid var(--fio2); }
.cl-lh .r { text-align: right; }
.cl-c-th { display: block; width: 44px; height: 61px; }
.cl-c-nm { display: grid; min-width: 0; }
.cl-c-nm .sub .flag { margin-left: 4px; }
/* variação por período (24h, 7d, 14d, 30d, 90d, Tudo): bloco de largura fixa por coluna, igual no cabeçalho e nas
   linhas. Na lista estreita saem 14d e 90d, depois 24h e Tudo, depois 30d (com Resultado precisa de mais espaço). */
.cl-vs { display: flex; gap: 6px; }
.cl-v { width: 56px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.cl-lh .cl-v { font-size: 12px; }
@container lista (max-width: 911px) { .cl-lista:not(.cl-sem-res) :is(.cl-v-14d, .cl-v-90d) { display: none; } }
@container lista (max-width: 787px) { .cl-lista:not(.cl-sem-res) :is(.cl-v-24h, .cl-v-tudo) { display: none; } }
@container lista (max-width: 663px) { .cl-lista:not(.cl-sem-res) .cl-v-30d { display: none; } }
@container lista (max-width: 755px) { .cl-sem-res :is(.cl-v-14d, .cl-v-90d) { display: none; } }
@container lista (max-width: 631px) { .cl-sem-res :is(.cl-v-24h, .cl-v-tudo) { display: none; } }
@container lista (max-width: 507px) { .cl-sem-res .cl-v-30d { display: none; } }
.cl-c-mer, .cl-c-res { min-width: 0; }
.cl-c-mer b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; }
.cl-c-res b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; }
.cl-linha small { display: block; font-size: 11.5px; font-weight: 400; color: var(--cinza); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-c-res small { font-weight: 500; }
.cl-mon { font-size: 12.5px; font-weight: 500; }
.cl-ord-curto { display: none; }
.cl-lista .vazio .cl-motivo-e { margin-top: 8px; }

/* esqueleto */
.cl-esq { display: grid; grid-template-columns: 44px minmax(0, 1fr) 90px; gap: 12px; align-items: center; padding: 10px 20px; border-top: 1px solid var(--fio2); }
.cl-esq .esq { margin-top: 0; }
.cl-esq > span:nth-child(2) { display: grid; gap: 8px; }
.cl-esq .cl-esq-th { width: 44px; height: 61px; border-radius: 3px; }
.cl-trilho[aria-hidden="true"] .esq { margin: 6px 8px; }
.cl-esq-val { display: inline-block; vertical-align: middle; width: 120px; height: 20px; margin: 0; }
.cl-w35 { width: 35%; }
.cl-w55 { width: 55%; }
.cl-w60 { width: 60%; }
.cl-w80 { width: 80%; }
.cl-w100 { width: 100%; }
.cl-painel .kpi .obs .esq { display: inline-block; height: 10px; margin: 2px 0 0; vertical-align: middle; }

/* ------------------------------------------------------------------ responsivo */
@media (max-width: 1079px) {
  .cl-lh, .cl-linha { grid-template-columns: 44px minmax(0, 1fr) auto 104px 132px; gap: 12px; }
  .cl-sem-res .cl-lh, .cl-sem-res .cl-linha { grid-template-columns: 44px minmax(0, 1fr) auto 116px; }
}

@media (max-width: 900px) {
  .cl-area { grid-template-columns: minmax(0, 1fr); }
  .cl-trilho { display: none; }
  .cl-faixa { display: grid; gap: 10px; margin-bottom: 14px; min-width: 0; }
  .cl-faixa .plano-box { max-width: 420px; }
}

@media (max-width: 639px) {
  .cl-cab { padding: 14px 12px 12px; }
  .cl-nome { font-size: 21px; }
  .cl-acoes { margin-left: 0; width: 100%; justify-content: stretch; }
  .cl-acoes .bt { flex: 1 1 0; }
  .cl-acoes .cl-motivo { text-align: left; }
  .cl-ren .inp { flex-basis: 100%; max-width: none; }
  .cl-ferr { padding: 10px 12px; }
  .cl-ferr .busca { flex-basis: 100%; }
  .cl-ferr .cl-ord { margin-left: 0; display: flex; width: 100%; }
  .cl-ferr .cl-ord button { flex: 1 1 auto; padding: 4px 6px; }
  .cl-ord .cl-ord-longo { display: none; }
  .cl-ord .cl-ord-curto { display: inline; }

  /* KPIs em 2 colunas (base.css empilha em 1) */
  .cl-painel .kpis, .cl-painel .kpis.k3 { grid-template-columns: 1fr 1fr; }
  .cl-painel .kpis .kpi, .cl-painel .kpis.k3 .kpi { border-right: 0; border-bottom: 1px solid var(--fio2); padding: 10px 12px; }
  .cl-painel .kpis .kpi:nth-child(odd) { border-right: 1px solid var(--fio2); }
  .cl-painel .kpis:not(.k3) .kpi:nth-child(n+3) { border-bottom: 0; }
  .cl-painel .kpis.k3 .kpi:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
  .cl-painel .kpi .val { font-size: 17px; }
  .cl-painel .kpi .val small { display: block; font-size: 12px; }

  /* linha: miniatura | nome e sub | mercado sobre resultado */
  .cl-lh { display: none; }
  .cl-linha, .cl-sem-res .cl-linha {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "th nm mer" "th nm res";
    gap: 2px 10px; padding: 8px 12px;
  }
  .cl-sem-res .cl-linha { grid-template-areas: "th nm mer"; }
  .cl-c-th { grid-area: th; align-self: center; }
  .cl-c-nm { grid-area: nm; align-self: center; }
  .cl-c-mer { grid-area: mer; align-self: end; }
  .cl-c-res { grid-area: res; align-self: start; }
  .cl-sem-res .cl-c-mer { align-self: center; }
  .cl-linha .cl-vs { display: none; }
  .cl-c-mer b { font-size: 14px; }
  .cl-c-res b { font-size: 12.5px; }
  .cl-c-mer .cl-un { display: none; }
  .cl-c-res small { display: none; }
  .cl-esq { padding: 10px 12px; }
}