/* =============================================================
   Estilos de páginas de detalle de curso (Training Electric México)
   Ruta en servidor: /home/hpocmqic/public_html/TEM/assets/css/curso-detalle.css
   Referenciar en cada HTML de curso con:
   <link rel="stylesheet" href="assets/css/curso-detalle.css">
   ============================================================= */

:root{
    --tem-blue-dark:#043058;
    --tem-blue:#075093;
    --tem-blue-light:#0072CE;
    --tem-bg-soft:#f5f8fb;
    --tem-border:#e4e9ef;
}

.course-page{
    padding-top: 130px;
    background-color: var(--tem-bg-soft);
}
@media only screen and (min-width: 768px) and (max-width: 991px){
    .course-page{ padding-top: 122px; }
}
@media only screen and (max-width: 767px){
    .course-page{ padding-top: 122px; }
}
@media only screen and (max-width: 575px){
    .course-page{ padding-top: 163px; }
}
@media only screen and (max-width: 479px){
    .course-page{ padding-top: 151px; }
}

/*-- Fix: en esta página el header quedaba flotando más abajo de lo debido
    (dejaba un espacio en blanco arriba y tapaba el título). Lo anclamos
    directo a la ventana para que siempre se vea pegado hasta arriba. --*/
header.header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
}


/*-- Course header --*/
.course-head{
    padding: 40px 0 30px;
}
.course-stars{ color: #d8d8d8; font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; }
.course-stars i.active{ color: #f2a900; }
.course-head .category{
    color: var(--tem-blue-light);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 10px;
    display:block;
}
.course-head h1{
    font-size: 30px;
    line-height: 1.3;
    color: var(--tem-blue-dark);
    margin-bottom: 0;
}
@media only screen and (max-width: 575px){
    .course-head h1{ font-size: 22px; }
}
.course-head-actions{
    display:flex;
    gap: 20px;
    margin-top: 14px;
    font-size: 14px;
}
.course-head-actions a{ color: var(--tem-blue); }
.course-head-actions a i{ margin-right: 6px; }

/*-- Course banner image (horizontal) --*/
.course-banner{
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(4,48,88,0.12);
    line-height: 0;
}
.course-banner img{
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}
@media only screen and (max-width: 767px){
    .course-banner img{ height: 260px; }
}

/*-- Sidebar card --*/
.course-sidebar{
    position: sticky;
    top: 150px;
}
.price-card{
    background: #ffffff;
    border: 1px solid var(--tem-border);
    border-radius: 6px;
    padding: 26px;
    box-shadow: 0 10px 30px rgba(4,48,88,0.06);
    margin-bottom: 24px;
}
.price-card .price-label{
    font-size: 22px;
    font-weight: 700;
    color: var(--tem-blue-dark);
    margin-bottom: 16px;
}
.price-card .btn-enroll{
    display:block;
    width: 100%;
    text-align:center;
    background-color: var(--tem-blue-dark);
    color:#ffffff;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 14px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 14px;
    transition: 0.3s;
}
.price-card .btn-enroll:hover{ background-color: var(--tem-blue-light); color:#fff; }
.price-card .free-note{
    text-align:center;
    font-size: 13px;
    color: #8a97a6;
    margin-top: 10px;
}
.price-card .whatsapp-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width: 100%;
    background-color: #25D366;
    color:#ffffff;
    font-weight: 600;
    padding: 14px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 18px;
}
.price-card .whatsapp-btn:hover{ background-color: #1ebd5a; color:#fff; }
.price-card .meta-list{
    list-style:none;
    padding:0;
    margin: 18px 0 0;
    border-top: 1px solid var(--tem-border);
    padding-top: 16px;
}
.price-card .meta-list li{
    font-size: 13.5px;
    color:#5b6773;
    display:flex;
    justify-content: space-between;
    padding: 6px 0;
}

.info-card{
    background: #ffffff;
    border: 1px solid var(--tem-border);
    border-radius: 6px;
    padding: 24px;
    margin-bottom: 24px;
}
.info-card h4{
    font-size: 16px;
    color: var(--tem-blue-dark);
    margin-bottom: 16px;
    font-weight: 700;
}
.info-card ul{ list-style:none; padding:0; margin:0; }
.info-card ul li{
    font-size: 13.5px;
    color:#5b6773;
    line-height: 1.6;
    padding: 6px 0 6px 26px;
    position:relative;
}
.info-card ul li i{
    position:absolute;
    left:0;
    top: 8px;
    color: var(--tem-blue-light);
}
.info-card .instructor{
    display:flex;
    align-items:center;
    gap:12px;
}
.info-card .instructor .avatar{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tem-blue-dark);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    flex-shrink:0;
}
.info-card .instructor .name-label{ font-size:12px; color:#8a97a6; }
.info-card .instructor .name{ font-size:14.5px; color:var(--tem-blue-dark); font-weight:600; }

/*-- Main content --*/
.course-main{
    background:#ffffff;
    border:1px solid var(--tem-border);
    border-radius: 6px;
    padding: 30px;
    margin-bottom: 26px;
}
.course-main h3.block-title{
    font-size: 20px;
    color: var(--tem-blue-dark);
    margin-bottom: 18px;
    font-weight: 700;
}
.course-main p{
    color: #5b6773;
    text-align: justify;
}
.whatsapp-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background-color: #25D366;
    color:#ffffff;
    font-weight: 700;
    padding: 16px 20px;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 22px;
    letter-spacing: 0.5px;
}
.whatsapp-cta:hover{ background-color:#1ebd5a; color:#fff; }

.learn-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 30px;
    background: var(--tem-bg-soft);
    border-radius: 6px;
    padding: 24px;
}
@media only screen and (max-width: 575px){
    .learn-grid{ grid-template-columns: 1fr; }
}
.learn-grid .learn-item{
    display:flex;
    gap: 12px;
    align-items:flex-start;
}
.learn-grid .learn-item i{
    color: var(--tem-blue-light);
    font-size: 18px;
    margin-top: 3px;
}
.learn-grid .learn-item strong{
    display:block;
    color: var(--tem-blue-dark);
    font-size: 14.5px;
    margin-bottom: 3px;
}
.learn-grid .learn-item span{
    color:#5b6773;
    font-size: 13.5px;
}

/*-- Accordion module list --*/
.curriculum-accordion .module{
    border: 1px solid var(--tem-border);
    border-radius: 4px;
    margin-bottom: 12px;
    overflow: hidden;
}
.curriculum-accordion .module-header{
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 15px 18px;
    background: var(--tem-bg-soft);
    cursor:pointer;
    border-left: 4px solid var(--tem-blue-light);
}
.curriculum-accordion .module-header h5{
    font-size: 14.5px;
    color: var(--tem-blue-dark);
    font-weight: 700;
    margin: 0;
}
.curriculum-accordion .module-header i.toggle-icon{
    color: var(--tem-blue-dark);
    transition: transform 0.25s ease;
}
.curriculum-accordion .module.open .module-header i.toggle-icon{
    transform: rotate(180deg);
}
.curriculum-accordion .module-body{
    display:none;
    padding: 6px 18px 14px;
}
.curriculum-accordion .module.open .module-body{ display:block; }
.curriculum-accordion .lesson{
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--tem-border);
    font-size: 13.5px;
    color:#5b6773;
}
.curriculum-accordion .lesson:last-child{ border-bottom: none; }
.curriculum-accordion .lesson .lesson-name{
    display:flex;
    align-items:center;
    gap:10px;
}
.curriculum-accordion .lesson .lesson-name i{ color:#9aa7b4; }
.curriculum-accordion .lesson .lesson-meta{
    display:flex;
    align-items:center;
    gap:10px;
    color:#9aa7b4;
}

/*-- Course content tabs (Información del curso / Reseñas) --*/
.course-tabs{
    display:flex;
    gap: 34px;
    border-bottom: 1px solid var(--tem-border);
    margin-bottom: 26px;
}
.course-tabs .tab-btn{
    background:none;
    border:none;
    padding: 14px 2px;
    font-size: 15px;
    font-weight: 600;
    color:#8a97a6;
    cursor:pointer;
    position:relative;
    transition: color 0.2s ease;
}
.course-tabs .tab-btn:hover{ color: var(--tem-blue); }
.course-tabs .tab-btn::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-1px;
    height:3px;
    background: var(--tem-blue-light);
    border-radius: 3px 3px 0 0;
    opacity:0;
    transition: opacity 0.2s ease;
}
.course-tabs .tab-btn.active{ color: var(--tem-blue-dark); }
.course-tabs .tab-btn.active::after{ opacity:1; }

.tab-pane{ display:none; }
.tab-pane.active{ display:block; }

/*-- Reviews tab / empty state --*/
.reviews-summary{
    display:flex;
    align-items:center;
    gap: 18px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--tem-border);
}
.reviews-summary .score{
    font-size: 40px;
    font-weight: 700;
    color: var(--tem-blue-dark);
    line-height: 1;
}
.reviews-summary .score-details .course-stars{ margin-bottom: 4px; }
.reviews-summary .score-details span{
    display:block;
    font-size: 13px;
    color:#8a97a6;
}
.reviews-empty{
    text-align:center;
    padding: 30px 20px 20px;
}
.reviews-empty svg{ width: 190px; height:auto; margin-bottom: 22px; }
.reviews-empty .reviews-empty-title{
    font-weight:700;
    color: var(--tem-blue-dark);
    font-size: 15.5px;
    margin-bottom: 6px;
}
.reviews-empty .reviews-empty-text{
    display:block;
    color:#8a97a6;
    font-size: 13.5px;
    max-width: 380px;
    margin: 0 auto;
}
.course-author-avatar {
    width: 50px; /* Ajusta este valor en píxeles o porcentaje según lo que necesites */
    height: auto;
}

