/* Selector de colores y vista previa (index.php y revisar.php). */
.colores { border:1.5px solid var(--linea); border-radius:14px; padding:14px; margin-top:4px; }
.colores .ayuda { font-size:14px; color:var(--suave); margin:0 0 12px; }
.sel { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.chip { display:flex; align-items:center; gap:10px; border:1.5px solid var(--linea); border-radius:12px; padding:6px 8px 6px 6px; background:#fff; }
.sel .muestra { width:44px; height:44px; border-radius:9px; margin:0; cursor:pointer; position:relative; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.sel .muestra input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; border:0; padding:0; }
.sel .muestra:focus-within { outline:3px solid #07DAAD; outline-offset:2px; }
.chip-txt { display:flex; flex-direction:column; line-height:1.1; }
.chip-txt small { font-size:12px; color:var(--suave); }
.chip .hex { width:84px; border:0; font:inherit; font-weight:700; padding:2px 0; text-transform:uppercase; background:transparent; }
.chip .hex:focus { outline:2px solid #07DAAD; border-radius:4px; }
.quitar { width:30px; height:30px; margin:0; padding:0; border-radius:50%; background:var(--tinte); color:var(--suave); font-size:20px; line-height:1; font-weight:600; }
.agregar { width:auto; margin:0; padding:12px 16px; border-radius:12px; background:#fff; border:1.5px dashed var(--suave); color:var(--morado); font-size:15px; font-weight:700; }
.vista { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.mini { aspect-ratio:16/9; border-radius:8px; padding:7% 8%; position:relative; overflow:hidden; box-shadow:0 0 0 1px var(--linea); display:flex; flex-direction:column; justify-content:center; container-type:inline-size; }
.mini-t { font-weight:800; font-size:9cqw; line-height:1.05; }
.mini-l { height:1.6cqw; width:28%; border-radius:2px; margin:6cqw 0 4cqw; }
.mini-c { font-weight:700; font-size:5.6cqw; }
.mini-r { position:absolute; left:0; right:0; top:0; height:2.4cqw; }
.mini-h { font-weight:800; font-size:8cqw; position:absolute; top:12%; left:8%; }
.mini-b { display:flex; flex-direction:column; gap:3cqw; margin-top:12cqw; width:55%; }
.mini-b i { display:block; height:7cqw; border-radius:0 3px 3px 0; }
.mini-k { position:absolute; right:7%; bottom:16%; padding:3cqw 4cqw; border-radius:4px; font-weight:800; font-size:5cqw; }
.mini-logo { position:absolute; top:7%; left:8%; background:#fff; border-radius:4px; padding:1.2cqw 2cqw; line-height:0; }
.mini-logo img { height:7cqw; max-width:34cqw; object-fit:contain; }
.vista-nota { font-size:13px; color:var(--suave); margin:8px 0 0; }
@media (max-width:560px) { .vista { grid-template-columns:1fr; } }