/* ==========================================================================
   CAOSmarada Design System · Hero "O que fazer hoje?"
   --------------------------------------------------------------------------
   Wave A · P0-1 (06/06/2026). Top de page-predictions e page-simulator.
   Preview: .planning/design-preview/hub.html (seções .section-head + .uni-table).
   ========================================================================== */

.cmd-hero-today {
  position: relative;
  margin-bottom: var(--cmd-sp-6);
}

.cmd-hero-today__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cmd-sp-4);
  margin-bottom: var(--cmd-sp-4);
  flex-wrap: wrap;
}

.cmd-hero-today__title {
  font-family: var(--cmd-ff-serif);
  font-style: italic;
  font-weight: var(--cmd-w-regular);
  font-size: 30px;
  line-height: 1;
  color: var(--cmd-text-primary);
  margin: 0;
  letter-spacing: var(--cmd-ls-serif-headline);
}
.cmd-hero-today__title em { color: var(--cmd-em); font-style: italic; }

.cmd-hero-today__meta {
  font-size: var(--cmd-f-caption);
  color: var(--cmd-text-tertiary);
  margin-top: var(--cmd-sp-2);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cmd-hero-today__meta strong { color: var(--cmd-text-secondary); font-weight: var(--cmd-w-medium); }
.cmd-hero-today__meta .cmd-dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--cmd-text-muted); display: inline-block; }

.cmd-hero-today__source-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--cmd-sp-2);
  border-radius: var(--cmd-r-sm);
  background: var(--cmd-em-soft);
  border: 1px solid var(--cmd-em-border);
  font-size: var(--cmd-f-nano);
  color: var(--cmd-em);
  font-weight: var(--cmd-w-semibold);
  font-family: var(--cmd-ff-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cmd-hero-today__source-chip .pulse-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cmd-em);
  animation: cmdHeroPulse 2.2s ease-in-out infinite;
}
@keyframes cmdHeroPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.15); }
  50%      { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); }
}

/* ---- Tabela operacional ---- */
.cmd-hero-today__table {
  background: var(--cmd-bg-surface);
  border: 1px solid var(--cmd-border-subtle);
  border-radius: var(--cmd-r-lg);
  overflow: hidden;
  width: 100%;
}

.cmd-hero-today__row {
  display: grid;
  /* Wave A · P0-1 · fix 06/06: primeira coluna minmax(240px, 1fr) faz a tabela
     ocupar largura total em viewports largos sem vazio à direita. */
  grid-template-columns: minmax(240px, 1fr) 110px 100px 140px 130px 80px 30px;
  gap: var(--cmd-sp-3);
  padding: var(--cmd-sp-4) 18px;
  align-items: center;
  border-bottom: 1px solid var(--cmd-border-subtle);
  transition: background var(--cmd-t-fast), box-shadow var(--cmd-t-fast);
  cursor: pointer;
  position: relative;
}
.cmd-hero-today__row:last-child { border-bottom: none; }
.cmd-hero-today__row:hover {
  background: rgba(255, 255, 255, 0.018);
  box-shadow: var(--cmd-sh-hover-em);
}
.cmd-hero-today__row--head {
  background: rgba(0, 0, 0, 0.2);
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: var(--cmd-f-micro);
  color: var(--cmd-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--cmd-ls-caps);
  font-weight: var(--cmd-w-medium);
  cursor: default;
  font-family: var(--cmd-ff-mono);
}
.cmd-hero-today__row--head:hover { background: rgba(0, 0, 0, 0.2); box-shadow: none; }

@media (max-width: 900px) {
  .cmd-hero-today__row { grid-template-columns: 1fr auto auto; }
  .cmd-hero-today__row > *:nth-child(3),
  .cmd-hero-today__row > *:nth-child(5),
  .cmd-hero-today__row > *:nth-child(6),
  .cmd-hero-today__row > *:nth-child(7) { display: none; }
}

