.studio-variantes{display:grid;grid-template-columns:minmax(180px,1fr) minmax(80px,160px) auto;gap:16px;align-items:center;margin:0 0 16px;padding:14px 16px;border:1px solid var(--negro-borde);border-radius:14px;background:var(--negro-elevado);color:var(--texto-principal,var(--text));font-size:13px}
.studio-variantes b,.studio-variantes span{display:block}.studio-variantes span{margin-top:4px;font-size:12px;line-height:1.45;color:var(--texto-secundario,var(--muted))}.studio-variantes progress{width:100%;height:6px;accent-color:var(--verde-cocuyo)}
.studio-variantes-acciones{display:flex;gap:8px;flex-wrap:wrap}.studio-variantes button{min-height:38px;padding:8px 12px;border:1px solid var(--negro-borde);border-radius:9px;background:var(--negro-abismo);color:inherit;font:inherit;cursor:pointer}.studio-variantes button:hover{border-color:var(--verde-cocuyo)}.studio-variantes button:focus-visible{outline:2px solid var(--verde-cocuyo);outline-offset:3px}
@media(max-width:680px){.studio-variantes{grid-template-columns:1fr;gap:10px}.studio-variantes button{min-height:44px}}
/* 28-sep-2026: display:grid le ganaba al atributo hidden y la barra seguía a la vista. */
.studio-variantes[hidden]{display:none!important}
/* Fuera de Imagen, una línea corta que lleva a Imagen. */
.studio-variantes.compacta{grid-template-columns:minmax(0,1fr) auto;padding:10px 14px;gap:12px}
@media(max-width:680px){.studio-variantes.compacta{grid-template-columns:1fr}}