/* ══════════════════════════════════════════════════════════════
   REGISTRO MARKETPLACE — pantalla de bienvenida + selector de rol.
   Rediseñado 24/08/2026 (v3): ilustración de calidad con sombras y
   degradados en capas, tarjetas con icono en caja degradada, ancho
   fijo (nunca flex sin límite). Verificado en archivo de vista previa
   independiente antes de integrarlo aquí.
══════════════════════════════════════════════════════════════ */
.mp-registro-wrapper{
  max-width:960px;margin:50px auto;display:grid;
  grid-template-columns:380px 1fr;gap:0;
  border-radius:28px;overflow:hidden;box-shadow:0 30px 70px rgba(15,31,66,.22);
  background:#fff;
}
.mp-registro-wrapper--codigo{grid-template-columns:1fr;max-width:480px;}

.mp-registro-lado{background:linear-gradient(160deg,#1A2E5A 0%,#12234A 55%,#0A1730 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.mp-registro-lado svg{display:block;width:100%;height:100%;}

.mp-registro-form{padding:52px 46px;text-align:left;}
.mp-registro-form .ma-eyebrow,
.mp-registro-form .ma-title,
.mp-registro-form .ma-sub{text-align:left;}
.mp-registro-form .ma-form-errors{text-align:left;}
.mp-registro-form .ma-title{font-family:Georgia,serif;}

/* ── Badge del rol elegido — visible en el formulario de datos, nunca solo
   en un campo oculto que el usuario no puede confirmar. Añadido: 24/08/2026. ── */
.mp-rol-badge{
  display:flex;align-items:center;gap:10px;background:#F5F8FF;border:1.5px solid #DCE6FF;
  border-radius:12px;padding:12px 16px;margin-bottom:22px;font-size:13px;color:#4A5568;
}
.mp-rol-badge svg{width:18px;height:18px;color:var(--navy);flex-shrink:0;}
.mp-rol-badge strong{color:var(--navy);}

/* ── Tarjetas de rol — ancho fijo 160px, icono en caja con degradado ── */
.mp-rol-tarjetas{display:flex;gap:14px;margin-bottom:30px;}
.mp-rol-card{
  width:160px;flex:0 0 160px;text-align:center;background:#FAFBFD;
  border:2px solid var(--line);border-radius:16px;padding:22px 14px;
  cursor:pointer;transition:.2s;
}
.mp-rol-card:hover{border-color:var(--lime);background:#fff;transform:translateY(-3px);box-shadow:0 12px 24px rgba(26,46,90,.1);}
.mp-rol-card.sel{border-color:var(--navy);background:linear-gradient(135deg,#F5F8FF,#EAF5FF);box-shadow:0 0 0 2px var(--navy) inset;}
.mp-rol-icon-wrap{
  width:46px;height:46px;border-radius:12px;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1A2E5A,#243B73);
}
.mp-rol-icon-wrap svg{width:22px;height:22px;color:#fff;}
.mp-rol-card strong{display:block;font-size:14px;color:var(--navy);margin-bottom:4px;}
.mp-rol-card span{display:block;font-size:11px;color:#8A94A6;line-height:1.4;}

/* ── Pantalla de código — sí centrada, es un paso corto y puntual ── */
.mp-registro-wrapper--codigo .mp-registro-form{text-align:center;padding:44px 36px;}
.mp-registro-wrapper--codigo .ma-eyebrow,
.mp-registro-wrapper--codigo .ma-title,
.mp-registro-wrapper--codigo .ma-sub{text-align:center;}

@media (max-width:760px){
  .mp-registro-wrapper{grid-template-columns:1fr;margin:20px 16px;}
  .mp-registro-lado{height:220px;}
  .mp-registro-form{padding:34px 26px;}
  .mp-rol-tarjetas{justify-content:center;flex-wrap:wrap;}
}

/* ── Pantalla de reglas del Marketplace — necesita más espacio horizontal
   que las tarjetas simples, así que el contenedor se ensancha (sin la
   ilustración lateral) mientras se muestra. Añadido: 24/08/2026. ── */
.mp-registro-wrapper--ancho{grid-template-columns:1fr;max-width:820px;}
.mp-registro-wrapper--ancho .mp-registro-lado{display:none;}
.mp-registro-wrapper--ancho .mp-registro-form{padding:44px 48px;}

.mp-reglas-titel{font-family:Georgia,serif;font-size:24px;color:var(--navy);margin-bottom:10px;}
.mp-reglas-columnas{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:28px;}
.mp-reglas-col{min-width:0;}
.mp-reglas-col-head{
  display:flex;align-items:center;gap:9px;font-family:Georgia,serif;font-size:15px;
  color:var(--navy);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--line);
}
.mp-reglas-col-head svg{width:20px;height:20px;color:#fff;background:linear-gradient(135deg,#1A2E5A,#243B73);border-radius:8px;padding:4px;box-sizing:content-box;}
.mp-reglas-col-head--koper svg{background:linear-gradient(135deg,#0095FF,#0072E0);}
.mp-reglas-lijst{list-style:none;counter-reset:mp-regla;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;}
.mp-reglas-lijst li{
  counter-increment:mp-regla;position:relative;padding-left:30px;
  font-size:12.5px;color:#4A5568;line-height:1.55;
}
.mp-reglas-lijst li::before{
  content:counter(mp-regla);position:absolute;left:0;top:0;
  width:20px;height:20px;border-radius:50%;background:#F5F8FA;border:1.5px solid var(--line);
  color:var(--navy);font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;
}

@media (max-width:700px){
  .mp-reglas-columnas{grid-template-columns:1fr;gap:24px;}
  .mp-registro-wrapper--ancho .mp-registro-form{padding:30px 24px;}
}