/*
 * OceraOT Character Bars Texture
 * Conserva los colores originales:
 * vida roja, mana azul y experiencia verde.
 * Solo modifica textura, relieve y profundidad.
 */

.ocera-profile-vitals .progress,
.ocera-profile-experience .progress {
  position: relative !important;
  height: 18px !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;

  background:
    radial-gradient(circle at 48% 38%,
      rgba(22, 78, 105, .34) 0%,
      rgba(8, 47, 68, .62) 58%,
      rgba(3, 24, 36, .96) 100%) !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow:
    inset 1px 1px 0 rgba(77, 177, 218, .34),
    inset -1px -1px 0 rgba(0, 5, 9, .92),
    inset 0 0 0 1px rgba(10, 65, 88, .78),
    inset 0 0 8px rgba(0, 0, 0, .48) !important;
}

/* Textura interna común para las tres barras, sin cambiar sus colores. */
.ocera-profile-vitals .progress-bar,
.ocera-profile-experience .progress-bar {
  position: relative !important;
  height: 100% !important;
  border-radius: 0 !important;
  overflow: hidden !important;

  background-image:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.06) 36%,
      rgba(0,0,0,.08) 52%,
      rgba(0,0,0,.28) 100%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.025) 0,
      rgba(255,255,255,.025) 2px,
      rgba(0,0,0,.025) 2px,
      rgba(0,0,0,.025) 4px
    ) !important;

  background-blend-mode: overlay, normal !important;

  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.16),
    inset -1px -1px 0 rgba(0,0,0,.56),
    inset 0 0 6px rgba(0,0,0,.22) !important;
}

/* Bisel superior muy sutil, parecido al de las celdas. */
.ocera-profile-vitals .progress-bar::before,
.ocera-profile-experience .progress-bar::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: rgba(255,255,255,.26) !important;
  pointer-events: none !important;
}

/* Sombra inferior interior para reforzar profundidad. */
.ocera-profile-vitals .progress-bar::after,
.ocera-profile-experience .progress-bar::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 2px !important;
  background: rgba(0,0,0,.30) !important;
  pointer-events: none !important;
}