/* =========================================
   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. TABLA DE CERTIFICACIONES Y CURSOS
       (integrada con el diseño del sitio)
   ========================================= */
.table-responsive {
    width: 100%;
    margin-bottom: 10px;
    border-radius: 14px;
    overflow: hidden;          /* recorta esquinas redondeadas */
    overflow-y: auto;          /* lista larga -> scroll vertical interno */
    max-height: 520px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 30px rgba(80, 163, 162, 0.10);
    -webkit-overflow-scrolling: touch;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    font-size: 14px;
}

/* Cabecera: verde del sitio + fija al hacer scroll */
.custom-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: linear-gradient(to right, #50a3a2 0%, #78cc6d 100%);
    color: #fff;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
    padding: 14px 16px;
    border: none;
}
.custom-table thead th:last-child { text-align: center; }

.custom-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    color: #4a4a4a;
    vertical-align: middle;
}
.custom-table tbody tr:last-child td { border-bottom: none; }

.custom-table td[data-label="Curso / Área"] { font-weight: 600; color: #2c2c2c; }
.custom-table td[data-label="Institución"] { color: #8a8a8a; font-size: 13px; }
.custom-table td[data-label="Horas"] { text-align: center; white-space: nowrap; }

/* Zebra sutil + hover con tinte verde */
.custom-table tbody tr:nth-of-type(even) { background: rgba(120, 204, 109, 0.05); }
.custom-table tbody tr:hover { background: rgba(120, 204, 109, 0.14); transition: background-color 0.2s ease; }

/* "Pill" verde para las horas */
.cert-h {
    display: inline-block;
    min-width: 32px;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(120, 204, 109, 0.15);
    color: #4c9d43;
    font-weight: 700;
    font-size: 13px;
}
.cert-h-total { background: rgba(80, 163, 162, 0.18); color: #3a8f8e; }

/* Fila de total */
.custom-table tfoot .cert-total td {
    background: rgba(80, 163, 162, 0.08);
    font-weight: 700;
    color: #3a3a3a;
    border-top: 2px solid #78cc6d;
    border-bottom: none;
    padding: 14px 16px;
}
.custom-table tfoot .cert-total td:last-child { text-align: center; }

/* ---- Modo oscuro ---- */
body.body-style-dark .table-responsive {
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
body.body-style-dark .custom-table thead th {
    background: linear-gradient(to right, #2d2d36 0%, #3a3a45 100%);
    color: #fff !important;
}
body.body-style-dark .custom-table td { border-bottom-color: rgba(255, 255, 255, 0.06); color: #b8b8b8; }
body.body-style-dark .custom-table td[data-label="Curso / Área"] { color: #e6e6e6; }
body.body-style-dark .custom-table td[data-label="Institución"] { color: #8f8f8f; }
body.body-style-dark .custom-table tbody tr:nth-of-type(even) { background: rgba(255, 255, 255, 0.02); }
body.body-style-dark .custom-table tbody tr:hover { background: rgba(120, 204, 109, 0.10); }
body.body-style-dark .cert-h { background: rgba(120, 204, 109, 0.14); color: #89d97e; }
body.body-style-dark .cert-h-total { background: rgba(120, 204, 109, 0.14); color: #7fd3f0; }
body.body-style-dark .custom-table tfoot .cert-total td {
    background: rgba(120, 204, 109, 0.06);
    color: #e6e6e6;
    border-top-color: #78cc6d;
}

/* =========================================
   12. TABLA EN MÓVIL: cada fila = tarjeta
       (mantiene TODA la información visible)
   ========================================= */
@media (max-width: 768px) {
    .table-responsive {
        max-height: none;
        overflow: visible;
        border: none;
        box-shadow: none;
        border-radius: 0;
        background: transparent;
    }

    .custom-table thead { display: none; }   /* se sustituye por etiquetas por celda */

    .custom-table tbody,
    .custom-table tfoot,
    .custom-table tr,
    .custom-table td { display: block; width: 100%; }

    .custom-table tbody tr {
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 6px 6px 4px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    }
    .custom-table tbody tr:nth-of-type(even) { background: #fff; }   /* sin zebra en tarjetas */
    .custom-table tbody tr:hover { background: #fff; }

    .custom-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 9px 14px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        white-space: normal;
        text-align: right;
    }
    .custom-table tbody tr td:last-child { border-bottom: none; }

    /* Etiqueta (data-label) a la izquierda de cada dato */
    .custom-table td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        text-align: left;
        font-weight: 600;
        color: #78cc6d;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.5px;
    }

    /* Primera celda = título de la tarjeta */
    .custom-table td[data-label="Curso / Área"] {
        justify-content: flex-start;
        text-align: left;
        font-size: 15px;
        background: rgba(120, 204, 109, 0.08);
        border-radius: 8px;
        margin-bottom: 4px;
    }
    .custom-table td[data-label="Curso / Área"]::before { display: none; }

    /* Fila de total como tarjeta destacada */
    .custom-table tfoot .cert-total {
        background: rgba(80, 163, 162, 0.10);
        border: 1px solid #78cc6d;
        border-radius: 12px;
        margin-top: 4px;
        padding: 4px 6px;
    }
    .custom-table tfoot .cert-total td { text-align: center; justify-content: center; border-bottom: none; }
    .custom-table tfoot .cert-total td::before { display: none; }

    /* Tarjetas en modo oscuro */
    body.body-style-dark .custom-table tbody tr,
    body.body-style-dark .custom-table tbody tr:nth-of-type(even),
    body.body-style-dark .custom-table tbody tr:hover {
        background: #1e1e24;
        border-color: rgba(255, 255, 255, 0.06);
    }
    body.body-style-dark .custom-table td { border-bottom-color: rgba(255, 255, 255, 0.05); }
    body.body-style-dark .custom-table td[data-label="Curso / Área"] { background: rgba(120, 204, 109, 0.10); }
    body.body-style-dark .custom-table tfoot .cert-total { background: rgba(120, 204, 109, 0.08); }
}

/* =========================================
   13. EFECTO DE ENTRADA AL CAMBIAR DE MENÚ
   ========================================= */

/* Keyframes ---------------------------------------------------- */

/* ESCRITORIO: la tarjeta emerge deslizándose desde detrás de la
   tarjeta del perfil (la de la foto). Como el perfil tiene mayor
   z-index, la parte izquierda de la tarjeta queda oculta tras la
   foto y va apareciendo al deslizarse hacia la derecha. */
@keyframes cardEmerge {
    0%   { opacity: 0; transform: translateX(-260px) scale(0.92); }
    40%  { opacity: 1; }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* MÓVIL/TABLET: fundido suave con leve ascenso (sin desplazamiento
   lateral, para no provocar scroll horizontal en pantallas chicas). */
@keyframes cardWrapIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Aplicación -------------------------------------------------- */

/* En escritorio animamos el CONTENEDOR .card-inner para que salga
   desde atrás del perfil. Se usa !important porque el contenedor
   lleva la clase .animated, que el tema anula cuando el sistema
   tiene activado "reducir movimiento"; así el efecto se ve igual. */
@media (min-width: 1121px) {
    .card-inner.fadeInLeft {
        transform-origin: center left;
        -webkit-animation: cardEmerge 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both !important;
        animation: cardEmerge 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both !important;
        will-change: opacity, transform;
    }
}

/* En móvil/tablet animamos el contenido interno (.card-wrap), que
   no lleva .animated, para un fundido suave y sin scroll lateral. */
@media (max-width: 1120px) {
    .card-inner.fadeInLeft .card-wrap {
        animation: cardWrapIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
        will-change: opacity, transform;
    }
}