/* P2-4 mobile pass (07/06/2026) — telefones */
@media (max-width: 600px) {
  .cmd-hero-today__title { font-size: 22px; }
  .cmd-hero-today__row {
    grid-template-columns: 1fr auto;
    padding: 12px 14px;
    gap: var(--cmd-sp-2);
    min-height: 56px;
  }
  /* Esconde nome longo do ticker — sym continua */
  .cmd-hero-today__ticker-name { display: none; }
  /* Esconde célula de preço, signal vai pra direita */
  .cmd-hero-today__row > *:nth-child(2),
  .cmd-hero-today__row > *:nth-child(4) { display: none; }
  /* Skeleton mantém 2 colunas pra não pular layout no load */
  .cmd-hero-today__skeleton {
    grid-template-columns: 1fr 80px;
  }
  .cmd-hero-today__skeleton > div:nth-child(n+3) { display: none; }
  /* Footer empilha disclaimer + botão */
  .cmd-hero-today__foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ticker cell */
.cmd-hero-today__ticker {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.cmd-hero-today__ticker-info { min-width: 0; }
.cmd-hero-today__ticker-sym {
  font-family: var(--cmd-ff-mono);
  font-size: 13px;
  font-weight: var(--cmd-w-medium);
  font-variant-numeric: tabular-nums;
  color: var(--cmd-text-primary);
  display: flex; align-items: center; gap: 6px;
}
.cmd-hero-today__ticker-name {
  font-size: var(--cmd-f-micro);
  color: var(--cmd-text-tertiary);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 200px;
}

/* tier dot */
.cmd-hero-today__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cmd-hero-today__dot--keep  { background: var(--cmd-em);   box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.15); }
.cmd-hero-today__dot--watch { background: var(--cmd-hold); box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.15); }
.cmd-hero-today__dot--cold  { background: var(--cmd-sell); }
.cmd-hero-today__dot--insuf { background: var(--cmd-text-muted); }

/* price / delta */
.cmd-hero-today__price {
  font-family: var(--cmd-ff-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--cmd-text-primary);
}
.cmd-hero-today__delta {
  font-family: var(--cmd-ff-mono);
  font-size: var(--cmd-f-caption);
  font-variant-numeric: tabular-nums;
}
.cmd-hero-today__delta--up    { color: var(--cmd-em); }
.cmd-hero-today__delta--down  { color: var(--cmd-sell); }
.cmd-hero-today__delta--muted { color: var(--cmd-text-tertiary); }

/* signal cell */
.cmd-hero-today__signal { display: flex; flex-direction: column; gap: 3px; }
.cmd-hero-today__signal-tag {
  font-size: 10px;
  padding: 2px 7px;
  white-space: nowrap;
  border-radius: var(--cmd-r-sm);
  font-weight: var(--cmd-w-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--cmd-ff-mono);
  align-self: flex-start;
  border: 1px solid transparent;
}
.cmd-hero-today__signal-tag--buy    { background: var(--cmd-em-soft);   color: var(--cmd-em);   border-color: var(--cmd-em-border); }
.cmd-hero-today__signal-tag--hold   { background: var(--cmd-hold-soft); color: var(--cmd-hold); border-color: var(--cmd-hold-border); }
.cmd-hero-today__signal-tag--sell   { background: var(--cmd-sell-soft); color: var(--cmd-sell); border-color: var(--cmd-sell-border); }
.cmd-hero-today__signal-tag--insuf  { background: rgba(110, 110, 120, 0.08); color: var(--cmd-text-tertiary); border-color: var(--cmd-border-strong); }
/* Caminho B (27/06): preliminar (lean com track parcial, só falta amostra) =
   amarelo tracejado (= tentativo); abstém (track fraco) = vermelho discreto. */