/*-- Footer social (Facebook / WhatsApp) centrado respecto al texto "Acerca de nosotros" --*/
.footer-social-shift{
    max-width: 190px;
    margin-left: 0;
    margin-right: 0;
}
/*-- Share Course Modal --*/
.share-modal-overlay{
    position: fixed;
    inset: 0;
    background: rgba(4,48,88,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    padding: 20px;
}
.share-modal-overlay.active{
    opacity: 1;
    visibility: visible;
}
.share-modal{
    background: #ffffff;
    border-radius: 10px;
    width: 100%;
    max-width: 460px;
    padding: 26px 28px 30px;
    box-shadow: 0 25px 60px rgba(4,48,88,0.25);
    transform: translateY(-14px);
    transition: transform 0.25s ease;
}
.share-modal-overlay.active .share-modal{
    transform: translateY(0);
}
.share-modal-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}
.share-modal-header h4{
    margin: 0;
    font-size: 19px;
    color: var(--tem-blue-dark);
    font-weight: 700;
}
.share-modal-close{
    background: none;
    border: none;
    font-size: 18px;
    color: #8a97a6;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}
.share-modal-close:hover{ color: var(--tem-blue-dark); }
.share-modal-body label{
    display: block;
    font-size: 13px;
    color: #5b6773;
    margin-bottom: 8px;
}
.share-link-row{
    display: flex;
    align-items: stretch;
    border: 1px solid var(--tem-border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 6px;
}
.share-link-row input{
    flex: 1;
    min-width: 0;
    border: none;
    padding: 11px 12px;
    font-size: 13px;
    color: #5b6773;
    background: var(--tem-bg-soft);
}
.share-link-row input:focus{ outline: none; }
.share-link-row button{
    border: none;
    border-left: 1px solid var(--tem-border);
    background: var(--tem-bg-soft);
    padding: 0 14px;
    color: var(--tem-blue);
    cursor: pointer;
    font-size: 15px;
}
.share-link-row button:hover{ color: var(--tem-blue-dark); }
.copy-feedback{
    display: block;
    font-size: 12px;
    color: #25D366;
    height: 16px;
    margin-bottom: 14px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.copy-feedback.show{ opacity: 1; }
.share-social-label{
    font-size: 13px;
    color: #5b6773;
    margin: 4px 0 12px;
}
.share-social-buttons{
    display: flex;
    gap: 10px;
}
.share-btn{
    width: 42px;
    height: 42px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.share-btn:hover{ opacity: 0.85; color: #ffffff; transform: translateY(-2px); }
.share-btn.facebook{ background-color: #1877F2; }
.share-btn.whatsapp{ background-color: #25D366; }