{"id":3781,"date":"2025-10-15T16:23:21","date_gmt":"2025-10-15T21:23:21","guid":{"rendered":"http:\/\/10.190.55.6\/?page_id=3781"},"modified":"2026-03-30T10:59:29","modified_gmt":"2026-03-30T15:59:29","slug":"cursos-seminarios","status":"publish","type":"page","link":"https:\/\/www.ana.gob.pa\/index.php\/cursos-seminarios\/","title":{"rendered":"Capacitaciones \/ Cursos"},"content":{"rendered":"    <div class=\"wp-block-bplugins-custom-html\" id='bPluginsCustomHtml-1'>\n    <style>\n  \/* MANTENER TODO EXACTAMENTE IGUAL QUE ANTES *\/\n  .entry-content a\n  {\n    color: #000000;\n  }\n  \/* --- Tarjetas de Cursos --- *\/\n  .card {\n    transition: all 0.3s ease-in-out;\n    position: relative;\n    overflow: hidden;\n    border: none;\n    border-radius: 12px;\n    box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n  .card:hover { transform: translateY(-6px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); }\n  .card-header { position: relative; padding: 0; }\n  .card-img-top { object-fit: cover; height: 150px; width: 100%; border-radius: 12px 12px 0 0; }\n  .card-body { padding: 1.2rem; flex-grow: 1; }\n  .card-body h5 { margin-bottom: 1rem; font-size: 1.1rem; font-weight: 700; color: #003875; }\n  .card-body h6 { font-size: 0.85rem; margin: 0.3rem 0; color: #444; }\n  .card-footer { background-color: #f8f9fa; border-top: 1px solid #ddd; padding: 0; }\n\n  .btn-footer {\n    background-color: #003875 !important;\n    color: white !important;\n    border: none;\n    font-size: 0.95rem;\n    width: 100%;\n    padding: 0.6rem;\n    border-radius: 0 0 12px 12px;\n    transition: all 0.2s ease;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 6px;\n    text-decoration: none;\n  }\n  .btn-footer:hover { background-color: #ffcc00 !important; color: #000 !important; }\n\n  .card.disabled { opacity: 0.6; filter: grayscale(100%); }\n  .card.disabled::after {\n    content: \"Esta Capacitaci\u00f3n no est\u00e1 disponible actualmente\";\n    position: absolute;\n    top: 45%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    background: rgba(0, 0, 0, 0.65);\n    color: #fff;\n    padding: 0.8rem 1.2rem;\n    border-radius: 10px;\n    font-size: 0.95rem;\n    width: 80%;\n    text-align: center;\n    display: block;\n  }\n  .card.disabled .btn-footer { background-color: #6c757d !important; cursor: not-allowed; }\n\n  @media (max-width: 576px) {\n    .card-body h5 { font-size: 1rem; }\n    .card-img-top { height: 120px; }\n  }\n\n  \/* --- Subrayado personalizado --- *\/\n  .custom-underline {\n    display: inline-block;\n    position: relative;\n    padding-bottom: 3px;\n  }\n  .custom-underline::after {\n    content: \"\";\n    position: absolute;\n    left: -25px;\n    right: -25px;\n    bottom: 0;\n    height: 3px;\n    background-color: #fcaa52;\n  }\n\n  .custom-btn-guide {\n  background: linear-gradient(135deg, #f7f7f7, #ffffff);\n  border: 2px solid #fcaa52;\n  color: #333;\n  border-radius: 50px;      \/* <-- Botones redondeados tipo pill *\/\n  padding: 0.75rem 2rem;    \/* Ajusta altura y ancho *\/\n  transition: all 0.3s ease;\n    box-shadow: 0 3px 6px rgba(0,0,0,0.1);\n}\n\n.custom-btn-guide:hover {\n  background: #fcaa52;\n  color: #fff;\n  transform: translateY(-3px);\n  box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n}\n\n\n  \/* --- Blockquote personalizado --- *\/\n  .custom-blockquote {\n    position: relative;\n    background-color: #f8f9fa;\n    border-left: 4px solid #dee2e6;\n    transition: border-color 0.3s ease, transform 0.3s ease;\n    padding: 1.5rem 2rem;\n  }\n  .custom-blockquote:hover {\n    transform: scale(1.01);\n    border-left-color: #fcaa52 !important;\n    cursor: pointer;\n  }\n  .custom-blockquote i.fa-solid {\n    font-size: 2.5rem;\n    color: #adb5bd;\n    margin-right: 15px;\n    transition: color 0.3s ease;\n  }\n  .custom-blockquote:hover i.fa-solid { color: #fcaa52; }\n  .custom-blockquote .blockquote-header {\n    font-size: 1.25rem;\n    text-align: justify;\n    font-weight: 500;\n    color: #212529;\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  \/* --- Bot\u00f3n efecto Lightning --- *\/\n  .modern-lightning-neutral {\n    font-size: 15px;\n    padding: 0.8rem 2rem;\n    background-color: #f2f2f2;\n    color: #212529;\n    position: relative;\n    overflow: hidden;\n    z-index: 1;\n    transition: all 0.5s ease;\n    border: none;\n    line-height: 1.5;\n  }\n  .modern-lightning-neutral:hover {\n    background-color: #fcaa52;\n    color: #000000;\n    transform: translateY(-4px);\n    box-shadow: 0 10px 20px rgba(0,0,0,0.2);\n  }\n  .modern-lightning-neutral::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: -100%;\n    width: 30px;\n    height: 100%;\n    background: rgba(255, 255, 255, 0.6);\n    transform: skewX(-20deg);\n    z-index: 2;\n    animation: lightning-flash 5s infinite;\n  }\n  @keyframes lightning-flash {\n    0% { left: -100%; }\n    10%,100% { left: 110%; }\n  }\n  .col-12.text-center > .modern-lightning-neutral:nth-child(2)::before {\n    animation-delay: 2.5s;\n  }\n \n    .custom-underline \n    {\n        display: inline-block;\n        position: relative;\n        padding-bottom: 3px;\n    }\n    .custom-underline::after \n    {\n        content: \"\";\n        position: absolute;\n        left: 0;\n        right: -5px;\n        bottom: 0;\n        height: 3px;\n        background-color: #fcaa52;\n    }\n    .accordion .card { margin-bottom: 10px; border: 1px solid #dee2e6; }\n    .accordion .card-header { padding: 0; }\n    .accordion .btn-link \n    { \n        display: flex; \n        align-items: center;\n        justify-content: space-between;\n        width: 100%; \n        text-align: left; \n        color: #003875; \n        font-weight: 600; \n        text-decoration: none; \n        padding: 15px 20px; \n        transition: all 0.3s ease; \n    }\n    .accordion .btn-link:hover, .accordion .btn-link:focus { background-color: #fcaa52; color: #fff; text-decoration: none; }\n    .accordion .btn-link.collapsed { background-color: #f8f9fa; color: #003875; }\n    .accordion .btn-link.no-data { color: #6c757d; font-style: italic; background-color: #e9ecef; cursor: default; }\n    .accordion-arrow \n    {\n        transition: transform 0.3s ease-in-out;\n        display: flex; \n        align-items: center;\n        margin-left: 15px;\n    }\n    .accordion .btn-link.collapsed .accordion-arrow \n    {\n        transform: rotate(0deg);\n    }\n    .accordion .btn-link:not(.collapsed) .accordion-arrow \n    {\n        transform: rotate(90deg);\n    }\n    .archivos-list \n    {\n        width: 100%;              \n        padding-left: 0 !important;\n        margin-left: 0 !important;\n        list-style: none;          \n    }\n    .archivos-list li \n    {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        background: #f8f9fa;\n        padding: 15px;\n        border-radius: 8px;\n        border-left: 5px solid #999999;\n        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n        margin-bottom: 10px;\n        transition: transform 0.3s ease-in-out, border-left-color 0.3s ease-in-out;\n        width: 100%;              \n    }\n    .archivos-list li:hover \n    {\n        transform: scale(1.02);\n        border-left-color: #fcaa52;\n    }\n    .archivos-list li a \n    {\n        text-decoration: none !important;\n        color: #555 !important;\n        display: flex;\n        align-items: center;\n        gap: 15px;\n        flex: 1;\n        transition: color 0.3s ease-in-out;\n        overflow-wrap: break-word;\n        white-space: normal;\n    }\n    .archivos-list li:hover a \n    {\n        color: #003875 !important;\n    }\n    .archivos-list li i \n    {\n        font-size: 1.2em;\n        color: #999999;\n        flex-shrink: 0;\n    }\n    .archivos-list li:hover i \n    {\n        color: #003875;\n    }\n    .archivos-list .fecha \n    {\n        width: 90px;\n        min-width: 90px;\n        text-align: center;\n        color: #666;\n        font-weight: 600;\n        font-size: 0.9rem;\n    }\n    .alert-info \n    {\n        padding: 20px !important;\n    }\n    .accordion .btn-link:not(.collapsed) \n    { \n        background-color: #fcaa52;\n        color: #fff;\n        font-weight: bold;\n    }\n    .accordion .btn-link.collapsed \n    { \n        background-color: #f8f9fa; \n        color: #003875; \n    }\n    .accordion .btn-link:hover, \n    .accordion .btn-link:focus \n    { \n        background-color: #fcaa52; \n        color: #fff; \n        text-decoration: none; \n    }\n    .accordion .btn-link \n    {\n        font-weight: 600;\n    }\n    \n    \/* --- NUEVOS ESTILOS PARA VIDEOS THUMBNAIL --- *\/\n    .video-gallery-container {\n        display: none; \/* Oculto por defecto, se muestra cuando hay videos *\/\n    }\n    \n    .video-thumbnail-grid {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 20px;\n        margin-bottom: 30px;\n    }\n    \n    @media (max-width: 1200px) {\n        .video-thumbnail-grid {\n            grid-template-columns: repeat(3, 1fr);\n        }\n    }\n    \n    @media (max-width: 768px) {\n        .video-thumbnail-grid {\n            grid-template-columns: repeat(2, 1fr);\n        }\n    }\n    \n    @media (max-width: 576px) {\n        .video-thumbnail-grid {\n            grid-template-columns: 1fr;\n        }\n    }\n    \n    .video-thumbnail-card {\n        background: #fff;\n        border-radius: 12px;\n        overflow: hidden;\n        box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n        transition: all 0.3s ease;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n    }\n    \n    .video-thumbnail-card:hover {\n        transform: translateY(-5px);\n        box-shadow: 0 8px 20px rgba(0,0,0,0.15);\n    }\n    \n    .video-thumbnail {\n        position: relative;\n        height: 160px;\n        overflow: hidden;\n        background: #000;\n    }\n    \n    .video-thumbnail img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        transition: transform 0.3s ease;\n    }\n    \n    .video-thumbnail-card:hover .video-thumbnail img {\n        transform: scale(1.05);\n    }\n    \n    .video-play-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 56, 117, 0.8);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        opacity: 0;\n        transition: opacity 0.3s ease;\n    }\n    \n    .video-thumbnail-card:hover .video-play-overlay {\n        opacity: 1;\n    }\n    \n    .play-button {\n        background: #ffcc00;\n        width: 60px;\n        height: 60px;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: #000;\n        font-size: 24px;\n        transform: scale(0.8);\n        transition: transform 0.3s ease;\n    }\n    \n    .video-thumbnail-card:hover .play-button {\n        transform: scale(1);\n    }\n    \n    .video-thumbnail-content {\n        padding: 15px;\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n    }\n    \n    .video-thumbnail-title {\n        font-weight: 600;\n        color: #003875;\n        margin-bottom: 8px;\n        font-size: 0.95rem;\n        line-height: 1.3;\n        flex-grow: 1;\n    }\n    \n    .video-thumbnail-description {\n        color: #666;\n        font-size: 0.85rem;\n        margin-bottom: 10px;\n        line-height: 1.4;\n    }\n    \n    .video-duration {\n        background: #003875;\n        color: white;\n        padding: 3px 8px;\n        border-radius: 4px;\n        font-size: 0.75rem;\n        font-weight: 600;\n        display: inline-block;\n        margin-top: auto;\n    }\n    \n    \/* CORRECCI\u00d3N ESPEC\u00cdFICA: Paginaci\u00f3n mejorada *\/\n    .video-pagination {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        margin-top: 30px;\n        padding-bottom: 20px;\n        gap: 8px; \/* Espacio uniforme *\/\n        flex-wrap: wrap;\n    }\n    \n    .page-btn {\n        background: #f8f9fa;\n        border: 1px solid #dee2e6;\n        color: #003875;\n        min-width: 40px;\n        height: 40px;\n        border-radius: 8px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        transition: all 0.2s ease;\n        font-weight: 600;\n        margin: 0 2px; \/* Esto hace que los n\u00fameros est\u00e9n juntos *\/\n        padding: 0 10px;\n    }\n    \n    .page-btn:hover:not(.disabled) {\n        background: #fcaa52;\n        color: #fff;\n        border-color: #fcaa52;\n    }\n    \n    .page-btn.active {\n        background: #003875;\n        color: white;\n        border-color: #003875;\n    }\n    \n    .page-btn.disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n    }\n    \n    .page-info {\n        margin-left: 20px;\n        color: #666;\n        font-size: 0.9rem;\n        background: #f8f9fa;\n        padding: 8px 16px;\n        border-radius: 20px;\n        border: 1px solid #dee2e6;\n    }\n    \n    \/* Para que los n\u00fameros 1 y 2 est\u00e9n juntos *\/\n    .pagination-numbers {\n        display: flex;\n        gap: 4px;\n        align-items: center;\n    }\n    \n    \/* Modal de video - CORREGIDO para Vimeo *\/\n    .video-modal-overlay {\n        display: none;\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0,0,0,0.95);\n        z-index: 9999;\n        align-items: center;\n        justify-content: center;\n        padding: 20px;\n    }\n    \n    .video-modal-content {\n        background: #fff;\n        border-radius: 12px;\n        max-width: 1000px;\n        width: 100%;\n        max-height: 90vh;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .video-modal-header {\n        background: #003875;\n        color: white;\n        padding: 15px 20px;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n    \n    .video-modal-title {\n        color: #FFFFFF !important;\n        font-size: 1.2rem;\n        font-weight: 600;\n        margin: 0;\n        flex-grow: 1;\n        display: flex;\n        align-items: center;\n        gap: 10px;\n    }\n    \n    .close-video-modal {\n        background: none;\n        border: none;\n        color: white;\n        font-size: 24px;\n        cursor: pointer;\n        padding: 0;\n        width: 30px;\n        height: 30px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: transform 0.2s ease;\n    }\n    \n    .close-video-modal:hover {\n        transform: rotate(90deg);\n    }\n    \n    .video-player-container {\n        width: 100%;\n        padding: 0;\n        background: #000;\n        aspect-ratio: 16\/9; \/* Mantener proporci\u00f3n correcta *\/\n        position: relative;\n    }\n    \n    .video-player-container iframe {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n    }\n    \n    .video-player-container video {\n        width: 100%;\n        height: 100%;\n        max-height: 70vh;\n        border-radius: 0;\n        display: block;\n    }\n    \n    .video-modal-description {\n        padding: 15px 20px;\n        background: #f8f9fa;\n        border-top: 1px solid #dee2e6;\n        font-size: 0.95rem;\n        color: #555;\n        max-height: 150px;\n        overflow-y: auto;\n    }\n    \n    \/* Badge para tipo de video en el modal *\/\n    .video-type-badge {\n        background-color: #ffcc00;\n        color: #000;\n        font-size: 0.7rem;\n        font-weight: 600;\n        padding: 3px 8px;\n        border-radius: 20px;\n        display: inline-block;\n        vertical-align: middle;\n    }\n    \n    \/* Bot\u00f3n para ver como thumbnail\/listado *\/\n    .view-toggle-buttons {\n        display: flex;\n        gap: 10px;\n        margin-bottom: 20px;\n    }\n    \n    .view-toggle-btn {\n        background: #f8f9fa;\n        border: 1px solid #dee2e6;\n        color: #666;\n        padding: 8px 16px;\n        border-radius: 6px;\n        cursor: pointer;\n        transition: all 0.2s ease;\n        font-size: 0.9rem;\n        display: flex;\n        align-items: center;\n        gap: 5px;\n    }\n    \n    .view-toggle-btn.active {\n        background: #003875;\n        color: white;\n        border-color: #003875;\n    }\n    \n    .view-toggle-btn:hover:not(.active) {\n        background: #e9ecef;\n        border-color: #ced4da;\n    }\n<\/style>\n\n<div class=\"container services\">\n  <div class=\"row gx-4 gx-lg-5 align-items-center my-5\">\n    <div class=\"col-lg-12 text-center\">\n      <h3 class=\"fw-bold custom-underline mb-5 text-uppercase\">Cursos Siga<\/h3>\n    <\/div>\n    <div class=\"col-md-12\">\n      <blockquote class=\"blockquote custom-blockquote p-3 rounded shadow-sm\">\n        <h2 class=\"blockquote-header fs-5 text-justify mb-2\">\n          Bienvenidos al \u00c1rea de Capacitaci\u00f3n y Desarrollo Personal. A continuaci\u00f3n, se listan los cursos disponibles y los que ya han cerrado su inscripci\u00f3n.\n        <\/h2>\n      <\/blockquote>\n    <\/div>\n  <\/div>\n\n  <!-- Secci\u00f3n de Cursos (Categor\u00eda 1) -->\n  <div class=\"row g-4 cursoHTML mb-5\"><\/div>\n\n  <!-- Secci\u00f3n para Videos (Categor\u00edas 6, 7 y 8) -->\n  <div class=\"video-gallery-container\">\n    <div class=\"row mb-4\">\n      <div class=\"col-md-12\">\n        <div class=\"view-toggle-buttons\">\n          <button class=\"view-toggle-btn active\" data-view=\"thumbnail\">\n            <i class=\"fa-solid fa-grip\"><\/i> Vista Thumbnail\n          <\/button>\n          <button class=\"view-toggle-btn\" data-view=\"list\">\n            <i class=\"fa-solid fa-list\"><\/i> Vista Listado\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n    \n    <div class=\"video-thumbnail-view\">\n      <div class=\"video-thumbnail-grid\"><\/div>\n      <div class=\"video-pagination\">\n        <div class=\"pagination-nav\">\n          <button class=\"page-btn prev-btn\" title=\"P\u00e1gina anterior\">\n            <i class=\"fa-solid fa-chevron-left\"><\/i>\n          <\/button>\n        <\/div>\n        \n        <div class=\"pagination-numbers\"><\/div>\n        \n        <div class=\"pagination-nav\">\n          <button class=\"page-btn next-btn\" title=\"P\u00e1gina siguiente\">\n            <i class=\"fa-solid fa-chevron-right\"><\/i>\n          <\/button>\n        <\/div>\n        \n        <div class=\"page-info\">\n          Mostrando <span id=\"currentRange\">0-0<\/span> de <span id=\"totalVideos\">0<\/span> videos\n        <\/div>\n      <\/div>\n    <\/div>\n    \n    <div class=\"video-list-view\" style=\"display: none;\">\n      <div id=\"accordionVideos\" class=\"accordion\"><\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Secci\u00f3n de Acorde\u00f3n para Categor\u00edas 2-5 -->\n  <div class=\"row\">\n    <div class=\"col-lg-12\">\n      <div id=\"accordionCategorias\" class=\"accordion\"><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- Modal para ver video - CORREGIDO para Vimeo -->\n<div class=\"video-modal-overlay\">\n  <div class=\"video-modal-content\">\n    <div class=\"video-modal-header\">\n      <h3 class=\"video-modal-title\"><\/h3>\n      <button class=\"close-video-modal\">\n        <i class=\"fa-solid fa-times\"><\/i>\n      <\/button>\n    <\/div>\n    <div class=\"video-player-container\">\n      <!-- Aqu\u00ed se inyectar\u00e1 el video (video tag o iframe) -->\n    <\/div>\n    <div class=\"video-modal-description\"><\/div>\n  <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n  \/\/ --- Detecci\u00f3n de entorno y rutas base ---\n  const getBaseUrl = () => {\n    const hostname = window.location.hostname;\n    const pathname = window.location.pathname;\n    if (hostname === 'localhost' || hostname === '127.0.0.1' || hostname.startsWith('192.168.')) {\n      if (pathname.includes('\/w_ana\/')) return '\/w_ana';\n      return '';\n    }\n    return '';\n  };\n  \n  const BASE_URL = getBaseUrl();\n  console.log('Entorno detectado - Base URL:', BASE_URL || '(ra\u00edz)');\n  \n  const buildUrl = (path) => {\n    if (!path) return path;\n    if (path.startsWith('http') || path.startsWith('\/\/')) return path;\n    if (path.startsWith('\/')) return `${BASE_URL}${path}`;\n    return path;\n  };\n\n  const cursosContenedor = document.querySelector(\".cursoHTML\");\n  const accordionContainer = document.getElementById(\"accordionCategorias\");\n  const videoGalleryContainer = document.querySelector(\".video-gallery-container\");\n  const videoThumbnailGrid = document.querySelector(\".video-thumbnail-grid\");\n  const paginationNumbers = document.querySelector(\".pagination-numbers\");\n  const pageInfo = document.querySelector(\".page-info\");\n  const accordionVideos = document.getElementById(\"accordionVideos\");\n  const videoModal = document.querySelector(\".video-modal-overlay\");\n  const videoPlayerContainer = videoModal.querySelector('.video-player-container');\n  const videoModalTitle = videoModal.querySelector('.video-modal-title');\n  const videoModalDescription = videoModal.querySelector('.video-modal-description');\n  const currentRangeSpan = document.getElementById('currentRange');\n  const totalVideosSpan = document.getElementById('totalVideos');\n  \n  \/\/ --- Fecha\/hora actual en Panam\u00e1 ---\n  const ahoraPanama = new Date(new Date().toLocaleString(\"en-US\", { timeZone: \"America\/Panama\" }));\n  \n  \/\/ Convertir fecha string + hora a timestamp (UTC-5 fijo)\n  const convertirFechaHora = (fechaStr, hora = 0, minuto = 0) => {\n    if (!fechaStr) return null;\n    const [dia, mes, a\u00f1o] = fechaStr.split(\"\/\").map(Number);\n    const utcTimestamp = Date.UTC(a\u00f1o, mes - 1, dia, hora, minuto, 0);\n    const panamaOffsetMs = -5 * 60 * 60 * 1000; \/\/ UTC-5\n    return utcTimestamp + panamaOffsetMs;\n  };\n\n  \/\/ Variables para paginaci\u00f3n de videos\n  let currentVideoPage = 1;\n  const videosPerPage = 4;\n  let allVideos = [];\n  let currentVideoView = 'thumbnail';\n\n  const nombresCategorias = {\n    \"Cat1\": \"Cursos de Capacitaci\u00f3n\",\n    \"Cat2\": \"Requerimientos para las Empresas\",\n    \"Cat3\": \"Solicitud de Creaci\u00f3n de Usuarios para el SIGA\",\n    \"Cat4\": \"Gu\u00edas y Manuales\",\n    \"Cat5\": \"Archivos Relevantes\",\n    \"Cat6\": \"Archivos Multimedia - OGAS\",\n    \"Cat7\": \"Archivos Multimedia - Retiro Previo\",\n    \"Cat8\": \"Archivos Multimedia - Nuevo\"\n  };\n\n  const videoThumbnails = {\n    \"revision\": buildUrl(\"\/wp-content\/uploads\/pasarela\/thumbnail_IMG_9303.jpg\"),\n    \"retener\": buildUrl(\"\/wp-content\/uploads\/pasarela\/thumbnail_IMG_9303.jpg\"),\n    \"rechazo\": buildUrl(\"\/wp-content\/uploads\/pasarela\/thumbnail_IMG_9303.jpg\"),\n    \"consultar\": buildUrl(\"\/wp-content\/uploads\/pasarela\/thumbnail_IMG_9303.jpg\"),\n    \"busqueda\": buildUrl(\"\/wp-content\/uploads\/pasarela\/thumbnail_IMG_9303.jpg\"),\n    \"aprobacion\": buildUrl(\"\/wp-content\/uploads\/pasarela\/thumbnail_IMG_9303.jpg\"),\n    \"default\": buildUrl(\"\/wp-content\/uploads\/pasarela\/thumbnail_IMG_9303.jpg\")\n  };\n\n  const jsonURL = buildUrl(`\/wp-content\/uploads\/cursos.json?nocache=${Date.now()}`);\n\n  fetch(jsonURL)\n    .then(response => {\n      if (!response.ok) throw new Error(\"Error al cargar el JSON\");\n      return response.json();\n    })\n    .then(data => {\n      console.log(\"JSON cargado:\", data);\n      \n      if (data.Cat1 && data.Cat1.Items) {\n        cargarCursos(data.Cat1.Items);\n      }\n\n      \/\/ Procesar videos\n      const videosCat6 = (data.Cat6 && data.Cat6.Items) ? data.Cat6.Items.map(item => ({\n        ...item,\n        categoria: 'Cat6',\n        tituloPersonalizado: `Video 1: ${item.title}`,\n        link: item.link && !item.link.startsWith('http') && !item.link.startsWith('\/\/') ? buildUrl(item.link) : item.link\n      })) : [];\n      \n      const videosCat7 = (data.Cat7 && data.Cat7.Items) ? data.Cat7.Items.map(item => ({\n        ...item,\n        categoria: 'Cat7',\n        tituloPersonalizado: `Video 2: ${item.title}`,\n        link: item.link && !item.link.startsWith('http') && !item.link.startsWith('\/\/') ? buildUrl(item.link) : item.link\n      })) : [];\n      \n      const videosCat8 = (data.Cat8 && data.Cat8.Items) ? data.Cat8.Items.map(item => ({\n        ...item,\n        categoria: 'Cat8',\n        tituloPersonalizado: `Video: ${item.title}`,\n        link: item.link\n      })) : [];\n      \n      allVideos = [...videosCat6, ...videosCat7, ...videosCat8].filter(item => item.status === 1);\n      \n      if (allVideos.length > 0) {\n        videoGalleryContainer.style.display = 'block';\n        setupViewToggleButtons();\n        renderVideos();\n      }\n\n      \/\/ Procesar otras categor\u00edas (Cat2, Cat3, Cat4, Cat5)\n      let accordionHTML = \"\";\n      const categoriasNormales = Object.entries(data).filter(([key]) => ![\"Cat1\",\"Cat6\",\"Cat7\",\"Cat8\"].includes(key));\n      \n      categoriasNormales.forEach(([catKey, catData], index) => {\n        const catNombre = nombresCategorias[catKey] || catKey;\n        const items = catData.Items || [];\n        const itemsActivos = items.filter(item => item.status === 1);\n        \n        const collapseId = `collapse-${catKey}`;\n        const expanded = index === 0;\n        const btnClass = expanded ? \"btn-link\" : \"btn-link collapsed\";\n        const collapseClass = expanded ? \"collapse show\" : \"collapse\";\n        const iconoActual = expanded ? \"fa-solid fa-folder-open\" : \"fa-solid fa-folder\";\n        \n        let contenidoCat = '';\n        if (itemsActivos.length > 0) {\n          contenidoCat = `<ul class=\"archivos-list mb-2\">`;\n          itemsActivos.forEach(item => {\n            const isLink = item.link && item.link !== \"#\";\n            let fullLink = \"#\";\n            if (isLink) {\n              fullLink = item.link.startsWith('http') || item.link.startsWith('\/\/') ? item.link : buildUrl(item.link);\n            }\n            const itemTitle = item.title || \"Sin t\u00edtulo\";\n            contenidoCat += `\n              <li class=\"d-flex align-items-center\">\n                <div class=\"mr-2\" style=\"width: 40px; display: flex; align-items: center; justify-content: center;\">\n                  <i class=\"fa-solid ${isLink ? 'fa-file-pdf' : 'fa-file'} fa-lg\"><\/i>\n                <\/div>\n                ${isLink \n                  ? `<a href=\"${fullLink}\" target=\"_blank\" class=\"flex-grow-1 text-decoration-none\" data-title=\"${itemTitle}\" data-cat=\"${catKey}\">${itemTitle}<\/a>`\n                  : `<span class=\"text-muted flex-grow-1 text-start\">${itemTitle}<\/span>`\n                }\n              <\/li>`;\n          });\n          contenidoCat += `<\/ul>`;\n        } else {\n          contenidoCat = `<div class=\"alert alert-info text-center mt-3\">No hay elementos activos en la categor\u00eda <strong>${catNombre}<\/strong> para mostrar.<\/div>`;\n        }\n        \n        accordionHTML += `\n          <div class=\"card\">\n            <div class=\"card-header\" role=\"tab\" id=\"heading-${catKey}\">\n              <h5 class=\"mb-0\">\n                <button class=\"${btnClass}\" data-toggle=\"collapse\" data-target=\"#${collapseId}\" \n                        aria-expanded=\"${expanded}\" aria-controls=\"${collapseId}\">\n                  <i class=\"${iconoActual} mr-2\"><\/i> ${catNombre} \n                  <span class=\"badge badge-secondary ml-2\">${itemsActivos.length}<\/span>\n                  <span class=\"accordion-arrow ml-auto\"><i class=\"fa-solid fa-angle-right\"><\/i><\/span>\n                <\/button>\n              <\/h5>\n            <\/div>\n            <div id=\"${collapseId}\" class=\"${collapseClass}\" role=\"tabpanel\" \n                 aria-labelledby=\"heading-${catKey}\" data-parent=\"#accordionCategorias\">\n              <div class=\"card-body\">${contenidoCat}<\/div>\n            <\/div>\n          <\/div>`;\n      });\n\n      if (accordionHTML) accordionContainer.innerHTML = accordionHTML;\n      agregarEventosAcordeon();\n      if (typeof Swal !== 'undefined') agregarEventosSweetAlert();\n    })\n    .catch(error => {\n      console.error(\"\u274c Error cargando el JSON:\", error);\n      cursosContenedor.innerHTML = `<div class=\"col-12 text-center text-danger\"><p>Ocurri\u00f3 un error al cargar los cursos. Intenta nuevamente m\u00e1s tarde.<\/p><\/div>`;\n    });\n\n  \/\/ ================== NUEVA FUNCI\u00d3N CARGAR CURSOS ==================\n  function cargarCursos(cursos) {\n    let contenidoHTML = \"\";\n    \/\/ Filtrar por status si existe\n    const cursosActivos = cursos.filter(curso => curso.status === undefined || curso.status === 1);\n    \n    cursosActivos.forEach(curso => {\n      const inicioInscripcion = convertirFechaHora(curso.fecha_inicio_inscripcion, 8, 0);   \/\/ 8:00 AM\n      const cierreInscripcion = convertirFechaHora(curso.fecha_inscripcion, 9, 0);         \/\/ 9:00 AM\n      const ahora = ahoraPanama.getTime();\n      \n      let disponible = false;\n      let estadoTexto = \"\";\n      let estadoClase = \"\";\n      \n      if (inicioInscripcion === null || cierreInscripcion === null) {\n        estadoTexto = \"Fechas inv\u00e1lidas\";\n        estadoClase = \"text-secondary\";\n        disponible = false;\n      } else if (ahora < inicioInscripcion) {\n        estadoTexto = \"Pr\u00f3ximamente\";\n        estadoClase = \"text-warning\";\n        disponible = false;\n      } else if (ahora > cierreInscripcion) {\n        estadoTexto = \"Cerrado\";\n        estadoClase = \"text-danger\";\n        disponible = false;\n      } else {\n        estadoTexto = \"\u00a1Disponible!\";\n        estadoClase = \"text-success\";\n        disponible = true;\n      }\n      \n      const imagenSrc = curso.imagen && !curso.imagen.startsWith('http') && !curso.imagen.startsWith('\/\/')\n                       ? buildUrl(curso.imagen) : curso.imagen;\n      \n      const enlace = disponible \n                    ? (curso.enlace && !curso.enlace.startsWith('http') && !curso.enlace.startsWith('\/\/')\n                       ? buildUrl(curso.enlace) : curso.enlace)\n                    : \"#\";\n      \n      const rangoInscripciones = `${curso.fecha_inicio_inscripcion} al ${curso.fecha_inscripcion}`;\n      \n      contenidoHTML += `\n        <div class=\"col-md-6 col-lg-4 mb-4\">\n          <div class=\"card h-100 ${!disponible ? \"disabled\" : \"\"}\">\n            <div class=\"card-header\">\n              <img decoding=\"async\" src=\"${imagenSrc}\" class=\"card-img-top\" alt=\"${curso.titulo}\">\n            <\/div>\n            <div class=\"card-body text-center\">\n              <h5>${curso.titulo}<\/h5>\n              <div class=\"text-start\">\n                <h6><strong>Duraci\u00f3n:<\/strong> ${curso.duracion}<\/h6>\n                <h6><strong>Modalidad:<\/strong> ${curso.modalidad}<\/h6>\n                <h6><strong>Inscripciones:<\/strong> ${rangoInscripciones}<\/h6>\n                <h6><strong>Inicio Curso:<\/strong> ${curso.fecha_curso}<\/h6>\n                <h6 class=\"${estadoClase}\"><strong>Estado:<\/strong> ${estadoTexto}<\/h6>\n              <\/div>\n            <\/div>\n            <div class=\"card-footer\">\n              <a href=\"${enlace}\" class=\"btn btn-footer text-white\" \n                 ${!disponible ? 'style=\"pointer-events: none;\"' : ''}>\n                 ${disponible ? 'Inscribirse' : estadoTexto} <i class=\"fa-solid fa-chevron-right\"><\/i>\n              <\/a>\n            <\/div>\n          <\/div>\n        <\/div>\n      `;\n    });\n    \n    cursosContenedor.innerHTML = contenidoHTML;\n  }\n\n  \/\/ ================== FUNCIONES DE VIDEOS Y ACORDEONES (sin cambios) ==================\n  function setupViewToggleButtons() {\n    const buttons = document.querySelectorAll('.view-toggle-btn');\n    buttons.forEach(button => {\n      button.addEventListener('click', function() {\n        const viewType = this.getAttribute('data-view');\n        buttons.forEach(btn => btn.classList.remove('active'));\n        this.classList.add('active');\n        currentVideoView = viewType;\n        renderVideos();\n      });\n    });\n  }\n\n  function renderVideos() {\n    if (currentVideoView === 'thumbnail') renderVideoThumbnails();\n    else renderVideoList();\n  }\n\n  function renderVideoThumbnails() {\n    document.querySelector('.video-list-view').style.display = 'none';\n    document.querySelector('.video-thumbnail-view').style.display = 'block';\n    \n    const totalVideos = allVideos.length;\n    const totalPages = Math.ceil(totalVideos \/ videosPerPage);\n    if (currentVideoPage > totalPages) currentVideoPage = totalPages;\n    if (currentVideoPage < 1) currentVideoPage = 1;\n    \n    const startIndex = (currentVideoPage - 1) * videosPerPage;\n    const endIndex = Math.min(startIndex + videosPerPage, totalVideos);\n    const currentVideos = allVideos.slice(startIndex, endIndex);\n    \n    currentRangeSpan.textContent = `${startIndex + 1}-${endIndex}`;\n    totalVideosSpan.textContent = totalVideos;\n    \n    let thumbnailsHTML = '';\n    currentVideos.forEach(video => {\n      const videoTitle = video.tituloPersonalizado || video.title || \"Video sin t\u00edtulo\";\n      const videoDescription = video.description || \"\";\n      const videoUrl = video.link || \"#\";\n      let thumbnailUrl = videoThumbnails.default;\n      const titleLower = video.title ? video.title.toLowerCase() : '';\n      if (titleLower.includes('revisi\u00f3n') || titleLower.includes('revision')) thumbnailUrl = videoThumbnails.revision;\n      else if (titleLower.includes('retener')) thumbnailUrl = videoThumbnails.retener;\n      else if (titleLower.includes('rechazo')) thumbnailUrl = videoThumbnails.rechazo;\n      else if (titleLower.includes('consultar')) thumbnailUrl = videoThumbnails.consultar;\n      else if (titleLower.includes('b\u00fasqueda') || titleLower.includes('busqueda')) thumbnailUrl = videoThumbnails.busqueda;\n      else if (titleLower.includes('aprobaci\u00f3n') || titleLower.includes('aprobacion')) thumbnailUrl = videoThumbnails.aprobacion;\n      \n      thumbnailsHTML += `\n        <div class=\"video-thumbnail-card\" data-video-url=\"${videoUrl}\" \n             data-video-title=\"${videoTitle}\" data-video-description=\"${videoDescription}\"\n             data-video-category=\"${video.categoria}\">\n          <div class=\"video-thumbnail\">\n            <img decoding=\"async\" src=\"${thumbnailUrl}\" alt=\"${videoTitle}\">\n            <div class=\"video-play-overlay\"><div class=\"play-button\"><i class=\"fa-solid fa-play\"><\/i><\/div><\/div>\n          <\/div>\n          <div class=\"video-thumbnail-content\">\n            <h4 class=\"video-thumbnail-title\">${videoTitle}<\/h4>\n            ${videoDescription ? `<p class=\"video-thumbnail-description\">${videoDescription}<\/p>` : ''}\n            <span class=\"video-duration\">${video.categoria === 'Cat8' ? 'Vimeo' : 'MP4'}<\/span>\n          <\/div>\n        <\/div>\n      `;\n    });\n    videoThumbnailGrid.innerHTML = thumbnailsHTML;\n    renderCorrectedPagination(totalPages);\n    document.querySelectorAll('.video-thumbnail-card').forEach(card => {\n      card.addEventListener('click', function() {\n        openVideoModal(this.getAttribute('data-video-url'), this.getAttribute('data-video-title'),\n                       this.getAttribute('data-video-description'), this.getAttribute('data-video-category'));\n      });\n    });\n  }\n\n  function renderCorrectedPagination(totalPages) {\n    if (totalPages <= 1) {\n      document.querySelector('.video-pagination').style.display = 'none';\n      return;\n    }\n    document.querySelector('.video-pagination').style.display = 'flex';\n    paginationNumbers.innerHTML = '';\n    for (let i = 1; i <= totalPages; i++) {\n      const pageBtn = document.createElement('button');\n      pageBtn.className = `page-btn page-number ${i === currentVideoPage ? 'active' : ''}`;\n      pageBtn.textContent = i;\n      pageBtn.dataset.page = i;\n      paginationNumbers.appendChild(pageBtn);\n    }\n    updatePaginationButtons(totalPages);\n    addPaginationEventListeners(totalPages);\n  }\n\n  function updatePaginationButtons(totalPages) {\n    const prevBtn = document.querySelector('.prev-btn');\n    const nextBtn = document.querySelector('.next-btn');\n    if (prevBtn) {\n      prevBtn.disabled = currentVideoPage === 1;\n      prevBtn.classList.toggle('disabled', currentVideoPage === 1);\n    }\n    if (nextBtn) {\n      nextBtn.disabled = currentVideoPage === totalPages;\n      nextBtn.classList.toggle('disabled', currentVideoPage === totalPages);\n    }\n  }\n\n  function addPaginationEventListeners(totalPages) {\n    document.querySelectorAll('.page-number').forEach(btn => {\n      btn.addEventListener('click', function() {\n        const page = parseInt(this.dataset.page);\n        if (page !== currentVideoPage) {\n          currentVideoPage = page;\n          renderVideoThumbnails();\n        }\n      });\n    });\n    const prevBtn = document.querySelector('.prev-btn');\n    if (prevBtn) {\n      prevBtn.addEventListener('click', function() {\n        if (this.classList.contains('disabled')) return;\n        currentVideoPage = Math.max(1, currentVideoPage - 1);\n        renderVideoThumbnails();\n      });\n    }\n    const nextBtn = document.querySelector('.next-btn');\n    if (nextBtn) {\n      nextBtn.addEventListener('click', function() {\n        if (this.classList.contains('disabled')) return;\n        currentVideoPage = Math.min(totalPages, currentVideoPage + 1);\n        renderVideoThumbnails();\n      });\n    }\n  }\n\n  function renderVideoList() {\n    document.querySelector('.video-thumbnail-view').style.display = 'none';\n    document.querySelector('.video-list-view').style.display = 'block';\n    let accordionHTML = '';\n    const videosByCategory = {};\n    allVideos.forEach(video => {\n      let category = 'Otros Videos';\n      if (video.categoria === 'Cat6') category = 'Videos OGAS';\n      else if (video.categoria === 'Cat7') category = 'Videos Retiro Previo';\n      else if (video.categoria === 'Cat8') category = 'Videos Deposito de Garantia';\n      if (!videosByCategory[category]) videosByCategory[category] = [];\n      videosByCategory[category].push(video);\n    });\n    Object.entries(videosByCategory).forEach(([category, videos], index) => {\n      const collapseId = `collapse-video-${index}`;\n      const expanded = index === 0;\n      const btnClass = expanded ? \"btn-link\" : \"btn-link collapsed\";\n      const collapseClass = expanded ? \"collapse show\" : \"collapse\";\n      const iconoActual = expanded ? \"fa-solid fa-folder-open\" : \"fa-solid fa-folder\";\n      let videosHTML = `<ul class=\"archivos-list mb-2\">`;\n      videos.forEach(video => {\n        const videoUrl = video.link || \"#\";\n        const videoTitle = video.tituloPersonalizado || video.title || \"Video sin t\u00edtulo\";\n        videosHTML += `\n          <li class=\"d-flex align-items-center video-list-item\" \n              data-video-url=\"${videoUrl}\" data-video-title=\"${videoTitle}\" \n              data-video-description=\"${video.description || \"\"}\" data-video-category=\"${video.categoria}\">\n            <div class=\"mr-2\" style=\"width: 40px;\"><i class=\"fa-solid fa-video fa-lg\"><\/i><\/div>\n            <a href=\"javascript:void(0)\" class=\"flex-grow-1 text-decoration-none\">${videoTitle}<\/a>\n            <span class=\"badge ${video.categoria === 'Cat8' ? 'badge-warning' : 'badge-info'} ml-2\">${video.categoria === 'Cat8' ? 'Vimeo' : 'MP4'}<\/span>\n          <\/li>`;\n      });\n      videosHTML += `<\/ul>`;\n      accordionHTML += `\n        <div class=\"card\">\n          <div class=\"card-header\" role=\"tab\" id=\"heading-video-${index}\">\n            <h5 class=\"mb-0\">\n              <button class=\"${btnClass}\" data-toggle=\"collapse\" data-target=\"#${collapseId}\" \n                      aria-expanded=\"${expanded}\" aria-controls=\"${collapseId}\">\n                <i class=\"${iconoActual} mr-2\"><\/i> ${category} <span class=\"badge badge-secondary ml-2\">${videos.length}<\/span>\n                <span class=\"accordion-arrow ml-auto\"><i class=\"fa-solid fa-angle-right\"><\/i><\/span>\n              <\/button>\n            <\/h5>\n          <\/div>\n          <div id=\"${collapseId}\" class=\"${collapseClass}\" role=\"tabpanel\" aria-labelledby=\"heading-video-${index}\" data-parent=\"#accordionVideos\">\n            <div class=\"card-body\">${videosHTML}<\/div>\n          <\/div>\n        <\/div>`;\n    });\n    accordionVideos.innerHTML = accordionHTML;\n    document.querySelectorAll('.video-list-item').forEach(item => {\n      item.addEventListener('click', function() {\n        openVideoModal(this.getAttribute('data-video-url'), this.getAttribute('data-video-title'),\n                       this.getAttribute('data-video-description'), this.getAttribute('data-video-category'));\n      });\n    });\n    agregarEventosAcordeonVideos();\n  }\n\n  function isVimeoUrl(url) {\n    if (!url) return false;\n    return url.includes('vimeo.com') || url.includes('player.vimeo.com') || \/vimeo\\.com\\\/\\d+\/.test(url);\n  }\n\n  function getVimeoId(url) {\n    if (!url) return null;\n    const patterns = [\n      \/vimeo\\.com\\\/(\\d+)\/, \/vimeo\\.com\\\/video\\\/(\\d+)\/, \/player\\.vimeo\\.com\\\/video\\\/(\\d+)\/,\n      \/vimeo\\.com\\\/channels\\\/[^\\\/]+\\\/(\\d+)\/, \/vimeo\\.com\\\/groups\\\/[^\\\/]+\\\/videos\\\/(\\d+)\/\n    ];\n    for (const pattern of patterns) {\n      const match = url.match(pattern);\n      if (match && match[1]) return match[1];\n    }\n    const cleanUrl = url.split('?')[0];\n    for (const pattern of patterns) {\n      const match = cleanUrl.match(pattern);\n      if (match && match[1]) return match[1];\n    }\n    return null;\n  }\n\n  function openVideoModal(videoUrl, videoTitle, videoDescription, videoCategory) {\n    videoPlayerContainer.innerHTML = '';\n    videoModalTitle.innerHTML = `${videoTitle} <span class=\"video-type-badge\">${videoCategory === 'Cat8' ? 'Vimeo' : 'MP4'}<\/span>`;\n    videoModalDescription.textContent = videoDescription || \"No hay descripci\u00f3n disponible.\";\n    const isVimeo = videoCategory === 'Cat8' || isVimeoUrl(videoUrl);\n    if (isVimeo) {\n      const vimeoId = getVimeoId(videoUrl);\n      if (vimeoId) {\n        const iframe = document.createElement('iframe');\n        iframe.src = `https:\/\/player.vimeo.com\/video\/${vimeoId}?autoplay=1&title=0&byline=0&portrait=0&badge=0&autopause=0`;\n        iframe.allow = 'autoplay; fullscreen; picture-in-picture';\n        iframe.allowFullscreen = true;\n        iframe.title = videoTitle;\n        videoPlayerContainer.appendChild(iframe);\n      } else {\n        videoPlayerContainer.innerHTML = `<div style=\"color:white;text-align:center;padding:50px;\">Error al cargar el video. <a href=\"${videoUrl}\" target=\"_blank\" style=\"color:#ffcc00;\">Ver en Vimeo<\/a><\/div>`;\n      }\n    } else {\n      const video = document.createElement('video');\n      video.controls = true;\n      video.autoplay = true;\n      const source = document.createElement('source');\n      source.src = videoUrl;\n      source.type = 'video\/mp4';\n      video.appendChild(source);\n      videoPlayerContainer.appendChild(video);\n    }\n    videoModal.style.display = 'flex';\n    document.body.style.overflow = 'hidden';\n  }\n\n  function closeVideoModal() {\n    videoModal.style.display = 'none';\n    document.body.style.overflow = 'auto';\n    videoPlayerContainer.innerHTML = '';\n  }\n\n  function agregarEventosAcordeon() {\n    document.querySelectorAll('#accordionCategorias .card-header button').forEach(button => {\n      button.addEventListener('click', function() {\n        const icon = this.querySelector('i.fa-folder, i.fa-folder-open');\n        if (icon) {\n          icon.className = this.classList.contains('collapsed') ? 'fa-solid fa-folder-open mr-2' : 'fa-solid fa-folder mr-2';\n        }\n      });\n    });\n    document.querySelectorAll('#accordionCategorias .collapse').forEach(collapse => {\n      collapse.addEventListener('show.bs.collapse', function() {\n        const button = this.previousElementSibling.querySelector('button');\n        const icon = button.querySelector('i.fa-solid');\n        if (icon) icon.className = 'fa-solid fa-folder mr-2';\n      });\n      collapse.addEventListener('hide.bs.collapse', function() {\n        const button = this.previousElementSibling.querySelector('button');\n        const icon = button.querySelector('i.fa-solid');\n        if (icon) icon.className = 'fa-solid fa-folder-open mr-2';\n      });\n    });\n  }\n\n  function agregarEventosAcordeonVideos() {\n    document.querySelectorAll('#accordionVideos .card-header button').forEach(button => {\n      button.addEventListener('click', function() {\n        const icon = this.querySelector('i.fa-solid');\n        if (icon) {\n          icon.className = this.classList.contains('collapsed') ? 'fa-solid fa-folder-open mr-2' : 'fa-solid fa-folder mr-2';\n        }\n      });\n    });\n  }\n\n  function agregarEventosSweetAlert() {\n    document.querySelectorAll('.archivos-list a[target=\"_blank\"]').forEach(link => {\n      link.addEventListener('click', function(e) {\n        e.preventDefault();\n        const url = this.href;\n        const titulo = this.getAttribute('data-title');\n        Swal.fire({\n          title: \"M\u00f3dulos del SIGA\",\n          html: `\u00bfDesea abrir el documento:<br><strong>\"${titulo}\"<\/strong>?`,\n          icon: 'question',\n          showCancelButton: true,\n          confirmButtonText: 'S\u00ed, Abrir',\n          cancelButtonText: 'Cancelar',\n          confirmButtonColor: '#003875',\n          cancelButtonColor: '#6c757d'\n        }).then(result => { if (result.isConfirmed) window.open(url, \"_blank\"); });\n      });\n    });\n  }\n\n  document.querySelector('.close-video-modal').addEventListener('click', closeVideoModal);\n  videoModal.addEventListener('click', e => { if (e.target === videoModal) closeVideoModal(); });\n  document.addEventListener('keydown', e => { if (e.key === 'Escape' && videoModal.style.display === 'flex') closeVideoModal(); });\n});\n<\/script>    <\/div>\n    ","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3781","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Capacitaciones \/ Cursos - Autoridad Nacional de Aduanas<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.ana.gob.pa\/index.php\/cursos-seminarios\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Capacitaciones \/ Cursos - Autoridad Nacional de Aduanas\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ana.gob.pa\/index.php\/cursos-seminarios\/\" \/>\n<meta property=\"og:site_name\" content=\"Autoridad Nacional de Aduanas\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/aduanas.panama\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-30T15:59:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.ana.gob.pa\/wp-content\/uploads\/2025\/07\/logo2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"175\" \/>\n\t<meta property=\"og:image:height\" content=\"76\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@aduanaspanama\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.ana.gob.pa\\\/index.php\\\/cursos-seminarios\\\/\",\"url\":\"https:\\\/\\\/www.ana.gob.pa\\\/index.php\\\/cursos-seminarios\\\/\",\"name\":\"Capacitaciones \\\/ Cursos - Autoridad Nacional de Aduanas\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.ana.gob.pa\\\/#website\"},\"datePublished\":\"2025-10-15T21:23:21+00:00\",\"dateModified\":\"2026-03-30T15:59:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.ana.gob.pa\\\/index.php\\\/cursos-seminarios\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.ana.gob.pa\\\/index.php\\\/cursos-seminarios\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.ana.gob.pa\\\/index.php\\\/cursos-seminarios\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/www.ana.gob.pa\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Capacitaciones \\\/ Cursos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.ana.gob.pa\\\/#website\",\"url\":\"https:\\\/\\\/www.ana.gob.pa\\\/\",\"name\":\"Autoridad Nacional de Aduanas\",\"description\":\"Autoridad Nacional de Aduanas\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.ana.gob.pa\\\/#organization\"},\"alternateName\":\"Autoridad Nacional de Aduanas\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.ana.gob.pa\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.ana.gob.pa\\\/#organization\",\"name\":\"Autoridad Nacional de Aduanas\",\"alternateName\":\"Autoridad Nacional de Aduanas\",\"url\":\"https:\\\/\\\/www.ana.gob.pa\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.ana.gob.pa\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.ana.gob.pa\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/logo-de-aduanas-y-gobierno.png\",\"contentUrl\":\"https:\\\/\\\/www.ana.gob.pa\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/logo-de-aduanas-y-gobierno.png\",\"width\":2860,\"height\":423,\"caption\":\"Autoridad Nacional de Aduanas\"},\"image\":{\"@id\":\"https:\\\/\\\/www.ana.gob.pa\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/aduanas.panama\\\/\",\"https:\\\/\\\/x.com\\\/aduanaspanama\",\"https:\\\/\\\/www.instagram.com\\\/aduanaspanama\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Capacitaciones \/ Cursos - Autoridad Nacional de Aduanas","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.ana.gob.pa\/index.php\/cursos-seminarios\/","og_locale":"es_ES","og_type":"article","og_title":"Capacitaciones \/ Cursos - Autoridad Nacional de Aduanas","og_url":"https:\/\/www.ana.gob.pa\/index.php\/cursos-seminarios\/","og_site_name":"Autoridad Nacional de Aduanas","article_publisher":"https:\/\/www.facebook.com\/aduanas.panama\/","article_modified_time":"2026-03-30T15:59:29+00:00","og_image":[{"width":175,"height":76,"url":"https:\/\/www.ana.gob.pa\/wp-content\/uploads\/2025\/07\/logo2.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@aduanaspanama","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.ana.gob.pa\/index.php\/cursos-seminarios\/","url":"https:\/\/www.ana.gob.pa\/index.php\/cursos-seminarios\/","name":"Capacitaciones \/ Cursos - Autoridad Nacional de Aduanas","isPartOf":{"@id":"https:\/\/www.ana.gob.pa\/#website"},"datePublished":"2025-10-15T21:23:21+00:00","dateModified":"2026-03-30T15:59:29+00:00","breadcrumb":{"@id":"https:\/\/www.ana.gob.pa\/index.php\/cursos-seminarios\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.ana.gob.pa\/index.php\/cursos-seminarios\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.ana.gob.pa\/index.php\/cursos-seminarios\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.ana.gob.pa\/"},{"@type":"ListItem","position":2,"name":"Capacitaciones \/ Cursos"}]},{"@type":"WebSite","@id":"https:\/\/www.ana.gob.pa\/#website","url":"https:\/\/www.ana.gob.pa\/","name":"Autoridad Nacional de Aduanas","description":"Autoridad Nacional de Aduanas","publisher":{"@id":"https:\/\/www.ana.gob.pa\/#organization"},"alternateName":"Autoridad Nacional de Aduanas","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.ana.gob.pa\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.ana.gob.pa\/#organization","name":"Autoridad Nacional de Aduanas","alternateName":"Autoridad Nacional de Aduanas","url":"https:\/\/www.ana.gob.pa\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.ana.gob.pa\/#\/schema\/logo\/image\/","url":"https:\/\/www.ana.gob.pa\/wp-content\/uploads\/2025\/07\/logo-de-aduanas-y-gobierno.png","contentUrl":"https:\/\/www.ana.gob.pa\/wp-content\/uploads\/2025\/07\/logo-de-aduanas-y-gobierno.png","width":2860,"height":423,"caption":"Autoridad Nacional de Aduanas"},"image":{"@id":"https:\/\/www.ana.gob.pa\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/aduanas.panama\/","https:\/\/x.com\/aduanaspanama","https:\/\/www.instagram.com\/aduanaspanama"]}]}},"_links":{"self":[{"href":"https:\/\/www.ana.gob.pa\/index.php\/wp-json\/wp\/v2\/pages\/3781","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ana.gob.pa\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ana.gob.pa\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ana.gob.pa\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ana.gob.pa\/index.php\/wp-json\/wp\/v2\/comments?post=3781"}],"version-history":[{"count":114,"href":"https:\/\/www.ana.gob.pa\/index.php\/wp-json\/wp\/v2\/pages\/3781\/revisions"}],"predecessor-version":[{"id":7514,"href":"https:\/\/www.ana.gob.pa\/index.php\/wp-json\/wp\/v2\/pages\/3781\/revisions\/7514"}],"wp:attachment":[{"href":"https:\/\/www.ana.gob.pa\/index.php\/wp-json\/wp\/v2\/media?parent=3781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}