.cmd-hero-today__signal-tag--prelim { background: var(--cmd-hold-soft); color: var(--cmd-hold); border-color: var(--cmd-hold-border); border-style: dashed; }
.cmd-hero-today__signal-tag--weak   { background: rgba(110, 110, 120, 0.08); color: var(--cmd-sell); border-color: var(--cmd-border-strong); }
/* célula Convicção dos preliminares: wrapper PRÓPRIO (não herda a regra das
   barrinhas `.cmd-hero-today__conv > span`, que pintava o badge de cinza). */
.cmd-hero-today__conv-cell { display: flex; align-items: center; }
/* fração do track parcial exibida na coluna Convicção dos preliminares */
.cmd-hero-today__track {
  font-family: var(--cmd-ff-mono);
  font-size: var(--cmd-f-micro);
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: var(--cmd-r-sm);
  white-space: nowrap;
  border: 1px solid transparent;
}
.cmd-hero-today__track--ok   { color: var(--cmd-em);   background: var(--cmd-em-soft);   border-color: var(--cmd-em-border); }
.cmd-hero-today__track--warn { color: var(--cmd-hold); background: var(--cmd-hold-soft); border-color: var(--cmd-hold-border); }
.cmd-hero-today__track--bad  { color: var(--cmd-sell); background: var(--cmd-sell-soft); border-color: var(--cmd-sell-border); }
.cmd-hero-today__track--new  { color: var(--cmd-text-tertiary); }
.cmd-hero-today__signal-label {
  font-size: 9px;
  color: var(--cmd-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--cmd-ff-mono);
  font-variant-numeric: tabular-nums;
}

/* conv pillars (compact) — :not() exclui o .conv-num da regra das barras */
.cmd-hero-today__conv { display: flex; gap: 1.5px; align-items: center; }
.cmd-hero-today__conv > span:not(.cmd-hero-today__conv-num) {
  width: 5px; height: 13px; border-radius: 1px;
  background: var(--cmd-border-strong);
  flex-shrink: 0;
}
.cmd-hero-today__conv > span.on { background: var(--cmd-em); }
.cmd-hero-today__conv--hold > span.on { background: var(--cmd-hold); }
.cmd-hero-today__conv--sell > span.on { background: var(--cmd-sell); }
.cmd-hero-today__conv-num {
  font-family: var(--cmd-ff-mono);
  font-size: var(--cmd-f-micro);
  color: var(--cmd-text-tertiary);
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: auto;
  height: auto;
  background: transparent;
}

/* sparkline 7d */
.cmd-hero-today__spark svg { height: 24px; width: 80px; display: block; }

/* chevron / why */
.cmd-hero-today__why {
  color: var(--cmd-text-tertiary);
  display: grid; place-items: center;
  transition: color var(--cmd-t-fast);
}
.cmd-hero-today__row:hover .cmd-hero-today__why { color: var(--cmd-em); }

/* footer actions strip */
.cmd-hero-today__foot {
  margin-top: var(--cmd-sp-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cmd-sp-3);
  font-size: var(--cmd-f-caption);
  color: var(--cmd-text-tertiary);
}

/* skeleton / loading */
.cmd-hero-today__skeleton {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 110px 100px 140px 130px 80px 30px;
  gap: var(--cmd-sp-3);
  padding: var(--cmd-sp-4) 18px;
  border-bottom: 1px solid var(--cmd-border-subtle);
}
.cmd-hero-today__skeleton > div {
  height: 14px;
  background: linear-gradient(90deg,
    var(--cmd-bg-surface) 0%,
    rgba(255, 255, 255, 0.04) 50%,
    var(--cmd-bg-surface) 100%);
  background-size: 200% 100%;
  border-radius: var(--cmd-r-sm);
  animation: cmdSkeleton 1.4s ease-in-out infinite;
}
@keyframes cmdSkeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* empty state */
.cmd-hero-today__empty {
  padding: 28px var(--cmd-sp-5);
  text-align: center;
  font-size: var(--cmd-f-body);
  color: var(--cmd-text-tertiary);
  font-family: var(--cmd-ff-ui);
}
.cmd-hero-today__empty strong { color: var(--cmd-text-secondary); font-weight: var(--cmd-w-medium); }