/* Miniaturas de los diseños de portada (panel de la tienda, consola y formulario de Vendiax). */
.mini-portada {
  --mp-fondo: #FFF7FA; --mp-texto: #2B1830;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 6%; align-items: center; aspect-ratio: 16 / 10; width: 100%;
  padding: 8%; border-radius: 10px; background: var(--mp-fondo); overflow: hidden; box-sizing: border-box;
}
.mini-portada i, .mini-portada b { display: block; border-radius: 3px; }
.mp-texto { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mp-texto b { height: 7px; background: var(--mp-texto); width: 100%; }
.mp-texto .mp-corta { width: 70%; }
.mp-chip { width: 45%; height: 5px; background: var(--mp2, #6C4BD8); opacity: .6; border-radius: 99px !important; }
.mp-boton { width: 40%; height: 8px; background: var(--mp1, #D12A7A); border-radius: 99px !important; margin-top: 3px; }
.mp-linea { width: 30%; height: 3px; background: var(--mp1, #D12A7A); }
.mp-collage { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; height: 100%; }
.mp-collage i { background: #fff; border: 1px solid rgba(0, 0, 0, .12); border-radius: 5px; }
.mp-collage .mp-grande { grid-row: span 2; border: 2px solid var(--mp-texto); }

.mini-centrada { grid-template-columns: 1fr; gap: 8%; align-content: center; }
.mp-centro { align-items: center; }
.mp-centro b { width: 70%; } .mp-centro .mp-corta { width: 45%; }
.mp-tira { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mp-tira i { aspect-ratio: 1; background: #fff; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; }

.mini-vitrina { background: linear-gradient(135deg, var(--mp1, #D12A7A), color-mix(in srgb, var(--mp1, #D12A7A) 70%, #000)); }
.mini-vitrina .mp-texto b { background: #fff; }
.mini-vitrina .mp-chip { background: #fff; opacity: .5; }
.mini-vitrina .mp-boton { background: #fff; }
.mp-estrella { display: block; background: #fff; border-radius: 6px; padding: 8%; box-shadow: 0 6px 12px rgba(0, 0, 0, .25); }
.mp-estrella i { aspect-ratio: 1; background: color-mix(in srgb, var(--mp1, #D12A7A) 18%, #fff); border-radius: 4px; }

.mini-editorial { grid-template-columns: 1fr 1fr; background: #fff; }
.mp-foto { display: block; aspect-ratio: 1; background: color-mix(in srgb, var(--mp2, #6C4BD8) 16%, #fff); border: 1px solid rgba(0, 0, 0, .12); }
.mini-editorial .mp-boton { border-radius: 2px !important; background: var(--mp-texto); }
.mp-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(0, 0, 0, .12); }
.mp-mini i { aspect-ratio: 1; background: #F2F2F2; }

/* Tarjetas para elegir el diseño */
.opciones-portada { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); border: 0; padding: 0; margin: 0; }
.opciones-portada legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.opcion-portada { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 2px solid #E6DDE3; border-radius: 16px; cursor: pointer; background: #fff; }
.opcion-portada:has(input:checked) { border-color: var(--mp1, #6C4BD8); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp1, #6C4BD8) 20%, transparent); }
.opcion-portada input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-portada:has(input:focus-visible) { outline: 3px solid #C9A24A; outline-offset: 2px; }
.opcion-portada strong { font-size: 15px; }
.opcion-portada small { color: #6B6380; font-size: 13px; line-height: 1.35; }