/*
 * O painel de destino: cartões, o corte riscado, chips e avisos.
 * Carregado depois do app.css, que é onde moram os tokens de cor.
 */
/* ---------------- saída ---------------- */
.saida { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.placeholder { margin: auto 0; color: var(--tenue); font-size: 14.5px; max-width: 44ch; }
.placeholder p { margin: 0; }
.ph-titulo { color: var(--fraco); font-weight: 550; margin-bottom: 6px !important; }

.variante {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 15px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition: border-color 0.13s, box-shadow 0.13s;
}
.variante:hover { border-color: var(--linha); box-shadow: var(--sombra); }
.variante p { margin: 0; white-space: pre-wrap; font-size: 16px; line-height: 1.6; }

/* O corte, mostrado em vez de afirmado: o que saiu fica riscado, o que entrou fica marcado. */
.variante del {
  color: var(--tenue);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.variante ins {
  color: var(--texto);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--acento);
}
/* O que a ENTRADA tinha vale uma vez, no topo: repetir nos três cartões é ruído. */
.entrada-tinha {
  margin: 0;
  font-size: 12.5px;
  color: var(--fraco);
  padding: 8px 11px;
  background: var(--fundo);
  border-radius: var(--r-sm);
  border-left: 2px solid var(--acento);
}
.entrada-tinha b { color: var(--texto); font-weight: 600; }

.alternador {
  margin-left: auto;
  border: 1px solid var(--linha);
  background: none;
  color: var(--fraco);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 3px 10px;
  border-radius: 999px;
}
.alternador:hover { border-color: var(--acento); color: var(--texto); }
.alternador + .meta { margin-left: 10px; }

.linha-baixo { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.chip {
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--linha);
  color: var(--tenue);
}
.chip.erro { color: var(--erro); border-color: currentColor; }
.chip.limpo { color: var(--acento); border-color: currentColor; }
.acoes-var { margin-left: auto; display: flex; gap: 5px; }
.mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--linha);
  background: var(--papel);
  color: var(--fraco);
  border-radius: var(--r-sm);
  padding: 5px 11px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 0.13s, color 0.13s;
}
.mini:hover { border-color: var(--acento); color: var(--texto); }
.mini.feito { color: var(--acento); border-color: currentColor; }

.aviso {
  border: 1px solid var(--aviso);
  background: var(--avisoFundo);
  color: var(--aviso);
  border-radius: var(--r-md);
  padding: 10px 13px;
  font-size: 13.5px;
}
.falha {
  border: 1px solid var(--erro);
  border-radius: var(--r-md);
  padding: 11px 13px;
  color: var(--erro);
  font-size: 13.5px;
  margin: auto 0;
}
.carregando { color: var(--tenue); font-size: 14.5px; margin: auto 0; }