/* Estilos disponibles, en una cuadrícula de dos columnas. */
.ui-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ui-opt { display: flex; flex-direction: column; gap: 8px; padding: 12px; text-align: left;
  border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: inherit; }
.ui-opt:hover { border-color: var(--border-strong); }
.ui-opt.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.ui-prev { width: 100%; height: 100px; border-radius: 8px; border: 1px solid; display: flex; align-items: flex-end; gap: 5px; padding: 7px; }
.ui-prev span { display: block; border-radius: 4px; }
.ui-prev .p1 { flex: 1; height: 22px; }
.ui-prev .p2 { width: 22px; height: 22px; }
.ui-name { font-weight: 650; font-size: 13.5px; }
.ui-desc { font-size: 11.5px; color: var(--muted-foreground); line-height: 1.45; }
.ui-prev.premium-preview { background: #edf0f2; border-color: #dfe6e9; position: relative; overflow: hidden; padding-left: 30px; }
.premium-preview::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 24px; background: #132633; }
.premium-preview::after { content: ""; position: absolute; left: 5px; top: 14px; width: 14px; height: 5px; background: #d4ef8a; border-radius: 2px; }
.premium-preview .p1 { background: #132633; border: 1px solid #304653; height: 30px; }
.premium-preview .p2 { background: #d4ef8a; height: 30px; }
.ui-prev.luminous-preview { background: #eef3fc; border-color: #dce5f7; padding: 12px; position: relative; gap: 8px; }
.luminous-preview::before { content: ""; position: absolute; left: 12px; top: 12px; width: 40%; height: 7px; background: #2455ed; border-radius: 3px; }
.luminous-preview .p1 { height: 48px; background: #2455ed; border-radius: 7px 7px 18px 7px; }
.luminous-preview .p2 { height: 48px; width: 35%; background: #c5d8ff; border-radius: 7px; }
.ui-prev.deco-preview { background: #143b32; border: 4px double #a68d56; border-radius: 0; justify-content: center; gap: 12px; padding: 14px; }
.deco-preview .p1, .deco-preview .p2 { height: 62px; flex: none; width: 34%; background: #e6cc8d; border: 3px double #143b32; border-radius: 25px 25px 0 0; }
.ui-prev.retro-preview { background: #f2dfb9; border-color: #aa8259; border-radius: 16px; padding: 14px; gap: 10px; }
.retro-preview .p1 { height: 60px; background: #a13e26; border-radius: 22px; box-shadow: 3px 3px 0 #b99665; }
.retro-preview .p2 { height: 60px; width: 40%; background: #314b3c; border-radius: 22px; box-shadow: 3px 3px 0 #b99665; }
.ui-prev.acdigital-preview { background: #111210; border-color: #34362f; border-radius: 6px; padding: 14px; gap: 14px; position: relative; overflow: hidden; }
.acdigital-preview::before { content: ""; position: absolute; top: 16px; left: 14px; width: 48%; height: 5px; background: #f4f4ed; box-shadow: 0 11px #f4f4ed, 0 22px #c4f566; }
.acdigital-preview .p1 { background: #c4f566; height: 16px; flex: 0 0 42%; border-radius: 20px; }
.acdigital-preview .p2 { width: 61px; height: 61px; margin-left: auto; border-radius: 50%; border: 9px solid #777c72; border-top-color: #eff0e9; border-bottom-color: #c4f566; transform: rotate(-30deg); background: #1b1c19; }
@media (max-width: 760px) { .ui-picker { grid-template-columns: 1fr; } }