/* =====================================================================
   REGALOS BILBAO — el bloque de DISEÑO de la ficha y la PRUEBA (fase 4,
   12/10/2026). Sobre las variables del Módulo Carrito (--mc-*): cuando
   llegue el diseño de la tienda, cambian las variables y esto le sigue.
   ===================================================================== */
.rb-pp { display: grid; gap: 14px; }
/* «hidden» manda siempre (una regla display:grid o flex le ganaría al hidden del navegador). */
.rb-pp [hidden] { display: none !important; }
.rb-pp-hueco { margin: 0; padding: 14px; border: 1px solid var(--mc-linea, #dfe2e8); border-radius: var(--mc-radio, 10px);
  min-width: 0; }
.rb-pp-hueco legend { font-weight: 800; padding: 0 6px; }
.rb-pp-opcional { font-weight: 400; color: var(--mc-suave, #5b6170); }
.rb-pp-ayuda, .rb-pp-nota { margin: 0 0 8px; font-size: 14px; color: var(--mc-suave, #5b6170); overflow-wrap: anywhere; }
.rb-pp-modos { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; }
.rb-pp .rb-pp-modo { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: 15px; }
.rb-pp .rb-pp-modo input { width: auto; }
.rb-pp input[type="file"] { display: block; width: 100%; max-width: 100%; margin: 0 0 6px; font-size: 15px; }
.rb-pp-desde-activa { color: var(--mc-mal, #a02613); font-weight: 700; }
.rb-pp-resultado:empty { display: none; }
.rb-pp-resultado { margin-top: 10px; }
.rb-pp-comprobando { margin: 0; font-weight: 600; }
.rb-pp-prueba { margin: 0 0 8px; padding: 10px; background: var(--mc-crudo, #f4f5f8); border-radius: var(--mc-radio, 10px);
  border-left: 4px solid var(--mc-bien, #1d6b34); }
.rb-pp-prueba.rb-pp-revisar { border-left-color: var(--mc-aviso, #b26a00); }
.rb-pp-prueba img { display: block; max-width: 100%; max-height: 360px; width: auto; height: auto; margin: 0 auto 8px;
  background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.12); }
.rb-pp-prueba figcaption { font-size: 14px; }
.rb-pp-veredicto { margin: 0 0 8px; padding-left: 20px; font-size: 14px; }
.rb-pp-error { padding: 10px 12px; border-radius: var(--mc-radio, 10px); background: var(--mc-mal-fondo, #fdebe8);
  color: var(--mc-mal, #a02613); font-size: 14.5px; font-weight: 600; }
.rb-pp-error ul { margin: 0; padding-left: 18px; }
.rb-pp-cambiar { padding: 6px 12px; border: 1px solid var(--mc-linea, #dfe2e8); border-radius: 8px; background: var(--mc-fondo, #fff);
  font: inherit; font-size: 14px; cursor: pointer; }
.rb-pp .rb-pp-aprobar { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 2px solid var(--mc-marca, #1d4ed8);
  border-radius: var(--mc-radio, 10px); font-weight: 700; }
.rb-pp .rb-pp-aprobar[hidden] { display: none; }
.rb-pp .rb-pp-aprobar input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; }
.rb-pp-falta { margin: 0; color: var(--mc-mal, #a02613); font-weight: 700; }
/* La ventana del archivo de diseños */
.rb-pp-ventana { width: min(860px, calc(100vw - 24px)); max-height: calc(100vh - 40px); padding: 0; border: 0;
  border-radius: var(--mc-radio, 10px); box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.rb-pp-ventana::backdrop { background: rgba(10,12,16,.55); }
.rb-pp-ventana-cab { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: var(--mc-fondo, #fff); border-bottom: 1px solid var(--mc-linea, #dfe2e8); }
.rb-pp-cerrar { width: 40px; height: 40px; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; }
.rb-pp-ventana-cuerpo { padding: 14px 16px 20px; }
.rb-pp-pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.rb-pp-pestana { padding: 6px 12px; border: 1px solid var(--mc-linea, #dfe2e8); border-radius: 999px; background: var(--mc-fondo, #fff);
  font: inherit; font-size: 14px; cursor: pointer; }
.rb-pp-pestana[aria-selected="true"] { background: var(--mc-tinta, #14161a); color: #fff; border-color: var(--mc-tinta, #14161a); }
.rb-pp-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.rb-pp-diseno { margin: 0; display: grid; gap: 6px; align-content: start; }
.rb-pp-diseno img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #fff;
  border: 1px solid var(--mc-linea, #dfe2e8); border-radius: 8px; }
.rb-pp-diseno figcaption { font-size: 13.5px; overflow-wrap: anywhere; }
.rb-pp-vacio { margin: 0; }
/* La prueba en el carrito, la compra y el pedido */
.rb-pp-linea { display: flex; gap: 8px; align-items: center; margin-top: 6px; overflow-wrap: anywhere; }
.rb-pp-mini { width: 64px; height: 64px; object-fit: contain; background: #fff; border: 1px solid var(--mc-linea, #dfe2e8); border-radius: 6px; }
/* La caja de compra del módulo: el cuadro de texto largo (v2.1) como los demás campos,
   y las casillas sin el alto de 44 px de los campos de texto. */
.mc-ficha-compra textarea { width: 100%; min-height: 44px; padding: 9px 12px; font: inherit; border: 1px solid #b9bfca;
  border-radius: 8px; background: #fff; color: var(--mc-tinta, #14161a); resize: vertical; }
.mc-ficha-compra input[type="radio"], .mc-ficha-compra input[type="checkbox"] { min-height: 0; padding: 0; }
/* =====================================================================
   FASE 6b (18/10/2026) — la PIEZA de la ficha, como el personalizador de
   la portada: la foto en su forma al momento, la zona para soltarla y la
   prueba del servidor dentro de la misma pieza.
   ===================================================================== */
.rb-pp-pieza { display: grid; justify-items: center; gap: 6px; margin: 0 0 12px; padding: 14px; border-radius: 14px;
  background: radial-gradient(circle at 30% 20%, #fff 0, var(--mc-crudo, #f4f5f8) 70%); }
.rb-pp-svg { display: block; width: auto; height: auto; max-width: min(100%, 320px); max-height: 300px; aspect-ratio: auto;
  filter: drop-shadow(0 6px 14px rgba(20, 22, 26, .18)); }
.rb-pp-svg-txt { fill: #8A8A96; font-family: inherit; font-weight: 700; }
.rb-pp-pieza-pie { margin: 0; font-size: 13.5px; color: var(--mc-suave, #5b6170); text-align: center; }
.rb-pp .rb-pp-zona { position: relative; display: grid; gap: 2px; justify-items: center; text-align: center; padding: 16px 12px;
  border: 2px dashed #b9bfca; border-radius: 12px; background: var(--mc-fondo, #fff); cursor: pointer; transition: border-color .2s, background .2s; }
.rb-pp .rb-pp-zona:hover, .rb-pp .rb-pp-zona.encima, .rb-pp .rb-pp-zona:focus-within { border-color: var(--mc-marca, #1d4ed8); background: #f3f6ff; }
.rb-pp .rb-pp-zona input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rb-pp .rb-pp-zona strong { font-size: 16px; }
.rb-pp .rb-pp-zona small { font-size: 13.5px; color: var(--mc-suave, #5b6170); }
.rb-pp-subir .rb-pp-nota { margin-top: 8px; }
.rb-pp-comprobando.rb-pp-bien { color: var(--mc-bien, #1d6b34); }
.rb-pp-comprobando.rb-pp-aviso { color: var(--mc-aviso, #b26a00); }
.rb-pp-prueba-cab { margin: 0 0 6px; padding: 8px 10px; border-left: 4px solid var(--mc-bien, #1d6b34); background: var(--mc-crudo, #f4f5f8);
  border-radius: 6px; font-size: 14px; }
.rb-pp-prueba-cab.rb-pp-revisar { border-left-color: var(--mc-aviso, #b26a00); }
.rb-pp-traida { margin: 0 0 6px; font-weight: 700; color: var(--mc-bien, #1d6b34); }
@media (prefers-reduced-motion: reduce) { .rb-pp .rb-pp-zona { transition: none; } }
/* =====================================================================
   FASE 6d (19/10/2026) — COLOCAR la foto en la pieza: arrastrarla,
   ampliarla (barra, botones, rueda, pellizco), girarla y centrarla.
   ===================================================================== */
.rb-pp-svg.rb-pp-editable { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 4px; }
.rb-pp-svg.rb-pp-editable.rb-pp-moviendo { cursor: grabbing; }
.rb-pp-svg.rb-pp-editable:focus-visible { outline: 3px solid var(--mc-marca, #1d4ed8); outline-offset: 4px; }
.rb-pp-ajustes { width: 100%; max-width: 380px; display: grid; gap: 6px; }
.rb-pp-ajuste { display: flex; align-items: center; justify-content: center; gap: 8px; }
.rb-pp-ajuste-otros { flex-wrap: wrap; }
.rb-pp .rb-pp-ajuste-boton { min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--mc-linea, #dfe2e8); border-radius: 8px;
  background: var(--mc-fondo, #fff); color: var(--mc-tinta, #14161a); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.rb-pp .rb-pp-ajuste-boton:hover { border-color: var(--mc-marca, #1d4ed8); }
.rb-pp .rb-pp-ajuste-boton:focus-visible { outline: 3px solid var(--mc-marca, #1d4ed8); outline-offset: 2px; }
.rb-pp .rb-pp-barra { flex: 1 1 auto; min-width: 0; height: 40px; margin: 0; padding: 0; accent-color: var(--mc-marca, #1d4ed8); }
.rb-pp-calidad { margin: 0; font-size: 13.5px; font-weight: 700; text-align: center; }
.rb-pp-calidad.rb-pp-bien { color: var(--mc-bien, #1d6b34); }
.rb-pp-calidad.rb-pp-aviso { color: var(--mc-aviso, #b26a00); }
.rb-pp-prueba-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rb-pp-prueba-mini { flex: 0 0 auto; display: block; line-height: 0; }
.rb-pp-prueba-mini img { width: 64px; height: 64px; object-fit: contain; background: #fff; border: 1px solid var(--mc-linea, #dfe2e8); border-radius: 6px; }
.rb-pp-prueba-cab.rb-pp-actualizando { opacity: .55; }