/* Componentes do Órbita Creme (js/componentes.js), vitrine Gravitar, frente 1. Carregado depois de app.css.
   Regras do sistema: raios de 6 px, 20 a 40 px ou pílula; arc só em arcos e indicadores; estados sempre com texto. */

/* Número-destaque, em faixa tipográfica com divisórias (sem cartão). */
.destaques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.destaque { min-width: 0; padding: 18px 14px 16px 0; border-bottom: 1px solid var(--line); }
.destaques .destaque:nth-child(odd) { border-right: 1px solid var(--line); }
.destaques .destaque:nth-child(even) { padding-left: 14px; padding-right: 0; }
/* Quatro lado a lado a partir de 768 px (o Hoje, que divide a largura com a lateral, sobrescreve para 2 × 2). */
@media (min-width: 768px) {
  .destaques { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .destaques .destaque, .destaques .destaque:nth-child(even) { padding: 20px 18px 18px; border-right: 1px solid var(--line); }
  .destaques .destaque:first-child { padding-left: 0; }
  .destaques .destaque:last-child { border-right: 0; padding-right: 0; }
}
.destaque-rotulo { font-size: 13px; color: var(--muted); }
.destaque .destaque-valor { margin-top: 6px; }
.destaque-var { margin-top: 4px; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--charcoal); }
.destaque-var.sobe { color: var(--bom); }
.destaque-var.desce { color: var(--warn); }
.destaque-nota { margin-top: 2px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rotulo-q { margin-left: 4px; font-size: 12px; font-weight: 700; color: var(--muted); cursor: help; }

/* Sparkline: traço em ink, área tênue, último ponto em arc e a divisão entre as semanas tracejada. */
.spark { display: block; width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.sp-linha { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.sp-area { fill: var(--ink); fill-opacity: .06; stroke: none; }
.sp-ponto { fill: var(--arc); }
.sp-divisao { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }

/* Barras horizontais. */
.barras { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.barra { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.barra-rotulo { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-trilha { height: 10px; border-radius: var(--radius-tiny); background: var(--ghost); overflow: hidden; }
.barra-preenche { display: block; height: 100%; width: 0; border-radius: var(--radius-tiny); background: var(--ink); }
.barra-preenche.em-destaque { background: var(--arc); }
.barra-texto { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--charcoal); }

/* Retrato circular com a ação-satélite (Portrait do Órbita Creme). */
.retratos { list-style: none; margin: 0 -6px; padding: 18px 6px 14px; display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.retrato { flex: 0 0 auto; width: 128px; scroll-snap-align: start; }
.disco { position: relative; width: 128px; height: 128px; }
.disco > .capa { display: block; width: 100%; height: 100%; border-radius: 50%; }
.disco.fora::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--arc); pointer-events: none; }
.sat { position: absolute; right: -8px; bottom: 4px; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--ink);
  display: grid; place-items: center; box-shadow: var(--shadow-nav), 0 0 0 1px var(--line); transition: transform var(--dur-micro) var(--saida); }
a.sat { text-decoration: none; }
@media (hover: hover) { a.sat:hover { transform: translate(2px, -2px); } }
.seta { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.retrato-info { margin-top: 12px; }
.retrato-meta { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.retrato-titulo { margin-top: 4px; font-size: 15px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.retrato-conta { margin-top: 2px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.retrato-linha { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.retrato-linha::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line); flex: none; }
.retrato-linha.alto::before { background: var(--arc); }

/* Capa abstrata: formas nas cores do sistema (segue o tema). */
.capa .c-fundo { fill: var(--ghost); }
.capa .c-forma { fill: var(--line); }
.capa .c-forma2 { fill: var(--lifted); }
.capa .c-arco { fill: none; stroke: var(--arc); stroke-width: 2.5; stroke-linecap: round; }
.capa .c-ponto { fill: var(--ink); }

/* Selo do veredito (sempre com o texto). */
.selo { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700;
  letter-spacing: .05em; white-space: nowrap; }
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.selo-aprovado { color: var(--bom); background: color-mix(in srgb, var(--bom) 12%, var(--surface)); }
.selo-ajustar { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.selo-reprovar { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--surface)); }
.selo-sem { color: var(--charcoal); background: var(--ghost); }
.selo-sem::before { background: var(--muted); }

/* Monograma. */
.mono { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--on-ink);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; flex: none; }
.mono-claro { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }

/* Estados: vazio (símbolo, frase e uma ação), carregando (silhueta parada; pulso suave sem "reduzir movimento") e erro. */
.vazio, .carregando, .erro { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 32px 16px; margin: 10px 0;
  border-radius: var(--radius-btn); background: var(--lifted); color: var(--muted); }
.vazio p, .erro p { margin: 0; max-width: 46ch; }
.vazio-simbolo { width: 48px; height: 48px; fill: none; stroke: var(--line); stroke-width: 1.6; }
.vazio-simbolo circle { fill: var(--ghost); stroke: none; }
/* Só a silhueta pulsa (um pseudo-elemento atrás do texto); o rótulo fica sempre opaco, para não cair abaixo do AA. */
.carregando { position: relative; isolation: isolate; background: transparent; }
.carregando::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--lifted);
  animation: pulso 1.6s ease-in-out infinite alternate; }
@keyframes pulso { from { opacity: 1; } to { opacity: .55; } }
.erro { color: var(--bad); background: var(--bad-bg); }
.estado-acao { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-btn); border: 1.5px solid var(--ink);
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; }

/* Aviso (toast): pílula em ink, acima da pílula de navegação. Centrado por margens (o Motion anima o transform). */
.toast { left: 0; right: 0; margin: 0 auto; width: max-content; max-width: min(calc(100% - 32px), 688px); border-radius: var(--radius-pill);
  padding: 12px 18px; background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-halo); }

/* Campos: raio de 20 px, a mesma borda dos inputs de texto e alvo de 44 px (o rótulo e o erro, .msg, ficam escritos fora
   do campo; o .campo do app.css junta os três). As regras de cada tela, mais específicas, continuam valendo. */
textarea, select, input[type="date"], input[type="url"], input[type="search"] { font: inherit; border-radius: var(--radius-btn); border: 1px solid var(--line);
  background: var(--card); color: var(--fg); padding: 10px 14px; min-height: 44px; }