/* Acabamento restrito à coluna do item. Os seletores e o conteúdo do JS
   continuam intactos; as cores acompanham os dois temas pelos tokens. */
.painel-lado {
  align-self: start;
  max-height: 100%;
  min-width: 0;
  padding: 20px 16px 16px;
  container-type: inline-size;
  scrollbar-width: thin;
}

.painel-lado .item-id { font-size: 16px; line-height: 1.5; }
.painel-lado .item-meta { margin-top: 4px; font-family: var(--sans); color: var(--tinta-2); font-size: 11px; }
.painel-lado .painel-rotulo { font-size: 10px; letter-spacing: .08em; color: var(--tinta-2); }

/* Uma única cadência: 16 entre seções, 8 entre rótulo e controle. */
.painel-lado .bloco,
.painel-lado .contas,
.painel-lado .parametros {
  flex-shrink: 0;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
}
/* A procedência deixa de ser uma bolinha: o próprio title escrito pelo JS
   aparece como nota, sempre visível, logo abaixo do perfil escolhido. */
.painel-lado .perfil-bloco { margin-top: 20px; padding-top: 0; border-top: 0; }
.painel-lado .perfil-bloco > .painel-rotulo { color: var(--tinta); }
.painel-lado .dica-perfil {
  display: block;
  width: auto;
  height: auto;
  margin: 8px 0 0;
  border-radius: 0;
  background: none;
  color: var(--tinta-2);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  cursor: auto;
}
.painel-lado .dica-perfil::after { content: attr(title); }
.painel-lado .perfil-icones { margin-top: 8px; }
.painel-lado .perfil-atual { min-height: 40px; padding: 8px; gap: 8px; }
.painel-lado .perfil-atual .nome { font-size: 11.5px; }
.painel-lado .perfil-lista button { padding: 8px 6px; }
.painel-lado .perfil-lista b { font-size: 11.5px; }
.painel-lado .perfil-lista small { color: var(--tinta-2); }
.painel-lado .btn-mais { width: 28px; height: 28px; border-radius: 8px; }

/* Só os programas escolhidos ficam na coluna. Os pares mantêm o nome
   legível; o último ímpar fecha a fileira. O catálogo conserva os dez. */
