*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

a{
    text-decoration: none;
}

body{
    font-family:'Youth';
}

.mi-perfil-alert{
    margin-bottom: 25px;
    font-weight: bold;
}

.mi-perfil-form {
    margin: 0 auto;
        padding: 20px 0;
    width: 600px;
}

.mi-perfil-form label{
    display:block;
    font-size:13px;
    font-weight:600;
    margin-bottom:5px;
    color:#111;
}


.mi-perfil-form input[type="text"],
.mi-perfil-form input[type="password"],
.mi-perfil-form select{
    width:100%;
    height:42px;
    border:0;
    border-radius:5px;
    padding:0 14px;
    background:#fff;
    box-sizing:border-box;
    font-family:Youth-Bold,sans-serif;
    font-size: 13px;
    border: 1px solid;
}

.mi-perfil-field{
    margin-bottom: 20px;
}

.mi-perfil-submit{
    width: 100%;
    height: 42px;
    border: 0;
    border-radius: 5px;
    background: #c66773;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
}

.login-logo{
    padding-top:15px;
    font-family:cursive;
    font-size:44px;
    line-height:.8;
    color:#000;
}

.site-logo img{
    width: 120px;
}

.login-logo img {
    max-width: 120px;
}

.container{
    width:100%;
    max-width:1280px;
    margin:auto;
    padding:0 20px;
}

.page-template-page-mi-progreso-php .progress-content .container{
    border-bottom: 1px solid #D8D8D8;
    padding:0 20px 40px;
}

.container-right{
    display: flex;
    gap: 35px;
    align-items: center;
}

.tema-layout{
    display:flex;
    gap:30px;
}

.tema-video-main{
    width:70%;
}

.tema-video-sidebar{
    width:30%;
    background:#f7f7f7;
    padding:20px;
}

.academy-playlist{
    list-style:none;
    padding:0;
    margin:0;
}

.playlist-item button{
    width:100%;
    border:0;
    background:transparent;
    text-align:left;
    padding:12px;
    cursor:pointer;
}

.playlist-item.active button{
    font-weight:bold;
}

.playlist-item small{
    display:block;
    opacity:.7;
}

.status{
    margin-right:8px;
}

@media(max-width:768px){
    .tema-layout{
        flex-direction:column;
    }

    .tema-video-main,
    .tema-video-sidebar{
        width:100%;
    }
}

.dashboard-page{
    padding:40px 0;
}

.dashboard-hero{
    min-height: 320px;
    display: flex;
    align-items: center;

    background:
        /*url('../../assets/images/dashborad.png') bottom right / contain no-repeat,*/
		var(--dashboard-banner),
        radial-gradient(
            ellipse 620px 300px at 75% 50%,
            rgba(255,255,255,.50) 0%,
            rgba(255,255,255,.28) 32%,
            rgba(255,255,255,0) 70%
        ),
        linear-gradient(
            120deg,
            #e9b7c4 0%,
            #efc1cd 42%,
            #f5ccd6 70%,
            #e8b2c0 100%
        );
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
}

.dashboard-hero h1{
    font-size:42px;
    margin-bottom:15px;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:25px;
}

.dashboard-card{
    background:#fff;
    border:1px solid #eee;
    border-radius:12px;
    overflow:hidden;
}

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

.dashboard-card-content{
    padding:20px;
}

.btn-dashboard{
    display:inline-block;
    margin-top:15px;
    background:#c7727d;
    color:#fff;
    padding:10px 18px;
    border-radius:6px;
}

@media(max-width:768px){
    .dashboard-grid{
        grid-template-columns:1fr;
    }

    .dashboard-hero{
        padding:30px;
    }
}

.site-header{
    height:74px;
    background:#fff;
    border-bottom:1px solid #eee;
}

.header-user-menu{
    position:relative;
}

.header-user-toggle{
    display:flex;
    align-items:center;
    gap:14px;
    background:none;
    border:0;
    cursor:pointer;
    padding:0;
}

.header-user-toggle .avatar img{
    width:64px;
    height:64px;
    border-radius:50%;
    object-fit:cover;
}

.header-user-toggle .arrow{
    width:18px;
    transition:.25s;
}

.header-user-menu.active .arrow{
    transform:rotate(180deg);
}

.header-user-dropdown{
    position: absolute;
    top: 60px;
    right: 0;
    width: 190px;
    background: #fff;
    border-radius: 12px;
    padding: 30px 25px 20px;
    box-shadow: 0 8px 35px rgba(0, 0, 0, .15);
    display: none;
    z-index: 9999;
    box-sizing: border-box;
}

.header-user-menu.active .header-user-dropdown{
    display:block;
}

