/* Agrega estos estilos al CSS existente */
    .tabs {
      display: flex;
      margin-bottom: 60px;
      border-bottom: 1px #ccc solid;
      font-weight: bold;
    }

    .tab {
      flex: 2;
      text-align: center;
      padding: 10px 0;
      cursor: pointer;
      transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
      border-radius: 7px 7px 0 0;
      border-left: 1px #ddd solid;
      border-top: 1px #ddd solid;
      border-right: 1px #ddd solid;
      margin: 0 4px;      
    }

    .tab.active {
      background-color: #0070B8;
      color: #fff;
    }

    .programas {
      display: none;
    }

    .programas.active {
      display: block;
    }

    .programas[hidden] {
      display: none;
    }

    .programas.ceneval{
       padding: 40px 10% 40px 10%;
    }
    .programas .licenciaturas, .programas .maestrias{
       margin-bottom: 40px;
    }

    /* Modo obscuro */
    body.dark-mode {
      background-color: #333;
      color: white;
    }

    /* Oferta educativa */
    .oferta-educativa {
      padding: 80px 40px 20px 40px;
    }

    .programas {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }

    /* Estilos específicos de licenciaturas y maestrías */
    .programa {
      border: 1px solid #ccc;
      border-radius: 10px; 
      padding: 10px;
    }
    .programa ul {text-align: left;}

    /* Estilos de los títulos */
    h2.rl_tabs-title {
      color: #0070B8;
      margin-top: 30px;
      margin-bottom: 30px;
    }

    /* Estilos del contenido */
    .rl_tabs-pane {
      /*border: 1px solid #ccc;*/
      border-left: 1px #ccc solid;
      border-top: 1px #ccc solid;
      border-right: 1px #ccc solid;
      border-radius: 10px 10px 0 0;
      padding: 20px;
      margin-top: 40px;
      background-color: white;
    }

    /* Estilos de listas y párrafos */
    .programas ul {
      margin-bottom: 20px;
      padding: 0 0 0 20px;
      list-style-type: disc;
      text-align: left;
    }

    .programas ul li {
      margin-top: 5px;
    }

    .programas p {
      margin: 20px 20px;
      line-height: 1.5;
    }

    .tituloIns {
       width: 50%; 
       padding: 15px;
       text-align: center; 
       border:1px solid #ccc; 
       background:#3180c2; 
       color:#fff;
    }
    .pntsRequisitos{
       border-left: 1px solid #ccc;
       border-right: 1px solid #ccc;
       padding: 5px 20px 5px 30px;
    }

    /* Tabla Horario */
    .table-containerHora {
      margin: 20px;
    }

    .table-containerHora .schedule-table {
      border-collapse: collapse;
      width: 100%;
      max-width: 800px;
      margin: auto;
    }

    .table-containerHora th, 
    .table-containerHora td {
      border: 1px solid #ccc;
      padding: 8px;
      text-align: center;
    }

    .table-containerHora th {
      background-color: #0070B8;
      color: white;
    }

    .table-containerHora .city-cell {
      font-weight: bold;
      font-size: 18px;
    }

    .table-containerHora .guadalajara {
      background-color: #009DFF;
    }

    .table-containerHora .morelia {
      background-color: #A0D4FF;
    }

    .table-containerHora .time-cell {
      font-weight: bold;
    }

    .table-containerHora.days-cell {
      font-style: italic;
    }

    /* Botón de modo obscuro */
    .dark-mode-switch {
      /* Estilos del botón de modo obscuro */
    }
    /* Dark mode styles  tabla */
    body.dark-mode {
      background-color: #111; /* Dark mode background color */
      color: #fff; /* Dark mode text color */
    }

    .dark-mode .table-containerHora th {
      background-color: #333; /* Dark mode table header background color */
    }

    .dark-mode .table-containerHora .guadalajara {
      background-color: #0070B8;
    }

    .dark-mode .table-containerHora .morelia {
      background-color: #00569E;
    }

    .spacioMarge10{ margin-bottom: 10px; }
    .spacioMarge20{ margin-bottom: 20px; }
    .spacioMarge30{ margin-bottom: 30px; }
    .spacioPadding10{ padding-bottom: 10px; }
    .spacioPadding20{ padding-bottom: 20px; }
    .spacioPadding30{ padding-bottom: 30px; }

    .dark-mode .section2 {
        background-color: #111;
        color: #ccc;
    }
    .dark-mode .rl_tabs-pane {
        border: 1px solid #ccc;
        background-color: #111;
        color: #ccc;
    }
    /* seccion Licenciaturas y Maestrias */
