/**
 * Barras Pukiebook — occupancy, lectura TOS, upload y pace.
 * Colores SOLO desde global.css (--pkb-color-*). Cargar después de global.css.
 */
:root {
    --pkb-bar-solid: var(--pkb-color-primary);
    --pkb-bar-fill: linear-gradient(
        90deg,
        var(--pkb-color-primary-deep) 0%,
        var(--pkb-color-primary) 55%,
        var(--pkb-color-primary-hover) 100%
    );
    --pkb-bar-glow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 10px var(--pkb-color-glow);
    --pkb-bar-track: #e8eaee;
    --pkb-bar-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 58%);
}

.progress-group .progress,
.progress-group .progress.sm,
.progress.sm {
    height: 8px !important;
    margin-bottom: 12px;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--pkb-bar-track) !important;
    background-image: none !important;
    box-shadow: inset 0 1px 2px rgba(16, 18, 24, 0.14);
}

.progress-bar.progress-bar-pkb,
.progress-bar-pkb,
.progress-bar.progress-bar-primary,
.progress-bar-primary {
    position: relative;
    height: 100%;
    border-radius: 999px;
    background-color: var(--pkb-bar-solid) !important;
    background-image: var(--pkb-bar-fill) !important;
    box-shadow: var(--pkb-bar-glow);
    -webkit-transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.progress-bar.progress-bar-pkb::after,
.progress-bar-pkb::after,
.progress-bar.progress-bar-primary::after,
.progress-bar-primary::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    background: var(--pkb-bar-sheen);
    pointer-events: none;
}

.reading-progress {
    height: 8px !important;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--pkb-bar-track) !important;
    background-image: none !important;
    box-shadow: inset 0 1px 2px rgba(16, 18, 24, 0.14);
}

.reading-progress .progress-bar {
    position: relative;
    height: 100% !important;
    border-radius: 999px;
    background-color: var(--pkb-bar-solid) !important;
    background-image: var(--pkb-bar-fill) !important;
    box-shadow: var(--pkb-bar-glow);
    -webkit-transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.progress:has(.progress-bar-striped),
.progress:has(.progress-bar-animated) {
    height: 8px !important;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--pkb-bar-track) !important;
    box-shadow: inset 0 1px 2px rgba(16, 18, 24, 0.14);
}

.progress .progress-bar-striped,
.progress .progress-bar.active,
.progress .progress-bar-animated {
    border-radius: 999px;
    background-color: var(--pkb-bar-solid) !important;
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.18) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0.18) 75%,
        transparent 75%,
        transparent
    ) !important;
    background-size: 1rem 1rem !important;
    box-shadow: var(--pkb-bar-glow);
}

.pace .pace-progress {
    background: var(--pkb-bar-solid) !important;
    background-image: var(--pkb-bar-fill) !important;
}

body.dark-mode .progress-group .progress,
body.dark-mode .progress-group .progress.sm,
body.dark-mode .progress.sm,
body.dark-mode .reading-progress,
body.dark-mode .progress:has(.progress-bar-striped),
.dark-mode .progress-group .progress,
.dark-mode .progress-group .progress.sm,
.dark-mode .progress.sm,
.dark-mode .reading-progress,
.dark-mode .progress:has(.progress-bar-striped) {
    background-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

body.dark-mode .progress-bar.progress-bar-pkb,
body.dark-mode .progress-bar-pkb,
body.dark-mode .progress-bar.progress-bar-primary,
body.dark-mode .progress-bar-primary,
body.dark-mode .reading-progress .progress-bar,
.dark-mode .progress-bar.progress-bar-pkb,
.dark-mode .progress-bar-pkb,
.dark-mode .progress-bar.progress-bar-primary,
.dark-mode .progress-bar-primary,
.dark-mode .reading-progress .progress-bar {
    background-color: var(--pkb-bar-solid) !important;
    background-image: var(--pkb-bar-fill) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 12px var(--pkb-color-glow);
}