.painel-lado .programas-marcas {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 0;
}
.painel-lado .marca-programa {
  min-width: 0;
  min-height: 36px;
  flex-direction: row;
  gap: 6px;
  padding: 5px 6px;
  background: var(--placa-2);
  border: 1px solid var(--linha);
  border-radius: 8px;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.painel-lado .marca-programa:last-child:nth-child(odd) { grid-column: 1 / -1; }
.painel-lado .marca-programa:hover { transform: none; border-color: var(--linha-forte); background: var(--placa-3); }

/* Programa que NAO esta na conta.
   Isto faltava, e e por isso que escolher programa parecia nao funcionar: a
   classe .fora existia no js e nao tinha estilo nenhum, entao marcado e
   desmarcado ficavam identicos. Borda tracejada e a diferenca mais dificil de
   confundir, e ela nao depende de cor. */
.painel-lado .marca-programa.fora {
  background: none;
  border-style: dashed;
  border-color: var(--linha);
}
.painel-lado .marca-programa.fora .selo-marca { background: none; opacity: .5; }
.painel-lado .marca-programa.fora .nome-marca { color: var(--tinta-3); }
.painel-lado .marca-programa.fora:hover { background: var(--placa-2); border-style: solid; }

/* Programa que esta na conta. */
.painel-lado .marca-programa.dentro,
.painel-lado .marca-programa.manda {
  background: var(--placa-2);
  border-style: solid;
  border-color: var(--linha-forte);
}
.painel-lado .marca-programa.dentro .nome-marca,
.painel-lado .marca-programa.manda .nome-marca { color: var(--tinta); }
.painel-lado .selo-marca {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 0;
  border-radius: 5px;
  background: var(--placa);
  box-shadow: none;
}
.painel-lado .selo-marca svg { width: 15px; height: 15px; }
.painel-lado .marca-programa.manda .selo-marca { border: 0; box-shadow: none; }
.painel-lado .marca-programa.manda { border-color: var(--acento-escuro); }
.painel-lado .nome-marca {
  max-width: 100%;
  color: var(--tinta-2);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.painel-lado .marca-programa.quebra { border-color: var(--baixo); background: var(--baixo-fundo); }
.painel-lado .marca-programa.quebra .nome-marca { color: var(--baixo); }
.painel-lado .marca-programa.quebra .selo-marca { background: var(--baixo-fundo); }
.painel-lado .selo-marca .aviso { color: var(--baixo-fundo); }
.painel-lado .programas-marcas > .nota { grid-column: 1 / -1; margin: 0; padding: 8px 0; font-size: 11px; line-height: 1.5; color: var(--tinta-2); }
.painel-lado .catalogo-programas { top: 48px; }
.painel-lado .catalogo-programas button { min-height: 36px; }

/* O resultado financeiro assume o protagonismo; a ação fica mais leve. */
.painel-lado .contas { gap: 8px; }
.painel-lado .conta-linha-lado { gap: 8px; }
.painel-lado .conta-linha-lado > span { font-size: 11px; }
.painel-lado .conta-linha-lado > b {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: clamp(18px, 8.5cqi, 22px);
  font-weight: 650;
  letter-spacing: -.035em;
  line-height: 1.3;
  white-space: nowrap;
}
.painel-lado .conta-linha-lado > b.sim { color: var(--tinta); }
.painel-lado .conta-economia {
  margin-top: 8px;
  padding: 12px;
  border-radius: var(--raio);
  background: var(--acento);
  color: var(--acento-tinta);
}
.painel-lado .conta-economia b {
  margin-top: 4px;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 12cqi, 32px);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}
.painel-lado .conta-economia .painel-rotulo { color: inherit; opacity: 1; }
.painel-lado .conta-economia.piorou { color: var(--baixo); background: var(--baixo-fundo); }
/* Ações próximas, com áreas de clique claras e sem separador solto. */
.painel-lado .acoes-lado {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
  gap: 8px;
  flex-shrink: 0;
}
.painel-lado .acoes-lado .elo {
  min-width: 0;
  min-height: 36px;
  padding: 6px 4px;
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  background: var(--placa-2);
  color: var(--tinta);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}
.painel-lado .acoes-lado #btn-restaurar { background: none; border-color: var(--linha); color: var(--tinta-2); }
.painel-lado .acoes-lado .elo:hover { background: var(--placa-3); border-color: var(--tinta-3); color: var(--tinta); }
/* A acao que fecha o trabalho e a unica em cor cheia nesta coluna. */
.painel-lado #btn-parecer {
  flex-shrink: 0;
  min-height: 40px;
  margin-top: 10px;
  padding: 9px 12px;
  border-color: transparent;
  background: var(--acento);
  color: var(--acento-tinta);
  font-size: 12.5px;
  font-weight: 700;
}
.painel-lado #btn-parecer:hover { background: var(--acento-escuro); border-color: transparent; }
.painel-lado .parametros summary { min-height: 24px; padding: 0; font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--tinta-2); }
.painel-lado .parametros-grade { margin-top: 8px; }
.painel-lado .parametros-grade .par { grid-template-columns: minmax(0, 1fr) auto 64px; gap: 8px; padding: 4px 0; }
.painel-lado .parametros-grade label { font-size: 11px; }
.painel-lado .parametros .nota { margin-top: 8px; color: var(--tinta-2); font-size: 10px; line-height: 1.5; }
.painel-lado button:focus-visible,
.painel-lado summary:focus-visible { outline: 2px solid var(--acento-escuro); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .painel-lado .marca-programa { transition: none; }
}

/* O cartao acompanha a altura da coluna; o conteudo continua no topo.
   Sem isso ele termina no meio e sobra um vao escuro ate o rodape. */
.painel-lado { height: 100%; }


/* ---- perfil como chip discreto no cabecalho ---- */

.painel-lado .dica-perfil { display: none; }

.painel-lado .perfil-icones { margin: 10px 0 0; }

.painel-lado .perfil-atual {
  min-height: 0;
  padding: 5px 9px 5px 7px;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: 20px;
  width: auto;
  max-width: 100%;
}
.painel-lado .perfil-atual:hover { background: var(--placa-2); border-color: var(--linha-forte); }
.painel-lado .perfil-atual .ico { width: 14px; height: 14px; flex: 0 0 14px; }
.painel-lado .perfil-atual .ico svg { width: 14px; height: 14px; }
.painel-lado .perfil-atual .nome { font-size: 11px; font-weight: 500; color: var(--tinta-2); }
.painel-lado .perfil-atual .seta { border-top-width: 4px; border-left-width: 3.5px; border-right-width: 3.5px; }

.painel-lado .perfil-lista { top: calc(100% + 6px); min-width: 230px; }
.perfil-procedencia {
  margin: 2px 4px 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--linha);
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--tinta-3);
}

/* o bloco de programas passa a ser o primeiro com filete */
.painel-lado .programas-bloco { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); }