.containerSlctr {
    display: flex;
    height: 100vh;
    border-radius: 10px;
    overflow: auto; 
}

.containerSlctr .options-panel {
    flex: 0.7;
    background-color:  #3B8FC3; /*#0070B8; Institu, #5589ab; Otro, #3B8FC3, #3e6883*/
    color: white;
    padding: 20px 0 20px 20px;
    overflow-y: auto;
    position: relative;
    border-radius: 10px 0 0 10px;
}

.options-panel .options-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.options-panel .option {
    cursor: pointer;
    padding: 10px;
    transition: background-color 0.3s;
    position: relative;
    width: 100%;
}

.options-panel .option:hover {
    background-color: #555;
}

.options-panel .selected-option {
    background-color: #333; /* Color de fondo para la opción seleccionada */
}

.containerSlctr .info-panel {
    flex: 2;
    background-color: #f5f5f5;
    border-left: 1px solid #ddd;
    padding: 20px;
    /*position: relative;*/
    border-radius: 0 10px 10px 0;
    height: 100%; /* Ajusta la altura al 100% del contenedor padre */
    overflow: auto;
}

.dark-mode .containerSlctr .info-panel {
    background-color: #333;
}

.containerSlctr .info-content {
    /* Estilos para el contenido de información */
}
.containerSlctr .info-visualiza { margin-bottom: 20px;}

    .containerSlctr .triangle{
        position: absolute;
        top: 50%;
        right: 0; /* Alinea el triángulo con la opción seleccionada */
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: 15px solid transparent; /* Hace el triángulo más grande */
        border-bottom: 15px solid transparent; /* Hace el triángulo más grande */
        border-right: 15px solid #f5f5f5; /* Color del panel de información */
        display: none;
    }
    
   /* Agrega este estilo para mostrar el triángulo en la opción seleccionada */
   .containerSlctr .option.selected-option .triangle {
      display: block;
   }

.containerSlctr .optFlex {
    display: flex;
}
.containerSlctr .emojiLst {
    display: inline;
    margin-right: 10px;
    width: 45px;
}
.containerSlctr .emojiLstInfo{margin-bottom: 30px;}
.containerSlctr .emojiLstGrd {
    display: inline;
    margin-right: 10px;
    width: 65px; /* Establece el ancho de la imagen */
    height: 65px; /* Establece el alto de la imagen */
}

