/* Fondo sólido para los diferentes tipos de notificaciones */
.toast-success,
.toast-error,
.toast-warning,
.toast-info {
    background-color: #28a745 !important;
    opacity: 1 !important;
    color: #fff !important;
    border-radius: 6px !important;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1) !important;
}

.toast-success { background-color: #28a745 !important; }
.toast-error { background-color: #dc3545 !important; }
.toast-warning { background-color: #ffc107 !important; }
.toast-info { background-color: #17a2b8 !important; }

.tp-purchase-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px;
}

.tp-purchase-table th,
.tp-purchase-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.tp-purchase-table th {
    background-color: #f4f4f4;
}

.tp-purchase-table td {
    word-break: break-word;
}

.tpd-continue-learning-wrapper {
    display: flex; /* Activa Flexbox */
    align-items: stretch; /* Asegura que ambos divs tengan la misma altura */
    height: 100vh; /* Altura total de la ventana */
}

.tpd-continue-learning-sidebar {
    overflow-y: auto; /* Habilita el scroll vertical */
    flex: 0 0 480px; /* Define un ancho fijo o ajustable */
    max-height: 100%; /* Asegura que no exceda la altura del contenedor padre */
    padding-right: 10px; /* Evita que el scroll tape contenido */
}

.tpd-continue-learning-main {
    flex: 1; /* Toma el resto del espacio disponible */
    overflow-y: auto; /* Habilita el scroll si hay contenido adicional */
}

/* Elimina la imagen de fondo predeterminada del botón del acordeón */
.accordion-button::after {
    display: none; /* Oculta el indicador predeterminado de Bootstrap */
}

/* Ajusta el ícono dinámico */
.accordion-btn i {
    transition: transform 0.2s ease-in-out;
}

.skeleton {
    background: linear-gradient(-90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    height: 20px;
    width: 100%;
    border-radius: 4px;
    margin-bottom: 10px;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}