/* the "Montar retrato" editor (apps/comum/retrato.js): a big live preview on the left, the part selectors and palettes on the right */
.dialogo-retrato .dialogo-corpo { padding: 1em 1.4em; }
.rt { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 22px; align-items: start; }
.rt-previa-caixa { display: flex; flex-direction: column; align-items: center; gap: 10px; position: sticky; top: 0; }
.rt-previa {
    position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 0 5px var(--papel-borda, #b99a64), 0 10px 24px rgba(0, 0, 0, .4);
}
.rt-svg, .rt-svg svg { display: block; width: 100%; height: 100%; }
.rt-circulo { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(243, 217, 142, .8), inset 0 0 0 3px rgba(40, 24, 8, .35); }
.rt-sortear { font-family: 'Pirata One', 'IM Fell English', serif; font-size: 1.25em; letter-spacing: .03em; }
.rt-dica { margin: 0; font-size: .82em; font-style: italic; opacity: .75; text-align: center; }
.rt-painel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rt-grupo { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border-bottom: 1px dotted var(--borda-forte); }
.rt-grupo:last-child { border-bottom: 0; }
.rt-campo { display: grid; grid-template-columns: 9.5em auto 1fr auto; align-items: center; gap: 6px; }
.rt-rotulo { font-family: 'Pirata One', 'IM Fell English', serif; font-size: 1.12em; letter-spacing: .02em; color: var(--ouro-2); }
.rt-valor { text-align: center; font-variant-numeric: tabular-nums; min-width: 4.5em; }
.rt-seta { min-width: 2.2em; font-size: 1.25em; line-height: 1; }
.rt-cor { display: grid; grid-template-columns: 9.5em 1fr; align-items: center; gap: 6px; }
.rt-amostras { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.rt-amostra {
    width: 1.55em; height: 1.55em; padding: 0; border-radius: 50%; background: var(--c); cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.rt-amostra:hover { transform: scale(1.12); }
.rt-amostra.sel { outline: 2px solid var(--ouro); outline-offset: 2px; }
.rt-amostras .rt-livre { flex: none; width: 2.1em; height: 1.7em; padding: 0; border: 1px solid var(--borda-forte); border-radius: 4px; background: none; cursor: pointer; }
.rt-credito { grid-column: 1 / -1; margin: 0; font-size: .78em; font-style: italic; opacity: .65; text-align: center; }
@media (max-width: 720px) {
    .rt { grid-template-columns: 1fr; }
    .rt-previa-caixa { position: static; max-width: 260px; margin: 0 auto; }
    .rt-campo { grid-template-columns: 7em auto 1fr auto; }
    .rt-cor { grid-template-columns: 1fr; }
}