/* Cinturón BJJ — visual Modelo 1 (todos colores / grados / edades / planes) */

.jjp-belt__strip {
  --belt-body: #3f3f46;
  --belt-tip: #0a0a0a;
  --belt-stripe: #f8fafc;
  --belt-glow: rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 17.5rem;
  height: 1.7rem;
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.65),
    0 4px 14px rgba(0, 0, 0, 0.35);
}

.jjp-belt__body {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, transparent 42%, rgba(0, 0, 0, 0.22) 100%),
    var(--belt-body);
}

.jjp-belt__mid {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 30%;
  transform: translateY(-50%);
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.jjp-belt__strip[data-belt-variant="mid_white"] .jjp-belt__mid {
  display: block;
  background: #f8fafc;
}

.jjp-belt__strip[data-belt-variant="mid_black"] .jjp-belt__mid {
  display: block;
  background: #0a0a0a;
}

.jjp-belt__strip[data-belt-variant="coral_rb"] .jjp-belt__body,
.jjp-belt__strip[data-belt-variant="coral"] .jjp-belt__body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, transparent 42%, rgba(0, 0, 0, 0.22) 100%),
    repeating-linear-gradient(90deg, #c41e1e 0 20%, #0a0a0a 20% 40%);
}

.jjp-belt__strip[data-belt-variant="coral_rw"] .jjp-belt__body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, transparent 42%, rgba(0, 0, 0, 0.22) 100%),
    repeating-linear-gradient(90deg, #c41e1e 0 20%, #f4f4f5 20% 40%);
}

.jjp-belt__strip[data-belt-variant="coral_rb"] .jjp-belt__mid,
.jjp-belt__strip[data-belt-variant="coral_rw"] .jjp-belt__mid,
.jjp-belt__strip[data-belt-variant="coral"] .jjp-belt__mid {
  display: none !important;
}

.jjp-belt__rank {
  flex: 0 0 2.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0 0.32rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 45%),
    var(--belt-tip);
  border-left: 1px solid rgba(0, 0, 0, 0.4);
}

.jjp-belt__strip[data-belt-base="negro"] .jjp-belt__rank,
.jjp-belt__strip[data-belt-tip="red"] .jjp-belt__rank {
  flex-basis: 3.35rem;
}

/* Coral 7º/8º: misma puntera (ancho/gap); colores distintos + tiritas rojas */
.jjp-belt__strip[data-belt-tip="coral7"] .jjp-belt__rank,
.jjp-belt__strip[data-belt-tip="coral8"] .jjp-belt__rank {
  flex-basis: 4.15rem;
  gap: 0.16rem;
  padding: 0 0.3rem;
  border-left: 2px solid #c41e1e;
  border-right: 2px solid #c41e1e;
}

.jjp-belt__strip[data-belt-tip="coral7"] .jjp-belt__rank {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 45%, rgba(0, 0, 0, 0.06) 100%),
    #ffffff;
}

.jjp-belt__strip[data-belt-tip="coral8"] .jjp-belt__rank {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 45%, rgba(0, 0, 0, 0.28) 100%),
    #0a0a0a;
}

.jjp-belt__strip[data-belt-marks="8"][data-belt-tip="coral7"] .jjp-belt__rank,
.jjp-belt__strip[data-belt-marks="8"][data-belt-tip="coral8"] .jjp-belt__rank {
  flex-basis: 4.55rem;
  gap: 0.14rem;
  padding: 0 0.28rem;
}

.jjp-belt__stripe {
  display: block;
  width: 0.2rem;
  height: 70%;
  border-radius: 1px;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.jjp-belt__stripe.is-on {
  background: var(--belt-stripe);
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.35);
}

.jjp-belt__strip[data-belt-tip="coral7"] .jjp-belt__stripe.is-on {
  width: 0.18rem;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
}

.jjp-belt__strip[data-belt-tip="coral8"] .jjp-belt__stripe.is-on {
  width: 0.18rem;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.25);
}

.jjp-belt__strip[data-belt-tip="white"] {
  --belt-tip: #f4f4f5;
  --belt-stripe: #b91c1c;
}

.jjp-belt__strip[data-belt-tip="red"] {
  --belt-tip: #b91c1c;
  --belt-stripe: #f8fafc;
}