.containerSlctr .txtSelccLicLst {
    margin-right: 10px;
    padding-top: 10px;
    width: 280px;
}

        .fa_whatsapp-icon {
            font-size: 24px; /* Tamaño del icono */
            transition: transform 0.3s ease; /* Transición suave de 0.3 segundos */
        }

        .fa_whatsapp-icon:hover {
            transform: scale(1.2); /* Escala el icono al 120% en hover */
        }

    .cmntrRj { color: red; font-size: 18px; padding-top: 20px;}
    .lineBottonIzq {border-bottom: 1px solid #ccc; border-radius: 0 0 0 10px;}
    .lineBottonDrc {border-bottom: 1px solid #ccc; border-radius: 0 0 10px 0;}
    .txtJustifica{text-align: justify;}
    .txtLeft{text-align: left;}
    .txtCenter{text-align: center;}
    .clrWhtsVer { color: #2ecc71} 
    .clrWhtsRoj { color: #e74c3c} 
    .clrWhtsAzu { color: #3498db} 
    .clrWhtsBla { color: #fff} 
        .spacioss { padding: 10px 0; }

    .clrWhtsVer:hover,
    .clrWhtsAzu:hover, .clrWhtsBla:hover { text-shadow: 0 0 3px red;} 
    .clrWhtsRoj:hover { text-shadow: 0 0 3px #fff;} 

    /*-------------- CSS de Acordeon --------------------------*/

        /* Variables para colores en modo claro */
        :root {
            --bg-color-light: #fff;
            --text-color-light: #333;
            --bg-color-heading-light: #333;
            --text-color-heading-light: #fff;
        }

        /* Variables para colores en modo oscuro */
        @media (prefers-color-scheme: dark) {
            :root {
                --bg-color-light: #333;
                --text-color-light: #fff;
                --bg-color-heading-light: #fff;
                --text-color-heading-light: #333;
            }
        }

        header {
            background-color: var(--bg-color-light);
            color: var(--text-color-light);
            padding: 20px 0;
            text-align: center;
            transition: background-color 0.3s, color 0.3s;
        }

        h1 { font-size: 24px; }

        /*  ------------- container-perfil-LAE para perfil de la carrera ------------*/

        .container-perfil-LAE, .containerPlanEstudLAE, .containerHorarioLAE {
            max-width: 90%;
            margin: 20px auto;
            padding: 20px 50px;
            background-color: var(--bg-color-light);
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            transition: background-color 0.3s, color 0.3s;
            border-radius: 10px;
        }

        .container-perfil-LAE h2 {
            font-size: 20px;
            margin: 20px 0;
            background-color: var(--bg-color-heading-light);
            color: var(--text-color-heading-light);
            padding: 10px;
        }

        .container-perfil-LAE p { font-size: 16px; }

        .container-perfil-LAE ul {
            list-style-type: disc;
            margin-left: 20px;
            padding-left: 20px;
        }

        .container-perfil-LAE .area-heading {
            background-color: var(--bg-color-heading-light);
            color: var(--text-color-heading-light);
            padding: 5px 10px;
            margin-top: 10px;
        }

        .container-perfil-LAE .area-list { padding: 10px; }

        /* Estilos específicos para el modo oscuro en .container-perfil-LAE */
        .dark-mode .container-perfil-LAE {
            background-color: #222; /* Cambia el fondo en modo oscuro */
            color: #fff; /* Cambia el color de texto en modo oscuro */
            box-shadow: 0 0 5px rgba(255, 255, 255, 0.2); /* Cambia la sombra en modo oscuro */
        }

        .dark-mode .container-perfil-LAE h2 {
            background-color: #444; /* Cambia el fondo del encabezado en modo oscuro */
            color: #fff; /* Cambia el color de texto del encabezado en modo oscuro */
        }

        /* Modo Claro */
        .accordion {
            max-width: 100%;
            margin: 0 auto;
        }

        .accordion-item {
            /*border: 1px solid #ccc;*/
            margin-bottom: 10px;
        }

        .accordion-title {
            background-color: #f2f2f2;
            border-radius: 3px;
            padding: 10px;
            cursor: pointer;
            color: #0070B8;
            font-weight: bold;
        }

        .accordion-content {
            padding: 10px;
            display: none;
        }

        .accordion-item.active .accordion-content { display: block; }
        .accordion-item.active .accordion-title {background-color: #ccc;}

        /* Modo Oscuro */
        .dark-mode {
            background-color: #1a1a1a;
            color: #ffffff;
            transition: background-color 0.3s, color 0.3s;
        }

        .dark-mode .accordion-title {
            background-color: #333;
        }

        .dark-mode .accordion-item {
            border: 1px solid #555;
            background: #333;
        }
       /* ---------- Contenedor Plan de estudios LAE   ----*/

            .containerPlanEstudLAE h2 { font-size: 20px; }

            .containerPlanEstudLAE ul { list-style-type: none; padding: 0; }

            .containerPlanEstudLAE ul li { margin-bottom: 10px; }

            .containerPlanEstudLAE .area-heading {
                background-color: var(--bg-color-heading-light);
                color: var(--text-color-heading-light);
                padding: 5px 10px;
            }

            .containerPlanEstudLAE .area-list {
                padding: 10px;
            }

            /* Estilos específicos para el modo oscuro */
            .dark-mode .containerPlanEstudLAE {
                background-color: #1a1a1a;
                color: #ffffff;
                transition: background-color 0.3s, color 0.3s;
            }

            .dark-mode .containerPlanEstudLAE header {
                background-color: #333;
                color: #fff;
            }

            .dark-mode .containerPlanEstudLAE {
                background-color: #333;
                color: #fff;
                box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
            }

            .dark-mode .containerPlanEstudLAE h2 {
                color: #fff;
            }

            .dark-mode .containerPlanEstudLAE .area-heading {
                background-color: #333;
                color: #fff;
            }