.dropdown-arrow{
    position:absolute;
    width:24px;
    height:24px;
    background:#fff;
    transform:rotate(45deg);
    top:-12px;
    right:30px;
}

.header-user-dropdown a{
    display:block;
    font-size:13px;
    font-weight: 600;
    color:#111;
    text-decoration:none;
    margin-bottom:24px;
    transition:.2s;
}

.header-user-dropdown a:hover{
    color:#C27B87;
}

.header-user-dropdown hr{
    border:0;
    border-top:1px solid #E8E8E8;
    margin:20px 0;
}

.header-user-dropdown .logout{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    font-weight:700;
}

.header-user-dropdown .logout img{
    width:26px;
}



.header-inner{
    height:74px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.site-logo{
    font-size:32px;
    font-family:cursive;
    color:#111;
    line-height:1;
}

.site-logo small{
    display:block;
    font-size:9px;
    text-transform:uppercase;
}

.site-nav{
    display:flex;
    gap:35px;
}

.site-nav a{
    color:#111;
    font-size:13px;
    font-weight:600;
}

.site-nav a:hover,
.site-nav a.active {
    color: #BB696E;
}

.header-user{
    display:flex;
    gap:20px;
    align-items:center;
}

.site-footer{
    background:#050505;
    color:#fff;
    padding:28px 0;
}

.footer-inner{
    display:flex;
    justify-content:space-between;
    font-size:13px;
}

.footer-inner p{
    font-size: 13px;
    line-height: 24px;
}

.footer-inner p:first-child{
    font-size: 20px;
}

.courses-hero{
    min-height:320px;
    background:#f6cfdc;
    display:flex;
    align-items:center;
}

.courses-hero{

    background:
        /*url('../../assets/images/capacitaciones.png') bottom right / contain no-repeat,*/
		var(--dashboard-banner),
        radial-gradient(
            ellipse 500px 350px at 73% 50%,
            rgba(255,255,255,.28) 0%,
            rgba(255,255,255,.12) 35%,
            rgba(255,255,255,0) 75%
        ),
        linear-gradient(
            90deg,
            #bfb4b4 0%,
            #c6bcbc 40%,
            #d0c7c7 70%,
            #c4baba 100%
        );
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
}

.courses-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid #ddd;
}

.courses-filter{
    display: flex;
    align-items: center;
    gap: 14px;
}

.courses-filter label{
    font-size: 13px;
    font-weight: 500;
    color: #d24c74;
}

.courses-filter select{
    width: 220px;
    height: 42px;
    border: 1px solid #d8d1d1;
    border-radius: 8px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
    background: #fff;
    outline: none;
    cursor: pointer;
}

.courses-grid{
    transition: opacity .3s ease;
}

.courses-grid.is-loading{
    opacity: .35;
    pointer-events: none;
}

.courses-grid.is-loading{
    opacity: .15;
    transform: scale(.98);
    transition: all .3s ease;
}

.dashboard-hero h1,
.courses-hero h1{
    font-size:46px;
    line-height:1.05;
    margin-bottom:15px;
    font-weight: 500;
}

.dashboard-hero p,
.courses-hero p{
    max-width:325px;
    font-size:15px;
    line-height: 20px;
}

.dashboard-content{
    padding:35px 0 20px;
}

.dashboard-columns{
    display:grid;
    grid-template-columns:1.2fr .9fr;
    gap:35px;
}

.section-title {
    margin-bottom: 15px;
}

.section-title h2{
    font-size:18px;
    margin-bottom:0;
    font-weight: 400;
}

.section-title h2 img{
    width: 17px;
}

.viewAll{
    color:#000;
    text-decoration: underline;
    font-size: 15px;
}

.viewAll:hover{
    color: #BB696E;
}

.section-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.featured-card{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:30px;
    border:1px solid #eee;
    border-radius:12px;
    padding:15px;
}

.featured-info{
    padding-top: 20px;
}

.featured-img{
    position:relative;
}

.featured-img img{
    width:100%;
    height:auto;
    border-radius:10px;
    display: block;
}