.jjp-belt__strip[data-belt-tip="coral7"] {
  --belt-tip: #ffffff;
  --belt-stripe: #0a0a0a;
}

.jjp-belt__strip[data-belt-tip="coral8"] {
  --belt-tip: #0a0a0a;
  --belt-stripe: #f8fafc;
}

.jjp-belt__strip[data-belt-base="void"] { --belt-body: #27272a; }
.jjp-belt__strip[data-belt-base="blanco"] { --belt-body: #f1f1f3; }
.jjp-belt__strip[data-belt-base="gris"] { --belt-body: #8b8f97; }
.jjp-belt__strip[data-belt-base="amarillo"] { --belt-body: #f0c41a; }
.jjp-belt__strip[data-belt-base="naranja"] { --belt-body: #ef7a18; }
.jjp-belt__strip[data-belt-base="verde"] { --belt-body: #2f7a3a; }
.jjp-belt__strip[data-belt-base="azul"] { --belt-body: #1d4ed8; }
.jjp-belt__strip[data-belt-base="morado"] { --belt-body: #6d28d9; }
.jjp-belt__strip[data-belt-base="marron"] { --belt-body: #7c2d12; }
.jjp-belt__strip[data-belt-base="negro"] { --belt-body: #0a0a0a; }
.jjp-belt__strip[data-belt-base="coral"] { --belt-body: #b91c1c; }

/* Blanco: tip negro + rayas blancas ok; body más defined edge */
.jjp-belt__strip[data-belt-base="blanco"] {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 4px 14px rgba(0, 0, 0, 0.28);
}

/* Marca pública: plantilla única + capas de cinta (código, no fotos) */
.jjp-belt-mark {
  display: block;
  margin: 0.4rem 0 0.55rem;
  padding: 0;
  border: 0;
  background: transparent;
  width: fit-content;
  max-width: 100%;
}

.jjp-belt-mark--pro {
  width: min(100%, 15.5rem);
}

.jjp-belt-pro {
  position: relative;
  height: 1.55rem;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.4));
}

.jjp-belt-pro__rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1.35rem;
  display: flex;
  border-radius: 3px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 3px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.55);
}

.jjp-belt-pro__body {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--belt-body, #6d28d9);
}

.jjp-belt-pro__grain {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 3px,
      rgba(0, 0, 0, 0.06) 3px 4px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 2px,
      rgba(255, 255, 255, 0.04) 2px 3px
    );
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.jjp-belt-pro__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.38) 0%,
    rgba(255, 255, 255, 0.08) 38%,
    transparent 52%,
    rgba(0, 0, 0, 0.28) 100%
  );
  pointer-events: none;
}

.jjp-belt-pro__mid {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 28%;
  transform: translateY(-50%);
  pointer-events: none;
}

.jjp-belt-mark--pro[data-belt-variant="mid_white"] .jjp-belt-pro__mid {
  display: block;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.jjp-belt-mark--pro[data-belt-variant="mid_black"] .jjp-belt-pro__mid {
  display: block;
  background: #0a0a0a;
}

.jjp-belt-mark--pro[data-belt-variant="coral_rb"] .jjp-belt-pro__body,
.jjp-belt-mark--pro[data-belt-variant="coral"] .jjp-belt-pro__body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 42%, rgba(0, 0, 0, 0.2) 100%),
    repeating-linear-gradient(90deg, #c41e1e 0 20%, #0a0a0a 20% 40%);
}

.jjp-belt-mark--pro[data-belt-variant="coral_rw"] .jjp-belt-pro__body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 42%, rgba(0, 0, 0, 0.2) 100%),
    repeating-linear-gradient(90deg, #c41e1e 0 20%, #f4f4f5 20% 40%);
}

.jjp-belt-mark--pro[data-belt-variant="coral_rb"] .jjp-belt-pro__mid,
.jjp-belt-mark--pro[data-belt-variant="coral_rw"] .jjp-belt-pro__mid,
.jjp-belt-mark--pro[data-belt-variant="coral"] .jjp-belt-pro__mid {
  display: none !important;
}

.jjp-belt-pro__tip {
  position: relative;
  flex: 0 0 2.75rem;
  background: var(--belt-tip, #0c0c0c);
  border-left: 1px solid rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jjp-belt-mark--pro[data-belt-base="negro"] .jjp-belt-pro__tip,
.jjp-belt-mark--pro[data-belt-tip="red"] .jjp-belt-pro__tip {
  flex-basis: 3.15rem;
}

.jjp-belt-mark--pro[data-belt-tip="coral7"] .jjp-belt-pro__tip,
.jjp-belt-mark--pro[data-belt-tip="coral8"] .jjp-belt-pro__tip {
  flex-basis: 4rem;
  border-left: 2px solid #c41e1e;
  border-right: 2px solid #c41e1e;
}

.jjp-belt-mark--pro[data-belt-tip="coral7"] .jjp-belt-pro__tip {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 45%, rgba(0, 0, 0, 0.06) 100%),
    #ffffff;
}

.jjp-belt-mark--pro[data-belt-tip="coral8"] .jjp-belt-pro__tip {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 45%, rgba(0, 0, 0, 0.28) 100%),
    #0a0a0a;
}

.jjp-belt-mark--pro[data-belt-marks="8"][data-belt-tip="coral7"] .jjp-belt-pro__tip,
.jjp-belt-mark--pro[data-belt-marks="8"][data-belt-tip="coral8"] .jjp-belt-pro__tip {
  flex-basis: 4.4rem;
}

.jjp-belt-pro__tip-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16),
    transparent 45%,
    rgba(0, 0, 0, 0.25)
  );
  pointer-events: none;
}

