/* =========================================
   1. ESTILOS BASE
   ========================================= */
body {
    background-color: #50a3a2 !important;
    transition: background-color 0.4s ease, color 0.3s ease !important;
}

.background.gradient {
    background: -webkit-linear-gradient(top left, #50a3a2 0%, #78cc6d 100%) !important;
    background: linear-gradient(to bottom right, #50a3a2 0%, #78cc6d 100%) !important;
    transition: opacity 0.4s ease;
}

.woocommerce-product-gallery {
    opacity: 1 !important;
}

/* =========================================
   2. SOLUCIÓN CONFLICTO TYPED (CRÍTICO)
   ========================================= */
/* 1. Ocultamos el texto estático original para que no se vea doble.
   Esto aplica a la nueva clase que pusimos en el HTML. */
.typing-title-hidden {
    display: none !important;
}

/* 2. Mantenemos esta regla por seguridad, por si quedó algún
   elemento con la clase antigua. */
.typing-title {
    display: none !important;
}

/* 3. Aseguramos que el subtítulo tenga el color correcto en MODO OSCURO.
   Como cambiamos la clase a .subtitle-custom, debemos forzar el color verde
   manualmente, ya que el tema original solo coloreaba .subtitle-typed */
body.body-style-dark .header .profile .subtitle.subtitle-custom {
    color: #78cc6d !important;
}

/* =========================================
   3. PRELOADER
   ========================================= */
#my-custom-preloader {
    background-color: #ffffff; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 99999; 
    transition: opacity 0.5s ease, visibility 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   4. BLOQUEAR BARRA LATERAL (SIDEBAR)
   ========================================= */
.content-sidebar {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* =========================================
   5. AJUSTES VISUALES (ICONOS Y FUENTES)
   ========================================= */
.service-item .icon, .resume-title .icon, .pricing-item .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-item .icon i, .resume-title .icon i, .pricing-item .icon i {
    font-size: 30px;
    line-height: inherit;
    color: #78cc6d; 
}

/* Fuente Menú (9px) */
.header .top-menu ul li a .name {
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.header .top-menu ul li a .icon {
    font-size: 14px !important;
    margin-bottom: 6px !important;
}

/* =========================================
   6. BOTÓN DE MODO OSCURO (INTERRUPTOR)
   ========================================= */
.mode-switch-btn { 
    z-index: 999; 
}

.mode-switch-btn .tgl { display: none; }

/* Contenedor Ovalado (PC) */
.mode-switch-btn .mode-swich-label {
    cursor: pointer;
    background: #323232;
    width: 54px;
    height: 28px;
    border-radius: 30px;
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    transition: background 0.3s, border-color 0.3s;
    border: 1px solid rgba(255,255,255,0.15);
    box-sizing: border-box;
}

.mode-switch-btn .tgl:checked + .mode-swich-label {
    background: #f0f0f0;
    border: 1px solid #ccc;
}

/* La "Bola" deslizante (Solo PC) */
.mode-switch-btn .mode-swich-label:after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #78cc6d;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: block; 
}

.mode-switch-btn .tgl:checked + .mode-swich-label:after {
    transform: translateX(26px);
}

/* Iconos Sol/Luna */
.mode-switch-btn .fa-sun { color: #ffb300; font-size: 12px; z-index: 1; }
.mode-switch-btn .fa-moon { color: #fff; font-size: 11px; z-index: 1; }

.mode-switch-btn .mode-swich-label .sw-before,
.mode-switch-btn .mode-swich-label .sw-after {
    background: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
    top: auto; left: auto;
}

/* =========================================
   7. MODO OSCURO "PREMIUM" (ESTILOS GLOBALES)
   ========================================= */
body.body-style-dark { background-color: #121214 !important; color: #a0a0a0 !important; }
body.body-style-dark .background.gradient { background: -webkit-linear-gradient(top left, #121214 0%, #1c1c1e 100%) !important; background: linear-gradient(to bottom right, #121214 0%, #1c1c1e 100%) !important; }

body.body-style-dark .card-inner,
body.body-style-dark .card-started,
body.body-style-dark .header {
    background-color: #1e1e24 !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(255,255,255,0.03);
}

.card-inner, .header, .text-box, .info-list, input, textarea, .service-item, .menu-btn {
    transition: background-color 0.4s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.body-style-dark .title, body.body-style-dark h1, body.body-style-dark h2, body.body-style-dark h3, body.body-style-dark h4, body.body-style-dark h5, body.body-style-dark strong, body.body-style-dark .name { color: #e1e1e6 !important; }
body.body-style-dark p, body.body-style-dark span, body.body-style-dark .desc, body.body-style-dark li { color: #b3b3b3 !important; }
body.body-style-dark .border-line-v:after, body.body-style-dark .border-line-h:after { background-color: rgba(255, 255, 255, 0.08) !important; }
body.body-style-dark input, body.body-style-dark textarea { background-color: #16161a !important; color: #eee !important; border: 1px solid #2d2d36 !important; }
body.body-style-dark input:focus, body.body-style-dark textarea:focus { border-color: #78cc6d !important; box-shadow: 0 0 0 2px rgba(120, 204, 109, 0.2); }

body.body-style-dark .icon i, body.body-style-dark .social a { color: #78cc6d !important; text-shadow: 0 0 12px rgba(120, 204, 109, 0.4); }
body.body-style-dark .social a:hover { color: #fff !important; text-shadow: none; }

body.body-style-dark::-webkit-scrollbar { width: 10px; }
body.body-style-dark::-webkit-scrollbar-track { background: #121214; }
body.body-style-dark::-webkit-scrollbar-thumb { background: #333; border-radius: 5px; border: 2px solid #121214; }
body.body-style-dark::-webkit-scrollbar-thumb:hover { background: #78cc6d; }

/* =====================================================
   8. CORRECCIÓN ETIQUETAS Y TEXTOS (MODO OSCURO)
   ===================================================== */
body.body-style-dark .info-label {
    color: #ffffff !important; 
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); 
}

body.body-style-dark .header .profile .subtitle { color: #78cc6d !important; }

body.body-style-dark .top-menu ul li a, 
body.body-style-dark .top-menu ul li a .icon, 
body.body-style-dark .top-menu ul li a .name { 
    color: #a0a0a0 !important; 
    transition: color 0.3s ease; 
}

body.body-style-dark .top-menu ul li.current-menu-item a, 
body.body-style-dark .top-menu ul li.current-menu-item a .icon, 
body.body-style-dark .top-menu ul li.current-menu-item a .name, 
body.body-style-dark .top-menu ul li a:hover, 
body.body-style-dark .top-menu ul li a:hover .icon, 
body.body-style-dark .top-menu ul li a:hover .name { 
    color: #78cc6d !important; 
    text-shadow: 0 0 10px rgba(120, 204, 109, 0.2); 
}

/* =====================================================
   9. CORRECCIÓN MENÚ HAMBURGUESA (MODO OSCURO)
   ===================================================== */
body.body-style-dark .header .menu-btn { 
    background-color: #1e1e24 !important; 
    box-shadow: -5px 0 20px rgba(0,0,0,0.2); 
}
body.body-style-dark .header .menu-btn span, 
body.body-style-dark .header .menu-btn span:before, 
body.body-style-dark .header .menu-btn span:after { 
    background-color: #fff !important; 
}
body.body-style-dark .header .menu-btn:hover span, 
body.body-style-dark .header .menu-btn:hover span:before, 
body.body-style-dark .header .menu-btn:hover span:after { 
    background-color: #78cc6d !important; 
}

/* =========================================
   10. RESPONSIVE Y TRANSFORMACIÓN DEL BOTÓN INTERRUPTOR
   ========================================= */

/* Tablet/Laptop pequeña */
@media (max-width: 1200px) {
    body.body-style-dark .header { background-color: #1e1e24 !important; }
    .mode-switch-btn {
        position: fixed !important;
        top: 28px !important;
        right: 85px !important;
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
        z-index: 10000 !important;
    }
}

/* MÓVIL (max-width: 480px) */
@media (max-width: 480px) {
    .mode-switch-btn {
        top: 0px !important;
        right: 71px !important;
        transform: scale(0.85) !important;
        background: transparent !important; 
        box-shadow: none !important;
    }

    /* Transformar a CÍRCULO */
    .mode-switch-btn .mode-swich-label {
        width: 35px !important;
        height: 35px !important;
        border-radius: 50% !important; 
        padding: 0 !important;
        justify-content: center !important;
        background: #323232 !important; 
        box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    }
    
    .mode-switch-btn .mode-swich-label:after {
        display: none !important;
    }

    /* Animación de Rotación */
    .mode-switch-btn .fa-sun,
    .mode-switch-btn .fa-moon {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        font-size: 16px !important;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
    }

    /* ESTADO A: MODO CLARO */
    .mode-switch-btn .fa-moon {
        opacity: 1 !important;
        transform: translate(-50%, -50%) rotate(0deg) scale(1) !important;
        color: #fff !important;
    }
    .mode-switch-btn .fa-sun {
        opacity: 0 !important;
        transform: translate(-50%, -50%) rotate(-90deg) scale(0.5) !important;
    }

    /* ESTADO B: MODO OSCURO */
    .mode-switch-btn .tgl:checked + .mode-swich-label {
        background: #1e1e24 !important; 
        border: 1px solid rgba(255,255,255,0.15) !important;
        box-shadow: inset 0 0 10px rgba(0,0,0,0.2) !important;
    }

    .mode-switch-btn .tgl:checked + .mode-swich-label .fa-moon {
        opacity: 0 !important;
        transform: translate(-50%, -50%) rotate(90deg) scale(0.5) !important;
    }
    .mode-switch-btn .tgl:checked + .mode-swich-label .fa-sun {
        opacity: 1 !important;
        transform: translate(-50%, -50%) rotate(0deg) scale(1) !important;
        color: #ffb300 !important;
    }

    .header .profile .title {
        max-width: 50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* =========================================
   11. ESTILOS DE TABLA RESPONSIVE (CURSOS)
   ========================================= */

.table-responsive {
    width: 100%;
    overflow-x: auto; 
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px; 
    background: #fff;
    font-size: 14px;
}

/* CABECERA MODO CLARO */
.custom-table thead tr {
    background-color: #78cc6d; 
    color: #ffffff;
    text-align: left;
}

.custom-table th, 
.custom-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    white-space: nowrap; 
}

.custom-table tbody tr:nth-of-type(even) {
    background-color: #f9f9f9;
}

.custom-table tbody tr:last-of-type {
    border-bottom: 2px solid #78cc6d;
}

.custom-table tbody tr:hover {
    background-color: rgba(120, 204, 109, 0.1);
    transition: background-color 0.2s ease;
}

.custom-table td:nth-child(3),
.custom-table th:nth-child(3) {
    text-align: center;
    font-weight: 600;
    color: #78cc6d;
}

/* ADAPTACIÓN TABLA A MODO OSCURO */
body.body-style-dark .table-responsive {
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

body.body-style-dark .custom-table {
    background-color: #1e1e24; 
    color: #a0a0a0;
}

body.body-style-dark .custom-table th {
    background-color: #2d2d36; 
    color: #ffffff !important;
    border-bottom: 1px solid #444;
}

body.body-style-dark .custom-table td {
    border-bottom: 1px solid #2d2d36;
    color: #ccc;
}

body.body-style-dark .custom-table tbody tr:nth-of-type(even) {
    background-color: #16161a;
}

body.body-style-dark .custom-table tbody tr:hover {
    background-color: #25252d;
}

/* =========================================
   12. AJUSTES ESPECÍFICOS MÓVIL (TABLAS)
   ========================================= */
@media (max-width: 768px) {
    /* Ocultamos la columna de Institución (2) y Horas (3) en móviles */
    .custom-table th:nth-child(2),
    .custom-table td:nth-child(2),
    .custom-table th:nth-child(3),
    .custom-table td:nth-child(3) {
        display: none !important;
    }

    /* Tabla ocupa el ancho completo sin scroll horizontal */
    .custom-table {
        min-width: 100% !important;
        width: 100% !important;
    }

    /* Texto ajustado para que baje de línea si es muy largo */
    .custom-table td {
        font-size: 14px;
        white-space: normal !important;
    }
    
    .table-responsive {
        overflow-x: hidden !important;
    }
}