.play-icon{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.featured-info h3{
    margin-bottom: 12px;
    font-size: 18px;
}

.featured-info p{
    font-size: 13px;
}

.tag-new{
    display:inline-block;
    background:#ffe2eb;
    color:#c95070;
    padding:4px 12px;
    border-radius:5px;
    font-size:13px;
    margin-bottom: 12px;
}

.btn-pink{
    display:inline-block;
    background:#c94f70;
    color:#fff;
    padding:8px 25px;
    border-radius:6px;
    font-size:14px;
    width: max-content;
    text-align: center;

    display: flex;
    align-items: center;
}

.btn-pink-img{
    width: 28px !important;
    height: auto !important;
}

.latest-item{
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 15px;
    margin-bottom: 15px;
    border: 1px solid #eee;
    padding: 20px;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-top: 0
}

.latest-item.first-item{
    border-top: 1px solid #eee;
    border-radius:12px 12px 0 0;
    overflow:hidden;
}

.latest-item:last-child{
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    border-radius: 0 0 12px 12px;
}

.latest-item img{
    width:120px;
    height:70px;
    object-fit:cover;
    display: block;
    border-radius:6px;
}

.latest-item h4{
    font-size:14px;
    margin-bottom:5px;
    text-decoration: underline;
}

.latest-item h4 a{
    color: #000;
}

.latest-item p{
    font-size:13px;
}

.latest-item small{
    font-size:12px;
    display: block;
    margin-top: 5px;
}

.latest-thumb{
    position:relative;
}

.latest-thumb img{
    width:100%;
    height:auto;
    border-radius:8px;
}

.play-icon-small{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:26px;
    height:26px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
}

.video-duration{
    position:absolute;
    right:8px;
    bottom:8px;
    background:rgba(60,60,60,.9);
    color:#fff;
    font-size:11px;
    font-weight:400;
    padding:3px 6px;
    border-radius:4px;
    line-height:1;
}

.community-banner{
    margin-top:20px;
    margin-bottom: 40px;
}

.community-box{
    min-height:190px;
    padding:0 70px;
    background:
        radial-gradient(
            ellipse 450px 200px at 72% 50%,
            rgba(255,255,255,.45) 0%,
            rgba(255,255,255,.18) 42%,
            rgba(255,255,255,0) 80%
        ),
        linear-gradient(
            110deg,
            #e4b7c4 0%,
            #efc9d3 42%,
            #f3d2db 65%,
            #ddb0be 100%
        );
    display: flex;
    gap: 30px;
}

.community-box > div:first-child{
    flex: 0 0 38%;
    box-sizing: border-box;
    padding-right: 38px;
}

.community-box > div:last-child{
    flex: 0 0 62%;
    box-sizing: border-box;
}

.community-box .textFirts{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 10%;
}

.community-box .textFirts h2{
    margin: 0 0 10px;
}

.community-box .textFirts p{
    margin: 0 0 15px;
}

.community-box img{
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin: 0 auto;
}

.community-box h2{
    margin-bottom: 10px;
    font-size:30px;
    font-weight: 400;
}

.community-box p{
    margin-bottom: 10px;
}

.courses-list{
    padding:40px 0;
}

.courses-head{
    display:flex;
    justify-content:space-between;
    margin-bottom:35px;
}

.courses-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:28px;
}

.course-card{
    border:1px solid #eee;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
}

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

.course-card-body{
    padding:18px;
}

.course-card-body .btn-pink{
    justify-content: center;
    width: 100% !important;
}

.course-card-body h3{
    font-size:16px;
    margin-bottom:8px;
}

.course-card-body p{
    font-size:13px;
    margin-bottom:15px;
}

@media(max-width:768px){
    .dashboard-columns,
    .featured-card,
    .courses-grid{
        grid-template-columns:1fr;
    }

    .site-nav{
        gap:15px;
    }

    .footer-inner{
        flex-direction:column;
        gap:10px;
    }
}

.course-author{
    display:flex;
    align-items:center;
    gap:10px;
    margin:22px 0;
}

.course-author img{
    width:46px;
    height:46px;
    border-radius:50%;
    object-fit:cover;
}

.course-author strong{
    display:block;
    font-size:13px;
    font-weight:500;
}

.course-author span{
    display:block;
    font-size:13px;
    color:#555;
}

.course-player-layout{
    display:grid;
    grid-template-columns:1fr 315px;
    min-height:calc(100vh - 74px);
    background:#000;
}

.course-video-area{
    position:relative;
    background:#000;
}

.course-video-area video{
    width:100%;
    height:calc(100vh - 74px);
    object-fit:cover;
}

.back-courses{
    position:absolute;
    top:35px;
    left:45px;
    z-index:5;
    color:#fff;
    border:1px solid #fff;
    padding:12px 22px;
    border-radius:6px;
    font-size:13px;
    font-weight:500;
}

.course-info-panel{
    background:#020202;
    color:#fff;
    padding:35px 18px;
    overflow:auto;
}

.course-info-panel h1{
    font-size: 22px;
    line-height: 1.1;
    margin-bottom: 25px;
    font-weight: 400;
}

.course-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:25px;
}

