/* Manage course */
#course-category-listings #category-listing .course-count i{
    margin-left: 6px;
}
#darki-1 {
    display: block;
}
#darki-2 {
    display: none;
}
/* Dashboard dark. */

.dark-dashboard {
    --bs-secondary-color: var(--color-dl-grey-b);
}
.dark-dashboard #darki-1 {
    display: none;
}
.dark-dashboard #darki-2 {
    display: block;
}
.dark-dashboard .btn-close {
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
.dark-dashboard .fp-upload-form .form .fp-formset,
.dark-dashboard .form .fp-formset .form-control-label {
    color: var(--color-dl-grey-a);
}
.dark-dashboard .table.table-striped.table-hover .activityicon {
    background-color: var(--color-dl-grey-a);
    border-radius: 100%;
    padding: 3px;
}
.dark-dashboard .calendarwrapper,
.dark-dashboard .block_calendar_month .h5.card-title,
.dark-dashboard .block_timeline .h5.card-title {
    color: var(--color-dl-grey-a);
}
.dark-dashboard .card.theme-card {
    color: var(--color-dl-yellow-b);
    border: var(--bs-card-border-width) solid var(--color-dl-yellow-b);
}
.dark-dashboard .btn,
.dark-dashboard .userprofile .profile_tree .card-body{
    color: var(--color-dl-grey-a);
}
.dark-dashboard .drawer-toggles .drawer-toggler .btn {
    background-color: var(--color-dl-grey-b);
}
/* ==========================================================================
   OPTIMIZACIÓN DE COLOR BASE: TARJETA DE AUTO-MATRICULACIÓN (#2674bf)
   ========================================================================== */

/* 1. El Contenedor Padre de la Instancia */
.enrol-instance[data-enrol="self"] {
    margin-bottom: 2rem !important;
}

/* 2. Rediseño Completo de la Tarjeta (Card) */
.enrol-instance[data-enrol="self"] .card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}

/* 3. Encabezado de la Tarjeta (Card Header) */
.enrol-instance[data-enrol="self"] .enrol-cardheader {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 20px 24px !important;
}

.enrol-instance[data-enrol="self"] .enrol-cardheader h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

/* 4. Cuerpo de la Tarjeta y Alerta (Card Body & Alert) */
.enrol-instance[data-enrol="self"] .card-body {
    padding: 24px !important;
}

/* Transformamos la alerta azul en una verde menta más amigable */
.enrol-instance[data-enrol="self"] .card-body .alert-info {
    background-color: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 12px !important;
    color: #166534 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
}

.enrol-instance[data-enrol="self"] .card-body .alert-info::before {
    content: "✓" !important;
    font-weight: bold !important;
    margin-right: 12px !important;
    background: #22c55e !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
}

/* 5. Pie de la Tarjeta (Card Footer) */
.enrol-instance[data-enrol="self"] .enrol-cardfooter {
    background-color: #ffffff !important;
    border-top: none !important;
    padding: 10px 24px 20px !important;
}

/* 6. Transformación del Botón con tu Color Base #2674bf */
.enrol-instance[data-enrol="self"] .enrol-cardfooter button[type="submit"].btn-primary {
    background: #2674bf !important; /* Tu color base exacto */
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    padding: 14px 40px !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(38, 116, 191, 0.25) !important; /* Sombra basada en tu azul */
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    
    /* Centrado responsivo masosamente */
    width: clamp(240px, 100%, 380px) !important;
    display: block !important;
    margin: 0 auto !important; 
    text-align: center !important;
}

/* Efectos de interacción (Hover y Active) usando variantes de tu color */
.enrol-instance[data-enrol="self"] .enrol-cardfooter button[type="submit"].btn-primary:hover {
    background: #1e5c99 !important; /* Un tono más oscuro del mismo azul para el contraste */
    box-shadow: 0 6px 16px rgba(38, 116, 191, 0.4) !important;
    transform: translateY(-2px) !important;
}

.enrol-instance[data-enrol="self"] .enrol-cardfooter button[type="submit"].btn-primary:active {
    transform: translateY(0px) !important;
}