/* ================================================================
   SEMCODAR BRANDBOOK — SECTION: BARRA DE PROGRESSO (11)
   ================================================================ */

/* ── Showcase card ── */
.pb-showcase {
  margin-bottom: 64px;
}

.pb-showcase__screen {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 220px;
  border-radius: var(--r-lg);
}

/* Simulated progress bar at top of screen */
.pb-showcase__bar-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: color-mix(in srgb, var(--c-blue) 8%, transparent);
}

.pb-showcase__bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--c-blue),
    var(--c-purple),
    #C49AFF,
    var(--c-green)
  );
  background-size: 200% 100%;
  animation: progress-shimmer 3s linear infinite;
  border-radius: 0 2px 2px 0;
  box-shadow:
    0 0 12px rgba(175, 109, 255, 0.55),
    0 0 4px rgba(0, 88, 212, 0.4);
  transition: width 80ms linear;
  width: 72%;
}

.pb-showcase__dot {
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, var(--c-purple) 60%);
  box-shadow:
    0 0 12px 4px rgba(175, 109, 255, 0.85),
    0 0 24px 8px rgba(175, 109, 255, 0.35);
}

/* Simulated UI inside screen */
.pb-showcase__content {
  display: flex;
  padding: 20px 20px 24px;
  gap: 20px;
  margin-top: 3px;
}

.pb-showcase__sidebar-sim {
  width: 100px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 20px;
  border-right: 1px solid var(--border-sub);
  padding-top: 8px;
}

.pb-showcase__body-sim {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}

/* Skeleton lines */
.pb-line {
  border-radius: 4px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  height: 8px;
}
.pb-line--short  { width: 55%; }
.pb-line--medium { width: 75%; }
.pb-line--long   { width: 90%; }
.pb-line--full   { width: 100%; }
.pb-line--half   { width: 50%; }
.pb-line--title  { width: 70%; height: 14px; background: color-mix(in srgb, var(--text) 16%, transparent); margin-bottom: 4px; }

.pb-showcase__cards-sim {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.pb-sim-card {
  flex: 1;
  height: 50px;
  border-radius: var(--r-sm);
  opacity: 0.4;
}
.pb-sim-card--blue   { background: linear-gradient(135deg, var(--c-blue) 0%, color-mix(in srgb, var(--c-blue) 40%, transparent) 100%); }
.pb-sim-card--purple { background: linear-gradient(135deg, var(--c-purple) 0%, color-mix(in srgb, var(--c-purple) 40%, transparent) 100%); }
.pb-sim-card--green  { background: linear-gradient(135deg, var(--c-green) 0%, color-mix(in srgb, var(--c-green) 40%, transparent) 100%); }

.pb-showcase__pct {
  position: absolute;
  top: 14px;
  right: 20px;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--c-purple);
  background: color-mix(in srgb, var(--c-purple) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-purple) 22%, transparent);
  padding: 3px 10px;
  border-radius: 100px;
}

/* ── Slider control ── */
.pb-showcase__control {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pb-control__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-3);
  text-transform: uppercase;
}

.pb-control__range {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--c-blue),
    var(--c-purple),
    #C49AFF,
    var(--c-green)
  );
  background-size: 200% 100%;
  outline: none;
  cursor: pointer;
  animation: progress-shimmer 3s linear infinite;
}
.pb-control__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--c-purple);
  box-shadow: 0 0 10px rgba(175,109,255,0.5);
  cursor: grab;
  transition: box-shadow var(--t-fast);
}
.pb-control__range::-webkit-slider-thumb:active {
  cursor: grabbing;
  box-shadow: 0 0 18px rgba(175,109,255,0.8);
}
.pb-control__range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--c-purple);
  box-shadow: 0 0 10px rgba(175,109,255,0.5);
  cursor: grab;
}

/* ── Section sub-title ── */
.pb-section-title {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 24px;
  margin-top: 16px;
}

/* ── Anatomy card ── */
.pb-anatomy {
  padding: 28px;
  margin-bottom: 52px;
}

.pb-anatomy__bar-area {
  position: relative;
  padding-bottom: 90px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border-sub);
}

.pb-anatomy__bar-full {
  height: 8px;
  background: color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 4px;
  margin-bottom: 0;
  overflow: visible;
  position: relative;
}

.pb-anatomy__bar-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--c-blue),
    var(--c-purple),
    #C49AFF,
    var(--c-green)
  );
  background-size: 200% 100%;
  animation: progress-shimmer 3s linear infinite;
  border-radius: 4px;
  box-shadow:
    0 0 12px rgba(175,109,255,0.5),
    0 0 4px rgba(0,88,212,0.35);
}

.pb-anatomy__bar-dot {
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, var(--c-purple) 60%);
  box-shadow:
    0 0 12px 4px rgba(175,109,255,0.85),
    0 0 24px 8px rgba(175,109,255,0.35);
}