.info-btn{
    background:#fde5ee;
    border:0;
    padding:18px 10px;
    font-weight:700;
    font-size:12px;
}

.course-tabs{
    display:flex;
    gap:35px;
    margin-bottom:20px;
}

.course-description{
    margin-bottom: 15px;
}

.course-comments p,
.course-description p{
    font-size: 14px;
}

.comment-form-comment{
    margin: 4px 0;
}

.learning-list{
    margin-top: 15px;
}

.tab-btn{
    background:transparent;
    color:#fff;
    border:0;
    padding-bottom:10px;
    font-weight:700;
    cursor:pointer;
    font-size: 15px;
}

.tab-btn.active{
    border-bottom:3px solid #988586;
}

.tab-content{
    display:none;
}

.tab-content.active{
    display:block;
}

.module-box{
    background:#fbe3ec;
    color:#111;
    border-bottom:5px solid #000;
}

.module-title{
    width:100%;
    background:#fbe3ec;
    border:0;
    padding:18px 20px;
    text-align:left;
    font-weight:700;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    cursor:pointer;
    font-size:14px;
    line-height:1.15;
}

.module-title small{
    display:block;
    color:#c94f70;
    margin-left: 2px;
    margin-top:7px;
    font-size:12px;
    font-weight:500;
}

.module-arrow{
    color:#c94f70;
    font-size:18px;
}

.module-videos{
    display:none;
    list-style:none;
    padding:0 20px 22px;
    margin:0;
    position:relative;
}

.module-box.open .module-videos{
    display:block;
}

.module-videos:before{
    content: '';
    position: absolute;
    left: 26px;
    top: 15px;
    bottom: 50px;
    width: 2px;
    background: #b99ca5;
}

.playlist-item{
    position:relative;
    padding-left: 25px;
}

.playlist-item button{
    width:100%;
    border:0;
    background:transparent;
    text-align:left;
    padding:8px 0 8px 28px;
    cursor:pointer;
    display:flex;
    gap:10px;
}

.timeline-dot{
    position:absolute;
    left:0;
    top:10px;
    width:14px;
    height:14px;
    background:#a99099;
    border-radius:50%;
    z-index:2;
}

.video-info strong{
    display:block;
    font-size:13px;
    line-height:1.2;
}

.video-info small{
    display:block;
    color:#c94f70;
    font-size:12px;
    margin-top:5px;
}

.playlist-item.active .video-info strong{
    color:#c94f70;
}

.playlist-item button{
    width:100%;
    border:0;
    background:transparent;
    text-align:left;
    padding:8px 0;
    cursor:pointer;
}

.learning-list{
    list-style:none;
    padding:0;
}

.learning-list li{
    position:relative;
    padding-left:24px;
    margin-bottom:12px;
}

.learning-list li:before{
    content:'✓';
    position:absolute;
    left:0;
    top:0;
    background:#c94f70;
    color:#fff;
    width:16px;
    height:16px;
    border-radius:50%;
    font-size:11px;
    text-align:center;
    line-height:16px;
}

.course-comments{
    padding-top:15px;
}

.comment-card{
    display:flex;
    gap:12px;
    margin-bottom:25px;
    padding-bottom:18px;
    border-bottom:1px solid rgba(255,255,255,.15);
}

.comment-avatar img{
    width:42px;
    height:42px;
    border-radius:50%;
}

.comment-content h4{
    margin:0;
    font-size:13px;
    color:#fff;
}

.comment-date{
    display:block;
    color:#999;
    font-size:11px;
    margin-top:2px;
}

.comment-content p{
    color:#fff;
    font-size:12px;
    line-height:1.45;
    margin-top:8px;
}

.reply-comment{
    background:none;
    border:0;
    color:#fff;
    font-size:11px;
    cursor:pointer;
    padding:0;
}

.comment-form textarea{
    width:100%;
    height:90px;
    padding:12px;
}

.comment-form input[type="submit"]{
    background:#c95f75;
    color:#fff;
    border:0;
    padding:12px 20px;
    border-radius:4px;
}


/* =========================
   MENSAJES
========================= */


.messages-hero{
    min-height:230px;
    display:flex;
    align-items:center;

    background:
        /*url('../../assets/images/mensajes.png') bottom right / contain no-repeat,*/
		var(--dashboard-banner),
        radial-gradient(
            ellipse 620px 300px at 78% 50%,
            rgba(255,255,255,.48) 0%,
            rgba(255,255,255,.28) 30%,
            rgba(255,255,255,0) 68%
        ),
        linear-gradient(
            120deg,
            #eeaaa1 0%,
            #f3b4ab 45%,
            #f6beb4 72%,
            #eda89f 100%
        );
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
}