.jjp-belt-mark--pro[data-belt-tip="coral7"] .jjp-belt-pro__tip-sheen {
  opacity: 0.45;
}

.jjp-belt-mark--pro[data-belt-tip="coral8"] .jjp-belt-pro__tip-sheen {
  opacity: 0.35;
}

.jjp-belt-pro__tapes {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.22rem;
  height: 72%;
  padding: 0 0.28rem;
}

.jjp-belt-mark--pro[data-belt-tip="coral7"] .jjp-belt-pro__tapes,
.jjp-belt-mark--pro[data-belt-tip="coral8"] .jjp-belt-pro__tapes {
  gap: 0.16rem;
  padding: 0 0.26rem;
}

.jjp-belt-mark--pro[data-belt-marks="8"][data-belt-tip="coral7"] .jjp-belt-pro__tapes,
.jjp-belt-mark--pro[data-belt-marks="8"][data-belt-tip="coral8"] .jjp-belt-pro__tapes {
  gap: 0.14rem;
}

/* “Cinta adhesiva” blanca (o roja en punta blanca) — se apilan según dan */
.jjp-belt-pro__tape {
  width: 0.2rem;
  border-radius: 1px;
  background:
    linear-gradient(90deg, #d4d4d4 0%, #fff 40%, #ededed 100%);
  box-shadow:
    0.5px 0 0 rgba(0, 0, 0, 0.35),
    -0.5px 0 0 rgba(255, 255, 255, 0.35),
    0 1px 1px rgba(0, 0, 0, 0.25);
  transform: rotate(calc((var(--i, 0) - 1.5) * 0.6deg));
}

.jjp-belt-pro__tape.is-red {
  background: linear-gradient(90deg, #9f1239 0%, #ef4444 45%, #b91c1c 100%);
}

.jjp-belt-pro__tape.is-dark {
  background: linear-gradient(90deg, #1a1a1a 0%, #0a0a0a 45%, #2a2a2a 100%);
}

/* Coral: cintas rectas (mismo criterio limpio que el strip del editor) */
.jjp-belt-mark--pro[data-belt-tip="coral7"] .jjp-belt-pro__tape,
.jjp-belt-mark--pro[data-belt-tip="coral8"] .jjp-belt-pro__tape {
  width: 0.18rem;
  transform: none;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}

.jjp-belt-mark--pro[data-belt-tip="coral8"] .jjp-belt-pro__tape {
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.2);
}

.cli-preview__belt,
.perfil-hero__belt,
.perfil-free-hero__belt,
.perfil-free-card__belt {
  margin: 0.35rem 0 0.75rem;
}

@media (min-width: 720px) {
  .jjp-belt-mark--pro {
    width: 16.5rem;
  }

  .jjp-belt-pro {
    height: 1.65rem;
  }

  .jjp-belt-pro__rail {
    height: 1.45rem;
  }
}