/*--------------------------------------------------------------
                  # GENERAL
--------------------------------------------------------------*/
 .main-curso {
  background-image: url(/images/virtualuaq/DEDIE_FONDO_BLOQUE-1.png) !important;
  background-repeat: repeat;

}

  .main-curso p {
  margin-left: 12px; 
  margin-right: 14px;  
  text-align: left; }



/*--------------------------------------------------------------
                  # CONTENEDOR GENERAL
--------------------------------------------------------------*/
  .tab-wrapper_act {
  position: relative;  }

  .tab-wrapper_act p {
  margin-left: 10px;
  margin-right: 12px;  }


/*--------------------------------------------------------------
                  # CONTENEDOR SIDE BAR
--------------------------------------------------------------*/
  .tabs {
  text-align: left!important;
  position: relative; 
  z-index: 1; 
  display: flex;
  flex-direction: column;
  color: #444;
  background-color: inherit;
  width: 20%;
  float: left;
  height: 100vh;    }

/*--------------------------------------------------------------
                  # TABS
--------------------------------------------------------------*/
  .tab-button-curso {
    width: 100%; 
    min-width: 120px; 
    padding: 12px 8px;
    cursor: pointer;
    transition: background-color 0.3s;
    border-bottom: 1px solid #0070B3;   }

  .tab-button-curso.active , .tab-button-curso:hover{
    background-color: #fff;
    color:#003353; 
    border-right: solid 10px ;
    border-left: solid 10px ;  }


/*--------------------------------------------------------------
                  # DROPDOWN
--------------------------------------------------------------*/
  .dedie-dropdown {
    display: none;
    background-color: #f9f9f9;
    padding: 5px;
    z-index: 1;   }

  .dedie-dropdown.active {    display: block;   }

  .dedie-dropdown{  background-color: #E6E6E6;  }

  .dedie-dropdown div {  
  color: #008a80;
  border-bottom: solid 1px #005722 ;  }

  .dedie-dropdown div {
  text-decoration: none;
  color: inherit;  }

  .dedie-dropdown div:hover {
  background-color: #005722 ;
  color: #fff;  }
  
  .default-icon, .hover-icon {     margin-left: 10px;  }

  .dedie-dropdown-img {
    display: flex;
    align-items: center;    }

  .dedie-dropdown-img img{
    max-width: 30px;
    padding-left: 5px;
    animation: .9s updown infinite ;  }

  .dedie-dropdown-img .default-icon {    display: inline-block;  }

  .tabs div.active .default-icon, .tabs div:hover .default-icon {    display: none;  }

  .dedie-dropdown-img .hover-icon {    display: none;  }

  .tabs div.active .hover-icon, .tabs div:hover .hover-icon {    
    display: inline-block;
    animation: none;    }

  .active {     /* Estilo para el botón activo */
    background-color: #0070B3;
    color:#fff;   }


  .hijo {         /* Ocultos por defecto */
    padding-left: 2.2vw;
    background-color: #DDDDDD;
/*    color:#8F0068;*/
    display: none;   }


/*--------------------------------------------------------------
                  # CONTENEDOR UNIDADES
--------------------------------------------------------------*/
  .tab-content-curso {
  margin-left: 20%;
  padding: 0 10px 10px 0;
  background-color: #FBFDFE;
  background-color: inherit;
  animation: fadeIn;
  animation-duration: 1.95s;  }

  .tab-content-curso p{
  padding-left: 25px;  }


/*--------------------------------------------------------------
                  # MARCO GENERAL
--------------------------------------------------------------*/
  .marco-general{
    background:rgba(255, 255, 255, 0.5);
    padding: 1px 10px 0px 25px; }


/*--------------------------------------------------------------
                  # CELULAR
--------------------------------------------------------------*/
  @media only screen and (max-width: 600px) {
    .tab-wrapper_act p {
      margin-left: 4px;
      margin-right: 4px;
      text-align: left;  }

    .tabs {
      justify-content: space-evenly;
      float: none;
      flex-direction: row;
      background-color: #f5f5f5;
      width: 100%; 
      height: inherit; 
    }

    .tab-button-curso, .tab-button-curso.padre, tab-button-curso.hijo {    display: none !important;  }

    .tab-button-curso.active, .tab-button-curso.padre.active, tab-button-curso.hijo.active {    
      display: block !important;  }

    .tab-button-curso.active {
      display: block;
      background-color: inherit;
      color: #003353;
      text-decoration: underline;
      width: 55%;
      line-height: 4vh;
      font-size: 18px;
      text-align: center;
      border-bottom:none;  }

    .tab-content-curso{      margin:0 auto;      }      
  }


/*--------------------------------------------------------------
          # BOTONES NAVEGACION ENTRE TABS (CELULAR)
--------------------------------------------------------------*/
  @media only screen and (max-width: 600px) {
    .pre, .next {
      display: inline-block;
      border: none;
      background-color: inherit;
      color: #003353;
      width: 35px;  }

    .pre:hover {
      background-color: #ffadef;
      color: #fff;  }

    .next:hover {
      background-color: #ffadef;
      color: #fff;  }

    .pre {  left: 2.5%;    }

    .next { right: 2.5%;    }
  }

  @media only screen and (min-width: 601px) {
    .pre, .next { display: none;  }
  }

/*  -----------------------------------------
              ANIMACION UPDOWN
  ----------------------------------------- */
  @keyframes updown {
    0% {    transform: translateY(0);  }
    50%{    transform: translateY(2px);  }
    100% {  transform: translateY(0);  }
  }


/*--------------------------------------------------------------
                    collapse
--------------------------------------------------------------*/
.collapsible-curso {
  display: flex;
  justify-content: space-between;
  background-color: #E4E4E4;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin-top:10px;  }

.collapsible-curso > strong{
  color: #003353; }

.active-collapse, .active-collapse>strong, .collapsible-curso:hover, .collapsible-curso:hover>strong {  
  background-color: #5B799F; 
  color: #fff;}

.collapsible-curso img{  
  max-width: 22px; 
  margin-right:10px; }

.content-collapse-curso {
  padding: 15px;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 100%;
  border: none;
  display: none;
  overflow: hidden;
  text-align: left;
  background-color: #fff;
  box-shadow: 0px 6px 7px 0px #afbec154; 
  margin-bottom:15px;     }

.collapsible-curso .default-icon {    
  display: inline-block; 
  animation: .9s updown infinite;  } 

.active-collapse .default-icon, .active-collapse .default-icon {    display: none;  }

.collapsible-curso .hover-icon {    display: none;  }

.active-collapse .hover-icon, .active-collapse .hover-icon {    
  display: inline-block;
  animation: none;    }

  @media (max-width: 600px) {
    .collapsible-curso {    width: 100%;  }

    .content-collapse-curso {    width: 100%;  }
  }


.tabla-cursos{
  color: #003354;
  text-align: justify;
                  width: 90%;
                  border: 3px solid #65b6cf;
                margin: 0.5em auto;
                }
            .tabla-cursos th {
                 background-color: #043555;
                color: #ffffff;
                font-size: 1.2em;
                padding: 0.2em;

            }
             .tabla-cursos td {
                padding: 0.2em 1em;

            }
                .tabla-cursos tr:nth-child(even){
                  background-color: #dbeef4; /* Color para filas pares */
                }

                .tabla-cursos tr:nth-child(odd) {
                  background-color: #ffffff; /* Color para filas impares */
                }




































/* Navbar */
        .navbar-OE {
            background-color: #333;
            padding: 10px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .dropdown-OE {
            position: relative;
            display: inline-block;
        }

        .dropdown-btn-OE {
            background-color: #333;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }

        .dropdown-content-OE {
            display: none;
            position: absolute;
            background-color: white;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            min-width: 200px;
            z-index: 1000;
        }

        .dropdown-content-OE a {
            display: block;
            padding: 10px;
            text-decoration: none;
            color: black;
        }

        .dropdown-content-OE a:hover {
            background-color: #ddd;
        }

        .show-OE {
            display: block;
        }

        /* Contenido de tabs */
        .container-OE {
            margin: 20px;
            padding: 20px;
            background: white;
            border-radius: 5px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        }

        .tab-content-OE {
            display: none;
        }

        .tab-content-OE.active-OE {
            display: block;
        }