.messages-hero h1{
    font-size: 46px;
    margin-bottom: 10px;
    font-weight: 500;
}

.messages-hero p{
    max-width:360px;
    font-size:15px;
    line-height: 20px;
}

.messages-content{
    padding:35px 0 60px;
    background:#fff;
}

.messages-layout{
    display:flex;
    border:1px solid #e6e6e6;
    min-height:420px;
    background:#fff;
}

.messages-list{
    position:relative;
    background:#fff;
    width: 30%;
}

.messages-list:after{
    content:'';
    position:absolute;
    top:0;
    right:-1px;
    width:18px;
    height:100%;
    background:#fff;
    border-left:1px solid #ececec;
    border-right:1px solid #ececec;
    z-index:2;
}

.messages-list-title{
    height:55px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:9px;
    padding:0 18px;
    border-bottom:1px solid #eeeeee;
    font-size:13px;
    font-weight:600;
    color:#111;
}

.messages-list-title strong{
    background:#ffe6ee;
    color:#c94f70;
    border-radius:50%;
    min-width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
}

.messages-list-title{
    display: flex;
}

.messages-list-title span{
    display: flex;
    gap: 8px;
    align-items: center;
}

.messages-list-title img{
    width: 20px;
}

.message-item{
    width:100%;
    min-height:74px;
    border:0;
    background:#fff;
    display:grid;
    grid-template-columns:12px 36px minmax(0, 1fr);
    gap:10px;
    text-align:left;
    padding:16px 18px;
    cursor:pointer;
    border-bottom:1px solid #eeeeee;
    align-items:center;
    transition:background .25s ease, box-shadow .25s ease;
}

.message-item:hover{
    background:#fff7fa;
}

.message-item.active{
    background:#fdeaf0;
}

.message-dot{
    width:8px;
    height:8px;
    border:1px solid #cfcfcf;
    background:#fff;
    border-radius:50%;
}

.message-icon{
    width:34px;
    height:34px;
    background:#c94f70;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    overflow:hidden;
}

.message-icon .emoji{
    width:15px !important;
    height:15px !important;
}

.message-info{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    display:block;
}

.message-item strong{
    display:block;
    width:100%;
    max-width:100%;
    font-size:11px;
    line-height:1.2;
    font-weight:800;
    color:#111;
    margin-bottom:4px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.message-item small{
    display:block;
    width:100%;
    max-width:100%;
    font-size:10px;
    line-height:1.25;
    color:#555;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.message-item.unread{
    background:#fff;
}

.message-item.unread strong{
    font-weight:800;
}

.message-item.unread .message-dot{
    border-color:#c94f70;
    background:#c94f70;
}

.message-item.read{
    background:#fff;
}

.message-item.read .message-dot{
    border-color:#bfbfbf;
    background:#fff;
}

.message-item.read.active,
.message-item.unread.active{
    background:#fdeaf0;
}

.message-detail{
    padding:34px 46px 42px 60px;
    background:#fff;
    min-width:0;
    width: 70%;
    box-sizing: border-box;
}

.message-detail h2{
    max-width:100%;
    font-size:30px;
    line-height:1.08;
    font-weight:400;
    margin-bottom:14px;
    color:#111;
    word-break:normal;
    overflow-wrap:anywhere;
}

.message-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    color:#777;
    font-size:11px;
    margin-bottom:24px;
    padding-bottom:16px;
    border-bottom:1px solid #eeeeee;
}

.message-meta span{
    color:#000;
    font-weight: 500;
    font-size: 12px;
    display: flex;
    gap: 5px;
}

.message-meta span img{
    max-width: 30px;
}

.message-meta span#message-date{
    color:#908A8A;
}

.message-box{
    min-height:46px;
    border:0;
    background:#fff;
    padding:0;
    font-size:13px;
    line-height:1.55;
    color:#111;
    overflow-wrap:anywhere;
}

.message-box:empty:before{
    content:'No hay contenido para este mensaje.';
    color:#999;
}

@media(max-width:900px){
    .messages-layout{
        grid-template-columns:1fr;
    }

    .messages-list{
        border-right:0;
        border-bottom:1px solid #eeeeee;
    }

    .message-detail{
        padding:28px 22px;
    }

    .message-detail h2{
        font-size:24px;
    }
}

.header-notification{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#111;
}

.header-notification img{
    width: 18px;
}

.notification-badge{
    position:absolute;
    top:-8px;
    right:-9px;
    min-width:16px;
    height:16px;
    padding:0 4px;
    background:#d94f74;
    color:#fff;
    border:2px solid #fff;
    border-radius:20px;
    font-size:10px;
    font-weight:700;
    line-height:13px;
    text-align:center;
}

