:root {
    --panel: #121417;
    --panel-2: #0f1114;
    --text: #e8edf2;
    --accent-2: #845ef7;
    --border: #252a32;

    --focus-ring: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

:focus {
    outline: 3px solid #6ea8fe;
    outline-offset: 2px
}

:focus:not(:focus-visible) {
    outline: none
}

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: .5rem
}

.badge-kpi {
    background: var(--button-bg-color);
    color: #000000;
    font-weight: 700;
    border-radius: .5rem;
    padding: 10px;
    font-size: 0.8rem;
}

.badge-state {
    background: var(--accent-2)
}

.list-group-item {
    background: var(--panel-2);
    color: var(--text)
}

.list-group-item + .list-group-item {
    border-top-color: var(--border)
}

.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    padding: .8rem 1rem;
    border-radius: .5rem
}

.btn-ghost[aria-disabled="true"] {
    opacity: .65
}

.course-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: .5rem;
    background: #15181c
}

.course-card img {
    height: 180px;
    object-fit: cover;
    width: 100%
}

.course-card .title {
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    padding: .35rem .6rem;
    /*font-weight: 600*/
}

/* Velo inferior con estado */
.course-card .bottom-veil {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 35px;
    background: rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    /*font-weight: 600*/
}

/* Progreso en la parte inferior del card */
.course-card .card-body {
    padding-top: .5rem;
    padding-bottom: .75rem
}

.progress-bar {
    background: var(--button-bg-color);
    color: #000000;
    font-weight: bold;
}

.course-card .progress {
    height: .8rem;
    background: #31363f;
    border-radius: 999px
}

.course-card .progress-bar {
    /*background: #198754;*/
    font-size: .75rem
}

.course-card.locked {
    filter: grayscale(1)
}

.course-card.locked .progress-bar {
    background: #7f8c98
}

.course-card.locked .bottom-veil {
    background: rgba(0, 0, 0, .75)
}

.h-section {
    margin-top: 1.5rem;
    margin-bottom: .75rem
}

.small-muted {
    color: #FFFFFF;
    font-size: .925rem
}

/* INICIO: Estilos asociados al botón de inscripción/descarga del ceritificado y el modal */

button:focus, [href]:focus, input:focus, select:focus, textarea:focus, [tabindex]:not([tabindex="-1"]):focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

.modal-loader {
    position: absolute;
    inset: 0;
    z-index: 1060;
}

.modal-loader[hidden] {
    display: none;
}

.modal-loader__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .72);
}

.modal-loader__panel {
    position: absolute;
    inset: 0;
    /*display: grid;*/
    place-content: center;
    gap: .75rem;
    text-align: center;
    padding: 2rem;
}

#headerSummary {
    line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
    .spinner-border {
        animation: none !important;
    }

    .modal.fade .modal-dialog {
        transition: none !important;
    }

    .collapse {
        transition: none !important;
    }
}

/* FIN: Estilos asociados al botón de inscripción/descarga del ceritificado y el modal */