/* Callouts */
.pb-callout {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  font-family: var(--f-mono);
  color: var(--text-2);
  white-space: nowrap;
}
.pb-callout__line {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
}
.pb-callout__badge {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-purple);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: -2px;
}

.pb-callout--gradient { top: 16px; left: 15%; }
.pb-callout--gradient .pb-callout__line { height: 14px; }

.pb-callout--shimmer { top: 16px; left: 40%; }
.pb-callout--shimmer .pb-callout__line { height: 14px; }

.pb-callout--glow { top: 40px; left: 28%; }
.pb-callout--glow .pb-callout__line { height: 38px; }

.pb-callout--dot { top: 16px; right: 2%; }
.pb-callout--dot .pb-callout__line { height: 14px; }

/* Specs table */
.pb-anatomy__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.pb-spec {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-sm);
}
.pb-spec__key {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pb-spec__val code {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-blue);
}

/* ── Gradient section ── */
.pb-gradient-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 52px;
  align-items: start;
}

.pb-gradient-preview {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pb-gradient-bar {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--c-blue),
    var(--c-purple),
    #C49AFF,
    var(--c-green)
  );
  background-size: 200% 100%;
  animation: progress-shimmer 3s linear infinite;
  box-shadow:
    0 0 18px rgba(175,109,255,0.5),
    0 0 6px rgba(0,88,212,0.35);
}

.pb-gradient-stops {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pb-stop {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pb-stop__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.pb-stop__var {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-blue);
  background: color-mix(in srgb, var(--c-blue) 10%, transparent);
  padding: 2px 7px;
  border-radius: 4px;
}
.pb-stop__hex {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--text-3);
}
.pb-stop__pos {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--text-3);
  margin-left: auto;
}

/* Code block */
.pb-gradient-code {
  padding: 0;
  overflow: hidden;
  font-size: 0;
}

.pb-code__header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-sub);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}
.pb-code__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.pb-code__dot--red    { background: #FF5F57; }
.pb-code__dot--yellow { background: #FEBC2E; }
.pb-code__dot--green  { background: #28C840; }
.pb-code__label {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--text-3);
  margin-left: 4px;
}

.pb-code__body {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
}
.pb-code__body code {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.75;
  color: var(--text-2);
  display: block;
}

/* ── Dot section ── */
.pb-dot-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 52px;
  align-items: start;
}

.pb-dot-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 32px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border: 1px solid var(--border-sub);
  border-radius: var(--r-lg);
}

.pb-dot-track {
  width: 100%;
  height: 6px;
  background: color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 3px;
  overflow: visible;
  position: relative;
}

.pb-dot-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 75%;
  background: linear-gradient(90deg, var(--c-blue), var(--c-purple));
  border-radius: 3px;
}

.pb-dot-lead {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pb-dot-core {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, var(--c-purple) 60%);
  box-shadow:
    0 0 12px 4px rgba(175,109,255,0.85),
    0 0 24px 8px rgba(175,109,255,0.35);
  z-index: 2;
  position: relative;
}

.pb-dot-halo {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(175,109,255,0.3) 0%, transparent 70%);
  animation: pb-halo-pulse 2s ease-in-out infinite;
}
.pb-dot-halo--outer {
  inset: -14px;
  animation-delay: 0.4s;
  opacity: 0.5;
}

@keyframes pb-halo-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%       { transform: scale(1.2); opacity: 0.3; }
}

.pb-dot-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--text-3);
}
.pb-dot-label code {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-purple);
  background: color-mix(in srgb, var(--c-purple) 10%, transparent);
  padding: 1px 6px;
  border-radius: 3px;
}

.pb-dot-specs {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pb-dot-spec-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-sub);
}
.pb-dot-spec-item:last-child { border-bottom: none; }

.pb-dot-spec__key {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.pb-dot-spec__val code {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-purple);
}

/* ── Script card ── */
.pb-script-card {
  padding: 0;
  overflow: hidden;
  margin-bottom: 16px;
}

.pb-script-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-sub);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.pb-script-card__header i { color: var(--c-green); }

.pb-script-card__code {
  margin: 0;
  padding: 20px;
  overflow-x: auto;
}
.pb-script-card__code code {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-2);
  display: block;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .pb-gradient-section { grid-template-columns: 1fr; }
  .pb-dot-section      { grid-template-columns: 1fr; }
  .pb-anatomy__specs   { grid-template-columns: 1fr 1fr; }
  .pb-showcase__sidebar-sim { display: none; }
}

@media (max-width: 600px) {
  .pb-anatomy__specs   { grid-template-columns: 1fr; }
  .pb-callout { display: none; }
  .pb-anatomy__bar-area { padding-bottom: 20px; }
}