.progress-hero{
    min-height:250px;
    display:flex;
    align-items:center;

    background:
        /*url('../../assets/images/progreso.png') bottom right / contain no-repeat,*/
		var(--dashboard-banner),
        radial-gradient(
            ellipse 650px 320px at 78% 50%,
            rgba(255,255,255,.45) 0%,
            rgba(255,255,255,.20) 35%,
            rgba(255,255,255,0) 72%
        ),
        linear-gradient(
            120deg,
            #d0d0d0 0%,
            #d8d8d8 45%,
            #e2e2e2 72%,
            #cecece 100%
        );
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
}

.progress-hero h1{
    font-size:46px;
    margin-bottom:10px;
    font-weight: 500;
}

.progress-hero p{
    max-width:360px;
    font-size: 15px;
    line-height: 20px;
}

.progress-content{
    padding:40px 0;
}

.progress-title-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.progress-title-row h2{
    font-size:20px;
    font-weight: 500;
}

.progress-title-row a{
    color:#c94f70;
    font-size:14px;
}

.progress-list{
    max-width:980px;
}

.progress-item{
    display:grid;
    grid-template-columns:150px 1fr 60px;
    align-items:center;
    gap:20px;
    margin-bottom:24px;
}

.progress-thumb{
    position:relative;
}

.progress-duration{
    position:absolute;
    right:8px;
    bottom:8px;
    background:rgba(70,70,70,.85);
    color:#fff;
    font-size:12px;
    font-weight:600;
    padding:5px 8px;
    border-radius:6px;
    line-height:1;
}

.progress-thumb img{
    width:150px;
    height:70px;
    object-fit:cover;
    border-radius:8px;
}

.progress-info h3{
    font-size:15px;
    margin-bottom:12px;
}

.progress-bar{
    width:100%;
    height:6px;
    background:#ead0d5;
    border-radius:20px;
    overflow:hidden;
}

.progress-bar span{
    display:block;
    height:100%;
    background:#c94f70;
    border-radius:20px;
}

.progress-percent{
    color:#c94f70;
    font-size:13px;
    font-weight:600;
}

@media(max-width:768px){
    .progress-item{
        grid-template-columns:90px 1fr 45px;
        gap:12px;
    }

    .progress-thumb img{
        width:90px;
        height:55px;
    }
}
.header-user .avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#f1f1f1;
}

.header-user .avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.glimmer-popup-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.glimmer-popup-box{
    position:relative;
    width:100%;
    max-width:620px;
    background:#fff;
    border-radius:26px;
    padding:42px 54px;
    text-align:center;
}

.glimmer-popup-close{
    position:absolute;
    top:22px;
    right:28px;
    border:0;
    background:none;
    font-size:34px;
    cursor:pointer;
}

.glimmer-popup-image{
    max-width:120px;
    margin:0 auto 16px;
    display:block;
}

.glimmer-popup-box h2{
    margin:0 0 24px;
    font-size:34px;
    line-height:1.1;
}

.glimmer-popup-content{
    border-top:1px solid #ddd;
    padding-top:24px;
    text-align:left;
    font-size:18px;
    line-height:1.35;
}

.glimmer-popup-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:24px;
    padding:15px 34px;
    background:#c94f70;
    color:#fff;
    border-radius:5px;
    text-decoration:none;
}
/* =========================================================
   RESPONSIVE GLIMMER - 2026-07
   Pantallas internas: header, dashboard, cursos, mensajes,
   progreso, perfil y reproductor.
========================================================= */

.mobile-nav-toggle,
.mobile-nav-panel{
    display:none;
}

.mi-perfil-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

@media (max-width: 1024px){
    .container{
        max-width:100%;
        padding:0 24px;
    }

    .courses-grid{
        grid-template-columns:repeat(2, 1fr);
    }

    .dashboard-columns{
        grid-template-columns:1fr;
    }

    .featured-card{
        grid-template-columns:1fr;
    }

    .community-box{
        padding:0 34px;
    }

    .messages-list{
        width:36%;
    }

    .message-detail{
        width:64%;
        padding:30px;
    }
}

@media (max-width: 768px){
    body{
        overflow-x:hidden;
    }

    .container{
        padding:0 18px;
    }

    .site-header{
        height:64px;
        border-bottom:1px solid #f1f1f1;
        position:sticky;
        top:0;
        z-index:999;
    }

    .header-inner{
        height:64px;
    }

    .site-logo img{
        width:112px;
        display:block;
    }

    .container-right{
        gap:13px;
    }

    .site-nav{
        display:none;
    }

    .mobile-nav-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        width:28px;
        height:28px;
        padding:0;
        border:0;
        background:transparent;
        cursor:pointer;
        order:3;
    }

    .mobile-nav-toggle img{
        width:22px;
        height:auto;
        display:block;
    }

    .header-user{
        gap:12px;
    }

    .header-notification img{
        width:17px;
    }

    .header-user-toggle{
        gap:0;
    }

    .header-user-toggle .arrow{
        display:none;
    }

    .header-user .avatar{
        width:32px;
        height:32px;
    }

    .header-user-dropdown{
        top:47px;
        right:-32px;
        width:210px;
        padding:28px 24px 20px;
    }

    .dropdown-arrow{
        right:47px;
    }

    .mobile-nav-panel{
        position:absolute;
        left:18px;
        right:18px;
        top:64px;
        display:none;
        flex-direction:column;
        gap:0;
        background:#fff;
        border-radius:0 0 14px 14px;
        box-shadow:0 12px 30px rgba(0,0,0,.14);
        overflow:hidden;
        z-index:998;
    }

    body.mobile-menu-open .mobile-nav-panel{
        display:flex;
    }

    .mobile-nav-panel a{
        padding:15px 18px;
        color:#111;
        font-size:14px;
        font-weight:700;
        border-bottom:1px solid #f0f0f0;
    }

    .mobile-nav-panel a.active,
    .mobile-nav-panel a:hover{
        color:#BB696E;
        background:#fff6f8;
    }

    .site-footer{
        padding:28px 0;
    }

    .footer-inner{
        align-items:center;
        text-align:center;
        gap:8px;
    }

    .footer-inner p:first-child{
        font-size:20px;
    }

    .footer-inner p{
        font-size:11px;
        line-height:1.35;
    }

    .dashboard-hero,
    .courses-hero,
    .messages-hero,
    .progress-hero{
        min-height:128px;
        padding:22px 0;
        background-size:auto 100%, cover, cover;
        background-position:bottom right;
    }

    .dashboard-hero h1,
    .courses-hero h1,
    .messages-hero h1,
    .progress-hero h1{
        font-size:25px;
        line-height:1.05;
        margin-bottom:8px;
        max-width:185px;
    }

    .dashboard-hero p,
    .courses-hero p,
    .messages-hero p,
    .progress-hero p{
        max-width:185px;
        font-size:11px;
        line-height:1.2;
    }

    .dashboard-content{
        padding:20px 0 10px;
    }

    .dashboard-columns{
        display:block;
    }

    .section-title{
        margin-bottom:10px;
    }

    .section-title h2{
        font-size:14px;
    }

    .section-title h2 img{
        width:14px;
        vertical-align:-2px;
    }

    .featured-box,
    .latest-box{
        margin-bottom:22px;
    }

    .featured-card{
        display:block;
        padding:12px;
        border-radius:15px;
    }

    .featured-img img{
        border-radius:12px;
    }

    .play-icon{
        width:48px;
        height:48px;
    }

    .featured-info{
        padding:12px 4px 4px;
    }

    .tag-new{
        font-size:10px;
        padding:4px 10px;
        margin-bottom:8px;
    }

    .featured-info h3{
        font-size:16px;
        line-height:1.05;
        margin-bottom:7px;
    }

    .featured-info p{
        font-size:11px;
        line-height:1.25;
    }

    .course-author{
        margin:12px 0;
        gap:8px;
    }

    .course-author img{
        width:34px;
        height:34px;
    }

    .course-author strong,
    .course-author span{
        font-size:10px;
        line-height:1.1;
    }

    .btn-pink{
        font-size:11px;
        padding:8px 18px;
        border-radius:5px;
    }

    .btn-pink-img{
        width:20px !important;
    }

    .viewAll{
        font-size:11px;
    }

    .latest-item{
        grid-template-columns:100px 1fr;
        gap:10px;
        padding:10px 12px;
        border-left:1px solid #eee;
        border-right:1px solid #eee;
    }

    .latest-item img{
        width:100px;
        height:62px;
    }

    .latest-item h4{
        font-size:11px;
        line-height:1.12;
        margin-bottom:4px;
    }

    .latest-item p,
    .latest-item small{
        font-size:9px;
        line-height:1.18;
        margin-top:3px;
    }

    .video-duration{
        font-size:8px;
        right:5px;
        bottom:5px;
        padding:3px 5px;
    }

    .play-icon-small{
        width:23px;
        height:23px;
    }

    .community-banner{
        margin:14px 0 0;
    }

    .community-box{
        min-height:202px;
        padding:24px 0 0 22px;
        gap:0;
        overflow:hidden;
        background:
            url('../../assets/images/dashboard.png') bottom right / 58% auto no-repeat,
            linear-gradient(110deg,#e4b7c4 0%,#f1cbd5 58%,#e1b4c1 100%);
    }

    .community-box > div:first-child{
        flex:0 0 56%;
        padding:0;
    }

    .community-box > div:last-child{
        display:none;
    }

    .community-box .textFirts{
        padding:0;
        justify-content:flex-start;
    }

    .community-box h2{
        font-size:21px;
        line-height:1.02;
        margin-bottom:7px;
    }

    .community-box p{
        font-size:11px;
        line-height:1.12;
        margin-bottom:15px;
    }

    .courses-list{
        padding:22px 0 35px;
    }

    .courses-head{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
        margin-bottom:18px;
        padding-bottom:16px;
    }

    .courses-head h2{
        font-size:18px;
        line-height:1.15;
    }

    .courses-filter{
        width:100%;
        justify-content:space-between;
    }

    .courses-filter select{
        width:65%;
        height:40px;
        font-size:12px;
        padding:0 12px;
    }

    .courses-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .course-card img{
        height:auto;
        aspect-ratio:16/9;
    }

    .course-card-body{
        padding:14px;
    }

    .messages-content{
        padding:22px 0 35px;
    }

    .messages-layout{
        display:block;
        min-height:auto;
    }

    .messages-list{
        width:100%;
    }

    .messages-list:after{
        display:none;
    }

    .messages-list-title{
        height:48px;
    }

    .message-item{
        min-height:68px;
        padding:13px 14px;
        grid-template-columns:10px 32px minmax(0, 1fr);
    }

    .message-detail{
        width:100%;
        padding:22px 18px 28px;
        border-top:1px solid #eee;
    }

    .message-detail h2{
        font-size:22px;
    }

    .message-meta{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

    .progress-content{
        padding:25px 0;
    }

    .progress-title-row{
        align-items:flex-start;
        gap:8px;
        flex-direction:column;
        margin-bottom:20px;
    }

    .progress-title-row h2{
        font-size:18px;
    }

    .progress-title-row a{
        font-size:12px;
    }

    .progress-item{
        grid-template-columns:96px 1fr 40px;
        gap:10px;
        margin-bottom:18px;
    }

    .progress-thumb img{
        width:96px;
        height:58px;
    }

    .progress-info h3{
        font-size:12px;
        line-height:1.15;
        margin-bottom:8px;
    }

    .progress-percent{
        font-size:11px;
    }

    .mi-perfil-form{
        width:100%;
        max-width:420px;
        padding:0;
    }

    .mi-perfil-row{
        grid-template-columns:1fr;
        gap:0;
    }

    .mi-perfil-form input[type="text"],
    .mi-perfil-form input[type="password"],
    .mi-perfil-form select{
        height:44px;
        border-radius:6px;
    }

    .course-player-layout{
        display:flex;
        flex-direction:column;
        min-height:auto;
    }

    .course-video-area video{
        height:auto;
        min-height:210px;
        object-fit:contain;
    }

    .back-courses{
        top:18px;
        left:18px;
        padding:9px 14px;
        font-size:11px;
    }

    .course-info-panel{
        padding:24px 18px;
    }

    .course-info-panel h1{
        font-size:20px;
    }

    .course-actions{
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .info-btn{
        padding:14px 8px;
    }

    .course-tabs{
        gap:22px;
    }

    .glimmer-popup-box{
        padding:32px 22px;
        border-radius:18px;
    }

    .glimmer-popup-box h2{
        font-size:24px;
    }

    .glimmer-popup-content{
        font-size:14px;
    }
}

@media (max-width: 420px){
    .container{
        padding:0 16px;
    }

    .site-logo img{
        width:104px;
    }

    .container-right{
        gap:10px;
    }

    .dashboard-hero,
    .courses-hero,
    .messages-hero,
    .progress-hero{
        min-height:118px;
    }

    .dashboard-hero h1,
    .courses-hero h1,
    .messages-hero h1,
    .progress-hero h1{
        font-size:23px;
    }

    .dashboard-hero p,
    .courses-hero p,
    .messages-hero p,
    .progress-hero p{
        font-size:10px;
    }

    .latest-item{
        grid-template-columns:92px 1fr;
    }

    .latest-item img{
        width:92px;
        height:58px;
    }

    .community-box{
        background:
            url('../../assets/images/dashboard.png') bottom right / 65% auto no-repeat,
            linear-gradient(110deg,#e4b7c4 0%,#f1cbd5 58%,#e1b4c1 100%);
    }
}